Issue #3265140 by Spokje, bnjmnm, lauriii, mstrelan, dww, Wim Leers, xjm, murilohp, daffie: Move QuickEditImageController from image to quickedit

core/modules/image/image.libraries.yml

@@ -3,19 +3,3 @@ admin:
   css:
     theme:
       css/image.admin.css: {}
-
-quickedit.inPlaceEditor.image:
-  version: VERSION
-  js:
-    js/editors/image.js: {}
-    js/theme.js: {}
-  css:
-    component:
-      css/editors/image.css: {}
-    theme:
-      css/editors/image.theme.css: {}
-  dependencies:
-    - core/jquery
-    - core/drupal
-    - core/internal.underscore
-    - quickedit/quickedit

core/modules/image/image.routing.yml

@@ -71,29 +71,3 @@ image.effect_edit_form:
 
 route_callbacks:
   - '\Drupal\image\Routing\ImageStyleRoutes::routes'
-
-image.upload:
-  path: '/quickedit/image/upload/{entity_type}/{entity}/{field_name}/{langcode}/{view_mode_id}'
-  defaults:
-    _controller: '\Drupal\image\Controller\QuickEditImageController::upload'
-  options:
-    parameters:
-      entity:
-        type: entity:{entity_type}
-  requirements:
-    _permission: 'access in-place editing'
-    _access_quickedit_entity_field: 'TRUE'
-    _method: 'POST'
-
-image.info:
-  path: '/quickedit/image/info/{entity_type}/{entity}/{field_name}/{langcode}/{view_mode_id}'
-  defaults:
-    _controller: '\Drupal\image\Controller\QuickEditImageController::getInfo'
-  options:
-    parameters:
-      entity:
-        type: entity:{entity_type}
-  requirements:
-    _permission: 'access in-place editing'
-    _access_quickedit_entity_field: 'TRUE'
-    _method: 'GET'

core/modules/image/js/theme.es6.js

@@ -1,92 +0,0 @@
-/**
- * @file
- * Provides theme functions for image Quick Edit's client-side HTML.
- */
-
-(function (Drupal) {
-  /**
-   * Theme function for validation errors of the Image in-place editor.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.errors
-   *   Already escaped HTML representing error messages.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
-  Drupal.theme.quickeditImageErrors = function (settings) {
-    return `<div class="quickedit-image-errors">${settings.errors}</div>`;
-  };
-
-  /**
-   * Theme function for the dropzone element of the Image module's in-place
-   * editor.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {string} settings.state
-   *   State of the upload.
-   * @param {string} settings.text
-   *   Text to display inline with the dropzone element.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
-  Drupal.theme.quickeditImageDropzone = function (settings) {
-    return (
-      `<div class="quickedit-image-dropzone ${settings.state}">` +
-      '  <i class="quickedit-image-icon"></i>' +
-      `  <span class="quickedit-image-text">${settings.text}</span>` +
-      '</div>'
-    );
-  };
-
-  /**
-   * Theme function for the toolbar of the Image module's in-place editor.
-   *
-   * @param {object} settings
-   *   Settings object used to construct the markup.
-   * @param {bool} settings.alt_field
-   *   Whether or not the "Alt" field is enabled for this field.
-   * @param {bool} settings.alt_field_required
-   *   Whether or not the "Alt" field is required for this field.
-   * @param {string} settings.alt
-   *   The current value for the "Alt" field.
-   * @param {bool} settings.title_field
-   *   Whether or not the "Title" field is enabled for this field.
-   * @param {bool} settings.title_field_required
-   *   Whether or not the "Title" field is required for this field.
-   * @param {string} settings.title
-   *   The current value for the "Title" field.
-   *
-   * @return {string}
-   *   The corresponding HTML.
-   */
-  Drupal.theme.quickeditImageToolbar = function (settings) {
-    let html = '<form class="quickedit-image-field-info">';
-    if (settings.alt_field) {
-      html +=
-        `<div><label for="alt" class="${
-          settings.alt_field_required ? 'required' : ''
-        }">${Drupal.t('Alternative text')}</label>` +
-        `<input type="text" placeholder="${settings.alt}" value="${
-          settings.alt
-        }" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` +
-        '  </div>';
-    }
-    if (settings.title_field) {
-      html +=
-        `<div><label for="title" class="${
-          settings.title_field_required ? 'form-required' : ''
-        }">${Drupal.t('Title')}</label>` +
-        `<input type="text" placeholder="${settings.title}" value="${
-          settings.title
-        }" name="title" ${settings.title_field_required ? 'required' : ''}/>` +
-        '</div>';
-    }
-    html += '</form>';
-
-    return html;
-  };
-})(Drupal);

core/modules/image/js/theme.js

@@ -1,31 +0,0 @@
-/**
-* DO NOT EDIT THIS FILE.
-* See the following change record for more information,
-* https://www.drupal.org/node/2815083
-* @preserve
-**/
-
-(function (Drupal) {
-  Drupal.theme.quickeditImageErrors = function (settings) {
-    return `<div class="quickedit-image-errors">${settings.errors}</div>`;
-  };
-
-  Drupal.theme.quickeditImageDropzone = function (settings) {
-    return `<div class="quickedit-image-dropzone ${settings.state}">` + '  <i class="quickedit-image-icon"></i>' + `  <span class="quickedit-image-text">${settings.text}</span>` + '</div>';
-  };
-
-  Drupal.theme.quickeditImageToolbar = function (settings) {
-    let html = '<form class="quickedit-image-field-info">';
-
-    if (settings.alt_field) {
-      html += `<div><label for="alt" class="${settings.alt_field_required ? 'required' : ''}">${Drupal.t('Alternative text')}</label>` + `<input type="text" placeholder="${settings.alt}" value="${settings.alt}" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` + '  </div>';
-    }
-
-    if (settings.title_field) {
-      html += `<div><label for="title" class="${settings.title_field_required ? 'form-required' : ''}">${Drupal.t('Title')}</label>` + `<input type="text" placeholder="${settings.title}" value="${settings.title}" name="title" ${settings.title_field_required ? 'required' : ''}/>` + '</div>';
-    }
-
-    html += '</form>';
-    return html;
-  };
-})(Drupal);

core/modules/quickedit/css/editors/image.css

@@ -1,6 +1,6 @@
 /**
  * @file
- * Functional styles for the Image module's in-place editor.
+ * Functional styles for the Quick Edit image in-place editor.
  */
 
 /**

core/modules/quickedit/css/editors/image.theme.css

@@ -1,6 +1,6 @@
 /**
  * @file
- * Theme styles for the Image module's in-place editor.
+ * Theme styles for the Quick Edit image in-place editor.
  */
 
 .quickedit-image-dropzone {
@@ -22,11 +22,11 @@
 }
 
 .quickedit-image-dropzone.upload .quickedit-image-icon {
-  background-image: url("../../../../../modules/image/images/upload.svg");
+  background-image: url("../../../../../modules/quickedit/images/upload.svg");
 }
 
 .quickedit-image-dropzone.error .quickedit-image-icon {
-  background-image: url("../../../../../modules/image/images/error.svg");
+  background-image: url("../../../../../modules/quickedit/images/error.svg");
 }
 
 .quickedit-image-dropzone.loading .quickedit-image-icon {

core/modules/quickedit/images/error.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
+</svg>

core/modules/quickedit/images/upload.svg

@@ -0,0 +1,4 @@
+<svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 0h24v24H0z" fill="none"/>
+    <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
+</svg>

core/modules/quickedit/js/theme.es6.js

@@ -182,4 +182,89 @@
     html += '</div>';
     return html;
   };
+
+  /**
+   * Theme function for validation errors of the Image in-place editor.
+   *
+   * @param {object} settings
+   *   Settings object used to construct the markup.
+   * @param {string} settings.errors
+   *   Already escaped HTML representing error messages.
+   *
+   * @return {string}
+   *   The corresponding HTML.
+   */
+  Drupal.theme.quickeditImageErrors = function (settings) {
+    return `<div class="quickedit-image-errors">${settings.errors}</div>`;
+  };
+
+  /**
+   * Theme function for the dropzone element of the in-place editor.
+   *
+   * @param {object} settings
+   *   Settings object used to construct the markup.
+   * @param {string} settings.state
+   *   State of the upload.
+   * @param {string} settings.text
+   *   Text to display inline with the dropzone element.
+   *
+   * @return {string}
+   *   The corresponding HTML.
+   */
+  Drupal.theme.quickeditImageDropzone = function (settings) {
+    return (
+      `<div class="quickedit-image-dropzone ${settings.state}">` +
+      '  <i class="quickedit-image-icon"></i>' +
+      `  <span class="quickedit-image-text">${settings.text}</span>` +
+      '</div>'
+    );
+  };
+
+  /**
+   * Theme function for the toolbar of the Image module's in-place editor.
+   *
+   * @param {object} settings
+   *   Settings object used to construct the markup.
+   * @param {bool} settings.alt_field
+   *   Whether or not the "Alt" field is enabled for this field.
+   * @param {bool} settings.alt_field_required
+   *   Whether or not the "Alt" field is required for this field.
+   * @param {string} settings.alt
+   *   The current value for the "Alt" field.
+   * @param {bool} settings.title_field
+   *   Whether or not the "Title" field is enabled for this field.
+   * @param {bool} settings.title_field_required
+   *   Whether or not the "Title" field is required for this field.
+   * @param {string} settings.title
+   *   The current value for the "Title" field.
+   *
+   * @return {string}
+   *   The corresponding HTML.
+   */
+  Drupal.theme.quickeditImageToolbar = function (settings) {
+    let html = '<form class="quickedit-image-field-info">';
+    if (settings.alt_field) {
+      html +=
+        `<div><label for="alt" class="${
+          settings.alt_field_required ? 'required' : ''
+        }">${Drupal.t('Alternative text')}</label>` +
+        `<input type="text" placeholder="${settings.alt}" value="${
+          settings.alt
+        }" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` +
+        '  </div>';
+    }
+    if (settings.title_field) {
+      html +=
+        `<div><label for="title" class="${
+          settings.title_field_required ? 'form-required' : ''
+        }">${Drupal.t('Title')}</label>` +
+        `<input type="text" placeholder="${settings.title}" value="${
+          settings.title
+        }" name="title" ${settings.title_field_required ? 'required' : ''}/>` +
+        '</div>';
+    }
+    html += '</form>';
+
+    return html;
+  };
 })(jQuery, Drupal);

