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
* Set base styles for the settings tray.
*/
......@@ -200,7 +200,7 @@
content: ']';
}
/* Override jquery UI */
/* Override jQuery UI */
#drupal-off-canvas .ui-widget-content a {
color: #85bef4 !important;
}
......
/**
* @file
* Visual styling for buttons in the off canvas tray.
*
* See seven/css/components/buttons.css
......@@ -85,7 +86,7 @@
}
#drupal-off-canvas .no-touchevents .button--small {
font-size: 13px;
padding: 2px 1em; /* 1 */
padding: 2px 1em;
}
#drupal-off-canvas .button:disabled,
#drupal-off-canvas .button:disabled:active,
......
......@@ -11,7 +11,5 @@
*/
.dialog-off-canvas__main-canvas {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
transition: all .7s ease;
}
......@@ -167,8 +167,7 @@
#drupal-off-canvas table tbody tr:nth-child(odd),
#drupal-off-canvas table tfoot {
border: 0;
background: none;
background-color: transparent;
background: transparent none;
}
#drupal-off-canvas th,
#drupal-off-canvas td,
......@@ -325,6 +324,9 @@
#drupal-off-canvas select[disabled] optgroup,
#drupal-off-canvas textarea[disabled] {
box-shadow: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
}
......@@ -358,8 +360,7 @@
}
#drupal-off-canvas * button {
background: none;
border: 1px solid;
border-color: grey;
border: 1px solid grey;
color: black;
padding: 0;
text-decoration: none;
......@@ -372,14 +373,14 @@
#drupal-off-canvas *:not(div) textarea,
#drupal-off-canvas *:not(div) select {
background: white;
border: 1px solid;
border-color: grey;
border: 1px solid grey;
color: black;
padding: 0;
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 {
background-color: rgba(175,175,175,0.5);
color: inherit;
......
......@@ -72,7 +72,7 @@
padding: 6px 8px;
color: #ddd;
}
/* Hide overflow with elipsis for links. */
/* Hide overflow with ellipsis for links. */
#drupal-off-canvas td a {
display: block;
overflow: hidden;
......
......@@ -38,6 +38,7 @@
}
#drupal-off-canvas a.tabledrag-handle .handle {
/* Use lighter drag icon against dark background. */
background-color: transparent;
background-image: url(../../../misc/icons/bebebe/move.svg);
background-repeat: no-repeat;
background-position: center;
......@@ -45,7 +46,6 @@
margin: 0;
padding: 0;
width: auto;
background-color: transparent;
}
#drupal-off-canvas .draggable a.tabledrag-handle:hover .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. */
.ui-dialog.ui-dialog-off-canvas {
background: #444;
......@@ -20,7 +25,7 @@
font-weight: normal;
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 {
visibility: hidden;
}
......@@ -32,7 +37,6 @@
border: 0;
position: absolute;
right: 1em;
-moz-transition: all .5s ease;
transition: background .5s ease;
}
.ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover {
......@@ -75,7 +79,7 @@
right: 1em;
}
/* Override default styling from jquery UI. */
/* Override default styling from jQuery UI. */
#drupal-off-canvas .ui-state-default,
#drupal-off-canvas .ui-widget-content .ui-state-default,
#drupal-off-canvas .ui-widget-header .ui-state-default {
......@@ -85,5 +89,5 @@
color: #333;
}
#drupal-off-canvas .ui-widget-content a {
color: #85bef4/*{fcContent}*/;
color: #85bef4;
}
......@@ -8,8 +8,6 @@
/* Transition the edit icon in the toolbar. */
#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;
}
......@@ -17,7 +15,5 @@
.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-tray-open .js-outside-in-edit-mode .outside-in-editable {
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
transition: all .7s ease;
}
......@@ -21,7 +21,6 @@
/* Style both the edit and editing states of the contextual links toggle tab. */
.toolbar-icon-edit.toolbar-item {
background-color: #50a0e9;
background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
background-image: linear-gradient(to bottom, #007bc6, #0071b8);
color: #eee;
text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
......@@ -30,7 +29,6 @@
}
.toolbar-icon-edit.toolbar-item.is-active {
background-color: #50a0e9;
background-image: -webkit-linear-gradient(top, #007bc6, #0071b8);
background-image: linear-gradient(to bottom, #007bc6, #0071b8);
color: #eee;
text-shadow: 0 1px hsla(0, 0%, 0%, 0.5);
......@@ -40,7 +38,6 @@
.toolbar-tab:hover > .toolbar-icon-edit,
.toolbar-icon-edit:focus .toolbar-item {
background-color: #2369a6;
background-image: -webkit-linear-gradient(top, #0c97ed, #1f86c7);
background-image: linear-gradient(to bottom, #0c97ed, #1f86c7);
border-color: #1e5c90;
color: #fff;
......
......@@ -12,81 +12,6 @@
const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
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.
*
......@@ -124,6 +49,16 @@
$('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click');
}
/**
* 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.
*
......@@ -162,7 +97,10 @@
$(quickEditItemSelector)
.not(contextualItemsSelector)
.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')) {
closeOffCanvas();
}
......@@ -191,6 +129,78 @@
$('.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.
*
......@@ -222,7 +232,7 @@
// Manage Active editable class on opening and closing of the dialog.
$(window).on({
'dialog:beforecreate': function (event, dialog, $element, settings) {
'dialog:beforecreate': (event, dialog, $element, settings) => {
if ($element.is('#drupal-off-canvas')) {
$('body .outside-in-active-editable').removeClass('outside-in-active-editable');
const $activeElement = $(`#${settings.outsideInActiveEditableId}`);
......@@ -231,7 +241,7 @@
}
}
},
'dialog:beforeclose': function (event, dialog, $element) {
'dialog:beforeclose': (event, dialog, $element) => {
if ($element.is('#drupal-off-canvas')) {
$('body .outside-in-active-editable').removeClass('outside-in-active-editable');
}
......
......@@ -12,44 +12,6 @@
var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
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) {
if ($(event.target).closest('.contextual-links').length) {
return;
......@@ -69,6 +31,10 @@
$('.ui-dialog-off-canvas .ui-dialog-titlebar-close').trigger('click');
}
function getItemsToToggle() {
return $(itemsToToggleSelector).not(contextualItemsSelector);
}
function setEditModeState(editMode) {
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');
......@@ -119,6 +85,40 @@
$('.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 = {
attach: function attach() {
$(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