Commit 5b24f7bc authored by webchick's avatar webchick

Issue #2080217 by Wim Leers, tkoleary, Bojhan: Polish entity toolbar visually.

parent 00341321
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#000000" d="M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g><path fill="#5181C6" d="M14.545 3.042l-1.586-1.585c-.389-.389-1.025-.389-1.414 0l-1.293 1.293 3 3 1.293-1.293c.389-.389.389-1.026 0-1.415z"/><rect fill="#5181C6" x="5.129" y="3.8" transform="matrix(-.707 -.707 .707 -.707 6.189 20.064)" width="4.243" height="9.899"/><path fill="#5181C6" d="M.908 14.775c-.087.262.055.397.316.312l2.001-.667-1.65-1.646-.667 2.001z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#787878" d="M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#bebebe" d="M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#ffffff" d="M3.51 13.925c.194.194.512.195.706.001l3.432-3.431c.194-.194.514-.194.708 0l3.432 3.431c.192.194.514.193.707-.001l1.405-1.417c.191-.195.189-.514-.002-.709l-3.397-3.4c-.192-.193-.192-.514-.002-.708l3.401-3.43c.189-.195.189-.515 0-.709l-1.407-1.418c-.195-.195-.513-.195-.707-.001l-3.43 3.431c-.195.194-.516.194-.708 0l-3.432-3.431c-.195-.195-.512-.194-.706.001l-1.407 1.417c-.194.195-.194.515 0 .71l3.403 3.429c.193.195.193.514-.001.708l-3.4 3.399c-.194.195-.195.516-.001.709l1.406 1.419z"/></svg>
......@@ -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;
}
......@@ -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;
}
......@@ -11,6 +11,7 @@
.edit-editable {
z-index: 98;
position: relative;
cursor: pointer;
}
.edit-editable:focus {
outline: none;
......
......@@ -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 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;
}
.edit-form .form-item .error {
border: 1px solid #eea0a0;
......@@ -102,18 +105,20 @@
*/
.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-color: #45545E;
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;
color: white;
color: black;
padding: 0.1667em;
position: relative;
-webkit-user-select: none;
......@@ -123,9 +128,9 @@
z-index: 2;
}
.edit-toolbar-container > .edit-toolbar-pointer {
background-color: #45545E;
background-color: #e4e4e4;
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 */
......@@ -146,7 +151,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;
......@@ -156,11 +161,16 @@
}
.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,9 +212,9 @@
display: inline-block;
margin: 0;
opacity: 1;
padding: 0.4545em;
-webkit-transition: all .1s ease;
transition: all .1s ease;
padding: 0.345em;
-webkit-transition: opacity .1s ease;
transition: opacity .1s ease;
}
.edit-button[aria-hidden="true"] {
visibility: hidden;
......@@ -228,23 +238,18 @@
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);
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,
......
......@@ -143,6 +143,22 @@ function edit_library_info() {
return $libraries;
}
/**
* 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().
*
......@@ -175,3 +191,42 @@ function edit_preprocess_field(&$variables) {
function edit_entity_view_alter(&$build, EntityInterface $entity, EntityDisplay $display) {
$build['#attributes']['data-edit-entity'] = $entity->entityType() . '/' . $entity->id();
}
/**
* 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;
}
......@@ -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 };
},
/**
......
......@@ -51,6 +51,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.
*/
......
......@@ -35,7 +35,7 @@ Drupal.theme.editEntityToolbar = function (settings) {
html += '<div id="' + settings.id + '" class="edit edit-toolbar-container clearfix">';
html += '<i class="edit-toolbar-pointer"></i>';
html += '<div class="edit-toolbar-content">';
html += '<div class="edit-toolbar edit-toolbar-entity clearfix">';
html += '<div class="edit-toolbar edit-toolbar-entity clearfix icon icon-pencil">';
html += '<div class="edit-toolbar-label" />';
html += '</div>';
html += '<div class="edit-toolbar edit-toolbar-field clearfix" />';
......@@ -54,7 +54,7 @@ Drupal.theme.editEntityToolbar = function (settings) {
* The corresponding HTML.
*/
Drupal.theme.editEntityToolbarLabel = function (settings) {
return settings.entityLabel + ': <b>' + settings.fieldLabel + '</b>';
return '<span class="field">' + settings.fieldLabel + '</span>' + settings.entityLabel;
};
/**
......
......@@ -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');
},
......
......@@ -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 };
},
/**
......
......@@ -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,
......
......@@ -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 };
},
/**
......
/**
* @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;
}
......@@ -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'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment