diff --git a/core/misc/icons/ee0000/ex.svg b/core/misc/icons/ee0000/ex.svg new file mode 100644 index 0000000..6b45a1d --- /dev/null +++ b/core/misc/icons/ee0000/ex.svg @@ -0,0 +1 @@ + diff --git a/core/modules/file/src/Element/ManagedFile.php b/core/modules/file/src/Element/ManagedFile.php index a784757..bcc5011 100644 --- a/core/modules/file/src/Element/ManagedFile.php +++ b/core/modules/file/src/Element/ManagedFile.php @@ -181,11 +181,11 @@ public static function uploadAjaxCallback(&$form, FormStateInterface &$form_stat // Add the special AJAX class if a new file was added. $current_file_count = $form_state->get('file_upload_delta_initial'); if (isset($form['#file_upload_delta']) && $current_file_count < $form['#file_upload_delta']) { - $form[$current_file_count]['#attributes']['class'][] = 'ajax-new-content'; + $form[$current_file_count]['#attributes']['class'][] = 'ajax-new-content managed-file'; } // Otherwise just add the new content class on a placeholder. else { - $form['#suffix'] .= ''; + $form['#suffix'] .= ''; } $status_messages = ['#type' => 'status_messages']; diff --git a/core/themes/seven/css/components/dropzone.css b/core/themes/seven/css/components/dropzone.css index 7b16f00..5fed73d 100644 --- a/core/themes/seven/css/components/dropzone.css +++ b/core/themes/seven/css/components/dropzone.css @@ -1,11 +1,107 @@ /** - * Dropzone. + * Field Widgets. */ +.field--widget-image-image .remove-button, +.field--widget-file-generic .remove-button { + background: url(../../../../misc/icons/787878/ex.svg) 80px 4px no-repeat; + border: 0; + float: right; + text-align: left; + text-indent: -9999px; + position: absolute; + top: 10px; + right: 0; + width: 95px; + text-shadow: 0; + font-weight: normal; +} + +.field--widget-image-image .remove-button:focus, +.field--widget-file-generic .remove-button:focus { + box-shadow: none; + outline: none; +} + +.field--widget-image-image .remove-button:hover, +.field--widget-file-generic .remove-button:hover { + background: url(../../../../misc/icons/ee0000/ex.svg) 80px 4px no-repeat; + border: 0; + box-shadow: none; + text-align: left; + text-indent: 0; + color: #ee0000; +} + +.field--widget-image-image, +.field--widget-file-generic, +.field--widget-image-image td, +.field--widget-file-generic td { + position: relative; +} + +.field--widget-image-image td .remove-button, +.field--widget-file-generic td .remove-button { + right: 10px; +} + +.field--widget-image-image .dropzone-trigger { + display: none; +} + +.field--widget-image-image .remove-button + .ajax-progress, +.field--widget-file-generic .remove-button + .ajax-progress { + position: absolute; + right: 10px; + top: 35px; +} + +.field--widget-image-image td .remove-button + .ajax-progress, +.field--widget-file-generic td .remove-button + .ajax-progress { + position: absolute; + right: 85px; + top: 13px; +} + +.field--widget-image-image .image-preview { + position: relative; +} + +.field--widget-image-image td .image-widget-data { + float: none; + padding-left: 27px; +} + +.field--widget-image-image .image-preview img { + border: 0; + max-width: 80px; + height: auto; + padding-right: 10px; +} + +.field--widget-image-image td .image-widget-data .form-type-textfield:before, +.field--widget-file-generic td .form-managed-file .form-type-textfield:before{ + content: ''; + clear: both; + display: table; +} + +.field--widget-file-generic td .form-managed-file .file { + margin-bottom: 10px; +} + +.field--widget-file-generic td .form-managed-file .form-item { + padding-left: 27px; +} + + /** + * Dropzone. + */ .dropzone-wrapper { width: 100%; border: 1px solid #bfbfbf; border-radius: 2px; background: #fcfcfa; + box-sizing: border-box; } .dropzone { @@ -19,6 +115,20 @@ .dropzone > div { display: table-cell; vertical-align: middle; + box-sizing: border-box; +} + +span.ajax-new-content.managed-file { + display: block; +} + +.dropzone .has-file, +.dropzone .form-managed-file { + padding: 10px; +} + +.dropzone.empty .form-managed-file { + padding: 0; } /* hide error message*/ @@ -48,9 +158,11 @@ height: 100%; width: 100px; border-right: 1px solid #bfbfbf; + background: url('../../../../misc/icons/bebebe/dropzone-new.svg') -200px center no-repeat; } -.dropzone .dropzone-trigger { +.dropzone.empty .dropzone-trigger { + display: table-cell; background: url('../../../../misc/icons/bebebe/dropzone-new.svg') 0 center no-repeat; } @@ -58,26 +170,15 @@ background: url('../../../../misc/icons/bebebe/dropzone-new.svg') -100px center no-repeat; } -.dropzone .dropzone-trigger.is-throbber.is-uploading { - background: none; -} -.dropzone .dropzone-trigger.is-uploading { - background: url('../../../../misc/icons/bebebe/dropzone-new.svg') -200px center no-repeat; -} - .dropzone .dropzone-trigger.is-complete { background: url('../../../../misc/icons/bebebe/dropzone-new.svg') -200px center no-repeat; } -.field--type-image .dropzone .dropzone-trigger.is-complete { - background: url('../../../../misc/icons/bebebe/dropzone-new.svg') -200px center no-repeat; -} - +.field--type-image .dropzone .dropzone-trigger.is-complete, .field--type-file .dropzone .dropzone-trigger.is-complete { background: url('../../../../misc/icons/bebebe/dropzone-new.svg') -200px center no-repeat; } - .dropzone-description { padding: 10px; -moz-box-sizing: border-box; diff --git a/core/themes/seven/js/dropzone.js b/core/themes/seven/js/dropzone.js index 8c7f8b7..ad9f5f2 100644 --- a/core/themes/seven/js/dropzone.js +++ b/core/themes/seven/js/dropzone.js @@ -4,36 +4,32 @@ Drupal.behaviors.dropzone = { attach: function (context, settings) { - $(context).find('.js-form-file') - .on('dragover dragleave mouseenter mouseleave', function () { - $(this).closest('.dropzone').find('.dropzone-trigger').toggleClass('is-hovering'); + var formFile = $(context).find('.js-form-file'); + + formFile.on('dragover mouseenter', function () { + $(this).closest('.dropzone').find('.dropzone-trigger').addClass('is-hovering'); + }); + formFile.on('dragleave mouseleave', function () { + $(this).closest('.dropzone').find('.dropzone-trigger').removeClass('is-hovering'); }); Drupal.ajax.instances .filter(function (instance) { - return instance.element.length > 0 && instance.element.hasClass('upload-button') && instance.element.once('magic').length > 0; + if (instance && instance.element) { + var element = $(instance.element); + } + else { + return; + } + return element.length > 0 && element.hasClass('upload-button') && element.once('magic').length > 0; }) .forEach(function (instance) { - instance.setProgressIndicatorThrobber = function () { - // Avoid code repetition. - this.prototype.setProgressIndicatorThrobber(); - // Undo the .after() call in the prototype method. - $(this.element).nextAll().remove(); - - // Move the throbber to the dropzone trigger. - var dropzone = $(this.element).closest('.dropzone').find('.dropzone-trigger'); - $(this.element).closest('.dropzone').find('.dropzone-trigger').removeClass('is-complete').addClass('is-throbber is-uploading'); - $(this.progress.element).appendTo(dropzone); - }; + var element = $(instance.element); + element.closest('.dropzone').find('.js-upload-image').on('click', function() { + $(this).closest('.js-form-item').find('input[type="file"]').trigger('click'); + }); - instance.success = function () { - // Remove the progress element. - if (this.progress.element) { - $(this.progress.element).remove(); - } - if (this.progress.object) { - this.progress.object.stopMonitoring(); - } + instance.success = function (response, status) { $(this.element).prop('disabled', false); // Save element's ancestors tree so if the element is removed from the dom @@ -70,7 +66,7 @@ } if (target && $(this.element).hasClass('upload-button')) { - $(target).find('.dropzone-trigger').addClass('is-complete'); + $(target).find('.dropzone-trigger').addClass('is-complete').next('.js-form-managed-file').addClass('has-file'); } // Reattach behaviors, if they were detached in beforeSerialize(). The @@ -82,12 +78,6 @@ Drupal.attachBehaviors(this.$form.get(0), settings); } - // Move the throbber to the dropzone trigger. - if (target && $(target).find('.image-preview').length) { - var dropzone = $(target).find('.dropzone').find('.dropzone-trigger'); - $(target).find('.image-preview').appendTo(dropzone); - } - // Remove any response-specific settings so they don't get used on the next // call by mistake. this.settings = null; @@ -96,14 +86,4 @@ } }; - Drupal.behaviors.uploadImage = { - attach: function (context, settings) { - $(context).find('.js-upload-image').on('click', function(e) { - $(this).closest('.js-form-item').find('input[type="file"]').trigger('click'); - e.preventDefault(); - e.stopPropagation(); - }); - } - }; - })(jQuery, Drupal); diff --git a/core/themes/seven/templates/form-element--managed-file.html.twig b/core/themes/seven/templates/form-element--managed-file.html.twig index 0a4792f..9ab918e 100644 --- a/core/themes/seven/templates/form-element--managed-file.html.twig +++ b/core/themes/seven/templates/form-element--managed-file.html.twig @@ -65,20 +65,11 @@ description_display == 'invisible' ? 'visually-hidden', ] %} -{#{{ kint(children) }}#} - -{# @todo: is this being used? #} -{#{% if errors %}#} - {#
#} - {#{{ errors }}#} - {#
#} -{#{% endif %}#} - {% if prefix is not empty %} {{ prefix }} {% endif %} -
+
{{ children }} @@ -93,8 +84,17 @@ description_display == 'invisible' ? 'visually-hidden', {% if description.content %} {{ description.content }}