From 6420027a6a98a13aa8df69d648b46b9a27758840 Mon Sep 17 00:00:00 2001 From: Samuel Georges Date: Wed, 10 Jun 2015 22:13:24 +1000 Subject: [PATCH] Finish single file uploader FileUpload now supports: - optional 'useCaption' flag - imageWidth and imageHeight are now optional - default file uploader uses default file types --- CHANGELOG.md | 5 +- modules/backend/formwidgets/FileUpload.php | 40 ++-- .../fileupload/assets/css/fileupload.css | 196 +++++++++++++++++- .../fileupload/assets/js/fileupload.js | 41 +++- .../assets/less/fileupload.base.less | 72 ++++++- .../assets/less/fileupload.filemulti.less | 18 +- .../assets/less/fileupload.filesingle.less | 111 ++++++++++ .../assets/less/fileupload.imagemulti.less | 3 + .../assets/less/fileupload.imagesingle.less | 18 ++ .../fileupload/partials/_config_form.htm | 96 +++++---- .../fileupload/partials/_file_multi.htm | 13 +- .../fileupload/partials/_file_single.htm | 122 +++++------ .../fileupload/partials/_image_multi.htm | 9 +- .../fileupload/partials/_image_single.htm | 9 +- 14 files changed, 580 insertions(+), 173 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d0bba452..2b9e01e16 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,8 @@ * **Build 26x** (2015-06-xx) - - Improved the back-end administrator permissions UI. + - Introduced the October Storm client-side library. + - Improved the back-end administrator permissions and `RelationController` UI. - The page setting `hidden` has been renamed to `is_hidden`, this setting may need to be reapplied for some themes. - - FileUpload widget has been rebuilt from scratch, it now uses an interface similar to the Media Manager. + - `FileUpload` form widget has been rebuilt from scratch, it now uses an interface similar to the Media Manager (see Backend > Forms docs). * **Build 260** (2015-05-16) - The `|page` filter now supports passing an empty string to generate a link to the current page. diff --git a/modules/backend/formwidgets/FileUpload.php b/modules/backend/formwidgets/FileUpload.php index aa1b5e757..8950abe0c 100644 --- a/modules/backend/formwidgets/FileUpload.php +++ b/modules/backend/formwidgets/FileUpload.php @@ -12,13 +12,6 @@ use Backend\Classes\FormWidgetBase; use ValidationException; use Exception; -/* -Requirements for this new uploader - -- Fluid single image -- Prevent uploading of PHP files, etc -- Avatar mode -*/ /** * File upload field @@ -41,12 +34,12 @@ class FileUpload extends FormWidgetBase /** * @var int Preview image width */ - public $imageWidth = 100; + public $imageWidth = null; /** * @var int Preview image height */ - public $imageHeight = 100; + public $imageHeight = null; /** * @var string Text to display when no file is associated @@ -66,6 +59,11 @@ class FileUpload extends FormWidgetBase 'extension' => 'auto' ]; + /** + * @var boolean Allow the user to set a caption. + */ + public $useCaption = true; + // // Object properties // @@ -85,7 +83,8 @@ class FileUpload extends FormWidgetBase 'imageHeight', 'previewNoFilesMessage', 'fileTypes', - 'thumbOptions' + 'thumbOptions', + 'useCaption' ]); $this->checkUploadPostback(); @@ -113,6 +112,7 @@ class FileUpload extends FormWidgetBase $this->vars['imageWidth'] = $this->imageWidth; $this->vars['acceptedFileTypes'] = $this->getAcceptedFileTypes(true); $this->vars['cssDimensions'] = $this->getCssDimensions(); + $this->vars['useCaption'] = $this->useCaption; } protected function getFileList() @@ -180,11 +180,13 @@ class FileUpload extends FormWidgetBase public function getAcceptedFileTypes($includeDot = false) { $types = $this->fileTypes; - if ($types === false && starts_with($this->getDisplayMode(), 'image')) { - $types = 'jpg,jpeg,bmp,png,gif,svg'; + + if ($types === false) { + $isImage = starts_with($this->getDisplayMode(), 'image'); + $types = implode(',', File::getDefaultFileTypes($isImage)); } - if (!$types) { + if (!$types || $types == '*') { return null; } @@ -273,6 +275,7 @@ class FileUpload extends FormWidgetBase $this->vars['file'] = $file; $this->vars['displayMode'] = $this->getDisplayMode(); + $this->vars['cssDimensions'] = $this->getCssDimensions(); return $this->makePartial('config_form'); } @@ -364,7 +367,12 @@ class FileUpload extends FormWidgetBase $file = $this->decorateFileAttributes($file); - $result = ['id' => $file->id, 'thumb' => $file->thumb]; + $result = [ + 'id' => $file->id, + 'thumb' => $file->thumb, + 'path' => $file->path + ]; + Response::json($result, 200)->send(); } @@ -381,7 +389,9 @@ class FileUpload extends FormWidgetBase */ protected function decorateFileAttributes($file) { - $file->thumb = $file->getThumb($this->imageWidth, $this->imageHeight, $this->thumbOptions); + $file->thumb = ($this->imageWidth || $this->imageHeight) + ? $file->getThumb($this->imageWidth, $this->imageHeight, $this->thumbOptions) + : $file->path; // Internal download link if (!$file->isImage() || !$file->isPublic()) { diff --git a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css index d47e45593..eaedd1f89 100644 --- a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css +++ b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css @@ -64,6 +64,7 @@ display: block; } .field-fileupload .upload-object .info h4 a, +.field-fileupload .upload-object .meta a.upload-remove-button, .field-fileupload .upload-object .meta a.drag-handle { color: #2b3e50; display: none; @@ -111,7 +112,7 @@ animation: none; font-size: 40px; color: #ab2a1c; - margin-top: -30px; + margin-top: -20px; margin-left: -20px; text-shadow: 2px 2px 0 #fff; } @@ -131,9 +132,8 @@ -webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; } -.field-fileupload .upload-object.is-success:hover h4 a { - display: block; -} +.field-fileupload .upload-object.is-success:hover h4 a, +.field-fileupload .upload-object.is-success:hover .meta .upload-remove-button, .field-fileupload .upload-object.is-success:hover .meta .drag-handle { display: block; } @@ -141,6 +141,10 @@ cursor: pointer; } .field-fileupload .upload-object.is-error .icon-container { + opacity: 1; +} +.field-fileupload .upload-object.is-error .icon-container > img, +.field-fileupload .upload-object.is-error .icon-container > i { opacity: .5; } .field-fileupload .upload-object.is-error .info h4 { @@ -169,13 +173,40 @@ display: none; } @media (max-width: 1024px) { - .field-fileupload .upload-object.is-success h4 a { - display: block !important; - } + .field-fileupload .upload-object.is-success h4 a, + .field-fileupload .upload-object.is-success .meta .upload-remove-button, .field-fileupload .upload-object.is-success .meta .drag-handle { display: block !important; } } +.fileupload-config-form .fileupload-url-button { + padding-left: 0; +} +.fileupload-config-form .fileupload-url-button > i { + color: #666; +} +.fileupload-config-form .file-upload-modal-image-header { + background-color: #FEFEFE; + background-image: -webkit-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -webkit-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb); + background-image: -moz-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -moz-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb); + background-image: -o-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -o-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb); + background-image: -ms-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), -ms-linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb); + background-image: linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb), linear-gradient(45deg, #cbcbcb 25%, transparent 25%, transparent 75%, #cbcbcb 75%, #cbcbcb); + -webkit-background-size: 20px 20px; + -moz-background-size: 20px 20px; + background-size: 20px 20px; + background-position: 0 0, 10px 10px; +} +.fileupload-config-form .file-upload-modal-image-header, +.fileupload-config-form .file-upload-modal-image-header img { + border-top-right-radius: 2px; + border-top-left-radius: 2px; +} +.fileupload-config-form .file-upload-modal-image-header .close { + position: absolute; + top: 20px; + right: 20px; +} .field-fileupload.style-image-multi .upload-button, .field-fileupload.style-image-multi .upload-object { margin: 0 10px 10px 0; @@ -264,6 +295,8 @@ .field-fileupload.style-image-multi .upload-object .icon-container { border-right: 1px solid #f6f8f9; float: left; + display: inline-block; + overflow: hidden; width: 75px; height: 75px; } @@ -273,6 +306,7 @@ .field-fileupload.style-image-multi .upload-object .icon-container.image img { border-bottom-left-radius: 3px; border-top-left-radius: 3px; + width: auto; } .field-fileupload.style-image-multi .upload-object .info { margin-left: 90px; @@ -383,6 +417,11 @@ color: #5cb85c; color: rgba(0, 0, 0, 0.2); } +.field-fileupload.style-image-single .upload-button, +.field-fileupload.style-image-single .upload-button > table { + min-height: 100px; + min-width: 100px; +} .field-fileupload.style-image-single .upload-object { padding-bottom: 66px; } @@ -394,6 +433,9 @@ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + display: block; + max-width: 100%; + height: auto; } .field-fileupload.style-image-single .upload-object .progress-bar { display: block; @@ -437,6 +479,11 @@ .field-fileupload.style-image-single .upload-object:hover h4 { padding-right: 20px; } +@media (max-width: 1024px) { + .field-fileupload.style-image-single .upload-object h4 { + padding-right: 20px !important; + } +} .field-fileupload.style-file-multi .upload-button { margin-bottom: 10px; } @@ -549,6 +596,9 @@ margin-left: -10px; background-size: 20px 20px; } +.field-fileupload.style-file-multi .upload-object.is-error .icon-container:after { + font-size: 20px; +} .field-fileupload.style-file-multi .upload-object.is-success .info p.size { display: block; } @@ -576,17 +626,141 @@ padding-right: 35px; } @media (max-width: 1024px) { - .field-fileupload .upload-object h4 { + .field-fileupload.style-file-multi .upload-object h4 { padding-right: 35px !important; } - .field-fileupload .info { + .field-fileupload.style-file-multi .info { margin-right: 25% !important; } - .field-fileupload .info p.size { + .field-fileupload.style-file-multi .info p.size { width: 25% !important; padding-right: 35px !important; } - .field-fileupload .meta { + .field-fileupload.style-file-multi .meta { width: 25% !important; } } +.field-fileupload.style-file-single { + background-color: #ffffff; + border: 1px solid #e0e0e0; + overflow: hidden; + position: relative; + padding-right: 30px; +} +.field-fileupload.style-file-single .upload-button { + position: absolute; + top: 50%; + margin-top: -44px; + height: 88px; + background: transparent; + right: -2px; + color: #595959; +} +.field-fileupload.style-file-single .upload-button i { + font-size: 14px; +} +.field-fileupload.style-file-single .upload-button:hover { + color: #333333; +} +.field-fileupload.style-file-single .upload-empty-message { + padding: 10px 0 10px 11px; + font-size: 13px; +} +.field-fileupload.style-file-single.is-populated .upload-empty-message { + display: none; +} +.field-fileupload.style-file-single .upload-object { + display: block; + width: 100%; + padding: 8px 0 10px 0; +} +.field-fileupload.style-file-single .upload-object .icon-container { + position: absolute; + top: 0; + left: 0; + width: 15px; + padding: 0 5px; + margin: 8px 0 0 7px; + text-align: center; +} +.field-fileupload.style-file-single .upload-object .icon-container i { + line-height: 150%; + font-size: 15px; +} +.field-fileupload.style-file-single .upload-object .icon-container img { + display: none; +} +.field-fileupload.style-file-single .upload-object .info { + margin-left: 34px; + margin-right: 15%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.field-fileupload.style-file-single .upload-object .info h4, +.field-fileupload.style-file-single .upload-object .info p { + display: inline; + margin: 0; + padding: 0; + font-size: 12px; + line-height: 150%; + color: #666666; +} +.field-fileupload.style-file-single .upload-object .info p.size { + font-weight: normal; +} +.field-fileupload.style-file-single .upload-object .info p.size:before { + content: " - "; +} +.field-fileupload.style-file-single .upload-object .progress-bar { + display: block; + width: 100%; + overflow: hidden; + height: 5px; + background-color: #f5f5f5; + border-radius: 2px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); + position: absolute; + top: 50%; + margin-top: -2px; + right: 5px; +} +.field-fileupload.style-file-single .upload-object .progress-bar .upload-progress { + float: left; + width: 0%; + height: 100%; + line-height: 5px; + color: #ffffff; + background-color: #5fb6f5; + -webkit-box-shadow: none; + box-shadow: none; + -webkit-transition: width 0.6s ease; + transition: width 0.6s ease; +} +.field-fileupload.style-file-single .upload-object .meta { + position: absolute; + top: 50%; + margin-top: -44px; + height: 88px; + right: 0; + width: 15%; +} +.field-fileupload.style-file-single .upload-object .meta .upload-remove-button { + position: absolute; + top: 50%; + right: 0; + height: 20px; + margin-top: -10px; + margin-right: 10px; +} +.field-fileupload.style-file-single .upload-object .icon-container:after { + width: 20px; + height: 20px; + margin-top: -10px; + margin-left: -10px; + background-size: 20px 20px; +} +.field-fileupload.style-file-single .upload-object.is-error .icon-container:after { + font-size: 20px; +} diff --git a/modules/backend/formwidgets/fileupload/assets/js/fileupload.js b/modules/backend/formwidgets/fileupload/assets/js/fileupload.js index ed3545d59..1dba9f304 100644 --- a/modules/backend/formwidgets/fileupload/assets/js/fileupload.js +++ b/modules/backend/formwidgets/fileupload/assets/js/fileupload.js @@ -99,18 +99,26 @@ } this.dropzone = new Dropzone(this.$el.get(0), this.uploaderOptions) - this.dropzone.on('error', this.proxy(this.onUploadFail)) - this.dropzone.on('success', this.proxy(this.onUploadComplete)) + this.dropzone.on('addedfile', this.proxy(this.onUploadAddedFile)) this.dropzone.on('sending', this.proxy(this.onUploadSending)) - this.dropzone.on('addedfile', this.proxy(this.evalIsPopulated)) + this.dropzone.on('success', this.proxy(this.onUploadSuccess)) + this.dropzone.on('error', this.proxy(this.onUploadError)) } - FileUpload.prototype.onUploadFail = function(file, error) { - var $preview = $(file.previewElement) - $preview.addClass('is-error') + FileUpload.prototype.onUploadAddedFile = function(file) { + // Remove any exisiting objects for single variety + if (!this.options.isMulti) { + $('> *', this.$filesContainer).not(file.previewElement).remove() + } + + this.evalIsPopulated() } - FileUpload.prototype.onUploadComplete = function(file, response) { + FileUpload.prototype.onUploadSending = function(file, xhr, formData) { + this.addExtraFormData(formData) + } + + FileUpload.prototype.onUploadSuccess = function(file, response) { var $preview = $(file.previewElement), $img = $('.image img', $preview) @@ -118,13 +126,15 @@ if (response.id) { $preview.data('id', response.id) + $preview.data('path', response.path) $('.upload-remove-button', $preview).data('request-data', { file_id: response.id }) $img.attr('src', response.thumb) } } - FileUpload.prototype.onUploadSending = function(file, xhr, formData) { - this.addExtraFormData(formData) + FileUpload.prototype.onUploadError = function(file, error) { + var $preview = $(file.previewElement) + $preview.addClass('is-error') } FileUpload.prototype.addExtraFormData = function(formData) { @@ -213,6 +223,11 @@ FileUpload.prototype.onClickSuccessObject = function(ev) { var $target = $(ev.target).closest('.upload-object') + if (!this.options.configHandler) { + window.open($target.data('path')) + return + } + $target.popup({ handler: this.options.configHandler, extraData: { file_id: $target.data('id') } @@ -257,7 +272,13 @@ // FileUpload.prototype.evalIsPopulated = function() { - this.$el.toggleClass('is-populated', !!$('.upload-object', this.$filesContainer).length) + var isPopulated = !!$('.upload-object', this.$filesContainer).length + this.$el.toggleClass('is-populated', isPopulated) + + // Reset maxFiles counter + if (!isPopulated) { + this.dropzone.removeAllFiles() + } } FileUpload.DEFAULTS = { diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.base.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.base.less index fdb0ec413..2d6d82faf 100644 --- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.base.less +++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.base.less @@ -89,6 +89,21 @@ } } +.uploader-small-loader() { + width: 20px; + height: 20px; + margin-top: -10px; + margin-left: -10px; + background-size: 20px 20px; +} + +.uploader-vertical-align() { + position: absolute; + top: 50%; + margin-top: -44px; + height: 88px; +} + // // Shared // @@ -175,6 +190,7 @@ } .info h4 a, + .meta a.upload-remove-button, .meta a.drag-handle { color: #2b3e50; display: none; @@ -228,7 +244,7 @@ .animation(none); font-size: 40px; color: #ab2a1c; - margin-top: -30px; + margin-top: -20px; margin-left: -20px; text-shadow: 2px 2px 0 #fff; } @@ -258,7 +274,8 @@ } &:hover { - h4 a { display: block; } + h4 a, + .meta .upload-remove-button, .meta .drag-handle { display: block; } } } @@ -271,7 +288,10 @@ cursor: pointer; .icon-container { - opacity: .5; + opacity: 1; + > img, > i { + opacity: .5; + } } .info h4 { @@ -316,8 +336,52 @@ @media (max-width: 1024px) { .field-fileupload { .upload-object.is-success { - h4 a { display: block !important; } + h4 a, + .meta .upload-remove-button, .meta .drag-handle { display: block !important; } } } +} + +// +// Config form +// + +.fileupload-config-form { + .fileupload-url-button{ + padding-left: 0; + > i { + color: #666; + } + } + + + .file-upload-modal-image-header { + // Alternative color if below doesn't look nice + //background-color: #5a6060; + + // Photoshop transparent background + // Based on: http://lea.verou.me/css3patterns/#checkerboard + background-color: #FEFEFE; + background-image: -webkit-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -webkit-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB); + background-image: -moz-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -moz-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB); + background-image: -o-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -o-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB); + background-image: -ms-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), -ms-linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB); + background-image: linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB), linear-gradient(45deg, #CBCBCB 25%, transparent 25%, transparent 75%, #CBCBCB 75%, #CBCBCB); + -webkit-background-size: 20px 20px; + -moz-background-size: 20px 20px; + background-size: 20px 20px; + background-position: 0 0, 10px 10px; + + + &, img { + .border-top-radius(2px); + } + + .close { + position: absolute; + top: 20px; + right: 20px; + } + } } \ No newline at end of file diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.filemulti.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.filemulti.less index d4bec08ae..b8840c8c8 100644 --- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.filemulti.less +++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.filemulti.less @@ -21,7 +21,6 @@ .upload-object { display: block; width: 100%; - //background-color: #fff; border-bottom: 1px solid @fileupload-list-border-color; padding-left: 10px; @@ -100,16 +99,12 @@ } } - // - // Smaller Loader - // - .icon-container:after { - width: 20px; - height: 20px; - margin-top: -10px; - margin-left: -10px; - background-size: 20px 20px; + .uploader-small-loader(); + } + + &.is-error .icon-container:after { + font-size: 20px; } // @@ -133,6 +128,7 @@ // // Hover // + &:hover { .uploader-object-active(); h4 { padding-right: 35px; } @@ -145,7 +141,7 @@ // @media (max-width: 1024px) { - .field-fileupload { + .field-fileupload.style-file-multi { .upload-object { h4 { padding-right: 35px !important; } } diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.filesingle.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.filesingle.less index 23610e136..96a9090be 100644 --- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.filesingle.less +++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.filesingle.less @@ -3,4 +3,115 @@ // .field-fileupload.style-file-single { + background-color: @color-form-field-bg; + border: 1px solid @color-form-field-border; + overflow: hidden; + position: relative; + padding-right: 30px; + + .upload-button { + .uploader-vertical-align(); + background: transparent; + right: -2px; + + color: lighten(@color-form-field-recordfinder-btn, 15%); + + i { + font-size: 14px; + } + + &:hover { + color: @color-form-field-recordfinder-btn; + } + } + + .upload-empty-message { + padding: 10px 0 10px 11px; + font-size: 13px; + } + + &.is-populated { + .upload-empty-message { + display: none; + } + } + + .upload-object { + display: block; + width: 100%; + padding: 8px 0 10px 0; + + .icon-container { + position: absolute; + top: 0; + left: 0; + width: 15px; + padding: 0 5px; + margin: 8px 0 0 7px; + text-align: center; + + i { + line-height: 150%; + font-size: 15px; + } + + img { display: none; } + } + + .info { + margin-left: 34px; + margin-right: 15%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + h4, p { + display: inline; + margin: 0; + padding: 0; + font-size: 12px; + line-height: 150%; + color: #666666; + } + + p.size { + font-weight: normal; + &:before { + content: " - "; + } + } + } + + .progress-bar { + .uploader-progress-bar(); + position: absolute; + top: 50%; + margin-top: -2px; + right: 5px; + + } + + .meta { + .uploader-vertical-align(); + right: 0; + width: 15%; + .upload-remove-button { + position: absolute; + top: 50%; + right: 0; + height: 20px; + margin-top: -10px; + margin-right: 10px; + } + } + + .icon-container:after { + .uploader-small-loader(); + } + + &.is-error .icon-container:after { + font-size: 20px; + } + } + } \ No newline at end of file diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less index 1105e83fd..305ad7295 100644 --- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less +++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less @@ -33,6 +33,8 @@ .icon-container { border-right: 1px solid #f6f8f9; float: left; + display: inline-block; + overflow: hidden; width: 75px; height: 75px; @@ -42,6 +44,7 @@ &.image img { .border-left-radius(3px); + width: auto; } } diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less index 248459d32..7ab672d4f 100644 --- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less +++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagesingle.less @@ -11,6 +11,10 @@ .upload-button { .uploader-block-button(); + &, > table { + min-height: 100px; + min-width: 100px; + } } .upload-object { @@ -22,6 +26,7 @@ &.image img { .border-radius(3px); + .img-responsive(); } } @@ -53,4 +58,17 @@ } } +} + + +// +// Media +// + +@media (max-width: 1024px) { + .field-fileupload.style-image-single { + .upload-object { + h4 { padding-right: 20px !important; } + } + } } \ No newline at end of file diff --git a/modules/backend/formwidgets/fileupload/partials/_config_form.htm b/modules/backend/formwidgets/fileupload/partials/_config_form.htm index 718bbf6cf..4ceae363b 100644 --- a/modules/backend/formwidgets/fileupload/partials/_config_form.htm +++ b/modules/backend/formwidgets/fileupload/partials/_config_form.htm @@ -1,54 +1,60 @@ - - +
+ + -
- - +
+ - + title=": file_name) ?>" + style="" /> +
- -

