diff --git a/core/modules/image/image.libraries.yml b/core/modules/image/image.libraries.yml
index 14ea11623dfcc1a62660e8905e4a031dce44cdf5..e9061a42e424560f6bfb455cb4fd1ea85b6101af 100644
--- a/core/modules/image/image.libraries.yml
+++ b/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
diff --git a/core/modules/image/image.routing.yml b/core/modules/image/image.routing.yml
index 4a0cb88a833a7b06faf225c61d550adb510a94dc..ffeed861a2a95416e2d9a1871ed36f5ec337482b 100644
--- a/core/modules/image/image.routing.yml
+++ b/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'
diff --git a/core/modules/image/js/theme.es6.js b/core/modules/image/js/theme.es6.js
deleted file mode 100644
index f21df32130913bea3830e8d60b8525dbd79c37da..0000000000000000000000000000000000000000
--- a/core/modules/image/js/theme.es6.js
+++ /dev/null
@@ -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);
diff --git a/core/modules/image/js/theme.js b/core/modules/image/js/theme.js
deleted file mode 100644
index 6ae707b0ae5e73197c10445134f820a1749af62f..0000000000000000000000000000000000000000
--- a/core/modules/image/js/theme.js
+++ /dev/null
@@ -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);
\ No newline at end of file
diff --git a/core/modules/image/css/editors/image.css b/core/modules/quickedit/css/editors/image.css
similarity index 93%
rename from core/modules/image/css/editors/image.css
rename to core/modules/quickedit/css/editors/image.css
index f9733d283486e3a49530c1d29785b64fc64fad00..b6218c93f955a94138196ea437f6a2737d120c0a 100644
--- a/core/modules/image/css/editors/image.css
+++ b/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.
*/
/**
diff --git a/core/themes/stable9/css/image/editors/image.theme.css b/core/modules/quickedit/css/editors/image.theme.css
similarity index 90%
rename from core/themes/stable9/css/image/editors/image.theme.css
rename to core/modules/quickedit/css/editors/image.theme.css
index 25a21ba446e6a5ef4177bf244028ca1d7fad6c97..8514266ede4ee66c00544700037fc69512898d03 100644
--- a/core/themes/stable9/css/image/editors/image.theme.css
+++ b/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 {
diff --git a/core/modules/quickedit/images/error.svg b/core/modules/quickedit/images/error.svg
new file mode 100644
index 0000000000000000000000000000000000000000..1932ea402c5b5a6600fe4a96953c255251e923a3
--- /dev/null
+++ b/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>
diff --git a/core/modules/quickedit/images/upload.svg b/core/modules/quickedit/images/upload.svg
new file mode 100644
index 0000000000000000000000000000000000000000..168bc43e6afba6aa031a4d20663871d740eda7de
--- /dev/null
+++ b/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>
diff --git a/core/modules/image/js/editors/image.es6.js b/core/modules/quickedit/js/editors/image.es6.js
similarity index 100%
rename from core/modules/image/js/editors/image.es6.js
rename to core/modules/quickedit/js/editors/image.es6.js
diff --git a/core/modules/image/js/editors/image.js b/core/modules/quickedit/js/editors/image.js
similarity index 100%
rename from core/modules/image/js/editors/image.js
rename to core/modules/quickedit/js/editors/image.js
diff --git a/core/modules/quickedit/js/theme.es6.js b/core/modules/quickedit/js/theme.es6.js
index dd3eb3ac36167be51a41c5db43432519e6e9e97f..fd0bba7a0fd252db439e9f888196e3e8564645d8 100644
--- a/core/modules/quickedit/js/theme.es6.js
+++ b/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);
diff --git a/core/modules/quickedit/js/theme.js b/core/modules/quickedit/js/theme.js
index 0545c680f82f220ee866c255a4f80ea011e61b82..81e43d961ff6b5f7fe23a74b30c9851c5a3edd38 100644
--- a/core/modules/quickedit/js/theme.js
+++ b/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);
\ No newline at end of file
diff --git a/core/modules/quickedit/quickedit.libraries.yml b/core/modules/quickedit/quickedit.libraries.yml
index c7211e27dd3febdd5f0742d4b7977358efef01a3..af5bcb2d7a778e30d74f13abc43fd1229c7aa011 100644
--- a/core/modules/quickedit/quickedit.libraries.yml
+++ b/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
diff --git a/core/modules/quickedit/quickedit.routing.yml b/core/modules/quickedit/quickedit.routing.yml
index af22056cb785a05b6e4663c08f1c984bb7091268..b63b8a2f13161adc207168bebea89f10c1867028 100644
--- a/core/modules/quickedit/quickedit.routing.yml
+++ b/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'
diff --git a/core/modules/image/src/Controller/QuickEditImageController.php b/core/modules/quickedit/src/Controller/QuickEditImageController.php
similarity index 99%
rename from core/modules/image/src/Controller/QuickEditImageController.php
rename to core/modules/quickedit/src/Controller/QuickEditImageController.php
index b3e24c17992ebae9e3c4b0057d6c6f1217330f4a..21c37206c494e8c873a098e55669636cacabb657 100644
--- a/core/modules/image/src/Controller/QuickEditImageController.php
+++ b/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;
diff --git a/core/modules/image/src/Plugin/InPlaceEditor/Image.php b/core/modules/quickedit/src/Plugin/InPlaceEditor/Image.php
similarity index 87%
rename from core/modules/image/src/Plugin/InPlaceEditor/Image.php
rename to core/modules/quickedit/src/Plugin/InPlaceEditor/Image.php
index 9cf9cd24859f885d2bd8dd92d703e9448da201c6..b03007f41ac4cebde23c2837d4ccccb216c7c7b1 100644
--- a/core/modules/image/src/Plugin/InPlaceEditor/Image.php
+++ b/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 @@ public function isCompatible(FieldItemListInterface $items) {
public function getAttachments() {
return [
'library' => [
- 'image/quickedit.inPlaceEditor.image',
+ 'quickedit/quickedit.inPlaceEditor.image',
],
];
}
diff --git a/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php b/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php
index f647d88b28dfd6c77e0ba6e1904c6f511a923558..fd224e4e1d58bdebb203617f6691f22ca248943e 100644
--- a/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageEditorTestTrait.php
+++ b/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 {
diff --git a/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageTest.php b/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageTest.php
index 7ed590965248fef7b4ea11c3edb98f518fb857ad..8db8293b9afeecf7755cbdc21ece4b28511130cb 100644
--- a/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageTest.php
+++ b/core/modules/quickedit/tests/src/FunctionalJavascript/QuickEditImageTest.php
@@ -7,7 +7,7 @@
use Drupal\Tests\TestFileCreationTrait;
/**
- * @coversDefaultClass \Drupal\image\Plugin\InPlaceEditor\Image
+ * @coversDefaultClass \Drupal\quickedit\Plugin\InPlaceEditor\Image
* @group quickedit
*/
class QuickEditImageTest extends QuickEditJavascriptTestBase {
diff --git a/core/themes/stable/css/image/editors/image.css b/core/themes/stable/css/quickedit/editors/editors/image.css
similarity index 93%
rename from core/themes/stable/css/image/editors/image.css
rename to core/themes/stable/css/quickedit/editors/editors/image.css
index f9733d283486e3a49530c1d29785b64fc64fad00..b6218c93f955a94138196ea437f6a2737d120c0a 100644
--- a/core/themes/stable/css/image/editors/image.css
+++ b/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.
*/
/**
diff --git a/core/themes/stable/css/image/editors/image.theme.css b/core/themes/stable/css/quickedit/editors/editors/image.theme.css
similarity index 97%
rename from core/themes/stable/css/image/editors/image.theme.css
rename to core/themes/stable/css/quickedit/editors/editors/image.theme.css
index eab3b947bd4f5c9e47e13f9fe4040cf73fb5ac51..0257a9019cd1a6b3b21d6eab45615fde56384502 100644
--- a/core/themes/stable/css/image/editors/image.theme.css
+++ b/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 {
diff --git a/core/themes/stable/css/quickedit/editors/image.css b/core/themes/stable/css/quickedit/editors/image.css
new file mode 100644
index 0000000000000000000000000000000000000000..9265f309dbda9ad00ab5b9c0ef4c275042d07605
--- /dev/null
+++ b/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;
+}
diff --git a/core/modules/image/css/editors/image.theme.css b/core/themes/stable/css/quickedit/editors/image.theme.css
similarity index 91%
rename from core/modules/image/css/editors/image.theme.css
rename to core/themes/stable/css/quickedit/editors/image.theme.css
index 85c5f20ba364aa4ee3ccfd914f34ad2000edfba5..7fd07346e8013cfc394eb14390393a6e72515ad8 100644
--- a/core/modules/image/css/editors/image.theme.css
+++ b/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 {
diff --git a/core/themes/stable/stable.info.yml b/core/themes/stable/stable.info.yml
index d75e28ba5cbb23fa6da0cff2001e10a26ce199f0..13f28498ce42c5266aa1e715802c0fff9289e88a 100644
--- a/core/themes/stable/stable.info.yml
+++ b/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:
diff --git a/core/themes/stable9/css/image/editors/image.css b/core/themes/stable9/css/quickedit/editors/image.css
similarity index 93%
rename from core/themes/stable9/css/image/editors/image.css
rename to core/themes/stable9/css/quickedit/editors/image.css
index f9733d283486e3a49530c1d29785b64fc64fad00..b6218c93f955a94138196ea437f6a2737d120c0a 100644
--- a/core/themes/stable9/css/image/editors/image.css
+++ b/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.
*/
/**
diff --git a/core/themes/stable9/css/quickedit/editors/image.theme.css b/core/themes/stable9/css/quickedit/editors/image.theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..8514266ede4ee66c00544700037fc69512898d03
--- /dev/null
+++ b/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;
+}
diff --git a/core/themes/stable9/stable9.info.yml b/core/themes/stable9/stable9.info.yml
index 9dc52ab3af880440ae8f392ff68b7f4ca6767787..32595170a1590505154ab8f9281ba1ff7ca1547f 100644
--- a/core/themes/stable9/stable9.info.yml
+++ b/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: