Commit ce1088c9 authored by Henning Leutz's avatar Henning Leutz 🥋

feat: refactor: #955 - FileUpload -> Single -> placeholder and hover effect

parent 7e3b482f
......@@ -177,8 +177,13 @@
max-width: 100%;
}
.controls-upload-form-single-container-select-placeholder {
color: #bebebe;
}
.controls-upload-form-single-container-select {
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
display: inline-block;
height: 30px;
line-height: 30px;
......@@ -189,6 +194,10 @@
width: calc(100% - 30px);
}
.controls-upload-form-single-container-select:hover {
background: rgba(0, 0, 0, 0.05);
}
.controls-upload-form--single .controls-upload-form-submit {
display: inline-block;
width: 130px;
......
......@@ -493,6 +493,8 @@ define('controls/upload/Form', [
).setStyle('background-image', '');
}
IconForm.getElement('button').disabled = false;
IconForm.getElement(
'.controls-upload-form-single-container-select'
).set('html', Input.files[0].name);
......@@ -502,7 +504,11 @@ define('controls/upload/Form', [
'class': 'controls-upload-form-single-container',
html : '' +
'<div class="controls-upload-form-single-container-preview"></div>' +
'<div class="controls-upload-form-single-container-select"></div>',
'<div class="controls-upload-form-single-container-select">' +
' <span class="controls-upload-form-single-container-select-placeholder">' +
Locale.get(lg, 'control.upload.placeholder') +
' </span>' +
'</div>',
events : {
click: function (e) {
e.stop();
......@@ -519,13 +525,14 @@ define('controls/upload/Form', [
}).inject(IconForm);
new Element('button', {
'class': 'controls-upload-form-submit',
html : '' +
disabled: true,
'class' : 'controls-upload-form-submit',
html : '' +
'<span class="fa fa-arrow-circle-o-right"></span>' +
'<span>' +
Locale.get(lg, 'control.upload.icon.submit') +
'</span>',
events : {
events : {
click: function (e) {
e.stop();
......@@ -662,7 +669,7 @@ define('controls/upload/Form', [
events : {
click: function (event) {
event.stop();
console.log('div focus');
var Target = event.target;
if (!Target.hasClass('.qui-form-upload')) {
......@@ -686,7 +693,7 @@ define('controls/upload/Form', [
onClick: function (Btn) {
var Container = Btn.getAttribute('Container');
var fid = Slick.uidOf(Input);
console.log('remove');
if (self.$files[fid]) {
delete self.$files[fid];
}
......
......@@ -5423,6 +5423,9 @@ Du kannst die Benutzerrechteprüfung der Konsole auch mit '--ignore-file-permiss
<locale name="control.upload.icon.submit">
<de><![CDATA[Hochladen]]></de>
</locale>
<locale name="control.upload.placeholder">
<de><![CDATA[Bitte wähle eine Datei aus...]]></de>
</locale>
</groups>
<groups name="quiqqer/controls" datatype="php,js">
......
......@@ -5235,6 +5235,9 @@ Note: If QUIQQER is installed as GIT repository, no MD5 summary file exists.
<locale name="control.upload.icon.submit">
<en><![CDATA[Upload]]></en>
</locale>
<locale name="control.upload.placeholder">
<en><![CDATA[Please select a file...]]></en>
</locale>
</groups>
<groups name="quiqqer/controls" datatype="php,js">
<locale name="package.title">
......
......@@ -10,3 +10,12 @@
{$Site->getAttribute('content')}
</div>
{/if}
{$FormUpload->create()}
<style>
footer {
display: inline-block;
margin-top: 40px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment