Commit 7e3b482f authored by Henning Leutz's avatar Henning Leutz 🥋

feat: #955 - FileUpload for nobody - FileUpload Styles

parent ac3a013c
......@@ -96,4 +96,100 @@
.controls-upload-form-fileinfo:hover {
background-color: #2F8FC6;
color: #fff;
}
\ No newline at end of file
}
/** icon design
================================== */
.controls-upload-form--icon {
border: 1px solid #dedede;
display: inline-block;
width: initial;
}
.controls-upload-form--icon form {
border: none;
padding: 0;
}
.controls-upload-form--icon form input {
display: none;
}
.controls-upload-form--icon .controls-upload-icon {
cursor: pointer;
font-size: 24px;
padding: 20px;
text-align: center;
width: 100%;
}
.controls-upload-form-submit {
cursor: pointer;
font-size: 12px;
text-align: center;
width: 100%;
}
.controls-upload-form-submit span {
padding: 0 5px;
}
/** single design
================================== */
.controls-upload-form--single {
max-width: 400px;
width: 100%;
}
.controls-upload-form--single form {
border: none;
padding: 0;
}
.controls-upload-form-single {
display: flex;
}
.controls-upload-form-single input {
display: none;
}
.controls-upload-form-single-container {
display: flex;
width: calc(100% - 130px);
}
.controls-upload-form-single-container-preview {
background-color: rgba(0, 0, 0, 0.2);
background-position: center;
background-size: cover;
display: inline-block;
height: 30px;
overflow: hidden;
width: 30px;
}
.controls-upload-form-single-container-preview img {
max-width: 100%;
}
.controls-upload-form-single-container-select {
border: 1px solid rgba(0, 0, 0, 0.2);
display: inline-block;
height: 30px;
line-height: 30px;
overflow: hidden;
padding: 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 30px);
}
.controls-upload-form--single .controls-upload-form-submit {
display: inline-block;
width: 130px;
}
......@@ -34,7 +34,7 @@ define('controls/upload/Form', [
], function (QUI, QUIControl, QUIProgressbar, QUIButton, MediaUtils, Upload, Locale) {
"use strict";
var lg = 'quiqqer/system';
var lg = 'quiqqer/quiqqer';
/**
* @class controls/upload/Form
......@@ -56,7 +56,11 @@ define('controls/upload/Form', [
cancelbutton: false, // insert a cancel button
styles : false,
pauseAllowed: true,
contextMenu : true // context menu for the file upload
contextMenu : true, // context menu for the file upload
// look
typeOfLook : 'DragDrop', // DragDrop, Icon, Single
typeOfLookIcon: 'fa fa-upload' // works only with typeOfLook: Icon
},
Binds: [
......@@ -138,6 +142,11 @@ define('controls/upload/Form', [
}
}
});
if (this.getAttribute('typeOfLook') === 'Icon' ||
this.getAttribute('typeOfLook') === 'Single') {
this.setAttribute('maxuploads', 1);
}
},
/**
......@@ -240,6 +249,9 @@ define('controls/upload/Form', [
this.$BgText = this.$Elm.getElement('.controls-upload-bg-text');
this.$Info = this.$Elm.getElement('.controls-upload-info');
this.$createIconView();
this.$createSingleView();
this.$Frame = new Element('iframe', {
name : 'upload' + this.getId(),
styles: {
......@@ -363,9 +375,189 @@ define('controls/upload/Form', [
this.refreshDisplay();
if (this.getAttribute('typeOfLook') === 'Icon') {
//this.$Form.setStyle('display', 'none');
}
return this.$Elm;
},
/**
* Create the icon view
*/
$createIconView: function () {
if (this.getAttribute('typeOfLook') !== 'Icon') {
return;
}
this.$Buttons.setStyle('display', 'none');
this.$BgText.setStyle('display', 'none');
this.$Info.setStyle('display', 'none');
var IconForm = new Element('form', {
'class' : 'controls-upload-form-icon',
action : "",
acceptCharset: "utf-8",
enctype : "multipart/form-data",
html : '<input type="file" />'
}).inject(this.$Elm);
var self = this;
var UploadIcon = new Element('span').inject(IconForm);
var Input = IconForm.getElement('input');
UploadIcon.addClass('controls-upload-icon');
UploadIcon.addClass(this.getAttribute('typeOfLookIcon'));
UploadIcon.addEvent('click', function (e) {
e.stop();
if (e.target.nodeName === 'INPUT') {
return;
}
require(['qui/utils/Elements'], function (ElementUtils) {
ElementUtils.simulateEvent(
IconForm.getElement('input'),
'click'
);
});
});
new Element('button', {
'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 : {
click: function (e) {
e.stop();
if (!Input.files.length) {
return;
}
self.$files = Input.files;
self.submit();
}
}
}).inject(IconForm);
this.$Elm.addClass('controls-upload-form--icon');
this.$Elm.setStyle('height', null);
},
/**
*
*/
$createSingleView: function () {
if (this.getAttribute('typeOfLook') !== 'Single') {
return;
}
this.$Buttons.setStyle('display', 'none');
this.$BgText.setStyle('display', 'none');
this.$Info.setStyle('display', 'none');
this.$Elm.addClass('controls-upload-form--single');
this.$Elm.setStyle('height', null);
var IconForm = new Element('form', {
'class' : 'controls-upload-form-single',
action : "",
acceptCharset: "utf-8",
enctype : "multipart/form-data",
html : '<input type="file" />'
}).inject(this.$Elm);
var self = this;
var Input = IconForm.getElement('input');
Input.addEvent('change', function () {
if (!Input.files.length) {
return;
}
switch (Input.files[0].type) {
case 'image/jpeg':
case 'image/jpg':
case 'image/png':
case 'image/gif':
self.$imagePreview(Input.files[0]);
break;
default:
self.getElm().getElement(
'.controls-upload-form-single-container-preview'
).setStyle('background-image', '');
}
IconForm.getElement(
'.controls-upload-form-single-container-select'
).set('html', Input.files[0].name);
});
new Element('div', {
'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>',
events : {
click: function (e) {
e.stop();
if (e.target.nodeName === 'INPUT') {
return;
}
require(['qui/utils/Elements'], function (ElementUtils) {
ElementUtils.simulateEvent(Input, 'click');
});
}
}
}).inject(IconForm);
new Element('button', {
'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 : {
click: function (e) {
e.stop();
if (!Input.files.length) {
return;
}
self.$files = Input.files;
self.submit();
}
}
}).inject(IconForm);
},
/**
*
* @param file
*/
$imagePreview: function (file) {
// preview
var reader = new FileReader();
var Preview = this.getElm().getElement(
'.controls-upload-form-single-container-preview'
);
reader.onload = function (e) {
Preview.setStyle('background-image', 'url("' + e.target.result + '")');
};
reader.readAsDataURL(file);
},
/**
* enable the upload form
*/
......@@ -470,7 +662,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')) {
......@@ -494,7 +686,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];
}
......@@ -598,6 +790,9 @@ define('controls/upload/Form', [
if (Button) {
Button.click();
} else {
// put it to the end
emptyUploads[i].inject(emptyUploads[i].getParent());
}
}
},
......
......@@ -10,10 +10,11 @@
contextMenu: {$contextMenu},
multiple : {$multiple},
sendbutton : {$sendbutton},
uploads : {$uploads},
maxuploads : {$uploads},
Drops : [],
hasFile : {$hasFile},
deleteFile : {$deleteFile},
typeOfLook : "{$typeOfLook}",
events : {
onFinished: function (Form) {
console.log('done', arguments);
......
......@@ -28,7 +28,10 @@ class Form extends QUI\QDOM
'deleteFile' => true,
'allowedFileTypes' => false, // eq: ['image/jpeg', 'image/png']
'maxFileSize' => false // eq: 20000000 = 20mb
'maxFileSize' => false, // eq: 20000000 = 20mb
'typeOfLook' => 'DragDrop', // DragDrop, Icon, Single
'typeOfLookIcon' => 'fa fa-upload'
]);
parent::setAttributes($params);
......@@ -41,6 +44,19 @@ class Form extends QUI\QDOM
{
$Engine = QUI::getTemplateManager()->getEngine();
switch ($this->getAttribute('typeOfLook')) {
case 'DragDrop':
case 'Icon':
case 'Single':
$typeOfLook = $this->getAttribute('typeOfLook');
break;
default:
$typeOfLook = 'DragDrop';
break;
}
$Engine->assign([
'this' => $this,
'id' => QUI\Utils\Uuid::get(),
......@@ -50,7 +66,8 @@ class Form extends QUI\QDOM
'sendbutton' => $this->phpBool2JsBool(\boolval($this->getAttribute('sendbutton'))),
'hasFile' => $this->phpBool2JsBool(\boolval($this->getAttribute('hasFile'))),
'deleteFile' => $this->phpBool2JsBool(\boolval($this->getAttribute('deleteFile'))),
'callable' => \str_replace('\\', '\\\\', $this->getType())
'callable' => \str_replace('\\', '\\\\', $this->getType()),
'typeOfLook' => $typeOfLook
]);
$maxFileSize = $this->getAttribute('maxFileSize');
......
......@@ -5420,6 +5420,9 @@ Du kannst die Benutzerrechteprüfung der Konsole auch mit '--ignore-file-permiss
<locale name="projects.project.site.panel.information.openInSiteStructure">
<de><![CDATA[In der Projekt Sitemap öffnen]]></de>
</locale>
<locale name="control.upload.icon.submit">
<de><![CDATA[Hochladen]]></de>
</locale>
</groups>
<groups name="quiqqer/controls" datatype="php,js">
......
......@@ -5232,6 +5232,9 @@ Note: If QUIQQER is installed as GIT repository, no MD5 summary file exists.
<locale name="projects.project.site.panel.information.openInSiteStructure">
<en><![CDATA[Open in the project Sitemap]]></en>
</locale>
<locale name="control.upload.icon.submit">
<en><![CDATA[Upload]]></en>
</locale>
</groups>
<groups name="quiqqer/controls" datatype="php,js">
<locale name="package.title">
......
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