summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorScott Reeves2017-08-14 16:36:18 -0400
committerScott Reeves2017-08-14 16:36:35 -0400
commit9ba27699bdb8d01ba50d264a9bbad8ce51450ea3 (patch)
tree2abdd347e8b7832627687e5de474805196a3ebfc
parentc80e437f40cccca29bff22d4ca66719b53d4da6b (diff)
Issue #2899724 by drpal, tedbow, DyanneNova, droplet, Cottser, Wim Leers: Fixes for settings tray CSS and JavaScript minor issues
(cherry picked from commit 8972a66f2e33081689f7d4e1d66eaf2a5b57bd3a)
-rw-r--r--core/modules/outside_in/css/off-canvas.base.css4
-rw-r--r--core/modules/outside_in/css/off-canvas.button.css3
-rw-r--r--core/modules/outside_in/css/off-canvas.motion.css2
-rw-r--r--core/modules/outside_in/css/off-canvas.reset.css15
-rw-r--r--core/modules/outside_in/css/off-canvas.table.css2
-rw-r--r--core/modules/outside_in/css/off-canvas.tabledrag.css2
-rw-r--r--core/modules/outside_in/css/off-canvas.theme.css12
-rw-r--r--core/modules/outside_in/css/outside_in.motion.css4
-rw-r--r--core/modules/outside_in/css/outside_in.toolbar.css3
-rw-r--r--core/modules/outside_in/js/outside_in.es6.js170
-rw-r--r--core/modules/outside_in/js/outside_in.js76
11 files changed, 150 insertions, 143 deletions
diff --git a/core/modules/outside_in/css/off-canvas.base.css b/core/modules/outside_in/css/off-canvas.base.css
index 4263886..aaa713d 100644
--- a/core/modules/outside_in/css/off-canvas.base.css
+++ b/core/modules/outside_in/css/off-canvas.base.css
@@ -1,4 +1,4 @@
-/*
+/**
* @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;
}
diff --git a/core/modules/outside_in/css/off-canvas.button.css b/core/modules/outside_in/css/off-canvas.button.css
index 4f7987a..2b734f8 100644
--- a/core/modules/outside_in/css/off-canvas.button.css
+++ b/core/modules/outside_in/css/off-canvas.button.css
@@ -1,4 +1,5 @@
/**
+ * @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,
diff --git a/core/modules/outside_in/css/off-canvas.motion.css b/core/modules/outside_in/css/off-canvas.motion.css
index e8df8db..ae26187 100644
--- a/core/modules/outside_in/css/off-canvas.motion.css
+++ b/core/modules/outside_in/css/off-canvas.motion.css
@@ -11,7 +11,5 @@
*/
.dialog-off-canvas__main-canvas {
- -webkit-transition: all .7s ease;
- -moz-transition: all .7s ease;
transition: all .7s ease;
}
diff --git a/core/modules/outside_in/css/off-canvas.reset.css b/core/modules/outside_in/css/off-canvas.reset.css
index cd87eda..573d8c7 100644
--- a/core/modules/outside_in/css/off-canvas.reset.css
+++ b/core/modules/outside_in/css/off-canvas.reset.css
@@ -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;
diff --git a/core/modules/outside_in/css/off-canvas.table.css b/core/modules/outside_in/css/off-canvas.table.css
index 3a6e749..24d2b4c 100644
--- a/core/modules/outside_in/css/off-canvas.table.css
+++ b/core/modules/outside_in/css/off-canvas.table.css
@@ -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;
diff --git a/core/modules/outside_in/css/off-canvas.tabledrag.css b/core/modules/outside_in/css/off-canvas.tabledrag.css
index 4f6f9be..20f9795 100644
--- a/core/modules/outside_in/css/off-canvas.tabledrag.css
+++ b/core/modules/outside_in/css/off-canvas.tabledrag.css
@@ -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 {
diff --git a/core/modules/outside_in/css/off-canvas.theme.css b/core/modules/outside_in/css/off-canvas.theme.css
index 47bdcfb..0493e3c 100644
--- a/core/modules/outside_in/css/off-canvas.theme.css
+++ b/core/modules/outside_in/css/off-canvas.theme.css
@@ -1,3 +1,8 @@
+/**
+ * @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;
}
diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/modules/outside_in/css/outside_in.motion.css
index 4bdd236..d327369 100644
--- a/core/modules/outside_in/css/outside_in.motion.css
+++ b/core/modules/outside_in/css/outside_in.motion.css
@@ -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;
}
diff --git a/core/modules/outside_in/css/outside_in.toolbar.css b/core/modules/outside_in/css/outside_in.toolbar.css
index a199841..e09fb00 100644
--- a/core/modules/outside_in/css/outside_in.toolbar.css
+++ b/core/modules/outside_in/css/outside_in.toolbar.css
@@ -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;
diff --git a/core/modules/outside_in/js/outside_in.es6.js b/core/modules/outside_in/js/outside_in.es6.js
index f36bb83..b8b6a4e 100644
--- a/core/modules/outside_in/js/outside_in.es6.js
+++ b/core/modules/outside_in/js/outside_in.es6.js
@@ -13,81 +13,6 @@
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.
*
* In edit mode the default action of click events is suppressed.
@@ -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
- * True enable edit mode, false disable edit mode.
+ * True enable edit mode, false disable edit mode.
*/
function setEditModeState(editMode) {
if (!document.querySelector('[data-off-canvas-main-canvas]')) {
@@ -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();
}
@@ -192,6 +130,78 @@
}
/**
+ * 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.
*
* @type {Drupal~behavior}
@@ -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');
}
diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js
index dc949c7..5561c11 100644
--- a/core/modules/outside_in/js/outside_in.js
+++ b/core/modules/outside_in/js/outside_in.js
@@ -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);