diff --git a/core/misc/icons/bebebe/dropzone-new.svg b/core/misc/icons/bebebe/dropzone-new.svg index b3b8e494af..49d80ff123 100644 --- a/core/misc/icons/bebebe/dropzone-new.svg +++ b/core/misc/icons/bebebe/dropzone-new.svg @@ -1,13 +1 @@ - - - - - - - - - - - - - + diff --git a/core/themes/seven/css/components/dropzone.css b/core/themes/seven/css/components/dropzone.css index e781da13fc..140e3ac156 100644 --- a/core/themes/seven/css/components/dropzone.css +++ b/core/themes/seven/css/components/dropzone.css @@ -16,7 +16,7 @@ .dropzone__trigger { flex: 0 0 100px; min-height: 100px; - border-right: 1px solid #bfbfbf; + border-right: 1px solid #bfbfbf; /* LTR */ background: url("../../../../misc/icons/bebebe/dropzone-new.svg") 0 center no-repeat; } [dir="rtl"] .dropzone__trigger { @@ -40,7 +40,7 @@ .dropzone__no-trigger .managed-file-upload { position: absolute; top: 0; - left: 0; + left: 0; /* LTR */ display: inline-block; width: 100px; height: 100%; @@ -58,10 +58,15 @@ } .dropzone__no-trigger .js-dropzone-add-button:before { - margin-left: -0.2em; + margin-left: -0.2em; /* LTR */ + margin-right: 0.2em; /* LTR */ content: "+"; font-weight: 900; } +[dir="rtl"] .dropzone__no-trigger .js-dropzone-add-button:before { + margin-left: 0.2em; + margin-right: -0.2em; +} .dropzone__no-trigger .description { display: table-cell; @@ -115,7 +120,7 @@ .dropzone .upload-button + .ajax-progress { position: absolute; top: 50%; - left: 50px; + left: 50px; /* LTR */ margin: -10px -10px; } [dir="rtl"] .dropzone .upload-button + .ajax-progress { @@ -142,13 +147,13 @@ .form-managed-file-wrapper--dropzone.has-file:before { position: absolute; top: 0; - left: 0; + left: 0; /* LTR */ display: block; width: 100px; height: 100%; min-height: 45px; content: ""; - border-right: 1px solid #bfbfbf; + border-right: 1px solid #bfbfbf; /* LTR */ background: url("../../../../misc/icons/bebebe/dropzone-new.svg") -200px center no-repeat; } [dir="rtl"] .form-managed-file-wrapper--dropzone.has-file:before { @@ -164,7 +169,7 @@ .form-managed-file-wrapper--dropzone.has-file > .form-managed-file, .form-managed-file-wrapper--dropzone.has-file > .description { - margin-left: 100px; + margin-left: 100px; /* LTR */ padding: 1em; } [dir="rtl"] .form-managed-file-wrapper--dropzone.has-file > .form-managed-file, @@ -178,7 +183,7 @@ } .form-managed-file-wrapper--dropzone.has-file > .form-managed-file.image-widget { - margin-left: 0; + margin-left: 0; /* LTR */ padding: 0; } [dir="rtl"] .form-managed-file-wrapper--dropzone.has-file > .form-managed-file.image-widget { @@ -209,7 +214,7 @@ } .form-managed-file-items .form-checkbox { - margin-right: 5px; + margin-right: 5px; /* LTR */ } [dir="rtl"] .form-managed-file-items .form-checkbox { margin-right: 0; diff --git a/core/themes/seven/css/components/managed-file.css b/core/themes/seven/css/components/managed-file.css index 458880c682..6eca6fd67f 100644 --- a/core/themes/seven/css/components/managed-file.css +++ b/core/themes/seven/css/components/managed-file.css @@ -17,7 +17,7 @@ .image-preview { width: 80px; - padding-right: 10px; + padding-right: 10px; /* LTR */ vertical-align: middle; } [dir="rtl"] .image-preview { @@ -52,14 +52,14 @@ .form-type-managed-file .remove-button { position: absolute; top: 15px; - right: 10px; + right: 10px; /* LTR */ width: auto; margin: 0; padding: 0 20px 0 0; text-transform: lowercase; color: transparent; border: 0; - background: transparent url(../../../../misc/icons/787878/ex.svg) right 0 no-repeat; + background: transparent url(../../../../misc/icons/787878/ex.svg) right 0 no-repeat; /* LTR */ box-shadow: none; font-weight: normal; line-height: 16px; @@ -78,7 +78,7 @@ .form-type-managed-file .remove-button:hover { color: #e00; border: 0; - background: url(../../../../misc/icons/ee0000/ex.svg) right 0 no-repeat; + background: url(../../../../misc/icons/ee0000/ex.svg) right 0 no-repeat; /* LTR */ box-shadow: none; } [dir="rtl"] .form-type-managed-file .remove-button:hover { @@ -91,7 +91,7 @@ .form-type-managed-file .remove-button + .ajax-progress { position: absolute; top: 8px; - right: 9px; + right: 9px; /* LTR */ padding: 2px; background: #fcfcfa; } diff --git a/core/themes/seven/js/dropzone.es6.js b/core/themes/seven/js/dropzone.es6.js index 48b663530d..de827529bf 100644 --- a/core/themes/seven/js/dropzone.es6.js +++ b/core/themes/seven/js/dropzone.es6.js @@ -91,16 +91,6 @@ }); }); - // Move error messages outside the dropzone element. - const validateExtension = Drupal.file.validateExtension; - Drupal.file.validateExtension = function(event) { - validateExtension.bind(this)(event); - $(this) - .closest('div.js-form-managed-file') - .find('.file-upload-js-error') - .insertBefore($(this).closest('.js-form-item')); - }; - Drupal.ajax.instances .filter(instance => { if (instance && instance.element) { @@ -162,4 +152,16 @@ } }, }; + + // Override default file extension validation to move error messages + // outside the dropzone element. + const validateExtension = Drupal.file.validateExtension; + Drupal.file.validateExtension = function(event) { + validateExtension.bind(this)(event); + $(this) + .closest('div.js-form-managed-file') + .find('.file-upload-js-error') + .insertBefore($(this).closest('.js-form-item')); + }; + })(jQuery, Drupal, drupalSettings); diff --git a/core/themes/seven/js/dropzone.js b/core/themes/seven/js/dropzone.js index a411be5845..e07f705581 100644 --- a/core/themes/seven/js/dropzone.js +++ b/core/themes/seven/js/dropzone.js @@ -49,12 +49,6 @@ }); }); - var validateExtension = Drupal.file.validateExtension; - Drupal.file.validateExtension = function (event) { - validateExtension.bind(this)(event); - $(this).closest('div.js-form-managed-file').find('.file-upload-js-error').insertBefore($(this).closest('.js-form-item')); - }; - Drupal.ajax.instances.filter(function (instance) { if (instance && instance.element) { var element = $(instance.element); @@ -93,4 +87,10 @@ } } }; + + var validateExtension = Drupal.file.validateExtension; + Drupal.file.validateExtension = function (event) { + validateExtension.bind(this)(event); + $(this).closest('div.js-form-managed-file').find('.file-upload-js-error').insertBefore($(this).closest('.js-form-item')); + }; })(jQuery, Drupal, drupalSettings); \ No newline at end of file diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml index 4bbd8cc5a6..de83f52965 100644 --- a/core/themes/seven/seven.libraries.yml +++ b/core/themes/seven/seven.libraries.yml @@ -53,6 +53,7 @@ dropzone: dependencies: - core/drupal.ajax - core/drupal.progress + - file/drupal.file node-form: version: VERSION