diff --git a/core/MAINTAINERS.txt b/core/MAINTAINERS.txt index 53d7bd752b..c02a30b962 100644 --- a/core/MAINTAINERS.txt +++ b/core/MAINTAINERS.txt @@ -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 - ? diff --git a/core/modules/settings_tray/css/settings_tray.module.css b/core/modules/settings_tray/css/settings_tray.module.css index 667dc2ec00..05b5bee4dc 100644 --- a/core/modules/settings_tray/css/settings_tray.module.css +++ b/core/modules/settings_tray/css/settings_tray.module.css @@ -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; } diff --git a/core/modules/settings_tray/css/settings_tray.motion.css b/core/modules/settings_tray/css/settings_tray.motion.css index d327369137..03639cb1e4 100644 --- a/core/modules/settings_tray/css/settings_tray.motion.css +++ b/core/modules/settings_tray/css/settings_tray.motion.css @@ -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; } diff --git a/core/modules/settings_tray/css/settings_tray.theme.css b/core/modules/settings_tray/css/settings_tray.theme.css index 567db216e3..9c40c74dfd 100644 --- a/core/modules/settings_tray/css/settings_tray.theme.css +++ b/core/modules/settings_tray/css/settings_tray.theme.css @@ -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); } diff --git a/core/modules/settings_tray/css/settings_tray.toolbar.css b/core/modules/settings_tray/css/settings_tray.toolbar.css index e09fb008f9..8a2278c24a 100644 --- a/core/modules/settings_tray/css/settings_tray.toolbar.css +++ b/core/modules/settings_tray/css/settings_tray.toolbar.css @@ -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); } diff --git a/core/modules/settings_tray/js/settings_tray.es6.js b/core/modules/settings_tray/js/settings_tray.es6.js index f6b18ef595..8ebd7a2257 100644 --- a/core/modules/settings_tray/js/settings_tray.es6.js +++ b/core/modules/settings_tray/js/settings_tray.es6.js @@ -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'); } /** @@ -180,7 +180,7 @@ * mode also. */ data.$el.find(blockConfigureSelector) - .on('click.outsidein', () => { + .on('click.settingstray', () => { if (!isInEditMode()) { $(toggleEditSelector).trigger('click').trigger('click.settings_tray'); } @@ -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.'), @@ -211,7 +211,7 @@ */ 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.outsideInActiveEditableId = $(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'); + $('body .settings-tray-active-editable').removeClass('settings-tray-active-editable'); const $activeElement = $(`#${settings.outsideInActiveEditableId}`); 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'); } }, }); diff --git a/core/modules/settings_tray/js/settings_tray.js b/core/modules/settings_tray/js/settings_tray.js index 296c470ddb..66a799d082 100644 --- a/core/modules/settings_tray/js/settings_tray.js +++ b/core/modules/settings_tray/js/settings_tray.js @@ -6,9 +6,9 @@ **/ (function ($, Drupal) { - var blockConfigureSelector = '[data-outside-in-edit]'; - var toggleEditSelector = '[data-drupal-outsidein="toggle"]'; - var itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button'; + var blockConfigureSelector = '[data-settings-tray-edit]'; + var toggleEditSelector = '[data-drupal-settingstray="toggle"]'; + var itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button'; var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button'; var quickEditItemSelector = '[data-quickedit-entity-id]'; @@ -37,7 +37,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; var $editButton = $(toggleEditSelector); @@ -47,18 +47,18 @@ $editButton.text(Drupal.t('Editing')); closeToolbarTrays(); - $editables = $('[data-drupal-outsidein="editable"]').once('outsidein'); + $editables = $('[data-drupal-settingstray="editable"]').once('settingstray'); if ($editables.length) { document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true); - $editables.not(contextualItemsSelector).on('click.outsidein', function (e) { + $editables.not(contextualItemsSelector).on('click.settingstray', function (e) { if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) { return; } $(e.currentTarget).find(blockConfigureSelector).trigger('click'); disableQuickEdit(); }); - $(quickEditItemSelector).not(contextualItemsSelector).on('click.outsidein', function (e) { + $(quickEditItemSelector).not(contextualItemsSelector).on('click.settingstray', function (e) { if (!$(e.target).parent().hasClass('contextual') || $(e.target).parent().hasClass('quickedit')) { closeOffCanvas(); } @@ -70,23 +70,23 @@ }); } } 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); } function isInEditMode() { - return $('#toolbar-bar').hasClass('js-outside-in-edit-mode'); + return $('#toolbar-bar').hasClass('js-settings-tray-edit-mode'); } function toggleEditMode() { @@ -103,7 +103,7 @@ Drupal.attachBehaviors(data.$el[0]); - data.$el.find(blockConfigureSelector).on('click.outsidein', function () { + data.$el.find(blockConfigureSelector).on('click.settingstray', function () { if (!isInEditMode()) { $(toggleEditSelector).trigger('click').trigger('click.settings_tray'); } @@ -112,7 +112,7 @@ }); }); - $(document).on('keyup.outsidein', function (e) { + $(document).on('keyup.settingstray', function (e) { if (isInEditMode() && e.keyCode === 27) { Drupal.announce(Drupal.t('Exited edit mode.')); toggleEditMode(); @@ -121,7 +121,7 @@ Drupal.behaviors.toggleEditMode = { attach: function attach() { - $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleEditMode); + $(toggleEditSelector).once('settingstray').on('click.settingstray', toggleEditMode); Drupal.ajax.instances.filter(function (instance) { return instance && $(instance.element).attr('data-dialog-renderer') === 'off_canvas'; @@ -129,7 +129,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.outsideInActiveEditableId = $(instance.element).parents('.settings-tray-editable').attr('id'); instance.progress = { type: 'fullscreen' }; }); } @@ -138,16 +138,16 @@ $(window).on({ 'dialog:beforecreate': function dialogBeforecreate(event, dialog, $element, settings) { 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'); var $activeElement = $('#' + settings.outsideInActiveEditableId); if ($activeElement.length) { - $activeElement.addClass('outside-in-active-editable'); + $activeElement.addClass('settings-tray-active-editable'); } } }, 'dialog:beforeclose': function dialogBeforeclose(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'); } } }); diff --git a/core/modules/settings_tray/settings_tray.api.php b/core/modules/settings_tray/settings_tray.api.php index 1af929d59f..4516127f7c 100644 --- a/core/modules/settings_tray/settings_tray.api.php +++ b/core/modules/settings_tray/settings_tray.api.php @@ -17,8 +17,8 @@ * - limits the form items displayed in the Settings Tray to only items that * affect the content of the rendered block * - adds additional form items to edit configuration that is rendered by the - * block. See \Drupal\settings_tray\Form\SystemBrandingOffCanvasForm which adds - * site name and slogan configuration. + * block. See \Drupal\settings_tray\Form\SystemBrandingOffCanvasForm which + * adds site name and slogan configuration. * * These can be used to provide a better experience, so that the Settings Tray * only displays what the user will expect to change when editing the block. @@ -55,7 +55,7 @@ * what the Settings Tray does for a given block. * * @see settings_tray_block_alter() - * @see \Drupal\Tests\settings_tray\Functional\OutsideInBlockTest::testPossibleAnnotations() + * @see \Drupal\Tests\settings_tray\Functional\SettingsTrayBlockTest::testPossibleAnnotations() * * @} */ diff --git a/core/modules/settings_tray/settings_tray.links.contextual.yml b/core/modules/settings_tray/settings_tray.links.contextual.yml index 533ebfef6f..5534ab27f5 100644 --- a/core/modules/settings_tray/settings_tray.links.contextual.yml +++ b/core/modules/settings_tray/settings_tray.links.contextual.yml @@ -7,4 +7,4 @@ settings_tray.block_configure: class: ['use-ajax'] data-dialog-type: dialog data-dialog-renderer: off_canvas - data-outside-in-edit: true + data-settings-tray-edit: true diff --git a/core/modules/settings_tray/settings_tray.module b/core/modules/settings_tray/settings_tray.module index 64b6aa28ee..7017439414 100644 --- a/core/modules/settings_tray/settings_tray.module +++ b/core/modules/settings_tray/settings_tray.module @@ -18,7 +18,7 @@ function settings_tray_help($route_name, RouteMatchInterface $route_match) { switch ($route_name) { case 'help.page.settings_tray': $output = '
' . t('The Settings Tray module provides an \'edit mode\' in which clicking on a block opens a slide-out tray which allows configuration to be altered without leaving the page.For more information, see the online documentation for the Settings Tray module.', [':outside-in-documentation' => 'https://www.drupal.org/documentation/modules/settings_tray']) . '
'; + $output .= '' . t('The Settings Tray module provides an \'edit mode\' in which clicking on a block opens a slide-out tray which allows configuration to be altered without leaving the page.For more information, see the online documentation for the Settings Tray module.', [':settings-tray-documentation' => 'https://www.drupal.org/documentation/modules/settings_tray']) . '
'; $output .= '