diff --git a/core/core.libraries.yml b/core/core.libraries.yml index 10254fd2d9..5aed96e135 100644 --- a/core/core.libraries.yml +++ b/core/core.libraries.yml @@ -908,3 +908,31 @@ underscore: gpl-compatible: true js: assets/vendor/underscore/underscore-min.js: { weight: -20, minified: true } + +drupal.dialog.off_canvas: + version: VERSION + js: + misc/dialog/off-canvas.js: {} + css: + base: + misc/dialog/off-canvas.reset.css: {} + misc/dialog/off-canvas.base.css: {} + misc/dialog/off-canvas.css: {} + # Add group setting to make sure this CSS load before any jQuery UI Dialog + # CSS. + misc/dialog/off-canvas.theme.css: { group: 200 } + component: + misc/dialog/off-canvas.motion.css: {} + misc/dialog/off-canvas.button.css: {} + misc/dialog/off-canvas.form.css: {} + misc/dialog/off-canvas.table.css: {} + misc/dialog/off-canvas.details.css: {} + misc/dialog/off-canvas.tabledrag.css: {} + misc/dialog/off-canvas.dropbutton.css: {} + dependencies: + - core/jquery + - core/drupal + - core/drupal.ajax + - core/drupal.announce + - core/drupal.dialog + - core/drupal.dialog.ajax diff --git a/core/core.services.yml b/core/core.services.yml index 76088786cd..98996a6101 100644 --- a/core/core.services.yml +++ b/core/core.services.yml @@ -1065,6 +1065,11 @@ services: arguments: ['@title_resolver'] tags: - { name: render.main_content_renderer, format: drupal_dialog } + main_content_renderer.off_canvas: + class: Drupal\Core\Render\MainContent\OffCanvasRenderer + arguments: ['@title_resolver', '@renderer'] + tags: + - { name: render.main_content_renderer, format: drupal_dialog.off_canvas } main_content_renderer.modal: class: Drupal\Core\Render\MainContent\ModalRenderer arguments: ['@title_resolver'] diff --git a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php similarity index 96% rename from core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php rename to core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php index c5e2b2a5d1..da6a26e35a 100644 --- a/core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php +++ b/core/lib/Drupal/Core/Ajax/OpenOffCanvasDialogCommand.php @@ -1,15 +1,11 @@ renderer->renderRoot($main_content); // Attach the library necessary for using the OpenOffCanvasDialogCommand and // set the attachments for this Ajax response. - $main_content['#attached']['library'][] = 'outside_in/drupal.off_canvas'; + $main_content['#attached']['library'][] = 'core/drupal.dialog.off_canvas'; $response->setAttachments($main_content['#attached']); // If the main content doesn't provide a title, use the title resolver. diff --git a/core/modules/outside_in/css/off-canvas.base.css b/core/misc/dialog/off-canvas.base.css similarity index 95% copy from core/modules/outside_in/css/off-canvas.base.css copy to core/misc/dialog/off-canvas.base.css index aaa713dbbe..a0cb456983 100644 --- a/core/modules/outside_in/css/off-canvas.base.css +++ b/core/misc/dialog/off-canvas.base.css @@ -1,6 +1,6 @@ /** * @file - * Set base styles for the settings tray. + * Set base styles for the off-canvas dialog. */ /* Set some global attributes. */ @@ -217,18 +217,18 @@ } #drupal-off-canvas .messages--status { background-color: #f3faef; - background-image: url(../../../misc/icons/73b355/check.svg); + background-image: url(../icons/73b355/check.svg); color: #325e1c; } #drupal-off-canvas .messages--warning { background-color: #fdf8ed; - background-image: url(../../../misc/icons/e29700/warning.svg); + background-image: url(../icons/e29700/warning.svg); color: #734c00; } #drupal-off-canvas .messages--error { background-color: #fcf4f2; - background-image: url(../../../misc/icons/e32700/error.svg); + background-image: url(../icons/e32700/error.svg); color: #a51b00; } diff --git a/core/modules/outside_in/css/off-canvas.button.css b/core/misc/dialog/off-canvas.button.css similarity index 96% copy from core/modules/outside_in/css/off-canvas.button.css copy to core/misc/dialog/off-canvas.button.css index 2b734f8a81..1f8ed5537d 100644 --- a/core/modules/outside_in/css/off-canvas.button.css +++ b/core/misc/dialog/off-canvas.button.css @@ -1,8 +1,8 @@ /** * @file - * Visual styling for buttons in the off canvas tray. + * Visual styling for buttons in the off-canvas dialog. * - * See seven/css/components/buttons.css + * @see seven/css/components/buttons.css */ #drupal-off-canvas button, diff --git a/core/modules/outside_in/css/off-canvas.css b/core/misc/dialog/off-canvas.css similarity index 69% copy from core/modules/outside_in/css/off-canvas.css copy to core/misc/dialog/off-canvas.css index d7f3258b26..52a8b9e079 100644 --- a/core/modules/outside_in/css/off-canvas.css +++ b/core/misc/dialog/off-canvas.css @@ -1,8 +1,6 @@ /** * @file * CSS for off-canvas dialog. - * - * @todo Move CSS into core dialog library https://www.drupal.org/node/2784443. */ /* Position the off-canvas dialog container outside the right of the viewport. */ @@ -23,14 +21,14 @@ text-align: right; } -/* Position the dialog-off-canvas tray container outside the right of the viewport. */ +/* Position the off-canvas dialog container outside the right of the viewport. */ .ui-dialog-off-canvas { box-sizing: border-box; height: 100%; overflow: visible; } -/* Wrap the form that's inside the dialog-off-canvas tray. */ +/* Wrap the form that's inside the off-canvas dialog. */ .ui-dialog-off-canvas #drupal-off-canvas { padding: 0 20px; /* Prevent horizontal scrollbar. */ @@ -42,15 +40,15 @@ } /* - * Force the tray to be 100% width at the same breakpoint the dialog system uses - * to expand dialog widths. + * Force the off-canvas dialog to be 100% width at the same breakpoint the + * dialog system uses to expand dialog widths. */ @media all and (max-width: 48em) { /* 768px */ .ui-dialog.ui-dialog-off-canvas { width: 100% !important; } - /* When tray is at 100% width stop the body from scrolling */ - .js-tray-open { + /* When off-canvas dialog is at 100% width stop the body from scrolling */ + .js-off-canvas-dialog-open { height: 100%; overflow-y: hidden; } diff --git a/core/modules/outside_in/css/off-canvas.details.css b/core/misc/dialog/off-canvas.details.css similarity index 93% copy from core/modules/outside_in/css/off-canvas.details.css copy to core/misc/dialog/off-canvas.details.css index dcac6a5b04..fcd526f0b0 100644 --- a/core/modules/outside_in/css/off-canvas.details.css +++ b/core/misc/dialog/off-canvas.details.css @@ -1,6 +1,6 @@ /** * @file - * Visual styling for summary and details in the Settings Tray module's off canvas tray. + * Visual styling for summary and details in the off-canvas dialog. */ #drupal-off-canvas details, diff --git a/core/modules/outside_in/css/off-canvas.dropbutton.css b/core/misc/dialog/off-canvas.dropbutton.css similarity index 98% copy from core/modules/outside_in/css/off-canvas.dropbutton.css copy to core/misc/dialog/off-canvas.dropbutton.css index e467a4f341..7211dceaf5 100644 --- a/core/modules/outside_in/css/off-canvas.dropbutton.css +++ b/core/misc/dialog/off-canvas.dropbutton.css @@ -1,6 +1,6 @@ /** * @file - * Styles for dropbuttons in the off-canvas tray. + * Styles for dropbuttons in the off-canvas dialog. */ #drupal-off-canvas .dropbutton-wrapper, @@ -241,7 +241,7 @@ content: '.'; display: block; color: transparent; - background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat center; + background: transparent url(../icons/ffffff/pencil.svg) no-repeat center; background-size: 14px; } diff --git a/core/modules/outside_in/js/off-canvas.es6.js b/core/misc/dialog/off-canvas.es6.js similarity index 93% rename from core/modules/outside_in/js/off-canvas.es6.js rename to core/misc/dialog/off-canvas.es6.js index e0ac6b71e2..5e21932b53 100644 --- a/core/modules/outside_in/js/off-canvas.es6.js +++ b/core/misc/dialog/off-canvas.es6.js @@ -1,12 +1,6 @@ /** * @file * Drupal's off-canvas library. - * - * @todo This functionality should extracted into a new core library or a part - * of the current drupal.dialog.ajax library. - * https://www.drupal.org/node/2784443 - * - * @private */ (($, Drupal, debounce, displace) => { @@ -22,13 +16,15 @@ /** * 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 core/misc/dialog/off-canvas.css + * * @type {Number} */ minDisplaceWidth: 768, /** * Wrapper used to position off-canvas dialog. + * * @type {jQuery} */ $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'), @@ -38,6 +34,7 @@ * * @param {jQuery} $element * The dialog element. + * * @return {bool} * True this is currently an off-canvas dialog. */ @@ -47,13 +44,14 @@ /** * Handler fired before an off-canvas dialog has been opened. - * @param {Object} settings + * + * @param {Object} settings * Settings related to the composition of the dialog. + * * @return {undefined} */ beforeCreate({ settings }) { - $('body').addClass('js-tray-open'); - settings.dialogClass += ' ui-dialog-off-canvas'; + $('body').addClass('js-off-canvas-dialog-open'); // @see http://api.jqueryui.com/position/ settings.position = { my: 'left top', @@ -70,10 +68,11 @@ /** * Handler fired after an off-canvas dialog has been closed. + * * @return {undefined} */ beforeClose() { - $('body').removeClass('js-tray-open'); + $('body').removeClass('js-off-canvas-dialog-open'); // Remove all *.off-canvas events $(document).off('.off-canvas'); $(window).off('.off-canvas'); @@ -82,10 +81,12 @@ /** * Handler fired when an off-canvas dialog has been opened. - * @param {jQuery} $element + * + * @param {jQuery} $element * The off-canvas dialog element. - * @param {Object} settings + * @param {Object} settings * Settings related to the composition of the dialog. + * * @return {undefined} */ afterCreate({ $element, settings }) { @@ -107,8 +108,10 @@ /** * Toggle classes based on title existence. * Called with Drupal.offCanvas.afterCreate. - * @param {Object} settings + * + * @param {Object} settings * Settings related to the composition of the dialog. + * * @return {undefined} */ render({ settings }) { diff --git a/core/modules/outside_in/css/off-canvas.form.css b/core/misc/dialog/off-canvas.form.css similarity index 97% copy from core/modules/outside_in/css/off-canvas.form.css copy to core/misc/dialog/off-canvas.form.css index 254b2c74e9..b47dbcc6f2 100644 --- a/core/modules/outside_in/css/off-canvas.form.css +++ b/core/misc/dialog/off-canvas.form.css @@ -1,6 +1,6 @@ /** * @file - * Visual styling for forms in the Settings Tray module's off canvas tray. + * Visual styling for forms in the off-canvas dialog. */ #drupal-off-canvas form { diff --git a/core/modules/outside_in/js/off-canvas.js b/core/misc/dialog/off-canvas.js similarity index 96% rename from core/modules/outside_in/js/off-canvas.js rename to core/misc/dialog/off-canvas.js index 61e76fe419..05ae40ddd1 100644 --- a/core/modules/outside_in/js/off-canvas.js +++ b/core/misc/dialog/off-canvas.js @@ -17,8 +17,7 @@ beforeCreate: function beforeCreate(_ref) { var settings = _ref.settings; - $('body').addClass('js-tray-open'); - settings.dialogClass += ' ui-dialog-off-canvas'; + $('body').addClass('js-off-canvas-dialog-open'); settings.position = { my: 'left top', @@ -29,7 +28,7 @@ settings.height = $(window).height(); }, beforeClose: function beforeClose() { - $('body').removeClass('js-tray-open'); + $('body').removeClass('js-off-canvas-dialog-open'); $(document).off('.off-canvas'); $(window).off('.off-canvas'); diff --git a/core/modules/outside_in/css/off-canvas.motion.css b/core/misc/dialog/off-canvas.motion.css similarity index 54% copy from core/modules/outside_in/css/off-canvas.motion.css copy to core/misc/dialog/off-canvas.motion.css index ae261870bc..87fbf3016a 100644 --- a/core/modules/outside_in/css/off-canvas.motion.css +++ b/core/misc/dialog/off-canvas.motion.css @@ -4,10 +4,6 @@ * * Motion effects are in a separate file so that they can be easily turned off * to improve performance if desired. - * - * @todo Move motion effects file into a core Off-Canvas library and add a - * configuration option for browser rendering performance to disable this - * file: https://www.drupal.org/node/2784443. */ .dialog-off-canvas__main-canvas { diff --git a/core/modules/outside_in/css/off-canvas.reset.css b/core/misc/dialog/off-canvas.reset.css similarity index 100% copy from core/modules/outside_in/css/off-canvas.reset.css copy to core/misc/dialog/off-canvas.reset.css diff --git a/core/modules/outside_in/css/off-canvas.table.css b/core/misc/dialog/off-canvas.table.css similarity index 96% copy from core/modules/outside_in/css/off-canvas.table.css copy to core/misc/dialog/off-canvas.table.css index 24d2b4c026..03efbd6326 100644 --- a/core/modules/outside_in/css/off-canvas.table.css +++ b/core/misc/dialog/off-canvas.table.css @@ -1,6 +1,6 @@ /** * @file - * Visual styling for tables in the Settings Tray module's off canvas tray. + * Visual styling for tables in the off-canvas dialog. */ #drupal-off-canvas table * { diff --git a/core/modules/outside_in/css/off-canvas.tabledrag.css b/core/misc/dialog/off-canvas.tabledrag.css similarity index 94% copy from core/modules/outside_in/css/off-canvas.tabledrag.css copy to core/misc/dialog/off-canvas.tabledrag.css index 20f97954da..edeef831bc 100644 --- a/core/modules/outside_in/css/off-canvas.tabledrag.css +++ b/core/misc/dialog/off-canvas.tabledrag.css @@ -1,6 +1,6 @@ /** * @file - * Table drag behavior for Settings Tray module. + * Table drag behavior for off-canvas dialog. * * @see tabledrag.js */ @@ -39,7 +39,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-image: url(../icons/bebebe/move.svg); background-repeat: no-repeat; background-position: center; height: auto; @@ -49,7 +49,7 @@ } #drupal-off-canvas .draggable a.tabledrag-handle:hover .handle, #drupal-off-canvas .draggable a.tabledrag-handle:focus .handle { - background-image: url(../../../misc/icons/787878/move.svg); + background-image: url(../icons/787878/move.svg); text-decoration: none; } #drupal-off-canvas tr td { diff --git a/core/modules/outside_in/css/off-canvas.theme.css b/core/misc/dialog/off-canvas.theme.css similarity index 90% copy from core/modules/outside_in/css/off-canvas.theme.css copy to core/misc/dialog/off-canvas.theme.css index 0493e3ce44..e1990a7d46 100644 --- a/core/modules/outside_in/css/off-canvas.theme.css +++ b/core/misc/dialog/off-canvas.theme.css @@ -15,7 +15,7 @@ z-index: 501; } -/* Style the tray header. */ +/* Style the off-canvas dialog header. */ .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar { padding: 1em; background: #2d2d2d; @@ -30,7 +30,7 @@ visibility: hidden; } .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close { - background-image: url(../../../misc/icons/bebebe/ex.svg); + background-image: url(../icons/bebebe/ex.svg); background-position: center center; background-repeat: no-repeat; background-color: transparent; @@ -40,7 +40,7 @@ transition: background .5s ease; } .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close:hover { - background-image: url(../../../misc/icons/ffffff/ex.svg); + background-image: url(../icons/ffffff/ex.svg); } [dir="rtl"] .ui-dialog.ui-dialog-off-canvas .ui-dialog-titlebar-close { left: 1em; @@ -64,7 +64,7 @@ padding-right: 30px; } .ui-dialog.ui-dialog-off-canvas .ui-dialog-title:before { - background: transparent url(../../../misc/icons/ffffff/pencil.svg) no-repeat scroll center center; + background: transparent url(../icons/ffffff/pencil.svg) no-repeat scroll center center; background-size: 100% auto; content: ''; display: block; diff --git a/core/modules/outside_in/css/outside_in.motion.css b/core/modules/outside_in/css/outside_in.motion.css index d327369137..4cf88b68d9 100644 --- a/core/modules/outside_in/css/outside_in.motion.css +++ b/core/modules/outside_in/css/outside_in.motion.css @@ -14,6 +14,6 @@ /* 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-off-canvas-dialog-open .js-outside-in-edit-mode .outside-in-editable { transition: all .7s ease; } diff --git a/core/modules/outside_in/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml index 06e24a8291..64e1eddd19 100644 --- a/core/modules/outside_in/outside_in.libraries.yml +++ b/core/modules/outside_in/outside_in.libraries.yml @@ -17,29 +17,3 @@ drupal.outside_in: - core/drupal - core/jquery.once - core/drupal.ajax -drupal.off_canvas: - version: VERSION - js: - js/off-canvas.js: {} - css: - base: - css/off-canvas.reset.css: {} - css/off-canvas.base.css: {} - css/off-canvas.css: {} - css/off-canvas.theme.css: { group: 200 } - component: - css/off-canvas.motion.css: {} - css/off-canvas.button.css: {} - css/off-canvas.form.css: {} - css/off-canvas.table.css: {} - css/off-canvas.details.css: {} - css/off-canvas.tabledrag.css: {} - css/off-canvas.dropbutton.css: {} - - dependencies: - - core/jquery - - core/drupal - - core/drupal.ajax - - core/drupal.announce - - core/drupal.dialog - - core/drupal.dialog.ajax diff --git a/core/modules/outside_in/outside_in.module b/core/modules/outside_in/outside_in.module index 02d03423bf..bc3d6335ed 100644 --- a/core/modules/outside_in/outside_in.module +++ b/core/modules/outside_in/outside_in.module @@ -44,7 +44,7 @@ function outside_in_contextual_links_view_alter(&$element, $items) { $element['#links']['outside-inblock-configure']['title'] = t('Quick edit settings'); } - $element['#attached']['library'][] = 'outside_in/drupal.off_canvas'; + $element['#attached']['library'][] = 'core/drupal.dialog.off_canvas'; } } @@ -60,26 +60,6 @@ function outside_in_block_view_alter(array &$build) { ]; } -/** - * Implements hook_element_info_alter(). - */ -function outside_in_element_info_alter(&$type) { - if (isset($type['page'])) { - $type['page']['#theme_wrappers']['outside_in_page_wrapper'] = ['#weight' => -1000]; - } -} - -/** - * Implements hook_theme(). - */ -function outside_in_theme() { - return [ - 'outside_in_page_wrapper' => [ - 'variables' => ['children' => NULL], - ], - ]; -} - /** * Implements hook_entity_type_build(). */ diff --git a/core/modules/outside_in/outside_in.services.yml b/core/modules/outside_in/outside_in.services.yml index 5d95c1e4e5..534cdca0be 100644 --- a/core/modules/outside_in/outside_in.services.yml +++ b/core/modules/outside_in/outside_in.services.yml @@ -1,10 +1,4 @@ services: - main_content_renderer.off_canvas: - class: Drupal\outside_in\Render\MainContent\OffCanvasRenderer - arguments: ['@title_resolver', '@renderer'] - tags: - - { name: render.main_content_renderer, format: drupal_dialog.off_canvas } - access_check.outside_in.block.off_canvas_form: class: Drupal\outside_in\Access\BlockPluginHasOffCanvasFormAccessCheck tags: diff --git a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php index 0ec08cb841..97129c8e13 100644 --- a/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php +++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OutsideInBlockFormTest.php @@ -7,6 +7,7 @@ use Drupal\block_content\Entity\BlockContentType; use Drupal\outside_in_test\Plugin\Block\OffCanvasFormAnnotationIsClassBlock; use Drupal\outside_in_test\Plugin\Block\OffCanvasFormAnnotationNoneBlock; +use Drupal\Tests\system\FunctionalJavascript\OffCanvasTestBase; use Drupal\user\Entity\Role; /** @@ -14,7 +15,7 @@ * * @group outside_in */ -class OutsideInBlockFormTest extends OutsideInJavascriptTestBase { +class OutsideInBlockFormTest extends OffCanvasTestBase { const TOOLBAR_EDIT_LINK_SELECTOR = '#toolbar-bar div.contextual-toolbar-tab button'; @@ -555,4 +556,59 @@ public function testValidationMessages() { } } + /** + * Clicks a contextual link. + * + * @todo Remove this function when related trait added in + * https://www.drupal.org/node/2821724. + * + * @param string $selector + * The selector for the element that contains the contextual link. + * @param string $link_locator + * The link id, title, or text. + * @param bool $force_visible + * If true then the button will be forced to visible so it can be clicked. + */ + protected function clickContextualLink($selector, $link_locator, $force_visible = TRUE) { + if ($force_visible) { + $this->toggleContextualTriggerVisibility($selector); + } + + $element = $this->getSession()->getPage()->find('css', $selector); + $element->find('css', '.contextual button')->press(); + $element->findLink($link_locator)->click(); + + if ($force_visible) { + $this->toggleContextualTriggerVisibility($selector); + } + } + + /** + * Toggles the visibility of a contextual trigger. + * + * @todo Remove this function when related trait added in + * https://www.drupal.org/node/2821724. + * + * @param string $selector + * The selector for the element that contains the contextual link. + */ + protected function toggleContextualTriggerVisibility($selector) { + // Hovering over the element itself with should be enough, but does not + // work. Manually remove the visually-hidden class. + $this->getSession()->executeScript("jQuery('{$selector} .contextual .trigger').toggleClass('visually-hidden');"); + } + + /** + * {@inheritdoc} + */ + protected function getTestThemes() { + $themes = parent::getTestThemes(); + // Remove 'seven' theme. Setting Tray "Edit Mode" will not work with 'seven' + // because it removes all contextual links the off-canvas dialog should. + if (($key = array_search('seven', $themes)) !== FALSE) { + unset($themes[$key]); + } + return $themes; + } + } diff --git a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php b/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php similarity index 85% rename from core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php rename to core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php index ce3356f112..6d7ddbb9d4 100644 --- a/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php +++ b/core/modules/system/src/Tests/Ajax/OffCanvasDialogTest.php @@ -1,30 +1,22 @@ drupalLogin($this->drupalCreateUser(['administer contact forms'])); // Ensure the elements render without notices or exceptions. $this->drupalGet('ajax-test/dialog'); diff --git a/core/modules/system/system.module b/core/modules/system/system.module index d327d4e74b..cb366ac49c 100644 --- a/core/modules/system/system.module +++ b/core/modules/system/system.module @@ -268,6 +268,9 @@ function system_theme() { ], 'template' => 'entity-add-list', ], + 'off_canvas_page_wrapper' => [ + 'variables' => ['children' => NULL], + ], ]); } @@ -1515,3 +1518,12 @@ function system_query_entity_reference_alter(AlterableInterface $query) { $handler = $query->getMetadata('entity_reference_selection_handler'); $handler->entityQueryAlter($query); } + +/** + * Implements hook_element_info_alter(). + */ +function system_element_info_alter(&$type) { + if (isset($type['page'])) { + $type['page']['#theme_wrappers']['off_canvas_page_wrapper'] = ['#weight' => -1000]; + } +} diff --git a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig b/core/modules/system/templates/off-canvas-page-wrapper.html.twig similarity index 58% copy from core/modules/outside_in/templates/outside-in-page-wrapper.html.twig copy to core/modules/system/templates/off-canvas-page-wrapper.html.twig index 11c7f5311d..98b67ba2c2 100644 --- a/core/modules/outside_in/templates/outside-in-page-wrapper.html.twig +++ b/core/modules/system/templates/off-canvas-page-wrapper.html.twig @@ -5,13 +5,13 @@ * * For consistent wrapping to {{ page }} render in all themes. The * "data-off-canvas-main-canvas" attribute is required by the off-canvas dialog. - * This is used by the outside_in/drupal.off_canvas library to select the - * "main canvas" page element as opposed to the "off canvas" which is the tray + * This is used by the core/drupal.dialog.off_canvas library to select the + * "main canvas" page element as opposed to the "off canvas" which is the dialog * itself. The "main canvas" element must be resized according to the width of - * the "off canvas" tray so that no portion of the "main canvas" is obstructed - * by the tray. The tray can vary in width when opened and can be resized by the - * user. The "data-off-canvas-main-canvas" attribute cannot be removed without - * breaking the off-canvas dialog functionality. + * the "off canvas" dialog so that no portion of the "main canvas" is obstructed + * by the off-canvas dialog. The off-canvas dialog can vary in width when opened + * and can be resized by the user. The "data-off-canvas-main-canvas" attribute + * cannot be removed without breaking the off-canvas dialog functionality. * * Available variables: * - children: Contains the child elements of the page. @@ -20,7 +20,7 @@ */ #} {% if children %} -