diff --git a/ionic/components/action-menu/action-menu.js b/ionic/components/action-menu/action-menu.js index 5358a399bd..f70d97bef2 100644 --- a/ionic/components/action-menu/action-menu.js +++ b/ionic/components/action-menu/action-menu.js @@ -1,4 +1,4 @@ -import {DynamicComponentLoader, ComponentLaoder, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2'; +import {NgIf, NgFor, DynamicComponentLoader, ComponentLaoder, ElementRef, ComponentRef, onDestroy, DomRenderer} from 'angular2/angular2'; import {bind, Injector} from 'angular2/di'; import {Promise} from 'angular2/src/facade/async'; import {isPresent, Type} from 'angular2/src/facade/lang'; @@ -11,6 +11,7 @@ import {Item, Icon} from 'ionic/ionic' import {Ionic} from 'ionic/components/app/app' import {IonicComponent} from 'ionic/config/component' import {raf, ready} from 'ionic/util/dom' +import * as util from 'ionic/util' import {Animation} from 'ionic/animations/animation'; @@ -20,51 +21,71 @@ import {Animation} from 'ionic/animations/animation'; }) @View({ template: ` -
-
-
- -
Action Menu List Header
-
- - +
+
+
+
+
{{titleText}}
+ + +
+
+ +
- -
Action Menu Label
-
- - -
- -
- -
-
`, - directives: [Item,Icon] + directives: [Item,Icon, NgIf, NgFor] }) export class ActionMenu { constructor(elementRef: ElementRef) { this.domElement = elementRef.domElement this.config = ActionMenu.config.invoke(this) + + this.wrapperEl = this.domElement.querySelector('.action-menu-wrapper'); + console.log('ActionMenu: Component Created', this.domElement); } + close() { + var backdrop = this.domElement.children[0].classList.remove('active'); + var slideOut = Animation.create(this.wrapperEl, 'slide-out'); + return slideOut.play(); + } + + open() { + var backdrop = this.domElement.children[0].classList.add('active'); + var slideIn = Animation.create(this.wrapperEl, 'slide-in'); + return slideIn.play(); + } + + setOptions(opts) { + util.extend(this, opts); + } + + // Overridden by options + destructiveButtonClicked() {} + buttonClicked(index) {} + cancel() {} + static open(opts) { console.log('Opening menu', opts, Ionic); - ActionMenu._inject(); + var promise = new Promise(resolve => { + ActionMenu._inject().then((actionMenu) => { + actionMenu.setOptions(opts); + setTimeout(() => { + actionMenu.open(); + }) + resolve(actionMenu); + }); + }) + + return promise; } static _inject() { - Ionic.appendToRoot(ActionMenu).then(() => { - console.log('Action Menu appended'); - }) + return Ionic.appendToRoot(ActionMenu); } } diff --git a/ionic/components/action-menu/action-menu.scss b/ionic/components/action-menu/action-menu.scss index 949dce0c03..9a3e3b24b2 100644 --- a/ionic/components/action-menu/action-menu.scss +++ b/ionic/components/action-menu/action-menu.scss @@ -7,7 +7,16 @@ $action-menu-max-width: 520px !default; $action-menu-background-color: rgba(243,243,243,.95) !default; $action-menu-button-text-color: #007aff !default; +$sheet-margin: 8px !default; +$sheet-border-radius: 4px !default; +$sheet-options-bg-color: #f1f2f3 !default; +$sheet-options-bg-active-color: #e4e5e7 !default; +$sheet-options-text-color: #007aff !default; +$sheet-options-border-color: #d1d3d6 !default; + + +/* .action-menu-container { position: absolute; z-index: $z-index-action-menu; @@ -24,4 +33,171 @@ $action-menu-button-text-color: #007aff !default; } } +*/ +.action-menu-backdrop { + transition: background-color 150ms ease-in-out; + position: fixed; + top: 0; + left: 0; + z-index: $z-index-action-menu; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0); + + &.active { + background-color: rgba(0,0,0,0.4); + } +} + +.action-menu-wrapper { + //transform: translate3d(0, 100%, 0); + //transition: all cubic-bezier(.36, .66, .04, 1) 500ms; + + position: absolute; + bottom: 0; + left: 0; + right: 0; + width: 100%; + max-width: 500px; + margin: auto; +} + +.action-menu-up { + transform: translate3d(0, 0, 0); +} + +.action-menu { + margin-left: $sheet-margin; + margin-right: $sheet-margin; + width: auto; + z-index: $z-index-action-menu; + overflow: hidden; + + .button { + display: block; + padding: 1px; + width: 100%; + border-radius: 0; + border-color: $sheet-options-border-color; + background-color: transparent; + + color: $sheet-options-text-color; + font-size: 21px; + + &:hover { + color: $sheet-options-text-color; + } + &.destructive { + color: #ff3b30; + &:hover { + color: #ff3b30; + } + } + } + + .button.active, .button.activated { + box-shadow: none; + border-color: $sheet-options-border-color; + color: $sheet-options-text-color; + background: $sheet-options-bg-active-color; + } +} + +.action-menu-has-icons .icon { + position: absolute; + left: 16px; +} + +.action-menu-title { + padding: $sheet-margin * 2; + color: #8f8f8f; + text-align: center; + font-size: 13px; +} + +.action-menu-group { + margin-bottom: $sheet-margin; + border-radius: $sheet-border-radius; + background-color: #fff; + overflow: hidden; + + .button { + border-width: 1px 0px 0px 0px; + } + .button:first-child:last-child { + border-width: 0; + } +} + +.action-menu-options { + background: $sheet-options-bg-color; +} + +.action-menu-cancel { + .button { + font-weight: 500; + } +} + +.action-menu-open { + pointer-events: none; + + &.modal-open .modal { + pointer-events: none; + } + + .action-menu-backdrop { + pointer-events: auto; + } +} + + +.platform-android { + + .action-menu-backdrop.active { + background-color: rgba(0,0,0,0.2); + } + + .action-menu { + margin: 0; + + .action-menu-title, + .button { + text-align: left; + border-color: transparent; + font-size: 16px; + color: inherit; + } + + .action-menu-title { + font-size: 14px; + padding: 16px; + color: #666; + } + + .button.active, + .button.activated { + background: #e8e8e8; + } + } + + .action-menu-group { + margin: 0; + border-radius: 0; + background-color: #fafafa; + } + + .action-menu-cancel { + display: none; + } + + .action-menu-has-icons { + + .button { + padding-left: 56px; + } + + } + +} diff --git a/ionic/components/action-menu/test/basic/index.js b/ionic/components/action-menu/test/basic/index.js index 3e17188dec..38207bd45a 100644 --- a/ionic/components/action-menu/test/basic/index.js +++ b/ionic/components/action-menu/test/basic/index.js @@ -19,8 +19,25 @@ class IonicApp { openMenu() { console.log('Opening ActionMenu') + ActionMenu.open({ - title: 'Do you really want to?' + buttons: [ + { text: 'Share This' }, + { text: 'Move' } + ], + destructiveText: 'Delete', + titleText: 'Modify your album', + cancelText: 'Cancel', + cancel: function() { + // add cancel code.. + console.log('Canceled'); + }, + buttonClicked: function(index) { + console.log('Button clicked', index); + return true; + } + }).then(actionMenu => { + this.actionMenu = actionMenu; }) } } diff --git a/ionic/components/app/app.js b/ionic/components/app/app.js index 1b1ece2973..48ec0c1970 100644 --- a/ionic/components/app/app.js +++ b/ionic/components/app/app.js @@ -37,7 +37,9 @@ class IonicAppRoot { document.body.querySelector('ion-app').appendChild(newEl); - resolve(newEl); + console.log('Injected and created', containerRef); + + resolve(containerRef.instance, containerRef.location); }); });