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; +} diff --git a/core/modules/edit/css/edit.icons.css b/core/modules/edit/css/edit.icons.css index 66d4098..b75a036 100644 --- a/core/modules/edit/css/edit.icons.css +++ b/core/modules/edit/css/edit.icons.css @@ -46,20 +46,28 @@ .edit button.icon { font-size: 1em; } +.edit .icon-pencil { + margin-left: .5em; + padding-left: 1.5em; +} /** * 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; +.edit .icon-close:hover:before, +.edit .icon-close:active:before { + background-image: url('../../../misc/icons/000000/ex.svg'); } .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.3em; +} diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index febb435..44e867d 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,19 @@ .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 2px #74b7ff; } .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 2px #fec17e; } .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 2px #ee8b74; +} +.edit-editing.edit-editor-is-popup { + box-shadow: none; } .edit-form .form-item .error { border: 1px solid #eea0a0; @@ -102,18 +105,21 @@ */ .edit-toolbar-container { font-family: 'Source Sans Pro','Lucida Grande', sans-serif; - font-size: 1.1em; padding-bottom: 7px; padding-top: 7px; -webkit-transition: all 1s; transition: all 1s; + border-radius: 4px; } .edit-toolbar-container > .edit-toolbar-content { - background-color: #45545E; + background-image: -moz-linear-gradient(-90deg, #fff, #e4e4e4); + background-image: -o-linear-gradient(-90deg, #fff, #e4e4e4); + background-image: -webkit-linear-gradient(-90deg, #fff, #e4e4e4); + 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; @@ -121,11 +127,12 @@ -ms-user-select: none; user-select: none; z-index: 2; + border-radius: 4px; } .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 #BDBDBD, 0px 0px 0 2px rgba(150, 150, 150, 0.5); display: block; height: 16px; left: 18px; /* LTR */ @@ -146,21 +153,27 @@ } .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 #BDBDBD, 0px 1px 0px 1px rgba(150, 150, 150, 0.5); display: block; left: 0; position: absolute; right: 0; top: 7px; z-index: 0; + border-radius: 4px; } .edit-toolbar-label { + font-style: italic; overflow: hidden; - padding: 0.333em 0.5em; + padding: 0.333em 0.4em; 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; @@ -202,7 +215,7 @@ display: inline-block; margin: 0; opacity: 1; - padding: 0.4545em; + padding: 0.345em; -webkit-transition: all .1s ease; transition: all .1s ease; } @@ -222,35 +235,34 @@ .edit-button:active { background-color: #c8c8c8; border: 1px solid #a0a0a0; + border-radius: 3px; color: #2e2e2e; } .edit-toolbar-container .edit-button.action-cancel { 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; - background-image: -moz-linear-gradient(-90deg, #50a0e9, #4481dc); - background-image: -o-linear-gradient(-90deg, #50a0e9, #4481dc); - background-image: -webkit-linear-gradient(-90deg, #50a0e9, #4481dc); - background-image: linear-gradient(180deg, #50a0e9, #4481dc); - border: 1px solid transparent; + background-image: -webkit-linear-gradient(top, #007bc6, #0071b8); + background-image: -moz-linear-gradient(top, #007bc6, #0071b8); + background-image: -o-linear-gradient(top, #007bc6, #0071b8); + background-image: linear-gradient(to bottom, #007bc6, #0071b8); + border-color: #1e5c90; + border-radius: 3px; + margin-top: 2px; +} +.edit-button.action-save:hover { + background-color: #2369a6; + background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7); + background-image: -moz-linear-gradient(top, #0c97ed, #1f86c7); + background-image: -o-linear-gradient(top, #0c97ed, #1f86c7); + background-image: linear-gradient(to bottom, #0c97ed, #1f86c7); + border-color: #1e5c90; + color: #fff; } -.edit-button.action-save:hover, .edit-button.action-save:active { border: 1px solid #a0a0a0; color: white; -} -.edit-button.action-saving, -.edit-button.action-saving:hover, -.edit-button.action-saving:active { - background-color: #e4e4e4; - background-image: none; - border-color: #d2d2d2; - color: #5a5a5a; -} +} \ No newline at end of file diff --git a/core/modules/edit/edit.module b/core/modules/edit/edit.module index 3fbf12f..6001bb2 100644 --- a/core/modules/edit/edit.module +++ b/core/modules/edit/edit.module @@ -144,6 +144,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: @@ -185,3 +201,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; +} 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 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/theme.js b/core/modules/edit/js/theme.js index 2228eb5..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.entityLabel + ': ' + settings.fieldLabel + ''; + return '' + settings.fieldLabel + '' + settings.entityLabel; }; /** 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/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, 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 }; }, /**