diff --git a/ember-cli-build.js b/ember-cli-build.js index b48f9dc39ec..fe27aa6e98b 100644 --- a/ember-cli-build.js +++ b/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,6 +23,7 @@ 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/'); @@ -31,6 +31,7 @@ module.exports = function(defaults) { return mergeTrees([ angularAppTree.toTree(), componentCssTree, + mainCssTree, demoAppCssTree, demoCssTree, ].concat(dartAppTree || [])); diff --git a/src/core/overlay/overlay-container.ts b/src/core/overlay/overlay-container.ts new file mode 100644 index 00000000000..a1832258b88 --- /dev/null +++ b/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; +} diff --git a/src/core/overlay/overlay.scss b/src/core/overlay/overlay.scss new file mode 100644 index 00000000000..3675267fba7 --- /dev/null +++ b/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; +} diff --git a/src/core/overlay/overlay.ts b/src/core/overlay/overlay.ts index 1e20c450326..8f51fb12524 100644 --- a/src/core/overlay/overlay.ts +++ b/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')); diff --git a/src/demo-app/overlay/overlay-demo.ts b/src/demo-app/overlay/overlay-demo.ts index 63679fdb68f..b28f89c4296 100644 --- a/src/demo-app/overlay/overlay-demo.ts +++ b/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>; - constructor(public overlay: Overlay, public elementRef: ElementRef) { - BrowserDomAdapter.makeCurrent(); - } + constructor(public overlay: Overlay, public elementRef: ElementRef) { } openRotiniPanel() { this.overlay.create().then(ref => { diff --git a/src/index.html b/src/index.html index 902fb79d8eb..ff724676cf2 100644 --- a/src/index.html +++ b/src/index.html @@ -8,8 +8,8 @@ {{content-for 'head'}} - + + Loading... diff --git a/src/main.dart b/src/main.dart index f7ba799b182..72f50dd7eb8 100644 --- a/src/main.dart +++ b/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]); } diff --git a/src/main.scss b/src/main.scss new file mode 100644 index 00000000000..5dddf74fd1d --- /dev/null +++ b/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"; diff --git a/src/main.ts b/src/main.ts index 6898cb4892c..42f2c96d974 100644 --- a/src/main.ts +++ b/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()}), ]);