core/modules/quickedit/js/theme.js

@@ -87,4 +87,27 @@
     html += '</div>';
     return html;
   };
+
+  Drupal.theme.quickeditImageErrors = function (settings) {
+    return `<div class="quickedit-image-errors">${settings.errors}</div>`;
+  };
+
+  Drupal.theme.quickeditImageDropzone = function (settings) {
+    return `<div class="quickedit-image-dropzone ${settings.state}">` + '  <i class="quickedit-image-icon"></i>' + `  <span class="quickedit-image-text">${settings.text}</span>` + '</div>';
+  };
+
+  Drupal.theme.quickeditImageToolbar = function (settings) {
+    let html = '<form class="quickedit-image-field-info">';
+
+    if (settings.alt_field) {
+      html += `<div><label for="alt" class="${settings.alt_field_required ? 'required' : ''}">${Drupal.t('Alternative text')}</label>` + `<input type="text" placeholder="${settings.alt}" value="${settings.alt}" name="alt" ${settings.alt_field_required ? 'required' : ''}/>` + '  </div>';
+    }
+
+    if (settings.title_field) {
+      html += `<div><label for="title" class="${settings.title_field_required ? 'form-required' : ''}">${Drupal.t('Title')}</label>` + `<input type="text" placeholder="${settings.title}" value="${settings.title}" name="title" ${settings.title_field_required ? 'required' : ''}/>` + '</div>';
+    }
+
+    html += '</form>';
+    return html;
+  };
 })(jQuery, Drupal);

core/modules/quickedit/quickedit.libraries.yml

@@ -54,3 +54,18 @@ quickedit.inPlaceEditor.plainText:
     js/editors/plainTextEditor.js: {}
   dependencies:
     - quickedit/quickedit
+
+quickedit.inPlaceEditor.image:
+  version: VERSION
+  js:
+    js/editors/image.js: {}
+  css:
+    component:
+      css/editors/image.css: {}
+    theme:
+      css/editors/image.theme.css: {}
+  dependencies:
+    - core/jquery
+    - core/drupal
+    - core/underscore
+    - quickedit/quickedit

core/modules/quickedit/quickedit.routing.yml

@@ -35,3 +35,29 @@ quickedit.entity_save:
     parameters:
       entity:
         type: entity:{entity_type}
+
+quickedit.image_upload:
+  path: '/quickedit/image/upload/{entity_type}/{entity}/{field_name}/{langcode}/{view_mode_id}'
+  defaults:
+    _controller: '\Drupal\quickedit\Controller\QuickEditImageController::upload'
+  options:
+    parameters:
+      entity:
+        type: entity:{entity_type}
+  requirements:
+    _permission: 'access in-place editing'
+    _access_quickedit_entity_field: 'TRUE'
+    _method: 'POST'
+
+quickedit.image_info:
+  path: '/quickedit/image/info/{entity_type}/{entity}/{field_name}/{langcode}/{view_mode_id}'
+  defaults:
+    _controller: '\Drupal\quickedit\Controller\QuickEditImageController::getInfo'
+  options:
+    parameters:
+      entity:
+        type: entity:{entity_type}
+  requirements:
+    _permission: 'access in-place editing'
+    _access_quickedit_entity_field: 'TRUE'
+    _method: 'GET'

