diff --git a/core/modules/file/file.field.inc b/core/modules/file/file.field.inc index 47291bdb95..0ec5b78583 100644 --- a/core/modules/file/file.field.inc +++ b/core/modules/file/file.field.inc @@ -49,7 +49,7 @@ function template_preprocess_file_widget_multiple(&$variables) { foreach ($widgets as $key => &$widget) { // Save the uploading row for last. if (empty($widget['#files'])) { - $widget['#title'] = $element['#file_upload_title']; + $widget['#title'] = NULL; $widget['#description'] = \Drupal::service('renderer')->renderPlain($element['#file_upload_description']); if (!empty($widget['#default_image']['rendered'])) { $widget['#description'] .= $widget['#default_image']['rendered']; diff --git a/core/modules/file/src/Element/ManagedFile.php b/core/modules/file/src/Element/ManagedFile.php index ada5b031b6..e1f137288b 100644 --- a/core/modules/file/src/Element/ManagedFile.php +++ b/core/modules/file/src/Element/ManagedFile.php @@ -243,7 +243,11 @@ public static function processManagedFile(&$element, FormStateInterface $form_st '#name' => $parents_prefix . '_upload_button', '#type' => 'submit', '#value' => t('Upload'), - '#attributes' => ['class' => ['upload-button', 'js-hide']], + '#attributes' => ['class' => [ + 'upload-button', + 'js-upload-button', + 'js-hide', + ]], '#validate' => [], '#submit' => ['file_managed_file_submit'], '#limit_validation_errors' => [$element['#parents']], diff --git a/core/modules/file/src/Plugin/Field/FieldWidget/FileWidget.php b/core/modules/file/src/Plugin/Field/FieldWidget/FileWidget.php index f1da5a4b5f..9937b3101e 100644 --- a/core/modules/file/src/Plugin/Field/FieldWidget/FileWidget.php +++ b/core/modules/file/src/Plugin/Field/FieldWidget/FileWidget.php @@ -189,7 +189,6 @@ protected function formMultipleElements(FieldItemListInterface $items, array &$f // Add some properties that will eventually be added to the file upload // field. These are added here so that they may be referenced easily // through a hook_form_alter(). - $elements['#file_upload_title'] = t('Add a new file'); $elements['#file_upload_description'] = [ '#theme' => 'file_upload_help', '#description' => '', diff --git a/core/themes/seven/css/components/dropzone.css b/core/themes/seven/css/components/dropzone.css index 6c0d1e3b62..b1d7773b3a 100644 --- a/core/themes/seven/css/components/dropzone.css +++ b/core/themes/seven/css/components/dropzone.css @@ -16,13 +16,13 @@ } /* Dropzone trigger area. */ -.dropzone .dropzone-trigger { +.dropzone .dropzone__trigger { flex: 0 0 100px; min-height: 100px; border-right: 1px solid #bfbfbf; background: url("../../../../misc/icons/bebebe/dropzone-new.svg") 0 center no-repeat; } -[dir="rtl"] .dropzone .dropzone-trigger { +[dir="rtl"] .dropzone .dropzone__trigger { border-right: none; border-left: 1px solid #bfbfbf; } @@ -44,26 +44,26 @@ left: auto; } -.dropzone .dropzone-trigger.is-hovering { +.dropzone .dropzone__trigger.is-hovering { background-position: -100px center; } -.dropzone .dropzone-trigger.is-hidden { +.dropzone .dropzone__trigger.is-hidden { background-image: none; } /* Dropzone no-trigger area. */ -.dropzone .dropzone-no-trigger .js-dropzone-add-button { +.dropzone .dropzone__no-trigger .js-dropzone-add-button { margin: 20px 10px 5px 10px; } -.dropzone .dropzone-no-trigger .js-dropzone-add-button:before { +.dropzone .dropzone__no-trigger .js-dropzone-add-button:before { margin-left: -0.2em; content: "+"; font-weight: 900; } -.dropzone .dropzone-no-trigger .description { +.dropzone .dropzone__no-trigger .description { display: table-cell; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -72,23 +72,23 @@ padding: 0 10px 20px 10px; } -.dropzone .dropzone-no-trigger .description li { +.dropzone .dropzone__no-trigger .description li { display: inline-block; } -.dropzone .dropzone-no-trigger .description li:after { +.dropzone .dropzone__no-trigger .description li:after { padding: 0 5px; content: "\00b7"; } -.dropzone .dropzone-no-trigger .description li:last-child:after { +.dropzone .dropzone__no-trigger .description li:last-child:after { content: none; } -.dropzone .dropzone-no-trigger .image-preview { +.dropzone .dropzone__no-trigger .image-preview { display: none; } -.dropzone .dropzone-no-trigger .messages { +.dropzone .dropzone__no-trigger .messages { margin: 10px 10px 0 18px; } diff --git a/core/themes/seven/css/components/managed-file.css b/core/themes/seven/css/components/managed-file.css index 5ec733156c..23e963db5d 100644 --- a/core/themes/seven/css/components/managed-file.css +++ b/core/themes/seven/css/components/managed-file.css @@ -23,57 +23,22 @@ list-style: none; } -/** - * Multi uploads table. - */ -.form-type-managed-file table { - width: 100%; - margin: 10px 0; -} - -.form-type-managed-file table tr td { - vertical-align: top; -} - -.form-type-managed-file table tr td:first-child { - display: flex; -} - -.form-type-managed-file table tr.draggable td:first-child a.tabledrag-handle { - flex: 0 0 40px; -} - -.form-type-managed-file table tr th:last-child, -.form-type-managed-file table tr td:last-child { - position: relative; - width: 20px; - text-align: right; - white-space: nowrap; -} - -.form-type-managed-file table tr th:last-child { - font-size: 0; -} - -.form-type-managed-file table .image-widget .image-preview { - align-items: flex-start; -} - /** * Remove button. */ -.form-wrapper .form-type-managed-file .remove-button { +.form-type-managed-file .remove-button { position: absolute; top: 11px; right: 11px; - width: 17px; + width: auto; margin: 0; - padding: 0; + padding: 0 20px 0 0; text-transform: lowercase; + color: transparent; border: 0; background: url(../../../../misc/icons/787878/ex.svg) right 0 no-repeat; - font-size: 0; - line-height: 17px; + font-weight: normal; + line-height: 16px; } [dir="rtl"] .form-type-managed-file .remove-button { right: auto; @@ -109,6 +74,45 @@ left: 25px; } +/** + * Multi uploads table. + */ +.form-type-managed-file table { + width: 100%; + margin: 10px 0; +} + +.form-type-managed-file table tr td { + vertical-align: top; +} + +.form-type-managed-file table tr td:first-child { + display: flex; +} + +.form-type-managed-file table tr.draggable td:first-child a.tabledrag-handle { + flex: 0 0 40px; +} + +.form-type-managed-file table tr th:last-child, +.form-type-managed-file table tr td:last-child { + position: relative; + text-align: right; + white-space: nowrap; +} + +.form-type-managed-file table tr th:last-child { + font-size: 0; +} + +.form-type-managed-file table .image-widget .image-preview { + align-items: flex-start; +} + +.form-type-managed-file table .remove-button { + position: static; +} + /** * Stop filenames from breaking out of their container. */ @@ -123,14 +127,3 @@ width: 100%; max-width: 500px; } - -/** - * Default image field. - */ -#edit-settings-default-image .form-managed-file-wrapper.dropzone-enabled.has-file { - min-height: 100px; -} -#edit-settings-default-image .form-managed-file-wrapper.dropzone-enabled.has-file .description { - margin-left: 100px; - padding: 0 1em 1em; -} diff --git a/core/themes/seven/js/dropzone.es6.js b/core/themes/seven/js/dropzone.es6.js index 65ad43ebdf..ccf36a590a 100644 --- a/core/themes/seven/js/dropzone.es6.js +++ b/core/themes/seven/js/dropzone.es6.js @@ -11,14 +11,14 @@ attach(context) { // Add 'dropzone-enabled' class to managed file fields. $(context) - .find('.form-managed-file-wrapper') + .find('.js-form-managed-file-wrapper') .addClass('dropzone-enabled') .each(function() { // Move the image description to allow easier theming. if ($(this).hasClass('has-file')) { $(this) - .find('> .description') - .appendTo($('.image-widget-data', this)); + .find('> .js-description') + .appendTo($('.js-image-widget-data', this)); } }); @@ -27,7 +27,7 @@ .find('.js-form-file') .once('managed-file-dropzone') .each(function() { - const $wrapper = $(this).parents('.form-managed-file-wrapper'); + const $wrapper = $(this).parents('.js-form-managed-file-wrapper'); // Create extra button and add to wrapper. let buttonText = 'Add file'; @@ -35,14 +35,14 @@ buttonText = 'Add files'; } const $button = $( - `` + ``, ); $button.insertAfter($wrapper.find('.form-managed-file')); // Create dropzone HTML. const $dropzone = $(`
-
-
+
+
`); @@ -50,7 +50,7 @@ // dropzone. $dropzone .insertBefore($wrapper) - .find('.dropzone-no-trigger') + .find('.dropzone__no-trigger') .append($wrapper); // Attach listeners for drag/drop events. @@ -58,13 +58,13 @@ .on('dragover mouseenter', e => { $(e.currentTarget) .closest('.dropzone') - .find('.dropzone-trigger') + .find('.dropzone__trigger') .addClass('is-hovering'); }) .on('dragleave mouseleave', e => { $(e.currentTarget) .closest('.dropzone') - .find('.dropzone-trigger') + .find('.dropzone__trigger') .removeClass('is-hovering'); }); }); @@ -75,7 +75,7 @@ const element = $(instance.element); return ( element.length > 0 && - element.hasClass('upload-button') && + element.hasClass('js-upload-button') && element.once('magic').length > 0 ); } @@ -105,7 +105,7 @@ $element.trigger('beforeSend'); $element .closest('.dropzone') - .find('.dropzone-trigger') + .find('.dropzone__trigger') .addClass('is-hidden'); }; }); diff --git a/core/themes/seven/js/dropzone.js b/core/themes/seven/js/dropzone.js index b09a73d191..d22379fe41 100644 --- a/core/themes/seven/js/dropzone.js +++ b/core/themes/seven/js/dropzone.js @@ -8,14 +8,14 @@ (function ($, Drupal, drupalSettings) { Drupal.behaviors.dropzone = { attach: function attach(context) { - $(context).find('.form-managed-file-wrapper').addClass('dropzone-enabled').each(function () { + $(context).find('.js-form-managed-file-wrapper').addClass('dropzone-enabled').each(function () { if ($(this).hasClass('has-file')) { - $(this).find('> .description').appendTo($('.image-widget-data', this)); + $(this).find('> .js-description').appendTo($('.js-image-widget-data', this)); } }); $(context).find('.js-form-file').once('managed-file-dropzone').each(function () { - var $wrapper = $(this).parents('.form-managed-file-wrapper'); + var $wrapper = $(this).parents('.js-form-managed-file-wrapper'); var buttonText = 'Add file'; if (this.hasAttribute('multiple')) { @@ -24,21 +24,21 @@ var $button = $(''); $button.insertAfter($wrapper.find('.form-managed-file')); - var $dropzone = $('
\n
\n
\n
\n
'); + var $dropzone = $('
\n
\n
\n
\n
'); - $dropzone.insertBefore($wrapper).find('.dropzone-no-trigger').append($wrapper); + $dropzone.insertBefore($wrapper).find('.dropzone__no-trigger').append($wrapper); $(this).on('dragover mouseenter', function (e) { - $(e.currentTarget).closest('.dropzone').find('.dropzone-trigger').addClass('is-hovering'); + $(e.currentTarget).closest('.dropzone').find('.dropzone__trigger').addClass('is-hovering'); }).on('dragleave mouseleave', function (e) { - $(e.currentTarget).closest('.dropzone').find('.dropzone-trigger').removeClass('is-hovering'); + $(e.currentTarget).closest('.dropzone').find('.dropzone__trigger').removeClass('is-hovering'); }); }); Drupal.ajax.instances.filter(function (instance) { if (instance && instance.element) { var element = $(instance.element); - return element.length > 0 && element.hasClass('upload-button') && element.once('magic').length > 0; + return element.length > 0 && element.hasClass('js-upload-button') && element.once('magic').length > 0; } return null; }).forEach(function (instance) { @@ -54,7 +54,7 @@ instance.beforeSend = function (xmlhttprequest, options) { beforeSend.call(this, xmlhttprequest, options); $element.trigger('beforeSend'); - $element.closest('.dropzone').find('.dropzone-trigger').addClass('is-hidden'); + $element.closest('.dropzone').find('.dropzone__trigger').addClass('is-hidden'); }; }); 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 50f6c84d8b..c3306bf1e7 100644 --- a/core/themes/seven/templates/form-element--managed-file.html.twig +++ b/core/themes/seven/templates/form-element--managed-file.html.twig @@ -60,6 +60,7 @@ {% set description_classes = [ 'description', + 'js-description', description_display == 'invisible' ? 'visually-hidden', ] %} @@ -80,7 +81,7 @@ {{ errors }}
{% endif %} -
+
{{ children }} {% if description_display in ['after', 'invisible'] and description.content %} diff --git a/core/themes/seven/templates/image-widget.html.twig b/core/themes/seven/templates/image-widget.html.twig index a7cf3ad48a..fe72e453ca 100644 --- a/core/themes/seven/templates/image-widget.html.twig +++ b/core/themes/seven/templates/image-widget.html.twig @@ -8,5 +8,14 @@ * @see template_preprocess_image_widget() */ #} -{% include '@classy/content-edit/image-widget.html.twig' %} -{{ attach_library('classy/image-widget') }} + + {% if data.preview %} +
+ {{ data.preview }} +
+ {% endif %} +
+ {# Render widget data without the image preview that was output already. #} + {{ data|without('preview') }} +
+