javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 11:41:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Menu Materials

Browse Source
This commit is contained in:
Max Lynch
2015-07-19 11:38:08 -05:00
parent c6009dd651
commit fc93ae5fe7
2 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
ionic/components/action-menu/action-menu.ts
View File

@ -22,10 +22,10 @@ import * as util from 'ionic/util';
<div class="action-menu-group action-menu-options"> <div class="action-menu-group action-menu-options">
<div class="action-menu-title" *ng-if="titleText">{{titleText}}</div> <div class="action-menu-title" *ng-if="titleText">{{titleText}}</div>
<button (^click)="_buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="action-menu-option"><i class="icon" [class]="b.icon" *ng-if="b.icon"></i> {{b.text}}</button> <button (^click)="_buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="action-menu-option"><i class="icon" [class]="b.icon" *ng-if="b.icon"></i> {{b.text}}</button>
<button *ng-if="destructiveText" (click)="_destructive()" class="destructive action-menu-destructive">{{destructiveText}}</button> <button *ng-if="destructiveText" (click)="_destructive()" class="destructive action-menu-destructive"><i class="icon" [class]="destructiveIcon" *ng-if="destructiveIcon"></i> {{destructiveText}}</button>
</div> </div>
<div class="action-menu-group action-menu-cancel" *ng-if="cancelText"> <div class="action-menu-group action-menu-cancel" *ng-if="cancelText">
<button (click)="_cancel()">{{cancelText}}</button> <button (click)="_cancel()"><i class="icon" [class]="cancelIcon"></i> {{cancelText}}</button>
</div> </div>
</div> </div>
</div>`, </div>`,
@ -65,10 +65,17 @@ export class ActionMenu extends Overlay {
open(opts={}) { open(opts={}) {
let defaults = { let defaults = {
enterAnimation: 'action-menu-slide-in', enterAnimation: 'action-menu-slide-in',
leaveAnimation: 'action-menu-slide-out' leaveAnimation: 'action-menu-slide-out',
}; };
return this.create(OVERLAY_TYPE, ActionMenuDirective, util.extend(defaults, opts), opts); let contextDefaults = {
cancelIcon: 'ion-close',
destructiveIcon: 'ion-trash-a'
}
let context = util.extend(contextDefaults, opts);
return this.create(OVERLAY_TYPE, ActionMenuDirective, util.extend(defaults, opts), context);
} }
get() { get() {

23
ionic/components/action-menu/extensions/material.scss
View File

@ -13,11 +13,19 @@
} }
.action-menu-title, .action-menu-title,
.action-menu-option { .action-menu-option,
.action-menu-destructive,
.action-menu-cancel button
{
text-align: left; text-align: left;
border-color: transparent; border-color: transparent;
font-size: 16px; font-size: 16px;
color: inherit; color: inherit;
.icon {
font-size: 24px;
margin: 0 32px;
}
} }
.action-menu-title { .action-menu-title {
@ -26,10 +34,6 @@
color: #666; color: #666;
} }
.action-menu-option .icon {
font-size: 24px;
margin: 0 32px;
}
.action-menu-option.activated { .action-menu-option.activated {
background: #e8e8e8; background: #e8e8e8;
@ -42,7 +46,14 @@
} }
.action-menu-cancel { .action-menu-cancel {
display: none; background-color: #fafafa;
width: auto;
border: none;
font-size: 16px;
color: inherit;
button {
font-weight: normal;
}
} }
.action-menu-has-icons { .action-menu-has-icons {