Problem/Motivation

For 8.2 only warning messages were styled for the off canvas tray singe they were only needed for the tabledrag save alert. As more modules extend the offcanvas tray all messages will need to be supported.

Proposed resolution

Style all messages for the off-canvas tray.

Warning:

Error:

Status:

Message Multiple:

Message long:

Remaining tasks

  • Style warnings
  • Style errors
  • Style alerts
  • Add rtl styles
  • Add hover states
  • Test in all themes
  • Teas cros browser
  • Test for touch devices
  • Test responsive

User interface changes

All messages are styled for the off canvas tray (dark background)

API changes

None

Data model changes

None

Files: 
CommentFileSizeAuthor
#41 2799611-messages-41.patch3.41 KBtkoleary
#37 2799611-messages-37.patch5.34 KBtkoleary
#35 Screen Shot 2017-01-16 at 1.50.44 PM.png23.29 KBtkoleary
#35 Screen Shot 2017-01-16 at 1.55.28 PM.png22.89 KBtkoleary
#35 Screen Shot 2017-01-16 at 1.55.45 PM.png23.01 KBtkoleary
#35 Screen Shot 2017-01-16 at 2.25.07 PM.png23.62 KBtkoleary
#35 Screen Shot 2017-01-16 at 2.25.31 PM.png22.67 KBtkoleary
#35 Screen Shot 2017-01-16 at 2.34.07 PM.png22.64 KBtkoleary
#34 interdiff-2799611-messages-34.txt2.85 KBtkoleary
#34 2799611-messages-34.patch5.32 KBtkoleary
#25 interdiff-21-25.txt1.38 KBtedbow
#25 2799611-25.patch4.08 KBtedbow
#21 interdiff-2799611-outsidein-17-21.txt1.22 KBtkoleary
#21 2799611-outsidein-21.patch4.67 KBtkoleary
#17 2799611-outsidein-17.patch4.11 KBcorbacho
#17 before_after.png57.71 KBcorbacho
#14 2799611-outsidein-13.patch4.87 KBtkoleary
#12 interdiff-2799611-outsidein-11-12.txt4.22 KBtkoleary
#12 2799611-outsidein-12.patch4.87 KBtkoleary
#11 interdiff-2799611-outsidein-5-11.txt1.82 KBtkoleary
#11 2799611-outsidein-11.patch3.85 KBtkoleary
#5 2799611-outsidein-5.patch3.08 KBtkoleary
#4 outside_in.messages.css_.txt2.07 KBtkoleary
#3 Screen Shot 2016-09-17 at 5.10.42 PM.png44.25 KBtkoleary
#2 Screen Shot 2016-09-17 at 5.11.24 PM.png16.71 KBtkoleary
#2 Screen Shot 2016-09-17 at 5.12.01 PM.png22.04 KBtkoleary
#2 Screen Shot 2016-09-17 at 5.14.29 PM.png23.39 KBtkoleary
#2 Screen Shot 2016-09-17 at 5.15.20 PM.png21.34 KBtkoleary

Comments

tkoleary created an issue. See original summary.

tkoleary’s picture

tkoleary’s picture

Issue summary: View changes
FileSize
44.25 KB
tkoleary’s picture

There is no patch yet until the patch at #2781577: Properly style outside-in off canvas tray lands but anyone who wants to can look test this by applying the patch from #2781577, adding this CSS file, then adding this: @import url("/core/modules/outside_in/css/outside_in.messages.css"); to the top of outside-in.theme.css.

Doing it that way ftm instead of adding to libraries.yml because it needs to load last and a function has been added to the module to load the outside-in.theme.css last.

tkoleary’s picture

Initial patch

tkoleary’s picture

Status: Active » Needs review
tkoleary’s picture

Issue summary: View changes
tkoleary’s picture

