Skip to content
Snippets Groups Projects
Commit e2e1f61c authored by Angie Byron's avatar Angie Byron
Browse files

Issue #2803375 by cilefen, tedbow, saurabh-chugh, Wim Leers: Rename Outside-in... 

Issue #2803375 by cilefen, tedbow, saurabh-chugh, Wim Leers: Rename Outside-in module to "Settings Tray" for real
parent 271134ee
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 48 additions and 48 deletions
core/MAINTAINERS.txt
+ 3
− 3
View file @ e2e1f61c
......@@ -311,9 +311,6 @@ Node Access
Options
- ?
Outside In
- Ted Bowman 'tedbow' https://www.drupal.org/u/tedbow
Page Cache
- Lorenz Schori 'znerol' https://www.drupal.org/u/znerol
- Fabian Franz 'Fabianx' https://www.drupal.org/u/fabianx
......@@ -360,6 +357,9 @@ Search
Serialization
- Damian Lee 'damiankloip' https://www.drupal.org/u/damiankloip
Settings Tray
- Ted Bowman 'tedbow' https://www.drupal.org/u/tedbow
Seven
- ?
......
core/composer.json
+ 1
− 1
View file @ e2e1f61c
......@@ -123,7 +123,6 @@
"drupal/migrate_drupal_ui": "self.version",
"drupal/node": "self.version",
"drupal/options": "self.version",
"drupal/outside_in": "self.version",
"drupal/page_cache": "self.version",
"drupal/path": "self.version",
"drupal/quickedit": "self.version",
......@@ -132,6 +131,7 @@
"drupal/rest": "self.version",
"drupal/search": "self.version",
"drupal/serialization": "self.version",
"drupal/settings_tray": "self.version",
"drupal/seven": "self.version",
"drupal/shortcut": "self.version",
"drupal/simpletest": "self.version",
......
core/modules/outside_in/css/outside_in.module.css → core/modules/settings_tray/css/settings_tray.module.css
+ 3
− 3
View file @ e2e1f61c
......@@ -14,10 +14,10 @@
float: right;
}
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode a,
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode input {
.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode a,
.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode input {
pointer-events: none;
}
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .contextual-links a {
.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .contextual-links a {
pointer-events: inherit;
}
core/modules/outside_in/css/outside_in.motion.css → core/modules/settings_tray/css/settings_tray.motion.css
+ 2
− 2
View file @ e2e1f61c
......@@ -13,7 +13,7 @@
/* Transition the editables on the page, their contextual links and their hover states. */
.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 {
.dialog-off-canvas__main-canvas .js-settings-tray-edit-mode .settings-tray-editable,
.dialog-off-canvas__main-canvas.js-tray-open .js-settings-tray-edit-mode .settings-tray-editable {
transition: all .7s ease;
}
core/modules/outside_in/css/outside_in.theme.css → core/modules/settings_tray/css/settings_tray.theme.css
+ 6
− 6
View file @ e2e1f61c
......@@ -8,13 +8,13 @@
*/
/* Style the edit mode toolbar and tabs. */
#toolbar-bar.js-outside-in-edit-mode {
#toolbar-bar.js-settings-tray-edit-mode {
background-image: linear-gradient(to bottom,#0c97ed,#1f86c7);
}
.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
.js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) {
color: #999;
}
.js-outside-in-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
.js-settings-tray-edit-mode .toolbar-item:not(.toolbar-icon-edit) .is-active {
color: #333;
}
......@@ -60,11 +60,11 @@
}
/* Style the editables while in edit mode. */
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable {
.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable {
outline: 1px dashed rgba(0,0,0,0.5);
box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
}
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable:hover,
.dialog-off-canvas__main-canvas.js-outside-in-edit-mode .outside-in-editable.outside-in-active-editable {
.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable:hover,
.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable.settings-tray-active-editable {
background-color: rgba(0,0,0,0.2);
}
core/modules/outside_in/css/outside_in.toolbar.css → core/modules/settings_tray/css/settings_tray.toolbar.css
+ 5
− 5
View file @ e2e1f61c
......@@ -8,13 +8,13 @@
*/
/* Style the edit mode toolbar and tabs. */
#toolbar-bar.js-outside-in-edit-mode {
#toolbar-bar.js-settings-tray-edit-mode {
background-color: #fff;
}
#toolbar-bar.js-outside-in-edit-mode .toolbar-item {
#toolbar-bar.js-settings-tray-edit-mode .toolbar-item {
color: #999;
}
#toolbar-bar.js-outside-in-edit-mode .toolbar-item .is-active {
#toolbar-bar.js-settings-tray-edit-mode .toolbar-item .is-active {
color: #333;
}
......@@ -58,10 +58,10 @@ button.toolbar-icon.toolbar-icon-edit.toolbar-item:before:focus {
background-image: url(../../../misc/icons/ffffff/pencil.svg);
}
#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
#toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active {
background-image: none;
color: #fff;
}
#toolbar-bar.js-outside-in-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
#toolbar-bar.js-settings-tray-edit-mode button.toolbar-icon.toolbar-icon-edit.toolbar-item.is-active:hover {
background-image: linear-gradient(to bottom, #0094f0, #0e69be);
}
core/modules/outside_in/js/off-canvas.es6.js → core/modules/settings_tray/js/off-canvas.es6.js
+ 1
− 1
View file @ e2e1f61c
......@@ -22,7 +22,7 @@
/**
* The minimum width to use body displace needs to match the width at which
* the tray will be %100 width. @see outside_in.module.css
* the tray will be %100 width. @see settings_tray.module.css
* @type {Number}
*/
minDisplaceWidth: 768,
......
core/modules/outside_in/js/outside_in.es6.js → core/modules/settings_tray/js/settings_tray.es6.js
+ 27
− 27
View file @ e2e1f61c
......@@ -6,9 +6,9 @@
*/
(function ($, Drupal) {
const blockConfigureSelector = '[data-outside-in-edit]';
const toggleEditSelector = '[data-drupal-outsidein="toggle"]';
const itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button';
const blockConfigureSelector = '[data-settings-tray-edit]';
const toggleEditSelector = '[data-drupal-settingstray="toggle"]';
const itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button';
const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
const quickEditItemSelector = '[data-quickedit-entity-id]';
......@@ -67,7 +67,7 @@
*/
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');
throw new Error('data-off-canvas-main-canvas is missing from settings-tray-page-wrapper.html.twig');
}
editMode = !!editMode;
const $editButton = $(toggleEditSelector);
......@@ -77,16 +77,16 @@
$editButton.text(Drupal.t('Editing'));
closeToolbarTrays();
$editables = $('[data-drupal-outsidein="editable"]').once('outsidein');
$editables = $('[data-drupal-settingstray="editable"]').once('settingstray');
if ($editables.length) {
// Use event capture to prevent clicks on links.
document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
// When a click occurs try and find the outside-in edit link
// When a click occurs try and find the settings-tray edit link
// and click it.
$editables
.not(contextualItemsSelector)
.on('click.outsidein', (e) => {
.on('click.settingstray', (e) => {
// Contextual links are allowed to function in Edit mode.
if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
return;
......@@ -96,7 +96,7 @@
});
$(quickEditItemSelector)
.not(contextualItemsSelector)
.on('click.outsidein', (e) => {
.on('click.settingstray', (e) => {
/**
* For all non-contextual links or the contextual QuickEdit link
* close the off-canvas dialog.
......@@ -114,31 +114,31 @@
}
// Disable edit mode.
else {
$editables = $('[data-drupal-outsidein="editable"]').removeOnce('outsidein');
$editables = $('[data-drupal-settingstray="editable"]').removeOnce('settingstray');
if ($editables.length) {
document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
$editables.off('.outsidein');
$(quickEditItemSelector).off('.outsidein');
$editables.off('.settingstray');
$(quickEditItemSelector).off('.settingstray');
}
$editButton.text(Drupal.t('Edit'));
closeOffCanvas();
disableQuickEdit();
}
getItemsToToggle().toggleClass('js-outside-in-edit-mode', editMode);
getItemsToToggle().toggleClass('js-settings-tray-edit-mode', editMode);
$('.edit-mode-inactive').toggleClass('visually-hidden', editMode);
}
/**
* Helper to check the state of the outside-in mode.
* Helper to check the state of the settings-tray mode.
*
* @todo don't use a class for this.
*
* @return {boolean}
* State of the outside-in edit mode.
* State of the settings-tray edit mode.
*/
function isInEditMode() {
return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
return $('#toolbar-bar').hasClass('js-settings-tray-edit-mode');
}
/**
......@@ -161,7 +161,7 @@
$(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(() => {
$('body').once('settings_tray.edit_mode_init').each(() => {
const editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
if (editMode) {
setEditModeState(true);
......@@ -180,9 +180,9 @@
* mode also.
*/
data.$el.find(blockConfigureSelector)
.on('click.outsidein', () => {
.on('click.settingstray', () => {
if (!isInEditMode()) {
$(toggleEditSelector).trigger('click').trigger('click.outside_in');
$(toggleEditSelector).trigger('click').trigger('click.settings_tray');
}
/**
* Always disable QuickEdit regardless of whether "EditMode" was just
......@@ -192,7 +192,7 @@
});
});
$(document).on('keyup.outsidein', (e) => {
$(document).on('keyup.settingstray', (e) => {
if (isInEditMode() && e.keyCode === 27) {
Drupal.announce(
Drupal.t('Exited edit mode.'),
......@@ -202,16 +202,16 @@
});
/**
* Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode.
* Toggle the js-settings-tray-edit-mode class on items that we want to disable while in edit mode.
*
* @type {Drupal~behavior}
*
* @prop {Drupal~behaviorAttach} attach
* Toggle the js-outside-edit-mode class.
* Toggle the js-settings-tray-edit-mode class.
*/
Drupal.behaviors.toggleEditMode = {
attach() {
$(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode);
$(toggleEditSelector).once('settingstray').on('click.settingstray', toggleEditMode);
// Find all Ajax instances that use the 'off_canvas' renderer.
Drupal.ajax.instances
// If there is an element and the renderer is 'off_canvas' then we want
......@@ -224,7 +224,7 @@
if (!('dialogOptions' in instance.options.data)) {
instance.options.data.dialogOptions = {};
}
instance.options.data.dialogOptions.outsideInActiveEditableId = $(instance.element).parents('.outside-in-editable').attr('id');
instance.options.data.dialogOptions.settingsTrayActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id');
instance.progress = { type: 'fullscreen' };
});
},
......@@ -234,16 +234,16 @@
$(window).on({
'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}`);
$('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
const $activeElement = $(`#${settings.settingsTrayActiveEditableId}`);
if ($activeElement.length) {
$activeElement.addClass('outside-in-active-editable');
$activeElement.addClass('settings-tray-active-editable');
}
}
},
'dialog:beforeclose': (event, dialog, $element) => {
if ($element.is('#drupal-off-canvas')) {
$('body .outside-in-active-editable').removeClass('outside-in-active-editable');
$('body .settings-tray-active-editable').removeClass('settings-tray-active-editable');
}
},
});
......
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