Verified Commit c586b217 authored by larowlan's avatar larowlan
Browse files

Issue #2784443 by tedbow, Wim Leers, Cottser, tim.plunkett, droplet, drpal,...

Issue #2784443 by tedbow, Wim Leers, Cottser, tim.plunkett, droplet, drpal, nod_, lauriii: Move off-canvas functionality from Settings tray module into drupal.dialog.ajax library so that other modules can use it
parent 850f03b9
......@@ -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
......@@ -1048,6 +1048,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']
......
<?php
namespace Drupal\settings_tray\Ajax;
use Drupal\Core\Ajax\OpenDialogCommand;
namespace Drupal\Core\Ajax;
/**
* Defines an AJAX command to open content in a dialog in a off-canvas dialog.
*
* @ingroup ajax
*
* @internal
*/
class OpenOffCanvasDialogCommand extends OpenDialogCommand {
......
<?php
namespace Drupal\settings_tray\Render\MainContent;
namespace Drupal\Core\Render\MainContent;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Controller\TitleResolverInterface;
use Drupal\Core\Render\MainContent\DialogRenderer;
use Drupal\Core\Render\RendererInterface;
use Drupal\Core\Routing\RouteMatchInterface;
use Drupal\settings_tray\Ajax\OpenOffCanvasDialogCommand;
use Drupal\Core\Ajax\OpenOffCanvasDialogCommand;
use Symfony\Component\HttpFoundation\Request;
/**
......@@ -47,7 +46,7 @@ public function renderResponse(array $main_content, Request $request, RouteMatch
$content = $this->renderer->renderRoot($main_content);
// Attach the library necessary for using the OpenOffCanvasDialogCommand and
// set the attachments for this Ajax response.
$main_content['#attached']['library'][] = 'settings_tray/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.
......
/**
* @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;
}
......
/**
* @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,
......
/**
* @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;
}
......
/**
* @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,
......
/**
* @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;
}
......
/**
* @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 settings_tray.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.
*/
......@@ -59,16 +56,17 @@
/**
* 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, $element }) {
// Clean up previous dialog event handlers.
Drupal.offCanvas.removeOffCanvasEvents($element);
$('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',
......@@ -85,10 +83,11 @@
/**
* Handler fired after an off-canvas dialog has been closed.
*
* @return {undefined}
*/
beforeClose({ $element }) {
$('body').removeClass('js-tray-open');
$('body').removeClass('js-off-canvas-dialog-open');
// Remove all *.off-canvas events
Drupal.offCanvas.removeOffCanvasEvents($element);
......@@ -97,10 +96,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 }) {
......@@ -120,8 +121,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 }) {
......
/**
* @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 {
......
......@@ -25,8 +25,7 @@
Drupal.offCanvas.removeOffCanvasEvents($element);
$('body').addClass('js-tray-open');
settings.dialogClass += ' ui-dialog-off-canvas';
$('body').addClass('js-off-canvas-dialog-open');
settings.position = {
my: 'left top',
......@@ -39,7 +38,7 @@
beforeClose: function beforeClose(_ref2) {
var $element = _ref2.$element;
$('body').removeClass('js-tray-open');
$('body').removeClass('js-off-canvas-dialog-open');
Drupal.offCanvas.removeOffCanvasEvents($element);
......
......@@ -4,12 +4,8 @@
*
* 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 {
.dialog-off-canvas-main-canvas {
transition: all .7s ease;
}
/**
* @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 * {
......
/**
* @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 {
......
......@@ -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;
......
......@@ -14,10 +14,10 @@
float: right;
}
.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode a,
.dialog-off-canvas__main-canvas.js-settings-tray-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-settings-tray-edit-mode .contextual-links a {
.dialog-off-canvas-main-canvas.js-settings-tray-edit-mode .contextual-links a {
pointer-events: inherit;
}
......@@ -12,8 +12,8 @@
}
/* 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-settings-tray-edit-mode .settings-tray-editable,
.dialog-off-canvas__main-canvas.js-tray-open .js-settings-tray-edit-mode .settings-tray-editable {
.dialog-off-canvas-main-canvas .contextual,
.dialog-off-canvas-main-canvas .js-settings-tray-edit-mode .settings-tray-editable,
.dialog-off-canvas-main-canvas.js-off-canvas-dialog-open .js-settings-tray-edit-mode .settings-tray-editable {
transition: all .7s ease;
}
......@@ -60,11 +60,11 @@
}
/* Style the editables while in edit mode. */
.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-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-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 {
.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);
}
Supports Markdown
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