Issue tags: +CSS, +messages
tim.plunkett’s picture

  1. +++ b/core/modules/outside_in/css/outside_in.messages.css
    @@ -0,0 +1,78 @@
    +  background-color: #000;
    +  background-repeat: no-repeat;
    ...
    +  background-position: 10px 18px; /* LTR */
    

    Can be background: #000 no-repeat 10px 18px; /* LTR */

  2. +++ b/core/modules/outside_in/css/outside_in.messages.css
    @@ -0,0 +1,78 @@
    +  padding-top: 15px;
    +  padding-right: 10px; /* LTR */
    +  padding-bottom: 15px;
    ...
    +  padding-left: 35px; /* LTR */
    

    Can be padding: 15px 10px 15px 35px; /* LTR */

  3. +++ b/core/modules/outside_in/css/outside_in.messages.css
    @@ -0,0 +1,78 @@
    +  margin-top: 10px;
    +  margin-right: -20px;
    +  margin-bottom: 10px;
    +  margin-left: -20px;
    

    Can be margin: 10px -20px;

  4. +++ b/core/modules/outside_in/css/outside_in.messages.css
    @@ -0,0 +1,78 @@
    +  border-top: 0;
    +  border-right: 0;
    +  border-bottom: 0;
    +  border-left: 0;
    ...
    +  border-style: solid;
    

    Can be border: 0 solid;

  5. +++ b/core/modules/outside_in/css/outside_in.theme.css
    @@ -7,6 +7,10 @@
    +/* Using import so messages styling loads last and overrides core messages css.
    + * We can do this because all outside-in css is tightly scoped to the tray. */
    +@import url("/core/modules/outside_in/css/outside_in.messages.css");
    

    Definitely should not be doing this manually. *.libraries.yml should be sufficient to order things correctly.

tkoleary’s picture

@tim.plunkett

On 1-4: Not using shorthand is intentional here. In many instances listing all properties is more readable and maintainable. For example if we have:

div {
  border: 2px 4px 0 2px; /* LTR */
}
div:hover {
  border: 2px 2px 1px 4px; /* LTR */
}
[dir="rtl"] div {
  border: 2px 4px 0px 2px;
}

It's pretty difficult to parse what's going on even if I know the shorthand property order pretty well.

However if I have:

div {
  border-top: 2px;
  border-right: 2px; /* LTR */
  border-bottom: 0;
  border-left; 4px; /* LTR */
}
div:hover {
  border-bottom: 1px;
}
[dir="rtl"] div {
  border-right: 4px;
  border-left: 2px;
}

It's immediately clear that I'm setting 4px border left for ltr, 4px right for rtl, and 1px bottom on hover. I have also not repeated properties that don't change (which someone else might unwittingly change the second instance of later).

Definitely should not be doing this manually. *.libraries.yml should be sufficient to order things correctly.

Yeah, I agree, the reason for doing it this way is to gang the component with styles and take advantage of the function you created to load that last. After the todo around that is resolved this should be dealt with by libraries.

Or we could just add this file to the css alter function if you think that would be better? In any event if it doesn't load last it gets overridden by messages.css from Bartik and/or classy.

tkoleary’s picture

This is working now since I added group 200 (ie. not being overridden by any theme) but the precise logic of how the css order is generated is still somewhat of a mystery to me, and I suspect that I'm alone in this.

tkoleary’s picture

Removed styling that changes background color because there is work in another patch to have both a dark and light version of the tray and the background styling can be set there.

Status: Needs review » Needs work

The last submitted patch, 12: 2799611-outsidein-12.patch, failed testing.

tkoleary’s picture

tkoleary’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 14: 2799611-outsidein-13.patch, failed testing.

corbacho’s picture

Status: Needs work » Needs review
FileSize
57.71 KB
4.11 KB

Small fix on libraries.yml to pass the tests.
Screenshot in Chrome-OSX
Messages styles before and after the patch

The current message "You have unsaved changes" is an ad-hoc JavaScript error message by tabledrag.js, I would like to test it with normal drupal_set_messages messages, but I can't figure it out.

Also I tried to set form errors, to test different messages styles or multiple messages, but I can't figure it out how to do it. (Validation doesn't display in the settings tray, it will jump to a different page)

A bit of help on how to test, is welcome.

tkoleary’s picture

@corbacho

Great work! Thanks.

The way I have been testing how this works for other messages is kind of a hack but it gets part way there. I just open chrome inspector, select the element in the markup and manually change the class to check the other types of messages.

That wil at least tell you whether the CSS classes are applying correctly until the issue about moving DSMs into the tray lands. #2785047: In Outside In mode, messages should appear in the off-canvas tray, not the main page

prestonso’s picture

#10: Not using shorthand is intentional here. In many instances listing all properties is more readable and maintainable.

There is a fine balance between readability and maintainability of code and allowing CSS code size to balloon. In my opinion, those contributing to CSS should be able to interpret shorthand property values. As such, I advocate the following, in which exceptional declarations (e.g. in selectors having more specificity) avoid shorthand to aid readability, while overarching declarations employ shorthand to aid efficiency:

div {
  border: 2px 2px 0 4px; /* LTR */
}
div:hover {
  border-bottom: 1px;
}
[dir="rtl"] div {
  border-right: 4px;
  border-left: 2px;
}

For what it's worth, our CSS formatting guidelines have a few examples where shorthand is used generically.

tkoleary’s picture

@prestonso

Personally I'd find it more readable to see the attribute that is changing in longhand both in it's default and it's pseudo-class state, but I think this is a pretty good compromise, though it is somewhat reliant on the rules being directly consecutive, which they may not always be.

tkoleary’s picture

Updated per CSS suggestion from @prestonso

Status: Needs review » Needs work

The last submitted patch, 21: 2799611-outsidein-21.patch, failed testing.

tkoleary’s picture

@corbacho

I think I regressed your change that made it pass tests. Not sure what's going on. Could you take a look?

tim.plunkett’s picture

+++ b/core/modules/outside_in/outside_in.libraries.yml
@@ -3,18 +3,17 @@ drupal.outside_in:
-    component:
...
-    theme:
...
+    - css/outside_in.module.css: {}
+    - css/outside_in.form.css: {}
+    - css/outside_in.table.css: {}
+    - css/outside_in.details.css: {}
+    - css/outside_in.tabledrag.css: {}
+    - css/outside_in.motion.css: {}
+    - css/outside_in.messages.css: {}

You need a string here, either 'base', 'layout', 'component', 'state', or 'theme'.

The dashes are invalid.

tedbow’s picture

Status: Needs work » Needs review
FileSize
4.08 KB
1.38 KB

Here is a fix the libraries file.

@tkoleary checkout the interdiff here to see the problem that @tim.plunkett was talking about.

yoroy’s picture

Issue tags: +sprint
tedbow’s picture

Title: Style messages in the offcanvas tray » Style Javascript messages in the offcanvas tray

@corbacho nice work here. re "I would like to test it with normal drupal_set_messages messages, but I can't figure it out."

I actually don't think it is possible. This Drupal dialog system problem not a Settings Tray specific problem. I have tried adding a drupal_set_message directly to \Drupal\outside_in\Form\SystemBrandingOffCanvasForm::buildConfigurationForm and it doesn't work. The other place place I tried was force a form validation error but that actually will bring up the form outside of the dialog on a new page. Right now all the forms we have just have required field validation which will be enforced on the client side so that is probably why we didn't notice this.

I have also just tested a simple callback using dialog and this does not display drupal_set_messages either. You can checkout my test module if you are interested https://github.com/tedbow/D8-Tester goto /tester-modal-link

So I think we shouldn't worry about drupal_set_message message right now. Will change the title. We may need create a more generic follow up to deal with dialogs including modal and the tray with other messages. But since we are using the regular dialog library we should solve that there. No need wait on that to make JS messages look better though.

Presumably if we got drupal_set_message to work with the dialog library the change made here should take effect because it uses the same classes but no way to test that out.

tkoleary’s picture

Status: Needs review » Reviewed & tested by the community

Reviewed css and tested in simplytest.me. Working perfectly.

re "I would like to test it with normal drupal_set_messages messages, but I can't figure it out." there is another issue to move those messages into the tray: #2785047: In Outside In mode, messages should appear in the off-canvas tray, not the main page

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 25: 2799611-25.patch, failed testing.