: file_name ?>

+
+ +

: file_name ?>

+
-
-
-

+
+

-
- -
-
- -
+
+ +
+
+ +
-
-
- - -
- \ No newline at end of file +
+
+ + Attachment URL + + + +
+ +
\ No newline at end of file diff --git a/modules/backend/formwidgets/fileupload/partials/_file_multi.htm b/modules/backend/formwidgets/fileupload/partials/_file_multi.htm index 630102ce3..991401507 100644 --- a/modules/backend/formwidgets/fileupload/partials/_file_multi.htm +++ b/modules/backend/formwidgets/fileupload/partials/_file_multi.htm @@ -5,25 +5,26 @@ data-template="#getId('template') ?>" data-error-template="#getId('errorTemplate') ?>" data-sort-handler="getEventHandler('onSortAttachments') ?>" - data-config-handler="getEventHandler('onLoadAttachmentConfig') ?>" data-unique-id="getId() ?>" - data-file-types=""> + data-config-handler="getEventHandler('onLoadAttachmentConfig') ?>" + data-file-types="" +> - +
-
+

- title ?: $file->disk_name ?> + title ?: $file->file_name ?> data-config-handler="getEventHandler('onLoadAttachmentConfig') ?>" data-file-types="" - data-item-template="getId('template') ?>"> +> -
- - style="display:none"> -
- + + -
-
-
-
-
- - - - - - + +
+ Click the or drag a file here to upload +

+ + + diff --git a/modules/backend/formwidgets/fileupload/partials/_image_multi.htm b/modules/backend/formwidgets/fileupload/partials/_image_multi.htm index cc48f852e..166f39bb5 100644 --- a/modules/backend/formwidgets/fileupload/partials/_image_multi.htm +++ b/modules/backend/formwidgets/fileupload/partials/_image_multi.htm @@ -5,9 +5,10 @@ data-template="#getId('template') ?>" data-error-template="#getId('errorTemplate') ?>" data-sort-handler="getEventHandler('onSortAttachments') ?>" - data-config-handler="getEventHandler('onLoadAttachmentConfig') ?>" data-unique-id="getId() ?>" - data-file-types=""> + data-config-handler="getEventHandler('onLoadAttachmentConfig') ?>" + data-file-types="" +> @@ -17,13 +18,13 @@
-
+

- title ?: $file->disk_name ?> + title ?: $file->file_name ?> data-file-types=""> + data-config-handler="getEventHandler('onLoadAttachmentConfig') ?>" + data-file-types="" +>
-
+

- title ?: $singleFile->disk_name ?> + title ?: $singleFile->file_name ?>