Problem/Motivation

In #2784443: Move off-canvas functionality from Settings tray module into drupal.dialog.ajax library so that other modules can use it we are separating the off-canvas dialog tray from the rest of the Setting Tray module.

This will allow other modules to use the tray.
We are not including the css that resets form styles because the tray could be used for front end style things and backend/forms style things

But it would be very nice for modules to be able to specify that they want the css reset or other css to be loaded for specific off-canvas links.

Proposed resolution

Introduce a new "main_content_renderer.off_canvas_admin" renderer service. It uses the same render class put just sends in a new optional argument $mode = "admin".

Add a new setting,"Off-canvas dialog administration theme" to the Administration Theme fieldset on /admin/appearance. This would allow choosing:

  • Administration theme
  • Default Theme
  • (all other compatible themes)

Themes can provide CSS for the Off-canvas dialog by specifying "off_canvas_admin_stylesheets" in their *.info.yml files. The setting from the theme's base theme can also be used.(this functionality is borrowed from the QuickEdit module)

Remaining tasks

  1. Extract the CSS in drupal.outside_in library that only deals with the dialog styles into a new library.
  2. Pick a main selector class for the dialog in "admin" mode. Maybe "ui-dialog-offcanvas__admin"
  3. Attach that library in the extract library if in admin mode

User interface changes

None, but would allow offcanvas links to have different looks

API changes

Links can either use
'data-dialog-renderer' => 'offcanvas_admin',
or
'data-dialog-renderer' => 'offcanvas',

Data model changes

None

To Test

  1. Enable offcanvas_test module
  2. Goto /offcanvas-test-links
  3. There should be 4 links that open in off-canvas.
  4. "Click Me Admin!" will be styled differently
  5. The "Quick Edit" block links can still be used.

Comments

tedbow created an issue. See original summary.

tedbow’s picture

Issue summary: View changes
StatusFileSize
new33.22 KB

Here is the patch

tedbow’s picture

Status: Active » Needs review
tim.plunkett’s picture

