feat(overlay): add ability to set custom class on panes #1438

fxck · 2016-10-05T20:48:50Z

It's more of a proof-of-concept for #1432, since I feel like you'd rather control this by passing the config a z-index value, but I think this is more flexible(for example when you need to control this with css media queries).

What I've changed:

Overlay - You can pass paneClassName, which can be either a string or an array of string, to a config for Overlays create, it then adds it to the created md-overlay-pane, I have also added a new helper class to it md-has-index-${id}(which can then be used along your custom class to differentiate between more panes inside one overlay)

Dialog - added paneClassName option to MdDialogConfig, which is then passes to OverlayState and create example in the dialog-demo

Menu - added a new @Input to md-menu, which takes either a string or array of string, and passes it down to OverlayState in [md-menu-trigger-for]

Overlay - removed z-index from overlay.scss as it was making z-indexes of panes useless

…and menu

fxck · 2016-10-23T20:47:56Z

@jelbourn can I have some feedback please? I'm having a really hard time with overlays and components using them without this feature..

jelbourn

Needs unit tests for all the added behaviors.

(In general, I'll hold off on reviewing PRs without tests since they seem to not be done yet)

jelbourn · 2016-10-24T15:30:31Z

src/demo-app/dialog/dialog-demo.ts

@@ -18,6 +18,7 @@ export class DialogDemo {
  open() {
    let config = new MdDialogConfig();
    config.viewContainerRef = this.viewContainerRef;
+    config.paneClassName = 'jazz-dialog';


This doesn't need to be part of the demo

jelbourn · 2016-10-24T15:30:54Z

src/demo-app/dialog/dialog-demo.scss

@@ -1,3 +1,10 @@
 .demo-dialog {
  color: rebeccapurple;
 }
+
+// apply custom z-index
+/deep/ .md-overlay-pane {


We're avoiding using /deep/ at all in material2.

jelbourn · 2016-10-24T16:44:34Z

src/lib/core/overlay/overlay-state.ts

@@ -12,6 +12,9 @@ export class OverlayState {
  /** Whether the overlay has a backdrop. */
  hasBackdrop: boolean = false;

+  /** Optional custom class to be added to the pane. */
+  paneClassName: string | Array<string>;


I would make this overlayClass to align with backdropClass (I don't believe we expose the term "pane" in the public API).

jelbourn · 2016-10-24T16:47:12Z

src/lib/core/overlay/overlay.scss

@@ -20,7 +20,6 @@
    left: 0;
    height: 100%;
    width: 100%;
-    z-index: $md-z-index-overlay-container;


I don't think this should be removed.

I think it HAS to be removed, otherwise any inner z-index will be ignored.

See http://jsbin.com/mesujat/1/edit?html,css,output yellow is over green, despite it having thousand times higher z-index.

jelbourn · 2016-10-24T16:48:39Z

src/lib/core/overlay/overlay.ts

    pane.classList.add('md-overlay-pane');
+    pane.classList.add(`md-has-index-${id}`);


What is this class for?

So you can more granularly control stacking order of multiple panes inside a single overlay.. I guess you could do the same with :nth-child.. but you know, with BEM and everything having a class could be handy.

I won't mind removing it though, you tell me.

jelbourn · 2016-10-24T17:00:28Z

src/lib/core/overlay/overlay.ts

+      } else {
+        pane.classList.add(<string>state.paneClassName);
+      }
+    }


I think this is a bit cleaner:

let overlayClass = state.overlayClass; if (overlayClass) { if (typeof overlayClass == 'string') { overlayClass = [overlayClass]; } pane.classList.add(...overlayClass); }

jelbourn · 2016-10-24T17:04:00Z

src/lib/dialog/dialog-config.ts

@@ -14,6 +14,9 @@ export class MdDialogConfig {
  /** The ARIA role of the dialog element. */
  role: DialogRole = 'dialog';

+  /** Optional custom class to be added to dialog's overlay pane. */
+  paneClassName: string | Array<string>;


string | string[]

jelbourn · 2016-10-24T17:06:41Z

src/lib/dialog/dialog.ts

@@ -120,6 +120,10 @@ export class MdDialog {
        .centerHorizontally()
        .centerVertically();

+    if (dialogConfig.paneClassName) {


What are your use-cases for exposing this through to dialog and menu? I can see the case for custom components built on top of overlay, but I'm not sure if it's the right API surface for the leaf components.

The whole #1432 is a use-case for menu, see http://plnkr.co/edit/AqjYdsScCYPlK9w44aHQ?p=preview (try opening the menu and then clicking on something).. if I removed z-index from md-overlay-container, it would work, but only as long as my fixed element had z-index lower than 1000.. with this option I could simple set the menu pane to always have higher z-index.

Same thing for dialog really, I could have a fixed element that will have z-index higher than 1000 and it would be overlaying the backdrop.

fxck · 2016-10-24T19:52:33Z

Closing in favour of #1584 ..

angular-automatic-lock-bot · 2019-09-06T02:03:07Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

add ability to set custom class on overlay pane, implement in dialog …

109c61b

…and menu

googlebot added cla: yes PR author has agreed to Google's Contributor License Agreement labels Oct 5, 2016

fix missing semicolon

5eafef5

fxck changed the title ~~feat(overlay) add ability to set custom class on panes~~ feat(overlay): add ability to set custom class on panes Oct 5, 2016

remove unused import

bdddf59

fxck mentioned this pull request Oct 19, 2016

feat(overlay): add custom classes for backdrop #1532

Merged

jelbourn reviewed Oct 24, 2016

View reviewed changes

jelbourn added the pr: needs cleanup / tests label Oct 24, 2016

fxck mentioned this pull request Oct 24, 2016

feat(overlay): add ability to set custom class on panes #1584

Closed

fxck closed this Oct 24, 2016

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(overlay): add ability to set custom class on panes #1438

feat(overlay): add ability to set custom class on panes #1438

fxck commented Oct 5, 2016 •

edited

Loading

fxck commented Oct 23, 2016

jelbourn left a comment

jelbourn Oct 24, 2016

jelbourn Oct 24, 2016

jelbourn Oct 24, 2016

jelbourn Oct 24, 2016

fxck Oct 24, 2016

jelbourn Oct 24, 2016

fxck Oct 24, 2016

jelbourn Oct 24, 2016

jelbourn Oct 24, 2016

jelbourn Oct 24, 2016

fxck Oct 24, 2016

fxck Oct 24, 2016 •

edited

Loading

fxck commented Oct 24, 2016

angular-automatic-lock-bot bot commented Sep 6, 2019

		pane.classList.add('md-overlay-pane');
		pane.classList.add(`md-has-index-${id}`);

feat(overlay): add ability to set custom class on panes #1438

feat(overlay): add ability to set custom class on panes #1438

Conversation

fxck commented Oct 5, 2016 • edited Loading

fxck commented Oct 23, 2016

jelbourn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fxck Oct 24, 2016 • edited Loading

Choose a reason for hiding this comment

fxck commented Oct 24, 2016

angular-automatic-lock-bot bot commented Sep 6, 2019

fxck commented Oct 5, 2016 •

edited

Loading

fxck Oct 24, 2016 •

edited

Loading