tkoleary’s picture

Status: Needs work » Reviewed & tested by the community

Don't know why this is saying #25 failed when the patch is green.

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 25: 2799611-25.patch, failed testing.

tedbow’s picture

Status: Needs work » Reviewed & tested by the community

Random test failure,ArgumentPlaceholderUpdatePathTest, back to RTBC, rinse and repeat ;)

alexpott’s picture

Status: Reviewed & tested by the community » Needs work
+++ b/core/modules/outside_in/css/outside_in.messages.css
@@ -0,0 +1,66 @@
+.ui-dialog-offcanvas .messages--status {
+  background-image: url(../../../misc/icons/73b355/check.svg);
+  border-left-color: #77b259;
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages--status {
+  border-right-color: #77b259;
+}
+.ui-dialog-offcanvas .messages--warning {
+  background-image: url(../../../misc/icons/e29700/warning.svg);
+  border-left-color: #e09600;
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages--warning {
+  border-right-color: #e09600;
+}
+.ui-dialog-offcanvas .messages--error {
+  background-image: url(../../../misc/icons/e32700/error.svg);
+  border-left-color: #e62600;
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages--error {
+  border-right-color: #e62600;
+}

Don't we need to reset the border-left-color on the rtl classes. Plus the ltr versions are missing the comment.

Here is how seven is doing something similar:

/* See .color-success in Seven's colors.css */
.messages--status {
  color: #325e1c;
  background-color: #f3faef;
  border-color: #c9e1bd #c9e1bd #c9e1bd transparent;  /* LTR */
  background-image: url(../../../../misc/icons/73b355/check.svg);
  box-shadow: -8px 0 0 #77b259; /* LTR */
}
[dir="rtl"] .messages--status {
  border-color: #c9e1bd transparent #c9e1bd #c9e1bd;
  box-shadow: 8px 0 0 #77b259;
  margin-left: 0;
}

It'd be good to have rtl and ltr screenshots given the nature of the CSS being changed.

tkoleary’s picture

Status: Needs work » Needs review
FileSize
5.32 KB
2.85 KB

Re-rolled to fix RTL issues and add back the dark background color from the issue summary per comment from @webchick in slack.

tkoleary’s picture

And screenshots as requested.






Note that the closeness of the asterisk to the icon is only because the screen is RTL, but the language is ltr. :)

Status: Needs review » Needs work

The last submitted patch, 34: 2799611-messages-34.patch, failed testing.

tkoleary’s picture

Rebased on 8.3.x on 3af6a3e and re-rolled patch

tkoleary’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 37: 2799611-messages-37.patch, failed testing.

tedbow’s picture

@tkoleary I thin thi

+++ b/core/modules/outside_in/outside_in.libraries.yml
@@ -3,18 +3,17 @@ drupal.outside_in:
-    component:
-      css/outside_in.module.css: {}
-      css/outside_in.motion.css: {}
-      css/outside_in.form.css: {}
-      css/outside_in.table.css: {}
-      css/outside_in.details.css: {}
-      css/outside_in.tabledrag.css: {}
-    theme:
-      # @todo Set the group higher than CSS_AGGREGATE_THEME so that it overrides
-      #   both jQuery UI and Classy's dialog.css, remove in
-      #   https://www.drupal.org/node/1945262.
-      css/outside_in.theme.css: { group: 200 }

My guess is the test failed because you removed the "component" and "theme" levels of the libraries file. Those are needed as far as I can tell. You cannot put the resource directly under "css:"

tkoleary’s picture

Status: Needs work » Needs review
FileSize
3.41 KB

Fixed libraries per #40

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.

Wim Leers’s picture

Is this still relevant?

tedbow’s picture

Status: Needs review » Closed (duplicate)
Related issues: +#2826722: Add a 'fence' around settings tray with aggressive CSS reset.

Closing this has duplicate of #2826722: Add a 'fence' around settings tray with aggressive CSS reset.
Since that is doing a hard-reset it has to provide default style for messages.