Commit 8972a66f authored by Cottser's avatar Cottser

Issue #2899724 by drpal, tedbow, DyanneNova, droplet, Cottser, Wim Leers:...

Issue #2899724 by drpal, tedbow, DyanneNova, droplet, Cottser, Wim Leers: Fixes for settings tray CSS and JavaScript minor issues
parent f630453b
/* /**
* @file * @file
* Set base styles for the settings tray. * Set base styles for the settings tray.
*/ */
...@@ -200,7 +200,7 @@ ...@@ -200,7 +200,7 @@
content: ']'; content: ']';
} }
/* Override jquery UI */ /* Override jQuery UI */
#drupal-off-canvas .ui-widget-content a { #drupal-off-canvas .ui-widget-content a {
color: #85bef4 !important; color: #85bef4 !important;
} }
......
/** /**
* @file
* Visual styling for buttons in the off canvas tray. * Visual styling for buttons in the off canvas tray.
* *
* See seven/css/components/buttons.css * See seven/css/components/buttons.css
...@@ -85,7 +86,7 @@ ...@@ -85,7 +86,7 @@
} }
#drupal-off-canvas .no-touchevents .button--small { #drupal-off-canvas .no-touchevents .button--small {
font-size: 13px; font-size: 13px;
padding: 2px 1em; /* 1 */ padding: 2px 1em;
} }
#drupal-off-canvas .button:disabled, #drupal-off-canvas .button:disabled,
#drupal-off-canvas .button:disabled:active, #drupal-off-canvas .button:disabled:active,
......
...@@ -11,7 +11,5 @@ ...@@ -11,7 +11,5 @@
*/ */
.dialog-off-canvas__main-canvas { .dialog-off-canvas__main-canvas {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
transition: all .7s ease; transition: all .7s ease;
} }
...@@ -167,8 +167,7 @@ ...@@ -167,8 +167,7 @@
#drupal-off-canvas table tbody tr:nth-child(odd), #drupal-off-canvas table tbody tr:nth-child(odd),
#drupal-off-canvas table tfoot { #drupal-off-canvas table tfoot {
border: 0; border: 0;
background: none; background: transparent none;
background-color: transparent;
} }
#drupal-off-canvas th, #drupal-off-canvas th,
#drupal-off-canvas td, #drupal-off-canvas td,
...@@ -325,6 +324,9 @@ ...@@ -325,6 +324,9 @@
#drupal-off-canvas select[disabled] optgroup, #drupal-off-canvas select[disabled] optgroup,
#drupal-off-canvas textarea[disabled] { #drupal-off-canvas textarea[disabled] {
box-shadow: none; box-shadow: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; user-select: none;
cursor: default; cursor: default;
} }
...@@ -358,8 +360,7 @@ ...@@ -358,8 +360,7 @@
} }
#drupal-off-canvas * button { #drupal-off-canvas * button {
background: none; background: none;
border: 1px solid; border: 1px solid grey;
border-color: grey;
color: black; color: black;
padding: 0; padding: 0;
text-decoration: none; text-decoration: none;
...@@ -372,14 +373,14 @@ ...@@ -372,14 +373,14 @@
#drupal-off-canvas *:not(div) textarea, #drupal-off-canvas *:not(div) textarea,
#drupal-off-canvas *:not(div) select { #drupal-off-canvas *:not(div) select {
background: white; background: white;
border: 1px solid; border: 1px solid grey;
border-color: grey;
color: black; color: black;
padding: 0; padding: 0;
vertical-align: top; vertical-align: top;
} }
/* Bootstrap and other frameworks add color to selection. */ /* To standardize off-canvas selection color. */
#drupal-off-canvas ::-moz-selection,
#drupal-off-canvas ::selection { #drupal-off-canvas ::selection {
background-color: rgba(175,175,175,0.5); background-color: rgba(175,175,175,0.5);
color: inherit; color: inherit;
......
...@@ -72,7 +72,7 @@ ...@@ -72,7 +72,7 @@
padding: 6px 8px; padding: 6px 8px;
color: #ddd; color: #ddd;
} }
/* Hide overflow with elipsis for links. */ /* Hide overflow with ellipsis for links. */
#drupal-off-canvas td a { #drupal-off-canvas td a {
display: block; display: block;
overflow: hidden; overflow: hidden;
......
...@@ -38,6 +38,7 @@ ...@@ -38,6 +38,7 @@
} }
#drupal-off-canvas a.tabledrag-handle .handle { #drupal-off-canvas a.tabledrag-handle .handle {
/* Use lighter drag icon against dark background. */ /* Use lighter drag icon against dark background. */
background-color: transparent;
background-image: url(../../../misc/icons/bebebe/move.svg); background-image: url(../../../misc/icons/bebebe/move.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
...@@ -45,7 +46,6 @@ ...@@ -45,7 +46,6 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
width: auto; width: auto;
background-color: transparent;
} }
#drupal-off-canvas .draggable a.tabledrag-handle:hover .handle, #drupal-off-canvas .draggable a.tabledrag-handle:hover .handle,
#drupal-off-canvas .draggable a.tabledrag-handle:focus .handle { #drupal-off-canvas .draggable a.tabledrag-handle:focus .handle {
......
/**
* @file
* Styling for the off-canvas ui dialog. Including overrides for jQuery UI.
*/
/* Style the dialog-off-canvas container. */ /* Style the dialog-off-canvas container. */
.ui-dialog.ui-dialog-off-canvas { .ui-dialog.ui-dialog-off-canvas {
background: #444; background: #444;
...@@ -20,7 +25,7 @@ ...@@ -20,7 +25,7 @@
font-weight: normal; font-weight: normal;
color: #fff; color: #fff;
} }
/* Hide the default Jquery UI dialog close button. */ /* Hide the default jQuery UI dialog close button. */
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon { .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close .ui-icon {
visibility: hidden; visibility: hidden;
} }
...@@ -32,7 +37,6 @@ ...@@ -32,7 +37,6 @@
border: 0; border: 0;
position: absolute; position: absolute;
right: 1em; right: 1em;
-moz-transition: all .5s ease;
transition: background .5s ease; transition: background .5s ease;
} }
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover { .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover {
...@@ -75,7 +79,7 @@ ...@@ -75,7 +79,7 @@
right: 1em; right: 1em;
} }
/* Override default styling from jquery UI. */ /* Override default styling from jQuery UI. */
#drupal-off-canvas .ui-state-default, #drupal-off-canvas .ui-state-default,
#drupal-off-canvas .ui-widget-content .ui-state-default, #drupal-off-canvas .ui-widget-content .ui-state-default,
#drupal-off-canvas .ui-widget-header .ui-state-default { #drupal-off-canvas .ui-widget-header .ui-state-default {
...@@ -85,5 +89,5 @@ ...@@ -85,5 +89,5 @@
color: #333; color: #333;
} }
#drupal-off-canvas .ui-widget-content a { #drupal-off-canvas .ui-widget-content a {
color: #85bef4/*{fcContent}*/; color: #85bef4;
} }
...@@ -8,8 +8,6 @@ ...@@ -8,8 +8,6 @@
/* Transition the edit icon in the toolbar. */ /* Transition the edit icon in the toolbar. */
#toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before { #toolbar-bar.button.toolbar-icon.toolbar-icon.toolbar-icon-edit:before {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
transition: all .7s ease; transition: all .7s ease;
} }
...@@ -17,7 +15,5 @@ ...@@ -17,7 +15,5 @@
.dialog-off-canvas__main-canvas .contextual, .dialog-off-canvas__main-canvas .contextual,
.dialog-off-canvas__main-canvas .js-outside-in-edit-mode .outside-in-editable, .dialog-off-canvas__main-canvas .js-outside-in-edit-mode .outside-in-editable,
.dialog-off-canvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable { .dialog-off-canvas__main-canvas.js-tray-open .js-outside-in-edit-mode .outside-in-editable {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
transition: all .7s ease; transition: all .7s ease;
} }
...@@ -21,7 +21,6 @@ ...@@ -21,7 +21,6 @@
/* Style both the edit and editing states of the contextual links toggle tab. */ /* Style both the edit and editing states of the contextual links toggle tab. */
.toolbar-icon-edit.toolbar-item { .toolbar-icon-edit.toolbar-item {
background-color: #50a0e9; background-color: #50a0e9;
background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
background-image: linear-gradient(to bottom, #007bc6, #0071b8); background-image: linear-gradient(to bottom, #007bc6, #0071b8);
color: #eee; color: #eee;
text-shadow: 0 1px hsla(0, 0%, 0%, 0.5); text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
...@@ -30,7 +29,6 @@ ...@@ -30,7 +29,6 @@
} }
.toolbar-icon-edit.toolbar-item.is-active { .toolbar-icon-edit.toolbar-item.is-active {
background-color: #50a0e9; background-color: #50a0e9;
background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
background-image: linear-gradient(to bottom, #007bc6, #0071b8); background-image: linear-gradient(to bottom, #007bc6, #0071b8);
color: #eee; color: #eee;
text-shadow: 0 1px hsla(0, 0%, 0%, 0.5); text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
...@@ -40,7 +38,6 @@ ...@@ -40,7 +38,6 @@
.toolbar-tab:hover > .toolbar-icon-edit, .toolbar-tab:hover > .toolbar-icon-edit,
.toolbar-icon-edit:focus .toolbar-item { .toolbar-icon-edit:focus .toolbar-item {
background-color: #2369a6; background-color: #2369a6;
background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
background-image: linear-gradient(to bottom, #0c97ed, #1f86c7); background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
border-color: #1e5c90; border-color: #1e5c90;
color: #fff; color: #fff;
......
...@@ -12,81 +12,6 @@ ...@@ -12,81 +12,6 @@
const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button'; const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
const quickEditItemSelector = '[data-quickedit-entity-id]'; const quickEditItemSelector = '[data-quickedit-entity-id]';
/**
* Reacts to contextual links being added.
*
* @param {jQuery.Event} event
* The `drupalContextualLinkAdded` event.
* @param {object} data
* An object containing the data relevant to the event.
*
* @listens event:drupalContextualLinkAdded
*/
$(document).on('drupalContextualLinkAdded', (event, data) => {
// When the first contextual link is added to the page set Edit Mode.
$('body').once('outside_in.edit_mode_init').each(() => {
const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
if (editMode) {
setEditModeState(true);
}
});
// Bind Ajax behaviors to all items showing the class.
// @todo Fix contextual links to work with use-ajax links in
// https://www.drupal.org/node/2764931.
Drupal.attachBehaviors(data.$el[0]);
// Bind a listener to all 'Quick edit' links for blocks
// Click "Edit" button in toolbar to force Contextual Edit which starts
// Settings Tray edit mode also.
data.$el.find(blockConfigureSelector)
.on('click.outsidein', () => {
if (!isInEditMode()) {
$(toggleEditSelector).trigger('click').trigger('click.outside_in');
}
// Always disable QuickEdit regardless of whether "EditMode" was just enabled.
disableQuickEdit();
});
});
$(document).on('keyup.outsidein', (e) => {
if (isInEditMode() && e.keyCode === 27) {
Drupal.announce(
Drupal.t('Exited edit mode.'),
);
toggleEditMode();
}
});
/**
* Gets all items that should be toggled with class during edit mode.
*
* @return {jQuery}
* Items that should be toggled.
*/
function getItemsToToggle() {
return $(itemsToToggleSelector).not(contextualItemsSelector);
}
/**
* Helper to check the state of the outside-in mode.
*
* @todo don't use a class for this.
*
* @return {boolean}
* State of the outside-in edit mode.
*/
function isInEditMode() {
return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
}
/**
* Helper to toggle Edit mode.
*/
function toggleEditMode() {
setEditModeState(!isInEditMode());
}
/** /**
* Prevent default click events except contextual links. * Prevent default click events except contextual links.
* *
...@@ -125,10 +50,20 @@ ...@@ -125,10 +50,20 @@
} }
/** /**
* Helper to switch edit mode state. * Gets all items that should be toggled with class during edit mode.
*
* @return {jQuery}
* Items that should be toggled.
*/
function getItemsToToggle() {
return $(itemsToToggleSelector).not(contextualItemsSelector);
}
/**
* Helper to switch edit mode state.
* *
* @param {boolean} editMode * @param {boolean} editMode
* True enable edit mode, false disable edit mode. * True enable edit mode, false disable edit mode.
*/ */
function setEditModeState(editMode) { function setEditModeState(editMode) {
if (!document.querySelector('[data-off-canvas-main-canvas]')) { if (!document.querySelector('[data-off-canvas-main-canvas]')) {
...@@ -162,7 +97,10 @@ ...@@ -162,7 +97,10 @@
$(quickEditItemSelector) $(quickEditItemSelector)
.not(contextualItemsSelector) .not(contextualItemsSelector)
.on('click.outsidein', (e) => { .on('click.outsidein', (e) => {
// For all non-contextual links or the contextual QuickEdit link close the off-canvas dialog. /**
* For all non-contextual links or the contextual QuickEdit link
* close the off-canvas dialog.
*/
if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) { if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) {
closeOffCanvas(); closeOffCanvas();
} }
...@@ -191,6 +129,78 @@ ...@@ -191,6 +129,78 @@
$('.edit-mode-inactive').toggleClass('visually-hidden', editMode); $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
} }
/**
* Helper to check the state of the outside-in mode.
*
* @todo don't use a class for this.
*
* @return {boolean}
* State of the outside-in edit mode.
*/
function isInEditMode() {
return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
}
/**
* Helper to toggle Edit mode.
*/
function toggleEditMode() {
setEditModeState(!isInEditMode());
}
/**
* Reacts to contextual links being added.
*
* @param {jQuery.Event} event
* The `drupalContextualLinkAdded` event.
* @param {object} data
* An object containing the data relevant to the event.
*
* @listens event:drupalContextualLinkAdded
*/
$(document).on('drupalContextualLinkAdded', (event, data) => {
// When the first contextual link is added to the page set Edit Mode.
$('body').once('outside_in.edit_mode_init').each(() => {
const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
if (editMode) {
setEditModeState(true);
}
});
/**
* Bind Ajax behaviors to all items showing the class.
* @todo Fix contextual links to work with use-ajax links in
* https://www.drupal.org/node/2764931.
*/
Drupal.attachBehaviors(data.$el[0]);
/**
* Bind a listener to all 'Quick edit' links for blocks. Click "Edit" button
* in toolbar to force Contextual Edit which starts Settings Tray edit
* mode also.
*/
data.$el.find(blockConfigureSelector)
.on('click.outsidein', () => {
if (!isInEditMode()) {
$(toggleEditSelector).trigger('click').trigger('click.outside_in');
}
/**
* Always disable QuickEdit regardless of whether "EditMode" was just
* enabled.
*/
disableQuickEdit();
});
});
$(document).on('keyup.outsidein', (e) => {
if (isInEditMode() && e.keyCode === 27) {
Drupal.announce(
Drupal.t('Exited edit mode.'),
);
toggleEditMode();
}
});
/** /**
* Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode. * Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode.
* *
...@@ -222,7 +232,7 @@ ...@@ -222,7 +232,7 @@
// Manage Active editable class on opening and closing of the dialog. // Manage Active editable class on opening and closing of the dialog.
$(window).on({ $(window).on({
'dialog:beforecreate': function (event, dialog, $element, settings) { 'dialog:beforecreate': (event, dialog, $element, settings) => {
if ($element.is('#drupal-off-canvas')) { if ($element.is('#drupal-off-canvas')) {
$('body .outside-in-active-editable').removeClass('outside-in-active-editable'); $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
const $activeElement = $(`#${settings.outsideInActiveEditableId}`); const $activeElement = $(`#${settings.outsideInActiveEditableId}`);
...@@ -231,7 +241,7 @@ ...@@ -231,7 +241,7 @@
} }
} }
}, },
'dialog:beforeclose': function (event, dialog, $element) { 'dialog:beforeclose': (event, dialog, $element) => {
if ($element.is('#drupal-off-canvas')) { if ($element.is('#drupal-off-canvas')) {
$('body .outside-in-active-editable').removeClass('outside-in-active-editable'); $('body .outside-in-active-editable').removeClass('outside-in-active-editable');
} }
......
...@@ -12,44 +12,6 @@ ...@@ -12,44 +12,6 @@
var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button'; var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
var quickEditItemSelector = '[data-quickedit-entity-id]'; var quickEditItemSelector = '[data-quickedit-entity-id]';
$(document).on('drupalContextualLinkAdded', function (event, data) {
$('body').once('outside_in.edit_mode_init').each(function () {
var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
if (editMode) {
setEditModeState(true);
}
});
Drupal.attachBehaviors(data.$el[0]);
data.$el.find(blockConfigureSelector).on('click.outsidein', function () {
if (!isInEditMode()) {
$(toggleEditSelector).trigger('click').trigger('click.outside_in');
}
disableQuickEdit();
});
});
$(document).on('keyup.outsidein', function (e) {
if (isInEditMode() && e.keyCode === 27) {
Drupal.announce(Drupal.t('Exited edit mode.'));
toggleEditMode();
}
});
function getItemsToToggle() {
return $(itemsToToggleSelector).not(contextualItemsSelector);
}
function isInEditMode() {
return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
}
function toggleEditMode() {
setEditModeState(!isInEditMode());
}
function preventClick(event) { function preventClick(event) {
if ($(event.target).closest('.contextual-links').length) { if ($(event.target).closest('.contextual-links').length) {
return; return;
...@@ -69,6 +31,10 @@ ...@@ -69,6 +31,10 @@
$('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click'); $('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click');
} }
function getItemsToToggle() {
return $(itemsToToggleSelector).not(contextualItemsSelector);
}
function setEditModeState(editMode) { function setEditModeState(editMode) {
if (!document.querySelector('[data-off-canvas-main-canvas]')) { if (!document.querySelector('[data-off-canvas-main-canvas]')) {
throw new Error('data-off-canvas-main-canvas is missing from outside-in-page-wrapper.html.twig'); throw new Error('data-off-canvas-main-canvas is missing from outside-in-page-wrapper.html.twig');
...@@ -119,6 +85,40 @@ ...@@ -119,6 +85,40 @@
$('.edit-mode-inactive').toggleClass('visually-hidden', editMode); $('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
} }
function isInEditMode() {
return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
}
function toggleEditMode() {
setEditModeState(!isInEditMode());
}
$(document).on('drupalContextualLinkAdded', function (event, data) {
$('body').once('outside_in.edit_mode_init').each(function () {
var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
if (editMode) {
setEditModeState(true);
}
});
Drupal.attachBehaviors(data.$el[0]);
data.$el.find(blockConfigureSelector).on('click.outsidein', function () {
if (!isInEditMode()) {
$(toggleEditSelector).trigger('click').trigger('click.outside_in');
}
disableQuickEdit();
});
});
$(document).on('keyup.outsidein', function (e) {
if (isInEditMode() && e.keyCode === 27) {
Drupal.announce(Drupal.t('Exited edit mode.'));
toggleEditMode();
}
});
Drupal.behaviors.toggleEditMode = { Drupal.behaviors.toggleEditMode = {
attach: function attach() { attach: function attach() {
$(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode); $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode);
......
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