From 810f348168f6990e94be5598328224e32aae2e4b Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Fri, 30 Aug 2013 18:09:29 +0200 Subject: [PATCH 01/10] Fix 'doubled' fields: instead of an outline around the field itself *and* around the form in-place editor "pop-up", only keep it around the currently interacted element. --- core/modules/edit/css/edit.theme.css | 3 +++ core/modules/edit/js/editors/directEditor.js | 2 +- core/modules/edit/js/editors/formEditor.js | 7 +++++++ core/modules/edit/js/views/EditorDecorationView.js | 11 +++++++++++ core/modules/edit/js/views/EditorView.js | 2 +- core/modules/editor/js/editor.formattedTextEditor.js | 2 +- 6 files changed, 24 insertions(+), 3 deletions(-) diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index febb435..61a99c3 100644 --- a/core/modules/edit/css/edit.theme.css +++ b/core/modules/edit/css/edit.theme.css @@ -33,6 +33,9 @@ .edit-form.edit-validation-error { box-shadow: 0 0 1px 2px red, 0 0 3px 5px rgba(153, 153, 153, .5); } +.edit-editing.edit-editor-is-popup { + box-shadow: none; +} .edit-form .form-item .error { border: 1px solid #eea0a0; } diff --git a/core/modules/edit/js/editors/directEditor.js b/core/modules/edit/js/editors/directEditor.js index 5fed240..d87e5f0 100644 --- a/core/modules/edit/js/editors/directEditor.js +++ b/core/modules/edit/js/editors/directEditor.js @@ -92,7 +92,7 @@ Drupal.edit.editors.direct = Drupal.edit.EditorView.extend({ * {@inheritdoc} */ getEditUISettings: function () { - return { padding: true, unifiedToolbar: false, fullWidthToolbar: false }; + return { padding: true, unifiedToolbar: false, fullWidthToolbar: false, popup: false }; }, /** diff --git a/core/modules/edit/js/editors/formEditor.js b/core/modules/edit/js/editors/formEditor.js index 27069b8..48827e1 100644 --- a/core/modules/edit/js/editors/formEditor.js +++ b/core/modules/edit/js/editors/formEditor.js @@ -52,6 +52,13 @@ Drupal.edit.editors.form = Drupal.edit.EditorView.extend({ }, /** + * {@inheritdoc} + */ + getEditUISettings: function () { + return { padding: true, unifiedToolbar: true, fullWidthToolbar: true, popup: true }; + }, + + /** * Loads the form for this field, displays it on top of the actual field. */ loadForm: function () { diff --git a/core/modules/edit/js/views/EditorDecorationView.js b/core/modules/edit/js/views/EditorDecorationView.js index 17e5ee2..1e76ad3 100644 --- a/core/modules/edit/js/views/EditorDecorationView.js +++ b/core/modules/edit/js/views/EditorDecorationView.js @@ -173,6 +173,12 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({ */ prepareEdit: function () { this.$el.addClass('edit-editing'); + + // Allow the field to be styled differently while editing in a pop-up + // in-place editor. + if (this.editorView.getEditUISettings().popup) { + this.$el.addClass('edit-editor-is-popup'); + } }, /** @@ -184,6 +190,11 @@ Drupal.edit.EditorDecorationView = Backbone.View.extend({ stopEdit: function () { this.$el.removeClass('edit-highlighted edit-editing'); + // Done editing in a pop-up in-place editor; remove the class. + if (this.editorView.getEditUISettings().popup) { + this.$el.removeClass('edit-editor-is-popup'); + } + // Make the other editors show up again. $('.edit-candidate').addClass('edit-editable'); }, diff --git a/core/modules/edit/js/views/EditorView.js b/core/modules/edit/js/views/EditorView.js index d8d4c18..af9836b 100644 --- a/core/modules/edit/js/views/EditorView.js +++ b/core/modules/edit/js/views/EditorView.js @@ -77,7 +77,7 @@ Drupal.edit.EditorView = Backbone.View.extend({ * just long enough to accomodate a label. */ getEditUISettings: function () { - return { padding: false, unifiedToolbar: false, fullWidthToolbar: false }; + return { padding: false, unifiedToolbar: false, fullWidthToolbar: false, popup: false }; }, /** diff --git a/core/modules/editor/js/editor.formattedTextEditor.js b/core/modules/editor/js/editor.formattedTextEditor.js index 32fa0e0..9756349 100644 --- a/core/modules/editor/js/editor.formattedTextEditor.js +++ b/core/modules/editor/js/editor.formattedTextEditor.js @@ -138,7 +138,7 @@ Drupal.edit.editors.editor = Drupal.edit.EditorView.extend({ * {@inheritdoc} */ getEditUISettings: function () { - return { padding: true, unifiedToolbar: true, fullWidthToolbar: true }; + return { padding: true, unifiedToolbar: true, fullWidthToolbar: true, popup: false }; }, /** -- 1.7.10.2 From e017a72328a7ef72ee31579fd8a23729295a890a Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 3 Sep 2013 13:30:41 +0200 Subject: [PATCH 02/10] Replace the close icon with a Libricon SVG equivalent. --- core/misc/icons/000000/ex.svg | 1 + core/misc/icons/787878/ex.svg | 1 + core/misc/icons/bebebe/ex.svg | 1 + core/misc/icons/ffffff/ex.svg | 1 + core/modules/edit/css/edit.icons.css | 6 ++---- core/modules/edit/css/edit.theme.css | 4 ---- core/modules/edit/images/icon-close.png | 4 ---- 7 files changed, 6 insertions(+), 12 deletions(-) create mode 100644 core/misc/icons/000000/ex.svg create mode 100644 core/misc/icons/787878/ex.svg create mode 100644 core/misc/icons/bebebe/ex.svg create mode 100644 core/misc/icons/ffffff/ex.svg delete mode 100644 core/modules/edit/images/icon-close.png diff --git a/core/misc/icons/000000/ex.svg b/core/misc/icons/000000/ex.svg new file mode 100644 index 0000000..7b653ff --- /dev/null +++ b/core/misc/icons/000000/ex.svg @@ -0,0 +1 @@ + diff --git a/core/misc/icons/787878/ex.svg b/core/misc/icons/787878/ex.svg new file mode 100644 index 0000000..ca0d409 --- /dev/null +++ b/core/misc/icons/787878/ex.svg @@ -0,0 +1 @@ + diff --git a/core/misc/icons/bebebe/ex.svg b/core/misc/icons/bebebe/ex.svg new file mode 100644 index 0000000..bc4f40b --- /dev/null +++ b/core/misc/icons/bebebe/ex.svg @@ -0,0 +1 @@ + diff --git a/core/misc/icons/ffffff/ex.svg b/core/misc/icons/ffffff/ex.svg new file mode 100644 index 0000000..24c1361 --- /dev/null +++ b/core/misc/icons/ffffff/ex.svg @@ -0,0 +1 @@ + diff --git a/core/modules/edit/css/edit.icons.css b/core/modules/edit/css/edit.icons.css index 66d4098..77edf50 100644 --- a/core/modules/edit/css/edit.icons.css +++ b/core/modules/edit/css/edit.icons.css @@ -51,14 +51,12 @@ * Images. */ .edit .icon-close:before { - background-image: url("../images/icon-close.png"); - background-position: center top; + background-image: url('../../../misc/icons/787878/ex.svg'); height: 12px; top: 10px; } .edit .icon-close:hover:before { - background-image: url("../images/icon-close.png"); - background-position: center bottom; + background-image: url('../../../misc/icons/000000/ex.svg'); } .edit .icon-throbber:before { background-image: url("../images/icon-throbber.gif"); diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index 61a99c3..062fcc4 100644 --- a/core/modules/edit/css/edit.theme.css +++ b/core/modules/edit/css/edit.theme.css @@ -231,10 +231,6 @@ background-color: transparent; border: 1px solid transparent; } -.edit-toolbar-container .edit-button.action-cancel:hover { - background-color: transparent; - border: 1px solid #686868; -} .edit-button.action-save { color: white; background-color: #50a0e9; diff --git a/core/modules/edit/images/icon-close.png b/core/modules/edit/images/icon-close.png deleted file mode 100644 index c47caea..0000000 --- a/core/modules/edit/images/icon-close.png +++ /dev/null @@ -1,4 +0,0 @@ -PNG - - IHDR nIDAT8˝ @!)ɒlky$/a%iDs$:8#im -Ik'fxU֗yX7 ,3#tPqXBvn: `dmepj|kupӇFIENDB` \ No newline at end of file -- 1.7.10.2 From 048a6424f19be83207af6d419b326eda839d0d7c Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 3 Sep 2013 13:32:45 +0200 Subject: [PATCH 03/10] Fix slight horizontal movement of entity toolbar for padded textual fields. --- core/modules/edit/js/views/EntityToolbarView.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/core/modules/edit/js/views/EntityToolbarView.js b/core/modules/edit/js/views/EntityToolbarView.js index 00e0a9d..a2998db 100644 --- a/core/modules/edit/js/views/EntityToolbarView.js +++ b/core/modules/edit/js/views/EntityToolbarView.js @@ -164,6 +164,10 @@ Drupal.edit.EntityToolbarView = Backbone.View.extend({ var delay = 0; // Determines what check in the series of checks below should be evaluated var check = 0; + // When positioned against an active field that has padding, we should + // ignore that padding when positioning the toolbar, to not unnecessarily + // move the toolbar horizontally, which feels annoying. + var horizontalPadding = 0; var of, activeField, highlightedField; // There are several elements in the page that the entity toolbar might be // positioned against. They are considered below in a priority order. @@ -181,6 +185,9 @@ Drupal.edit.EntityToolbarView = Backbone.View.extend({ case 2: // Position against an active field. of = activeField && activeField.editorView && activeField.editorView.getEditedElement(); + if (activeField && activeField.editorView && activeField.editorView.getEditUISettings().padding) { + horizontalPadding = 5; + } break; case 3: // Position against a highlighted field. @@ -233,8 +240,10 @@ Drupal.edit.EntityToolbarView = Backbone.View.extend({ that.$el .position({ my: edge + ' bottom', - // Move the toolbar 2px towards the start edge of the 'of' element. - at: edge + '+1 top', + // Move the toolbar 1px towards the start edge of the 'of' element, + // plus any horizontal padding that may have been added to the element + // that is being added, to prevent unwanted horizontal movement. + at: edge + '+' + (1 + horizontalPadding) + ' top', of: of, collision: 'flipfit', using: refinePosition, -- 1.7.10.2 From ea1bcfe5e7cd6dc0a3f8f12700c9703b7c87ff86 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 3 Sep 2013 13:35:31 +0200 Subject: [PATCH 04/10] Make the toolbar much lighter. --- core/modules/edit/css/edit.theme.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index 062fcc4..5692c51 100644 --- a/core/modules/edit/css/edit.theme.css +++ b/core/modules/edit/css/edit.theme.css @@ -112,11 +112,14 @@ transition: all 1s; } .edit-toolbar-container > .edit-toolbar-content { - background-color: #45545E; + background-image: -moz-linear-gradient(-90deg, #fff, #eee); + background-image: -o-linear-gradient(-90deg, #fff, #eee); + background-image: -webkit-linear-gradient(-90deg, #fff, #eee); + background-image: linear-gradient(180deg, #fff, #eee); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; - color: white; + color: black; padding: 0.1667em; position: relative; -webkit-user-select: none; @@ -126,9 +129,9 @@ z-index: 2; } .edit-toolbar-container > .edit-toolbar-pointer { - background-color: #45545E; + background-color: #eee; bottom: 2px; - box-shadow: 0px 0px 0 4px rgba(150, 150, 150, 0.5); + box-shadow: 0 0 0 1px #818181, 0px 0px 0 4px rgba(150, 150, 150, 0.5); display: block; height: 16px; left: 18px; /* LTR */ @@ -149,7 +152,7 @@ } .edit-toolbar-container > .edit-toolbar-lining { bottom: 7px; - box-shadow: 0px 1px 0px 3px rgba(150, 150, 150, 0.5); + box-shadow: 0 0 0 1px #818181, 0px 3px 0px 1px rgba(150, 150, 150, 0.5); display: block; left: 0; position: absolute; -- 1.7.10.2 From 90fd49b566e3da79b7fa5e96947fbca77671efb7 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 3 Sep 2013 13:36:48 +0200 Subject: [PATCH 05/10] Updated entity toolbar labeling. --- core/modules/edit/css/edit.theme.css | 5 +++++ core/modules/edit/js/theme.js | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index 5692c51..e17ff6f 100644 --- a/core/modules/edit/css/edit.theme.css +++ b/core/modules/edit/css/edit.theme.css @@ -162,11 +162,16 @@ } .edit-toolbar-label { + font-style: italic; overflow: hidden; padding: 0.333em 0.5em; text-overflow: ellipsis; white-space: nowrap; } +.edit-toolbar-label .field:after { + content: ' → '; +} + /* The toolbar; these are not necessarily visible. */ .edit-toolbar { font-family: 'Droid sans', 'Lucida Grande', sans-serif; diff --git a/core/modules/edit/js/theme.js b/core/modules/edit/js/theme.js index 2228eb5..d2b997c 100644 --- a/core/modules/edit/js/theme.js +++ b/core/modules/edit/js/theme.js @@ -54,7 +54,7 @@ Drupal.theme.editEntityToolbar = function (settings) { * The corresponding HTML. */ Drupal.theme.editEntityToolbarLabel = function (settings) { - return settings.entityLabel + ': ' + settings.fieldLabel + ''; + return '' + settings.fieldLabel + '' + settings.entityLabel; }; /** -- 1.7.10.2 From 89394359a7c9ab866cb557a8396bbff909bf2546 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 3 Sep 2013 13:38:42 +0200 Subject: [PATCH 06/10] Adjust the style of in-place editing CKEditor instances. --- core/modules/ckeditor/css/ckeditor.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/core/modules/ckeditor/css/ckeditor.css b/core/modules/ckeditor/css/ckeditor.css index f45ec26..1954269 100644 --- a/core/modules/ckeditor/css/ckeditor.css +++ b/core/modules/ckeditor/css/ckeditor.css @@ -23,3 +23,17 @@ -ms-user-select: none; user-select: none; } + +/** + * Adjust the style of in-place editing CKEditor instances. + */ +.edit-toolgroup.wysiwyg-main .cke_chrome, +.edit-toolgroup.wysiwyg-main .cke_inner, +.edit-toolgroup.wysiwyg-main .cke_top { + background: transparent; + border-top: none; + border-right: none; + border-bottom: none; + border-left: none; + box-shadow: none; +} -- 1.7.10.2 From e1bc29caff569a7dcc8e7a07292d4273b9eee136 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Thu, 5 Sep 2013 15:07:09 +0200 Subject: [PATCH 07/10] Reintroduced hover state for the close button, as well as a 'pressed state'. --- core/modules/edit/css/edit.icons.css | 3 ++- core/modules/edit/css/edit.theme.css | 10 ++++++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/core/modules/edit/css/edit.icons.css b/core/modules/edit/css/edit.icons.css index 77edf50..d358a82 100644 --- a/core/modules/edit/css/edit.icons.css +++ b/core/modules/edit/css/edit.icons.css @@ -55,7 +55,8 @@ height: 12px; top: 10px; } -.edit .icon-close:hover:before { +.edit .icon-close:hover:before, +.edit .icon-close:active:before { background-image: url('../../../misc/icons/000000/ex.svg'); } .edit .icon-throbber:before { diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index e17ff6f..4af6e36 100644 --- a/core/modules/edit/css/edit.theme.css +++ b/core/modules/edit/css/edit.theme.css @@ -239,6 +239,16 @@ background-color: transparent; border: 1px solid transparent; } +.edit-toolbar-container .edit-button.action-cancel:hover { + background-color: #fcfcfc; + border: 1px solid #d4d4d4; + box-shadow: 0px 1px 0px #ddd; +} +.edit-toolbar-container .edit-button.action-cancel:active { + background-color: #e5e5e5; + border: 1px solid #aaa; + box-shadow: inset 0px 2px 1px #aaa; +} .edit-button.action-save { color: white; background-color: #50a0e9; -- 1.7.10.2 From 33dfdda8ea60461d8ab06380f8f401a5d4db6c46 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Thu, 5 Sep 2013 15:20:06 +0200 Subject: [PATCH 08/10] Refine field 'outlines' (box shadows, really). --- core/modules/edit/css/edit.theme.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index 4af6e36..592a275 100644 --- a/core/modules/edit/css/edit.theme.css +++ b/core/modules/edit/css/edit.theme.css @@ -13,7 +13,7 @@ */ .edit-field.edit-editable, .edit-field .edit-editable { - box-shadow: 0 0 0 2px #4d9de9; + box-shadow: 0 0 0 2px #74b7ff; } /** @@ -22,16 +22,16 @@ .edit-field.edit-highlighted, .edit-form.edit-highlighted, .edit-field .edit-highlighted { - box-shadow: 0 0 0 2px #0199ff, 0 1px 0 3px rgba(153, 153, 153, .5); + box-shadow: 0 0 0 1px #74b7ff, 0 0 0 2px #007fff; } .edit-field.edit-changed, .edit-form.edit-changed, .edit-field .edit-changed { - box-shadow: 0 0 0px 2px orange, 0px 1px 0px 3px rgba(153, 153, 153, .5); + box-shadow: 0 0 0 1px #fec17e, 0 0 0 2px #f7870a; } .edit-editing.edit-validation-error, .edit-form.edit-validation-error { - box-shadow: 0 0 1px 2px red, 0 0 3px 5px rgba(153, 153, 153, .5); + box-shadow: 0 0 0px 1px #ee8b74, 0 0 0 2px #fa2209; } .edit-editing.edit-editor-is-popup { box-shadow: none; -- 1.7.10.2 From 8c5ce4a9d6915de0293afe9b6ce74c7987a63997 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Thu, 5 Sep 2013 16:33:06 +0200 Subject: [PATCH 09/10] Add blue pencil icon to entity toolbar, and stop bolding the field label. --- core/misc/icons/5181c6/pencil.svg | 1 + core/modules/edit/css/edit.icons.css | 9 +++++++++ core/modules/edit/js/theme.js | 4 ++-- 3 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 core/misc/icons/5181c6/pencil.svg diff --git a/core/misc/icons/5181c6/pencil.svg b/core/misc/icons/5181c6/pencil.svg new file mode 100644 index 0000000..209d96d --- /dev/null +++ b/core/misc/icons/5181c6/pencil.svg @@ -0,0 +1 @@ + diff --git a/core/modules/edit/css/edit.icons.css b/core/modules/edit/css/edit.icons.css index d358a82..b773a01 100644 --- a/core/modules/edit/css/edit.icons.css +++ b/core/modules/edit/css/edit.icons.css @@ -46,6 +46,10 @@ .edit button.icon { font-size: 1em; } +.edit .icon-pencil { + margin-left: .5em; + padding-left: 1.5em; +} /** * Images. @@ -62,3 +66,8 @@ .edit .icon-throbber:before { background-image: url("../images/icon-throbber.gif"); } +.edit .icon-pencil:before { + background-image: url('../../../misc/icons/5181c6/pencil.svg'); + background-position: left center; + background-size: 1.5em; +} diff --git a/core/modules/edit/js/theme.js b/core/modules/edit/js/theme.js index d2b997c..0306ff4 100644 --- a/core/modules/edit/js/theme.js +++ b/core/modules/edit/js/theme.js @@ -35,7 +35,7 @@ Drupal.theme.editEntityToolbar = function (settings) { html += '
'; html += ''; html += '
'; - html += '
'; + html += '
'; html += '
'; html += '
'; html += '
'; @@ -54,7 +54,7 @@ Drupal.theme.editEntityToolbar = function (settings) { * The corresponding HTML. */ Drupal.theme.editEntityToolbarLabel = function (settings) { - return '' + settings.fieldLabel + '' + settings.entityLabel; + return '' + settings.fieldLabel + '' + settings.entityLabel; }; /** -- 1.7.10.2 From 30d21e44d282fc18fddf1ba466d0169a9f375404 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Thu, 5 Sep 2013 17:04:43 +0200 Subject: [PATCH 10/10] Make it possible for the admin theme to override Edit entity toolbar's default styling. --- core/modules/edit/edit.module | 55 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/core/modules/edit/edit.module b/core/modules/edit/edit.module index 071073c..c707da2 100644 --- a/core/modules/edit/edit.module +++ b/core/modules/edit/edit.module @@ -142,6 +142,22 @@ function edit_library_info() { } /** + * Implement hook_library_info_alter(). + * + * Allow the admin theme to override the Edit entity toolbar's default styling. + * We must do it this way, because an admin theme's hooks do not fire while on + * the front-end. + */ +function edit_library_info_alter(&$libraries, $module) { + if ($module == 'edit' && isset($libraries['edit'])) { + $css = _edit_theme_css(); + foreach ($css as $css_file) { + $libraries['edit']['css'][$css_file] = array(); + } + } +} + +/** * Implements hook_field_formatter_info_alter(). * * Edit extends the @FieldFormatter annotation with the following keys: @@ -183,3 +199,42 @@ function edit_field_form(array $form, array &$form_state, EntityInterface $entit $form_handler = new EditFieldForm(); return $form_handler->build($form, $form_state, $entity, $field_name, $temp_store_factory); } + +/** + * Retrieves the admin theme's Edit stylesheets. + * + * Admin themes may specify CSS files to make the front-end administration + * experience of in-place editing match the administration experience on the + * Drupal back-end. + * They can specify such CSS files using the "edit_stylesheets" key in + * the theme .info.yml file. + * + * @code + * edit_stylesheets[] = css/edit.css + * @endcode + * + * @param string|NULL $theme + * The theme name for which to retrieve the edit_stylesheets CSS files. + * + * @return array + * An array of CSS file paths. + */ +function _edit_theme_css($theme = NULL) { + $css = array(); + if (!isset($theme)) { + $theme = Drupal::config('system.theme')->get('admin'); + } + if ($theme_path = drupal_get_path('theme', $theme)) { + $info = system_get_info('theme', $theme); + if (isset($info['edit_stylesheets'])) { + $css = $info['edit_stylesheets']; + foreach ($css as $key => $path) { + $css[$key] = $theme_path . '/' . $path; + } + } + if (isset($info['base theme'])) { + $css = array_merge(_edit_theme_css($info['base theme'], $css)); + } + } + return $css; +} -- 1.7.10.2