feat(overlay): add overlay container & styles

Author: jelbourn

ember-cli-build.js

@@ -11,7 +11,6 @@ var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
 var BroccoliSass = require('broccoli-sass');
 var broccoliAutoprefixer = require('broccoli-autoprefixer');
 
-const BroccoliTypescript = require('./tools/broccoli/broccoli-typescript').default;
 const BroccoliTs2Dart = require('./tools/broccoli/broccoli-ts2dart').default;
 const BroccoliDestCopy = require('./tools/broccoli/broccoli-dest-copy').default;
 const BroccoliDartFmt = require('./tools/broccoli/broccoli-dartfmt').default;
@@ -24,13 +23,15 @@ module.exports = function(defaults) {
   var demoAppCssTree = new BroccoliSass(['src/demo-app'], './demo-app.scss', 'demo-app/demo-app.css');
   var demoCssTree = getCssTree('demo-app');
   var componentCssTree = getCssTree('components');
+  var mainCssTree = new BroccoliSass(['src', 'src/core/style'], './main.scss', 'main.css');
   var angularAppTree = new Angular2App(defaults);
 
   var dartAppTree = getDartTree('src/');
 
   return mergeTrees([
     angularAppTree.toTree(),
     componentCssTree,
+    mainCssTree,
     demoAppCssTree,
     demoCssTree,
   ].concat(dartAppTree || []));

src/core/overlay/overlay-container.ts

@@ -0,0 +1,14 @@
+import {DOM} from '../platform/dom/dom_adapter';
+
+
+/**
+ * Create the overlay container element, which is simply a div
+ * with the 'md-overlay-container' class on the document body.
+ */
+export function createOverlayContainer(): Element {
+  let documentBody = DOM.getGlobalEventTarget('body');
+  let container = DOM.createElement('div');
+  DOM.addClass(container, 'md-overlay-container');
+  DOM.appendChild(documentBody, container);
+  return container;
+}

src/core/overlay/overlay.scss

@@ -0,0 +1,18 @@
+/** The overlay-container is an invisible element which contains all individual overlays. */
+.md-overlay-container {
+  position: absolute;
+
+  // Disable events from being captured on the overlay container.
+  pointer-events: none;
+
+  // The container should be the size of the viewport.
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+/** A single overlay pane. */
+.md-overlay-pane {
+  position: absolute;
+}

src/core/overlay/overlay.ts

@@ -10,9 +10,10 @@ import {DomPortalHost} from '../portal/dom-portal-host';
 import {OverlayRef} from './overlay-ref';
 import {DOM} from '../platform/dom/dom_adapter';
 
-// Re-export OverlayState and OverlayRef so they can be imported directly from here.
+// Re-export overlay-related modules so they can be imported directly from here.
 export {OverlayState} from './overlay-state';
 export {OverlayRef} from './overlay-ref';
+export {createOverlayContainer} from './overlay-container';
 
 /** Token used to inject the DOM element that serves as the overlay container. */
 export const OVERLAY_CONTAINER_TOKEN = CONST_EXPR(new OpaqueToken('overlayContainer'));

src/demo-app/overlay/overlay-demo.ts

@@ -1,7 +1,6 @@
-import {Component, provide, ElementRef, ViewChildren, QueryList} from 'angular2/core';
-import {Overlay, OVERLAY_CONTAINER_TOKEN} from '../../core/overlay/overlay';
+import {Component, ElementRef, ViewChildren, QueryList} from 'angular2/core';
+import {Overlay} from '../../core/overlay/overlay';
 import {ComponentPortal, Portal} from '../../core/portal/portal';
-import {BrowserDomAdapter} from '../../core/platform/browser/browser_adapter';
 import {TemplatePortalDirective} from '../../core/portal/portal-directives';
 
 
@@ -12,15 +11,12 @@ import {TemplatePortalDirective} from '../../core/portal/portal-directives';
   directives: [TemplatePortalDirective],
   providers: [
     Overlay,
-    provide(OVERLAY_CONTAINER_TOKEN, {useValue: document.body})
   ]
 })
 export class OverlayDemo {
   @ViewChildren(TemplatePortalDirective) templatePortals: QueryList<Portal<any>>;
 
-  constructor(public overlay: Overlay, public elementRef: ElementRef) {
-    BrowserDomAdapter.makeCurrent();
-  }
+  constructor(public overlay: Overlay, public elementRef: ElementRef) { }
 
   openRotiniPanel() {
     this.overlay.create().then(ref => {

src/index.html

@@ -8,8 +8,8 @@
   <script src="vendor/angular2/bundles/angular2-polyfills.js"></script>
   {{content-for 'head'}}
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-        rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link href="main.css" rel="stylesheet">
 </head>
 <body>
   <demo-app>Loading...</demo-app>

src/main.dart

@@ -1,7 +1,9 @@
 import "package:angular2/platform/browser.dart" show bootstrap;
 import "./demo-app/demo-app.dart" show DemoApp;
 import "package:angular2/router.dart" show ROUTER_PROVIDERS;
+import "./core/platform/browser/browser_adapter.dart" show BrowserDomAdapter;
 
 void main() {
+  BrowserDomAdapter.makeCurrent();
   bootstrap(DemoApp, [ROUTER_PROVIDERS]);
 }

src/main.scss

@@ -0,0 +1,5 @@
+// Main library CSS file that will eventually be delivered as angular2-material.css.
+// Contains CSS rules that users will consume throughout their application as well as rules
+// that are consumed across multiple components (and thus shouldn't be scoped).
+
+@import "core/overlay/overlay";

src/main.ts

@@ -1,7 +1,14 @@
 import {bootstrap} from 'angular2/platform/browser';
 import {DemoApp} from './demo-app/demo-app';
 import {ROUTER_PROVIDERS} from 'angular2/router';
+import {BrowserDomAdapter} from './core/platform/browser/browser_adapter';
+import {OVERLAY_CONTAINER_TOKEN} from './core/overlay/overlay';
+import {provide} from 'angular2/core';
+import {createOverlayContainer} from './core/overlay/overlay-container';
+
+BrowserDomAdapter.makeCurrent();
 
 bootstrap(DemoApp, [
-  ROUTER_PROVIDERS
+  ROUTER_PROVIDERS,
+  provide(OVERLAY_CONTAINER_TOKEN, {useValue: createOverlayContainer()}),
 ]);