I'm not really sure that this is a good idea. But, that aside...

  1. +++ b/core/modules/outside_in/outside_in.module
    @@ -38,6 +38,7 @@ function outside_in_contextual_links_view_alter(&$element, $items) {
    +      'data-dialog-styles-library' => 'outside_in/drupal.outside_in_styles',
    
    +++ b/core/modules/outside_in/src/Render/MainContent/OffCanvasRender.php
    @@ -52,12 +58,30 @@ public function renderResponse(array $main_content, Request $request, RouteMatch
    +    if (isset($options['drupalStylesLibrary'])) {
    

    It's weird you specify it with hyphens and then it's lowerCamelCase later

  2. +++ b/core/modules/outside_in/src/Render/MainContent/OffCanvasRender.php
    @@ -52,12 +58,30 @@ public function renderResponse(array $main_content, Request $request, RouteMatch
    +      if (!isset($options['dialogClass'])) {
    +        $options['dialogClass'] = '';
    +      }
    +      $options['dialogClass'] .= ' ' . Html::cleanCssIdentifier($options['drupalStylesLibrary']);
    

    PHP--

  3. +++ b/core/modules/outside_in/tests/modules/offcanvas_test/offcanvas_test.libraries.yml
    @@ -0,0 +1,5 @@
    +      css/paint-it-black.css: {}
    

    lol

  4. +++ b/core/modules/outside_in/tests/modules/offcanvas_test/src/Controller/TestController.php
    @@ -92,6 +106,22 @@ public function linksDisplay() {
    +          'data-dialog-styles-library' => 'offcanvas_test/drupal.off_canvas_test_styles',
    

    IMO should be an array of libraries

  5. +++ b/core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php
    @@ -89,10 +89,20 @@ public function testNarrowWidth() {
           $web_assert->elementAttributeContains('css', '.dialog-offcanvas__main-canvas', 'style', 'padding-right');
     
    +
    +      $this->drupalGet('/offcanvas-test-links');
    

    Extra blank line

tedbow’s picture

Starting to think this might be crazy overly complicated.
It seems there are really 2 main use case,

  1. The dialog should look like the front-end
  2. The dialog should look like your back-end

For #1 you don't need to do anything
For #2 you need to load your back-end styles and do a reset.

The easiest way would just be to add the another 'data-dialog-renderer' option. Maybe 'off-canvas-admin'
You could also have a site wide setting that says load x theme for off-canvas-admin.
Options

  • (Use admin theme)
  • (Use default theme)
  • ... Then list all themes

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Status: Needs review » Needs work

The last submitted patch, 2: 2847522-2.patch, failed testing.

tedbow’s picture

Title: Allow links to specify a library to load for styling purposes in off-canvas dialog(and other dialogs) » Allow off-canvas links to be render by either "default" or "admin" renderer
Issue summary: View changes
Status: Needs work » Needs review
StatusFileSize
new7.79 KB

Ok this patch takes a much simpler approach of just introducing a new "main_content_renderer.off_canvas_admin" renderer service. It uses the same render class put just sends in a new optional argument $mode = "admin".

When in "admin" mode the service will attach a reset library(not made yet) and a dialog class.

I have updated the issue summary including the steps to test.

tkoleary’s picture

Title: Allow off-canvas links to be render by either "default" or "admin" renderer » Allow off-canvas links to be rendered by either "default" or "admin" renderer
tedbow’s picture

StatusFileSize
new17.31 KB
new11.32 KB

Ok I have added the a setting on "/admin/appearance" for the admin to choose which theme should be used for the Off Canvas dialog.

Then the selected theme will able to add style sheets in the same manner as quickedit. In this can add off_canvas_admin_stylesheets to the info file.
Only themes that have this setting will show up in the select.

I have added a new test theme 'off_canvas_admin_theme' that has this settings. If you enable this theme and select it you should see the background become black on the dialog.

@todo I have not written the test to test if this is loaded yet.

Status: Needs review » Needs work

The last submitted patch, 10: 2847522-10.patch, failed testing.

tedbow’s picture

Status: Needs work » Needs review
StatusFileSize
new18.31 KB
new0 bytes

updated test to match new constructor signature

tedbow’s picture

StatusFileSize
new20.67 KB
new2.36 KB

Updated \Drupal\outside_in\Tests\Ajax\OffCanvasDialogTest to include coverage for drupal_dialog_offcanvas_admin format.

tedbow’s picture

StatusFileSize
new20.88 KB
new3.67 KB

Ok this is just improvements to the comments.

tedbow’s picture

Issue summary: View changes

Status: Needs review » Needs work

The last submitted patch, 14: 2847522-14.patch, failed testing.

tedbow’s picture

Status: Needs work » Needs review
StatusFileSize
new1.87 KB
new20.89 KB

I canceled the test in #14 because there were a couple other small changes.
Changed the test theme name
Change the order the options in the theme select so admin theme is first.

Munavijayalakshmi’s picture

Assigned: Unassigned » Munavijayalakshmi
Status: Needs review » Needs work
+++ b/core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php
@@ -50,10 +46,26 @@ public function testDialog() {
+      // Emulate going to the JS version of the page and check the JSON response.

Line exceeding 80 characters

Munavijayalakshmi’s picture

Assigned: Munavijayalakshmi » Unassigned
Status: Needs work » Needs review
StatusFileSize
new20.9 KB
new887 bytes
GrandmaGlassesRopeMan’s picture

Status: Needs review » Closed (works as designed)
+++ b/core/modules/outside_in/src/Render/MainContent/OffCanvasRender.php
@@ -47,15 +57,23 @@ public function renderResponse(array $main_content, Request $request, RouteMatch
+    if ($this->mode == 'admin') {

After talking with @webchick, @Gábor Hojtsy and @yoroy, this seems not necessary for an MVP.

If you want to override the styles globally used in settings tray, you can override or extend the library in your theme/module.

Additionally, if you want to change it each time the tray is opened you can specify dialogClass in the dialogOptions attribute, and have your CSS keyed from that.

tkoleary’s picture

Status: Closed (works as designed) » Postponed

I can see the argument that this is not MVP, however it is a valuable thing to have and we should look at putting it in next release.

wim leers’s picture

Status: Postponed » Closed (works as designed)
Related issues: +#2826722: Add a 'fence' around settings tray with aggressive CSS reset.

This is indeed adding a lot of complexity while it's not clear it's actually really solving the problem.

With #2826722: Add a 'fence' around settings tray with aggressive CSS reset., we should have all the protection we need. If that's not enough, then "default" and "admin" also won't do, because they're both theme-specific, which means we'll need one of these "renderers" per theme. AFAIK the whole point of #2826722: Add a 'fence' around settings tray with aggressive CSS reset. is that it's a theme-agnostic reset.

Restoring state from #20.

tedbow’s picture

Component: outside_in.module » settings_tray.module

Changing to new settings_tray.module component. @drpal thanks for script help! :)