core/modules/quickedit/src/Controller/QuickEditImageController.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\image\Controller;
+namespace Drupal\quickedit\Controller;
 
 use Drupal\Core\Cache\CacheableJsonResponse;
 use Drupal\Core\Controller\ControllerBase;

core/modules/quickedit/src/Plugin/InPlaceEditor/Image.php

@@ -1,6 +1,6 @@
 <?php
 
-namespace Drupal\image\Plugin\InPlaceEditor;
+namespace Drupal\quickedit\Plugin\InPlaceEditor;
 
 use Drupal\Core\Field\FieldItemListInterface;
 use Drupal\quickedit\Plugin\InPlaceEditorBase;
@@ -31,7 +31,7 @@ class Image extends InPlaceEditorBase {
   public function getAttachments() {
     return [
       'library' => [
-        'image/quickedit.inPlaceEditor.image',
+        'quickedit/quickedit.inPlaceEditor.image',
       ],
     ];
   }

core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php

@@ -3,7 +3,7 @@
 namespace Drupal\Tests\quickedit\FunctionalJavascript;
 
 /**
- * @see \Drupal\image\Plugin\InPlaceEditor\Image
+ * @see \Drupal\quickedit\Plugin\InPlaceEditor\Image
  * @see \Drupal\Tests\quickedit\FunctionalJavascript\QuickEditJavascriptTestBase
  */
 trait QuickEditImageEditorTestTrait {

core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageTest.php

@@ -7,7 +7,7 @@ use Drupal\Tests\image\Kernel\ImageFieldCreationTrait;
 use Drupal\Tests\TestFileCreationTrait;
 
 /**
- * @coversDefaultClass \Drupal\image\Plugin\InPlaceEditor\Image
+ * @coversDefaultClass \Drupal\quickedit\Plugin\InPlaceEditor\Image
  * @group quickedit
  */
 class QuickEditImageTest extends QuickEditJavascriptTestBase {

core/themes/stable/css/quickedit/editors/editors/image.css

@@ -1,6 +1,6 @@
 /**
  * @file
- * Functional styles for the Image module's in-place editor.
+ * Functional styles for the Quick Edit image in-place editor.
  */
 
 /**

core/themes/stable/css/quickedit/editors/editors/image.theme.css

@@ -1,6 +1,6 @@
 /**
  * @file
- * Theme styles for the Image module's in-place editor.
+ * Theme styles for the Quick Edit image in-place editor.
  */
 
 .quickedit-image-dropzone {

core/themes/stable/css/quickedit/editors/image.css

@@ -0,0 +1,52 @@
+/**
+ * @file
+ * Functional styles for the QuickEdit module's in-place editor.
+ */
+
+/**
+ * A minimum width/height is required so that users can drag and drop files
+ * onto small images.
+ */
+.quickedit-image-element {
+  min-width: 200px;
+  min-height: 200px;
+}
+
+.quickedit-image-dropzone {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.quickedit-image-icon {
+  display: block;
+  width: 50px;
+  height: 50px;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.quickedit-image-field-info {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.quickedit-image-text {
+  display: block;
+}
+
+/**
+ * If we do not prevent pointer-events for child elements, our drag+drop events
+ * will not fire properly. This can lead to unintentional redirects if a file
+ * is dropped on a child element when a user intended to upload it.
+ */
+.quickedit-image-dropzone * {
+  pointer-events: none;
+}

core/themes/stable/css/quickedit/editors/image.theme.css

@@ -1,6 +1,6 @@
 /**
  * @file
- * Theme styles for the Image module's in-place editor.
+ * Theme styles for the QuickEdit module's in-place editor.
  */
 
 .quickedit-image-dropzone {
@@ -22,11 +22,11 @@
 }
 
 .quickedit-image-dropzone.upload .quickedit-image-icon {
-  background-image: url("../../images/upload.svg");
+  background-image: url("../../../images/image/upload.svg");
 }
 
 .quickedit-image-dropzone.error .quickedit-image-icon {
-  background-image: url("../../images/error.svg");
+  background-image: url("../../../images/image/error.svg");
 }
 
 .quickedit-image-dropzone.loading .quickedit-image-icon {

core/themes/stable/stable.info.yml

@@ -124,12 +124,6 @@ libraries-override:
     css:
       theme:
         css/image.admin.css: css/image/image.admin.css
-  image/quickedit.inPlaceEditor.image:
-    css:
-      component:
-        css/editors/image.css: css/image/editors/image.css
-      theme:
-        css/editors/image.theme.css: css/image/editors/image.theme.css
 
   language/drupal.language.admin:
     css:
@@ -194,6 +188,12 @@ libraries-override:
       theme:
         css/quickedit.theme.css: css/quickedit/quickedit.theme.css
         css/quickedit.icons.theme.css: css/quickedit/quickedit.icons.theme.css
+  quickedit/quickedit.inPlaceEditor.image:
+    css:
+      component:
+        css/editors/image.css: css/quickedit/editors/image.css
+      theme:
+        css/editors/image.theme.css: css/quickedit/editors/image.theme.css
 
   settings_tray/drupal.settings_tray:
     css:

core/themes/stable9/css/quickedit/editors/image.css

@@ -1,6 +1,6 @@
 /**
  * @file
- * Functional styles for the Image module's in-place editor.
+ * Functional styles for the Quick Edit image in-place editor.
  */
 
 /**

core/themes/stable9/css/quickedit/editors/image.theme.css

@@ -0,0 +1,100 @@
+/**
+ * @file
+ * Theme styles for the Quick Edit image in-place editor.
+ */
+
+.quickedit-image-dropzone {
+  transition: background 0.2s;
+  background: rgba(116, 183, 255, 0.8);
+}
+
+.quickedit-image-icon {
+  margin: 0 0 10px 0;
+  transition: margin 0.5s;
+}
+
+.quickedit-image-dropzone.hover {
+  background: rgba(116, 183, 255, 0.9);
+}
+
+.quickedit-image-dropzone.error {
+  background: rgba(255, 52, 27, 0.81);
+}
+
+.quickedit-image-dropzone.upload .quickedit-image-icon {
+  background-image: url("../../../../../modules/quickedit/images/upload.svg");
+}
+
+.quickedit-image-dropzone.error .quickedit-image-icon {
+  background-image: url("../../../../../modules/quickedit/images/error.svg");
+}
+
+.quickedit-image-dropzone.loading .quickedit-image-icon {
+  margin: -10px 0 20px 0;
+}
+
+.quickedit-image-dropzone.loading .quickedit-image-icon::after {
+  display: block;
+  width: 60px;
+  height: 60px;
+  margin-top: -5px;
+  margin-left: -10px;
+  content: "";
+  animation-name: quickedit-image-spin;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  border-width: 5px;
+  border-style: solid;
+  border-color: white transparent transparent transparent;
+  border-radius: 35px;
+}
+
+@keyframes quickedit-image-spin {
+  0% { transform: rotate(0deg); }
+  50% { transform: rotate(180deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.quickedit-image-text {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-align: center;
+  color: white;
+  font-family: "Droid sans", "Lucida Grande", sans-serif;
+  font-size: 16px;
+}
+
+.quickedit-image-field-info {
+  padding: 5px;
+  border-top: 1px solid #c5c5c5;
+  background: rgba(0, 0, 0, 0.05);
+}
+
+.quickedit-image-field-info div {
+  margin-right: 10px; /* LTR */
+}
+
+.quickedit-image-field-info div:last-child {
+  margin-right: 0; /* LTR */
+}
+
+[dir="rtl"] .quickedit-image-field-info div {
+  margin-right: 0;
+  margin-left: 10px;
+}
+
+[dir="rtl"] .quickedit-image-field-info div:last-child {
+  margin-left: 0;
+}
+
+.quickedit-image-errors .messages__wrapper {
+  margin: 0;
+  padding: 0;
+}
+
+.quickedit-image-errors .messages--error {
+  box-shadow: none;
+}

core/themes/stable9/stable9.info.yml

@@ -111,12 +111,6 @@ libraries-override:
     css:
       theme:
         css/image.admin.css: css/image/image.admin.css
-  image/quickedit.inPlaceEditor.image:
-    css:
-      component:
-        css/editors/image.css: css/image/editors/image.css
-      theme:
-        css/editors/image.theme.css: css/image/editors/image.theme.css
 
   language/drupal.language.admin:
     css:
@@ -214,6 +208,12 @@ libraries-override:
       theme:
         css/quickedit.theme.css: css/quickedit/quickedit.theme.css
         css/quickedit.icons.theme.css: css/quickedit/quickedit.icons.theme.css
+  quickedit/quickedit.inPlaceEditor.image:
+    css:
+      component:
+        css/editors/image.css: css/quickedit/editors/image.css
+      theme:
+        css/editors/image.theme.css: css/quickedit/editors/image.theme.css
 
   settings_tray/drupal.settings_tray:
     css: