From 1d4b5f603d9468956104aed4c57bfe8487b28cef Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Wed, 12 Aug 2015 21:15:36 -0500 Subject: [PATCH] action menu platform settings --- ionic/components/action-menu/action-menu.ts | 38 +++++++++++++++------ ionic/components/aside/aside.scss | 32 +++++++++-------- ionic/components/aside/aside.ts | 2 +- ionic/components/aside/config.ts | 26 -------------- ionic/components/overlay/overlay.ts | 1 + ionic/platform/registry.ts | 10 ++++++ 6 files changed, 56 insertions(+), 53 deletions(-) delete mode 100644 ionic/components/aside/config.ts diff --git a/ionic/components/action-menu/action-menu.ts b/ionic/components/action-menu/action-menu.ts index 13d7b1e879..bae5ebb87e 100644 --- a/ionic/components/action-menu/action-menu.ts +++ b/ionic/components/action-menu/action-menu.ts @@ -67,20 +67,19 @@ export class ActionMenu extends Overlay { * * @return Promise that resolves when the action menu is open. */ + open(opts={}) { + let config = this.config; let defaults = { - enterAnimation: 'action-menu-slide-in', - leaveAnimation: 'action-menu-slide-out', + enterAnimation: config.setting('actionMenuEnter'), + leaveAnimation: config.setting('actionMenuLeave'), + cancelIcon: config.setting('actionMenuCancelIcon'), + destructiveIcon: config.setting('actionMenuDestructiveIcon') }; - let contextDefaults = { - cancelIcon: 'ion-close', - destructiveIcon: 'ion-trash-a' - } + let context = util.extend(defaults, opts); - let context = util.extend(contextDefaults, opts); - - return this.create(OVERLAY_TYPE, ActionMenuDirective, util.extend(defaults, opts), context); + return this.create(OVERLAY_TYPE, ActionMenuDirective, context, context); } get() { @@ -110,7 +109,7 @@ class ActionMenuAnimation extends Animation { class ActionMenuSlideIn extends ActionMenuAnimation { constructor(element) { super(element); - this.backdrop.fromTo('opacity', 0, 0.26); + this.backdrop.fromTo('opacity', 0, 0.4); this.wrapper.fromTo('translateY', '100%', '0%'); } } @@ -119,8 +118,25 @@ Animation.register('action-menu-slide-in', ActionMenuSlideIn); class ActionMenuSlideOut extends ActionMenuAnimation { constructor(element) { super(element); - this.backdrop.fromTo('opacity', 0.26, 0); + this.backdrop.fromTo('opacity', 0.4, 0); this.wrapper.fromTo('translateY', '0%', '100%'); } } Animation.register('action-menu-slide-out', ActionMenuSlideOut); + + +class ActionMenuMdSlideIn extends ActionMenuSlideIn { + constructor(element) { + super(element); + this.backdrop.fromTo('opacity', 0, 0.26); + } +} +Animation.register('action-menu-md-slide-in', ActionMenuMdSlideIn); + +class ActionMenuMdSlideOut extends ActionMenuSlideOut { + constructor(element) { + super(element); + this.backdrop.fromTo('opacity', 0.26, 0); + } +} +Animation.register('action-menu-md-slide-out', ActionMenuMdSlideOut); diff --git a/ionic/components/aside/aside.scss b/ionic/components/aside/aside.scss index 5ab8737895..7c3e6a4576 100644 --- a/ionic/components/aside/aside.scss +++ b/ionic/components/aside/aside.scss @@ -1,6 +1,6 @@ // Aside -// -------------------------- +// -------------------------------------------------- $aside-width: 304px !default; $aside-height: 304px !default; @@ -10,45 +10,43 @@ $aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !def .aside { - display: block; position: absolute; - - background: $aside-background; + top: 0; + bottom: 0; display: flex; flex-direction: column; + width: $aside-width; + left: -$aside-width; + + background: $aside-background; + + transform: translate3d(0, 0, 0); + transition: $aside-transition; &[type=overlay] { z-index: $z-index-aside-overlay; } - transition: $aside-transition; &:not(.open):not(.changing) { display: none; } - //&[side=left] { - width: $aside-width; - left: -$aside-width; - top: 0; - bottom: 0; - - transform: translate3d(0, 0, 0); - &[type=reveal] { left: 0; } &.open, { - &[type=reveal], &[type=push] { + &[type=reveal], + &[type=push] { left: 0; } &[type=overlay] { transform: translate3d($aside-width,0,0); } } - //} + &[side=right] { width: $aside-width; left: 100%; @@ -61,6 +59,7 @@ $aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !def transform: translate3d(-$aside-width,0,0); } } + &[side=top] { height: $aside-width; top: -$aside-width; @@ -73,6 +72,7 @@ $aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !def transform: translate3d(0,$aside-width,0); } } + &[side=bottom] { height: $aside-width; top: 100%; @@ -91,10 +91,12 @@ $aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !def .aside-content { transition: $aside-transition; transform: translate3d(0,0,0); + box-shadow: $aside-shadow; &.aside-open-left { transform: translate3d($aside-width,0,0); } + &.aside-open-right { transform: translate3d(-$aside-width,0,0); } diff --git a/ionic/components/aside/aside.ts b/ionic/components/aside/aside.ts index e9a100c6ee..09d973a104 100644 --- a/ionic/components/aside/aside.ts +++ b/ionic/components/aside/aside.ts @@ -1,4 +1,4 @@ -import {View, EventEmitter, ElementRef, onInit} from 'angular2/angular2'; +import {View, EventEmitter, ElementRef} from 'angular2/angular2'; import {Ion} from '../ion'; import {IonicConfig} from '../../config/config'; diff --git a/ionic/components/aside/config.ts b/ionic/components/aside/config.ts deleted file mode 100644 index 862916c42f..0000000000 --- a/ionic/components/aside/config.ts +++ /dev/null @@ -1,26 +0,0 @@ -import {ComponentConfig} from 'ionic/config/component' -import {Aside} from 'ionic/components/aside/aside'; -import * as asideTypes from 'ionic/components/aside/extensions/types' -import * as asideGestures from 'ionic/components/aside/extensions/gestures'; - -export let AsideConfig = new ComponentConfig(Aside) - -AsideConfig.classes('side', 'type') - -AsideConfig.delegate('gesture') - .when({side: 'left'}, gestures.LeftAsideGesture) - .when({side: 'right'}, gestures.RightAsideGesture) - .when({side: 'top'}, gestures.TopAsideGesture) - .when({side: 'bottom'}, gestures.BottomAsideGesture) - -AsideConfig.delegate('type') - .when({type: 'overlay'}, types.AsideTypeOverlay) - .when({type: 'push'}, types.AsideTypePush) - .when({type: 'reveal'}, types.AsideTypeReveal) - - -AsideConfig.platform('android') - .defaults({ type: 'overlay' }) - -AsideConfig.platform('ios') - .defaults({ type: 'reveal' }) diff --git a/ionic/components/overlay/overlay.ts b/ionic/components/overlay/overlay.ts index 2a9095d9be..49f74ce299 100644 --- a/ionic/components/overlay/overlay.ts +++ b/ionic/components/overlay/overlay.ts @@ -11,6 +11,7 @@ export class Overlay { constructor(app: IonicApp, config: IonicConfig) { this.app = app; + this.config = config; this.mode = config.setting('mode'); } diff --git a/ionic/platform/registry.ts b/ionic/platform/registry.ts index 0b43d39b6a..693f9a6d47 100644 --- a/ionic/platform/registry.ts +++ b/ionic/platform/registry.ts @@ -4,6 +4,8 @@ import {Platform} from './platform'; Platform.register({ name: 'core', settings: { + actionMenuEnter: 'action-menu-slide-in', + actionMenuLeave: 'action-menu-slide-out', backButtonText: 'Back', backButtonIcon: 'ion-ios-arrow-back', forwardIcon: 'ion-ios-arrow-forward', @@ -53,6 +55,10 @@ Platform.register({ 'tablet' ], settings: { + actionMenuEnter: 'action-menu-md-slide-in', + actionMenuLeave: 'action-menu-md-slide-out', + actionMenuCancelIcon: 'ion-close', + actionMenuDestructiveIcon: 'ion-trash-a', backButtonText: '', backButtonIcon: 'ion-android-arrow-back', forwardIcon: '', @@ -84,6 +90,10 @@ Platform.register({ 'iphone' ], settings: { + actionMenuEnter: 'action-menu-slide-in', + actionMenuLeave: 'action-menu-slide-out', + actionMenuCancelIcon: 'ion-close', + actionMenuDestructiveIcon: 'ion-trash-a', backButtonText: 'Back', backButtonIcon: 'ion-ios-arrow-back', forwardIcon: 'ion-ios-arrow-forward',