feat(menu): Added ability to show the menu overlay around the menu tr…

…igger
angular · Nov 11, 2016 · 72979c7 · 72979c7
1 parent adfc4d1
commit 72979c7
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 9 deletions.
diff --git a/src/demo-app/menu/menu-demo.html b/src/demo-app/menu/menu-demo.html
@@ -62,3 +62,54 @@
     </md-menu>
   </div>
 </div>
+
+<div class="demo-menu">
+  <div class="menu-section">
+    <p>overlay-trigger: false</p>
+
+    <md-toolbar>
+      <button md-icon-button [md-menu-trigger-for]="menuOverlay">
+        <md-icon>more_vert</md-icon>
+      </button>
+    </md-toolbar>
+
+    <md-menu overlay-trigger="false" #menuOverlay="mdMenu">
+      <button md-menu-item *ngFor="let item of items" [disabled]="item.disabled">
+        {{ item.text }}
+      </button>
+    </md-menu>
+  </div>
+  <div class="menu-section">
+    <p>
+      Position x: before, overlay-trigger: false
+    </p>
+    <md-toolbar class="end-icon">
+      <button md-icon-button [md-menu-trigger-for]="posXMenuOverlay">
+        <md-icon>more_vert</md-icon>
+      </button>
+    </md-toolbar>
+
+    <md-menu x-position="before" overlay-trigger="false" #posXMenuOverlay="mdMenu" class="before">
+      <button md-menu-item *ngFor="let item of iconItems" [disabled]="item.disabled">
+        <md-icon>{{ item.icon }}</md-icon>
+        {{ item.text }}
+      </button>
+    </md-menu>
+  </div>
+  <div class="menu-section">
+    <p>
+      Position y: above, overlay-trigger: false
+    </p>
+    <md-toolbar>
+      <button md-icon-button [md-menu-trigger-for]="posYMenuOverlay">
+        <md-icon>more_vert</md-icon>
+      </button>
+    </md-toolbar>
+
+    <md-menu y-position="above" overlay-trigger="false" #posYMenuOverlay="mdMenu">
+      <button md-menu-item *ngFor="let item of items" [disabled]="item.disabled">
+        {{ item.text }}
+      </button>
+    </md-menu>
+  </div>
+</div>
diff --git a/src/lib/menu/README.md b/src/lib/menu/README.md
@@ -1,6 +1,6 @@
 # md-menu
 
-`md-menu` is a list of options that displays when triggered.  You can read more about menus in the 
+`md-menu` is a list of options that displays when triggered.  You can read more about menus in the
 [Material Design spec](https://material.google.com/components/menus.html).
 
 ### Not yet implemented
@@ -114,8 +114,9 @@ Output:
 
 ### Customizing menu position
 
-By default, the menu will display after and below its trigger.  You can change this display position 
-using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes.  
+By default, the menu will display after and below its trigger.  You can change this display position
+using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes. The menu
+can be positioned over the menu button or outside using `overlay-trigger` (`true | false`).
 
 *my-comp.html*
 ```html
@@ -148,7 +149,8 @@ also adds `aria-hasPopup="true"` to the trigger element.
 | --- | --- | --- |
 | `x-position` | `before | after` | The horizontal position of the menu in relation to the trigger. Defaults to `after`. | 
 | `y-position` | `above | below` | The vertical position of the menu in relation to the trigger. Defaults to `below`. |
-
+| `overlay-trigger`    | `true | false` | Whether to have the menu show on top of the menu trigger or outside. Defaults to `true`. |
+
 ### Trigger Programmatic API
 
 **Properties**

diff --git a/src/lib/menu/menu-directive.ts b/src/lib/menu/menu-directive.ts
@@ -46,14 +46,18 @@ export class MdMenu implements AfterContentInit, MdMenuPanel, OnDestroy {
 
   positionX: MenuPositionX = 'after';
   positionY: MenuPositionY = 'below';
+  overlayTrigger = true;
 
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
   @ContentChildren(MdMenuItem) items: QueryList<MdMenuItem>;
 
   constructor(@Attribute('x-position') posX: MenuPositionX,
-              @Attribute('y-position') posY: MenuPositionY) {
+              @Attribute('y-position') posY: MenuPositionY,
+              @Attribute('overlay-trigger') trigger = true) {
     if (posX) { this._setPositionX(posX); }
     if (posY) { this._setPositionY(posY); }
+
+    this.overlayTrigger = trigger;
     this._setPositionClasses();
   }
 

diff --git a/src/lib/menu/menu-panel.ts b/src/lib/menu/menu-panel.ts
@@ -4,6 +4,7 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
 export interface MdMenuPanel {
   positionX: MenuPositionX;
   positionY: MenuPositionY;
+  overlayTrigger: boolean;
   templateRef: TemplateRef<any>;
   close: EventEmitter<void>;
   focusFirstItem: () => void;

diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
@@ -197,12 +197,15 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
    */
   private _getPosition(): ConnectedPositionStrategy  {
     const positionX: HorizontalConnectionPos = this.menu.positionX === 'before' ? 'end' : 'start';
-    const positionY: VerticalConnectionPos = this.menu.positionY === 'above' ? 'bottom' : 'top';
-
+    const overlayY: VerticalConnectionPos = this.menu.positionY === 'above' ? 'bottom' : 'top';
+    let originY = overlayY;
+    if (this.menu.overlayTrigger) {
+      originY = overlayY === 'top' ? 'bottom' : 'top';
+    }
     return this._overlay.position().connectedTo(
       this._element,
-      {originX: positionX, originY: positionY},
-      {overlayX: positionX, overlayY: positionY}
+      {originX: positionX, originY: originY},
+      {overlayX: positionX, overlayY: overlayY}
     );
   }
 

diff --git a/src/lib/menu/menu.spec.ts b/src/lib/menu/menu.spec.ts
@@ -195,6 +195,7 @@ class PositionedMenu {
 class CustomMenuPanel implements MdMenuPanel {
   positionX: MenuPositionX = 'after';
   positionY: MenuPositionY = 'below';
+  overlayTrigger: true;
   @ViewChild(TemplateRef) templateRef: TemplateRef<any>;
   @Output() close = new EventEmitter<void>();
   focusFirstItem = () => {};