From f7f6081760fddfaaab8583c69c9f40388fb87474 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Fri, 30 Aug 2013 18:09:29 +0200 Subject: [PATCH 01/12] 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 9368243f884f998c95884fca734f3e7b1ac611aa Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 3 Sep 2013 13:30:41 +0200 Subject: [PATCH 02/12] 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 afa2c396dc758aa5151095aa4e3c3b469b97dc79 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 3 Sep 2013 13:32:45 +0200 Subject: [PATCH 03/12] 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 61136957ecf690b98e2511f8c84035cd947a05a8 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 3 Sep 2013 13:35:31 +0200 Subject: [PATCH 04/12] 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 54ed0ce342d7bf7f5c3afdbdc4c6ea226bc41e36 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 3 Sep 2013 13:36:48 +0200 Subject: [PATCH 05/12] 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 2599c28b29b7daedc7fdd439875414858f8067a7 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 3 Sep 2013 13:38:42 +0200 Subject: [PATCH 06/12] 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 0b814ddb7eb6421230cdebfe9d3ef51961e5bb09 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Thu, 5 Sep 2013 15:07:09 +0200 Subject: [PATCH 07/12] 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 62e19f7101c3c655f5d8979794f63773b4548247 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Thu, 5 Sep 2013 15:20:06 +0200 Subject: [PATCH 08/12] 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 7eb5647987f568ff6599ddeb4f5a32a6773cb975 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Thu, 5 Sep 2013 16:33:06 +0200 Subject: [PATCH 09/12] 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 87934e77f212ab6e38ca8ab296d0fa0c9f4e40c4 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Thu, 5 Sep 2013 17:04:43 +0200 Subject: [PATCH 10/12] 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 f37cd5c..9b6fffa 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; +} -- 1.7.10.2 From 9a1d527aa2135d06e01a072b448f75255989b572 Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 17 Sep 2013 11:28:48 +0200 Subject: [PATCH 11/12] Incorporate Bojhan's improvements in the correct manner. --- core/modules/edit/css/edit.icons.css | 2 +- core/modules/edit/css/edit.theme.css | 32 +++++----------- core/themes/seven/edit.css | 67 ++++++++++++++++++++++++++++++++++ core/themes/seven/seven.info.yml | 2 + 4 files changed, 80 insertions(+), 23 deletions(-) create mode 100644 core/themes/seven/edit.css diff --git a/core/modules/edit/css/edit.icons.css b/core/modules/edit/css/edit.icons.css index b773a01..b75a036 100644 --- a/core/modules/edit/css/edit.icons.css +++ b/core/modules/edit/css/edit.icons.css @@ -69,5 +69,5 @@ .edit .icon-pencil:before { background-image: url('../../../misc/icons/5181c6/pencil.svg'); background-position: left center; - background-size: 1.5em; + background-size: 1.3em; } diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index 592a275..39b195e 100644 --- a/core/modules/edit/css/edit.theme.css +++ b/core/modules/edit/css/edit.theme.css @@ -105,17 +105,16 @@ */ .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; } .edit-toolbar-container > .edit-toolbar-content { - 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); + background-image: -webkit-linear-gradient(top, #fff, #e4e4e4); + background-image: -moz-linear-gradient(top, #fff, #e4e4e4); + background-image: -o-linear-gradient(top, #fff, #e4e4e4); + background-image: linear-gradient(to bottom, #fff, #e4e4e4); -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; @@ -164,7 +163,7 @@ .edit-toolbar-label { font-style: italic; overflow: hidden; - padding: 0.333em 0.5em; + padding: 0.333em 0.4em; text-overflow: ellipsis; white-space: nowrap; } @@ -213,7 +212,7 @@ display: inline-block; margin: 0; opacity: 1; - padding: 0.4545em; + padding: 0.345em; -webkit-transition: all .1s ease; transition: all .1s ease; } @@ -239,29 +238,18 @@ 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; - 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); + background-image: -webkit-linear-gradient(top, #50a0e9, #4481dc); + background-image: -moz-linear-gradient(top, #50a0e9, #4481dc); + background-image: -o-linear-gradient(top, #50a0e9, #4481dc); + background-image: linear-gradient(to bottom, #50a0e9, #4481dc); border: 1px solid transparent; } .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, diff --git a/core/themes/seven/edit.css b/core/themes/seven/edit.css new file mode 100644 index 0000000..5b0b21a --- /dev/null +++ b/core/themes/seven/edit.css @@ -0,0 +1,67 @@ +/** + * @file + * Override Edit's entity toolbar style on the Drupal front-end. + * + * I.e. loaded by Edit on the front-end, despite this being a back-end theme. + */ + +/** + * The Seven style guide prescribes softer corners. + */ +.edit-toolbar-container > .edit-toolbar-content, +.edit-toolbar-container > .edit-toolbar-lining { + border-radius: 4px; +} +.edit-button { + border-radius: 3px; +} + +/** + * Entity toolbar's "save" button must be styled like a Seven primary button. + */ +.edit-button.action-save, +.edit-button.action-saving { + border-color: #1e5c90; + 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); + color: #fff; + text-shadow: 0 1px hsla(0, 0%, 0%, 0.5); + font-weight: 700; + -webkit-font-smoothing: antialiased; + margin-top: 2px; +} +.edit-button.action-save:focus, +.edit-button.action-save:hover, +.edit-button.action-saving:focus +.edit-button.action-saving: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-saving:hover { + box-shadow: 0 1px 2px hsla(203, 10%, 10%, 0.25); +} +.edit-button.action-save:active, +.edit-button.action-saving:active { + background-image: -webkit-linear-gradient(top, #08639b, #0071b8); + background-image: -moz-linear-gradient(top, #08639b, #0071b8); + background-image: -o-linear-gradient(top, #08639b, #0071b8); + background-image: linear-gradient(to bottom, #08639b, #0071b8); + border-color: #144b78; + box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2); +} + +/** + * The entity toolbar's "save" button's top margin shifts both buttons 2px down, + * so we must compensate for that to achieve vertically centered positioning. + */ +.edit .icon-close:before { + top: 8px; +} diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml index ad68f6c..5013ddf 100644 --- a/core/themes/seven/seven.info.yml +++ b/core/themes/seven/seven.info.yml @@ -10,6 +10,8 @@ stylesheets: stylesheets-override: - vertical-tabs.css - jquery.ui.theme.css +edit_stylesheets: + - edit.css settings: # @todo D8: Remove once themes have to be installed. shortcut_module_link: '1' -- 1.7.10.2 From 6a760c61d03b962a50ff19ef90480da2bd33014d Mon Sep 17 00:00:00 2001 From: Wim Leers Date: Tue, 17 Sep 2013 11:39:37 +0200 Subject: [PATCH 12/12] Only transition the 'opacity' property on buttons. --- core/modules/edit/css/edit.theme.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/modules/edit/css/edit.theme.css b/core/modules/edit/css/edit.theme.css index 39b195e..6b47c87 100644 --- a/core/modules/edit/css/edit.theme.css +++ b/core/modules/edit/css/edit.theme.css @@ -213,8 +213,8 @@ margin: 0; opacity: 1; padding: 0.345em; - -webkit-transition: all .1s ease; - transition: all .1s ease; + -webkit-transition: opacity .1s ease; + transition: opacity .1s ease; } .edit-button[aria-hidden="true"] { visibility: hidden; -- 1.7.10.2