mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
rename ActionMenu to ActionSheet
This commit is contained in:
Adam Bradley
@@ -1,3 +0,0 @@
|
||||
<ion-content class="padding">
|
||||
<button (click)="openMenu()">Open Action Menu</button>
|
||||
</ion-content>
|
||||
@@ -1,4 +1,4 @@
|
||||
import {App, ActionMenu} from 'ionic/ionic';
|
||||
import {App, ActionSheet} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
@@ -6,13 +6,13 @@ import {App, ActionMenu} from 'ionic/ionic';
|
||||
})
|
||||
class IonicApp {
|
||||
|
||||
constructor(actionMenu: ActionMenu) {
|
||||
this.actionMenu = actionMenu;
|
||||
constructor(actionSheet: ActionSheet) {
|
||||
this.actionSheet = actionSheet;
|
||||
}
|
||||
|
||||
openMenu() {
|
||||
|
||||
this.actionMenu.open({
|
||||
this.actionSheet.open({
|
||||
buttons: [
|
||||
{ text: 'Share This' },
|
||||
{ text: 'Move' }
|
||||
@@ -32,8 +32,8 @@ class IonicApp {
|
||||
return true;
|
||||
}
|
||||
|
||||
}).then(actionMenuRef => {
|
||||
this.actionMenuRef = actionMenuRef;
|
||||
}).then(actionSheetRef => {
|
||||
this.actionSheetRef = actionSheetRef;
|
||||
});
|
||||
|
||||
}
|
||||
3
demos/action-sheet/main.html
Normal file
3
demos/action-sheet/main.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<ion-content class="padding">
|
||||
<button (click)="openMenu()">Open Action Sheet</button>
|
||||
</ion-content>
|
||||
@@ -1,6 +1,6 @@
|
||||
import {Component, Directive} from 'angular2/angular2';
|
||||
|
||||
import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
|
||||
import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
|
||||
|
||||
@IonicView({
|
||||
template: '<ion-navbar *navbar primary>' +
|
||||
@@ -48,12 +48,12 @@ import {App, ActionMenu, IonicApp, IonicView, Register} from 'ionic/ionic';
|
||||
'</ion-content>'
|
||||
})
|
||||
export class FirstPage {
|
||||
constructor(app: IonicApp, actionMenu: ActionMenu) {
|
||||
constructor(app: IonicApp, actionSheet: ActionSheet) {
|
||||
this.app = app;
|
||||
this.actionMenu = actionMenu;
|
||||
this.actionSheet = actionSheet;
|
||||
}
|
||||
showMoreMenu() {
|
||||
this.actionMenu.open({
|
||||
this.actionSheet.open({
|
||||
buttons: [
|
||||
{ icon: 'ion-android-share-alt', text: 'Share' },
|
||||
{ icon: 'ion-arrow-move', text: 'Move' }
|
||||
@@ -72,8 +72,8 @@ export class FirstPage {
|
||||
if(index == 1) { return false; }
|
||||
return true;
|
||||
}
|
||||
}).then(actionMenuRef => {
|
||||
this.actionMenuRef = actionMenuRef;
|
||||
}).then(actionSheetRef => {
|
||||
this.actionSheetRef = actionSheetRef;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {App, IonicView, IonicApp, IonicConfig, IonicPlatform} from 'ionic/ionic';
|
||||
import {Modal, ActionMenu, NavController, NavParams, Animation} from 'ionic/ionic';
|
||||
import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
@@ -81,7 +81,7 @@ export class ContactModal {
|
||||
<button (click)="push()">Push (Go to 2nd)</button>
|
||||
</p>
|
||||
<p>
|
||||
<button (click)="openActionMenu()">Open Action Menu</button>
|
||||
<button (click)="openActionSheet()">Open Action Sheet</button>
|
||||
</p>
|
||||
<p>
|
||||
<button (click)="closeByHandeModal()">Close By Handle</button>
|
||||
@@ -95,11 +95,11 @@ export class ModalFirstPage {
|
||||
constructor(
|
||||
nav: NavController,
|
||||
modal: Modal,
|
||||
actionMenu: ActionMenu
|
||||
actionSheet: ActionSheet
|
||||
) {
|
||||
this.nav = nav;
|
||||
this.modal = modal;
|
||||
this.actionMenu = actionMenu;
|
||||
this.actionSheet = actionSheet;
|
||||
}
|
||||
|
||||
push() {
|
||||
@@ -116,8 +116,8 @@ export class ModalFirstPage {
|
||||
modal.close();
|
||||
}
|
||||
|
||||
openActionMenu() {
|
||||
this.actionMenu.open({
|
||||
openActionSheet() {
|
||||
this.actionSheet.open({
|
||||
buttons: [
|
||||
{ text: 'Share This' },
|
||||
{ text: 'Move' }
|
||||
@@ -136,8 +136,8 @@ export class ModalFirstPage {
|
||||
if(index == 1) { return false; }
|
||||
return true;
|
||||
}
|
||||
}).then(actionMenuRef => {
|
||||
this.actionMenuRef = actionMenuRef;
|
||||
}).then(actionSheetRef => {
|
||||
this.actionSheetRef = actionSheetRef;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@ import {TabsPage} from './pages/tabs'
|
||||
import {MenuPage} from './pages/menu'
|
||||
import {AnimationPage} from './pages/animation'
|
||||
import {SlidePage} from './pages/slides'
|
||||
import {ActionMenuPage} from './pages/action-menu'
|
||||
import {ActionSheetPage} from './pages/action-sheet'
|
||||
import {ModalPage} from './pages/modal'
|
||||
|
||||
|
||||
@@ -66,8 +66,8 @@ import {ModalPage} from './pages/modal'
|
||||
path: '/slides',
|
||||
component: SlidePage
|
||||
}, {
|
||||
path: '/action-menu',
|
||||
component: ActionMenuPage
|
||||
path: '/action-sheet',
|
||||
component: ActionSheetPage
|
||||
}
|
||||
]
|
||||
})
|
||||
@@ -92,7 +92,7 @@ class MyApp {
|
||||
{ title: 'Menu', component: MenuPage },
|
||||
{ title: 'Animation', component: AnimationPage },
|
||||
{ title: 'Slides', component: SlidePage},
|
||||
{ title: 'Action Menu', component: ActionMenuPage },
|
||||
{ title: 'Action Sheet', component: ActionSheetPage },
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -1,38 +1,38 @@
|
||||
import {IonicApp, IonicView, NavController, ActionMenu} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView, NavController, ActionSheet} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Action Menu</ion-title></ion-navbar>
|
||||
<ion-navbar *navbar><ion-nav-items primary><button icon (click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Action Sheet</ion-title></ion-navbar>
|
||||
|
||||
<ion-content class="padding">
|
||||
<h2>Action Menu</h2>
|
||||
<h2>Action Sheet</h2>
|
||||
<p>
|
||||
The Action Menu, similar to Action Sheet's on iOS, is a slide-up prompt
|
||||
The Action Sheet, similar to Action Sheet's on iOS, is a slide-up prompt
|
||||
that displays several options for the user to choose from before an action is performed.
|
||||
</p>
|
||||
<p>
|
||||
Action Menu's are great for prompting for dangerous actions (like deleting a photo album),
|
||||
Action Sheet's are great for prompting for dangerous actions (like deleting a photo album),
|
||||
or showing a "context menu" with multiple actions the user can perform on something.
|
||||
</p>
|
||||
<button (click)="openMenu()">Open Menu</button>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class ActionMenuPage extends SinkPage {
|
||||
constructor(app: IonicApp, nav: NavController, actionMenu: ActionMenu) {
|
||||
export class ActionSheetPage extends SinkPage {
|
||||
constructor(app: IonicApp, nav: NavController, actionSheet: ActionSheet) {
|
||||
super(app);
|
||||
|
||||
this.nav = nav;
|
||||
this.actionMenu = actionMenu;
|
||||
this.actionSheet = actionSheet;
|
||||
}
|
||||
|
||||
openMenu() {
|
||||
console.log('Opening ActionMenu')
|
||||
console.log('Opening ActionSheet')
|
||||
|
||||
this.actionMenu.open({
|
||||
this.actionSheet.open({
|
||||
buttons: [
|
||||
{ text: 'Share This' },
|
||||
{ text: 'Move' }
|
||||
@@ -52,8 +52,8 @@ export class ActionMenuPage extends SinkPage {
|
||||
if(index == 1) { return false; }
|
||||
return true;
|
||||
}
|
||||
}).then(actionMenuRef => {
|
||||
this.actionMenuRef = actionMenuRef;
|
||||
}).then(actionSheetRef => {
|
||||
this.actionSheetRef = actionSheetRef;
|
||||
})
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
export * from 'ionic/components/app/app'
|
||||
export * from 'ionic/components/app/id'
|
||||
export * from 'ionic/components/action-menu/action-menu'
|
||||
export * from 'ionic/components/action-sheet/action-sheet'
|
||||
export * from 'ionic/components/button/button'
|
||||
export * from 'ionic/components/card/card'
|
||||
export * from 'ionic/components/checkbox/checkbox'
|
||||
|
||||
@@ -1,100 +0,0 @@
|
||||
|
||||
// Action Menu
|
||||
// --------------------------------------------------
|
||||
|
||||
$action-menu-width: 100% !default;
|
||||
$action-menu-max-width: 520px !default;
|
||||
$action-menu-background-color: rgba(243,243,243,.95) !default;
|
||||
$action-menu-button-text-color: #007aff !default;
|
||||
|
||||
$action-menu-options-bg-color: #f1f2f3 !default;
|
||||
$action-menu-options-bg-active-color: #e4e5e7 !default;
|
||||
$action-menu-options-text-color: #007aff !default;
|
||||
$action-menu-options-border-color: #d1d3d6 !default;
|
||||
|
||||
|
||||
ion-action-menu {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: $z-index-overlay;
|
||||
}
|
||||
|
||||
action-menu-wrapper {
|
||||
position: absolute;
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
.action-menu-container {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
padding: 1px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-color: $action-menu-options-border-color;
|
||||
background-color: transparent;
|
||||
|
||||
color: $action-menu-options-text-color;
|
||||
font-size: 21px;
|
||||
|
||||
&:hover {
|
||||
color: $action-menu-options-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
button.activated {
|
||||
box-shadow: none;
|
||||
border-color: $action-menu-options-border-color;
|
||||
color: $action-menu-options-text-color;
|
||||
background: $action-menu-options-bg-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-has-icons .icon {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.action-menu-title {
|
||||
padding: 10px;
|
||||
color: #8f8f8f;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.action-menu-group {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
button {
|
||||
border-width: 1px 0px 0px 0px;
|
||||
}
|
||||
|
||||
button:first-child:last-child {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-options {
|
||||
background: $action-menu-options-bg-color;
|
||||
}
|
||||
|
||||
.action-menu-cancel button {
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
|
||||
// iOS Action Menu
|
||||
// --------------------------------------------------
|
||||
|
||||
$action-menu-ios-group-margin: 10px !default;
|
||||
$action-menu-ios-background-color: rgba(243,243,243,.95) !default;
|
||||
|
||||
$action-menu-ios-height: 5.6rem !default;
|
||||
$action-menu-ios-padding: 1.8rem !default;
|
||||
$action-menu-ios-border-color: #d2d2d6 !default;
|
||||
$action-menu-ios-border-radius: 1.3rem !default;
|
||||
|
||||
$action-menu-ios-title-color: #5f5f5f !default;
|
||||
$action-menu-ios-title-font-size: 1.2rem !default;
|
||||
|
||||
$action-menu-ios-button-text-color: #007aff !default;
|
||||
$action-menu-ios-button-font-size: 2rem !default;
|
||||
$action-menu-ios-background-active: #ebebeb !default;
|
||||
|
||||
$action-menu-ios-icon-font-size: 1.4em !default;
|
||||
|
||||
|
||||
ion-action-menu {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-menu-container {
|
||||
padding: 0 $action-menu-ios-group-margin;
|
||||
}
|
||||
|
||||
ion-action-menu button {
|
||||
min-height: $action-menu-ios-height;
|
||||
padding: $action-menu-ios-padding;
|
||||
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
|
||||
&.activated {
|
||||
background: $action-menu-ios-background-active;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-group {
|
||||
margin-bottom: $action-menu-ios-group-margin - 2;
|
||||
border-radius: $action-menu-ios-border-radius;
|
||||
}
|
||||
|
||||
.action-menu-group:last-child {
|
||||
margin-bottom: $action-menu-ios-group-margin;
|
||||
}
|
||||
|
||||
.action-menu-title,
|
||||
.action-menu-option {
|
||||
min-height: $action-menu-ios-height;
|
||||
|
||||
background: $action-menu-ios-background-color;
|
||||
font-weight: 400;
|
||||
|
||||
border-bottom: 1px solid $action-menu-ios-border-color;
|
||||
}
|
||||
|
||||
.action-menu-title {
|
||||
padding: 2rem;
|
||||
font-size: $action-menu-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
color: $action-menu-ios-title-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-menu-option {
|
||||
font-size: $action-menu-ios-button-font-size;
|
||||
color: $action-menu-ios-button-text-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-menu-title:first-child,
|
||||
.action-menu-button:first-child,
|
||||
.action-menu-group button:first-child {
|
||||
border-top-left-radius: $action-menu-ios-border-radius;
|
||||
border-top-right-radius: $action-menu-ios-border-radius;
|
||||
}
|
||||
|
||||
.action-menu-title:last-child,
|
||||
.action-menu-button:last-child,
|
||||
.action-menu-group button:last-child {
|
||||
border-bottom-left-radius: $action-menu-ios-border-radius;
|
||||
border-bottom-right-radius: $action-menu-ios-border-radius;
|
||||
}
|
||||
|
||||
|
||||
&.hairlines .action-menu {
|
||||
.action-menu-title,
|
||||
.action-menu-option {
|
||||
border-bottom-width: 0.55px;
|
||||
}
|
||||
}
|
||||
@@ -1,82 +0,0 @@
|
||||
|
||||
// Material Design Action Menu
|
||||
// --------------------------------------------------
|
||||
|
||||
$action-menu-md-background-color: #fafafa !default;
|
||||
|
||||
$action-menu-md-height: 4.8rem !default;
|
||||
|
||||
$action-menu-md-title-color: #757575 !default;
|
||||
$action-menu-md-title-font-size: 1.6rem !default;
|
||||
$action-menu-md-title-padding: 1.9rem 1.6rem 1.7rem !default;
|
||||
|
||||
$action-menu-md-button-text-color: #222 !default;
|
||||
$action-menu-md-button-font-size: 1.6rem !default;
|
||||
$action-menu-md-background-active: #f1f1f1 !default;
|
||||
|
||||
$action-menu-md-icon-font-size: 2.4rem !default;
|
||||
$action-menu-md-icon-margin: 0 28px 0 0 !default;
|
||||
|
||||
|
||||
ion-action-menu {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-menu-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-menu-title,
|
||||
.action-menu-option,
|
||||
.action-menu-destructive,
|
||||
.action-menu-cancel button {
|
||||
text-align: left;
|
||||
border-color: transparent;
|
||||
font-size: $action-menu-md-button-font-size;
|
||||
color: $action-menu-md-button-text-color;
|
||||
box-shadow: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
ion-action-menu icon {
|
||||
display: inline-block;
|
||||
margin: $action-menu-md-icon-margin;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: $action-menu-md-icon-font-size;
|
||||
}
|
||||
|
||||
.action-menu-title {
|
||||
padding: $action-menu-md-title-padding;
|
||||
font-size: $action-menu-md-title-font-size;
|
||||
color: $action-menu-md-title-color;
|
||||
}
|
||||
|
||||
ion-action-menu button {
|
||||
font-weight: normal;
|
||||
min-height: $action-menu-md-height;
|
||||
|
||||
&.activated {
|
||||
background: $action-menu-md-background-active;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-group {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background-color: $action-menu-md-background-color;
|
||||
|
||||
&:last-child button {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-menu-cancel {
|
||||
background-color: $action-menu-md-background-color;
|
||||
width: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
<ion-content class="padding">
|
||||
<button (click)="openMenu()">Open Action Menu</button>
|
||||
</ion-content>
|
||||
100
ionic/components/action-sheet/action-sheet.scss
Normal file
100
ionic/components/action-sheet/action-sheet.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
|
||||
// Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
$action-sheet-width: 100% !default;
|
||||
$action-sheet-max-width: 520px !default;
|
||||
$action-sheet-background-color: rgba(243,243,243,.95) !default;
|
||||
$action-sheet-button-text-color: #007aff !default;
|
||||
|
||||
$action-sheet-options-bg-color: #f1f2f3 !default;
|
||||
$action-sheet-options-bg-active-color: #e4e5e7 !default;
|
||||
$action-sheet-options-text-color: #007aff !default;
|
||||
$action-sheet-options-border-color: #d1d3d6 !default;
|
||||
|
||||
|
||||
ion-action-sheet {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
z-index: $z-index-overlay;
|
||||
}
|
||||
|
||||
action-sheet-wrapper {
|
||||
position: absolute;
|
||||
z-index: $z-index-overlay-wrapper;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
display: block;
|
||||
max-width: 500px;
|
||||
margin: auto;
|
||||
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
|
||||
.action-sheet-container {
|
||||
width: auto;
|
||||
overflow: hidden;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
padding: 1px;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
border-color: $action-sheet-options-border-color;
|
||||
background-color: transparent;
|
||||
|
||||
color: $action-sheet-options-text-color;
|
||||
font-size: 21px;
|
||||
|
||||
&:hover {
|
||||
color: $action-sheet-options-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
button.activated {
|
||||
box-shadow: none;
|
||||
border-color: $action-sheet-options-border-color;
|
||||
color: $action-sheet-options-text-color;
|
||||
background: $action-sheet-options-bg-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-has-icons .icon {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
padding: 10px;
|
||||
color: #8f8f8f;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
button {
|
||||
border-width: 1px 0px 0px 0px;
|
||||
}
|
||||
|
||||
button:first-child:last-child {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-options {
|
||||
background: $action-sheet-options-bg-color;
|
||||
}
|
||||
|
||||
.action-sheet-cancel button {
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
/**
|
||||
* @ngdoc service
|
||||
* @name ActionMenu
|
||||
* @name ActionSheet
|
||||
* @module ionic
|
||||
* @description
|
||||
* The ActionMenu is a modal menu with options to select based on an action.
|
||||
* The ActionSheet is a modal menu with options to select based on an action.
|
||||
*/
|
||||
|
||||
import {View, Injectable, NgFor, NgIf} from 'angular2/angular2';
|
||||
@@ -15,9 +15,9 @@ import * as util from 'ionic/util';
|
||||
|
||||
|
||||
/**
|
||||
* @name ActionMenu
|
||||
* @name ActionSheet
|
||||
* @description
|
||||
* The Action Menu is a slide-up pane that lets the user choose from a set of options. Dangerous options are made obvious.
|
||||
* The Action Sheet is a slide-up pane that lets the user choose from a set of options. Dangerous options are made obvious.
|
||||
*
|
||||
* There are easy ways to cancel out of the action sheet, such as tapping the backdrop or even hitting escape on the keyboard for desktop testing.
|
||||
*
|
||||
@@ -25,7 +25,7 @@ import * as util from 'ionic/util';
|
||||
* ```ts
|
||||
* openMenu() {
|
||||
*
|
||||
* this.actionMenu.open({
|
||||
* this.actionSheet.open({
|
||||
* buttons: [
|
||||
* { text: 'Share This' },
|
||||
* { text: 'Move' }
|
||||
@@ -45,8 +45,8 @@ import * as util from 'ionic/util';
|
||||
* return true;
|
||||
* }
|
||||
*
|
||||
* }).then(actionMenuRef => {
|
||||
* this.actionMenuRef = actionMenuRef;
|
||||
* }).then(actionSheetRef => {
|
||||
* this.actionSheetRef = actionSheetRef;
|
||||
* });
|
||||
*
|
||||
* }
|
||||
@@ -55,28 +55,28 @@ import * as util from 'ionic/util';
|
||||
@View({
|
||||
template:
|
||||
'<backdrop (click)="_cancel()" tappable></backdrop>' +
|
||||
'<action-menu-wrapper>' +
|
||||
'<div class="action-menu-container">' +
|
||||
'<div class="action-menu-group action-menu-options">' +
|
||||
'<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">' +
|
||||
'<action-sheet-wrapper>' +
|
||||
'<div class="action-sheet-container">' +
|
||||
'<div class="action-sheet-group action-sheet-options">' +
|
||||
'<div class="action-sheet-title" *ng-if="titleText">{{titleText}}</div>' +
|
||||
'<button (click)="_buttonClicked(index)" *ng-for="#b of buttons; #index = index" class="action-sheet-option">' +
|
||||
'<icon [name]="b.icon" *ng-if="b.icon"></icon> ' +
|
||||
'{{b.text}}' +
|
||||
'</button>' +
|
||||
'<button *ng-if="destructiveText" (click)="_destructive()" class="destructive action-menu-destructive">' +
|
||||
'<button *ng-if="destructiveText" (click)="_destructive()" class="destructive action-sheet-destructive">' +
|
||||
'<icon [name]="destructiveIcon" *ng-if="destructiveIcon"></icon> ' +
|
||||
'{{destructiveText}}</button>' +
|
||||
'</div>' +
|
||||
'<div class="action-menu-group action-menu-cancel" *ng-if="cancelText">' +
|
||||
'<div class="action-sheet-group action-sheet-cancel" *ng-if="cancelText">' +
|
||||
'<button (click)="_cancel()">' +
|
||||
'<icon [name]="cancelIcon"></icon> ' +
|
||||
'{{cancelText}}</button>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</action-menu-wrapper>',
|
||||
'</action-sheet-wrapper>',
|
||||
directives: [NgFor, NgIf, Icon]
|
||||
})
|
||||
class ActionMenuDirective {
|
||||
class ActionSheetDirective {
|
||||
|
||||
_cancel() {
|
||||
this.cancel && this.cancel();
|
||||
@@ -99,10 +99,10 @@ class ActionMenuDirective {
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class ActionMenu extends Overlay {
|
||||
export class ActionSheet extends Overlay {
|
||||
/**
|
||||
* Create and open a new Action Menu. This is the
|
||||
* public API, and most often you will only use ActionMenu.open()
|
||||
* Create and open a new Action Sheet. This is the
|
||||
* public API, and most often you will only use ActionSheet.open()
|
||||
*
|
||||
* @param {Object} [opts={}] TODO
|
||||
* @return {Promise} Promise that resolves when the action menu is open.
|
||||
@@ -110,15 +110,15 @@ export class ActionMenu extends Overlay {
|
||||
open(opts={}) {
|
||||
let config = this.config;
|
||||
let defaults = {
|
||||
enterAnimation: config.setting('actionMenuEnter'),
|
||||
leaveAnimation: config.setting('actionMenuLeave'),
|
||||
cancelIcon: config.setting('actionMenuCancelIcon'),
|
||||
destructiveIcon: config.setting('actionMenuDestructiveIcon')
|
||||
enterAnimation: config.setting('actionSheetEnter'),
|
||||
leaveAnimation: config.setting('actionSheetLeave'),
|
||||
cancelIcon: config.setting('actionSheetCancelIcon'),
|
||||
destructiveIcon: config.setting('actionSheetDestructiveIcon')
|
||||
};
|
||||
|
||||
let context = util.extend(defaults, opts);
|
||||
|
||||
return this.create(OVERLAY_TYPE, ActionMenuDirective, context, context);
|
||||
return this.create(OVERLAY_TYPE, ActionSheetDirective, context, context);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -131,55 +131,55 @@ export class ActionMenu extends Overlay {
|
||||
|
||||
}
|
||||
|
||||
const OVERLAY_TYPE = 'action-menu';
|
||||
const OVERLAY_TYPE = 'action-sheet';
|
||||
|
||||
|
||||
/**
|
||||
* Animations for action sheet
|
||||
*/
|
||||
class ActionMenuAnimation extends Animation {
|
||||
class ActionSheetAnimation extends Animation {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this.easing('cubic-bezier(.36, .66, .04, 1)').duration(450);
|
||||
|
||||
this.backdrop = new Animation(element.querySelector('backdrop'));
|
||||
this.wrapper = new Animation(element.querySelector('action-menu-wrapper'));
|
||||
this.wrapper = new Animation(element.querySelector('action-sheet-wrapper'));
|
||||
|
||||
this.add(this.backdrop, this.wrapper);
|
||||
}
|
||||
}
|
||||
|
||||
class ActionMenuSlideIn extends ActionMenuAnimation {
|
||||
class ActionSheetSlideIn extends ActionSheetAnimation {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this.backdrop.fromTo('opacity', 0.01, 0.4);
|
||||
this.wrapper.fromTo('translateY', '100%', '0%');
|
||||
}
|
||||
}
|
||||
Animation.register('action-menu-slide-in', ActionMenuSlideIn);
|
||||
Animation.register('action-sheet-slide-in', ActionSheetSlideIn);
|
||||
|
||||
class ActionMenuSlideOut extends ActionMenuAnimation {
|
||||
class ActionSheetSlideOut extends ActionSheetAnimation {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this.backdrop.fromTo('opacity', 0.4, 0.01);
|
||||
this.wrapper.fromTo('translateY', '0%', '100%');
|
||||
}
|
||||
}
|
||||
Animation.register('action-menu-slide-out', ActionMenuSlideOut);
|
||||
Animation.register('action-sheet-slide-out', ActionSheetSlideOut);
|
||||
|
||||
|
||||
class ActionMenuMdSlideIn extends ActionMenuSlideIn {
|
||||
class ActionSheetMdSlideIn extends ActionSheetSlideIn {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this.backdrop.fromTo('opacity', 0.01, 0.26);
|
||||
}
|
||||
}
|
||||
Animation.register('action-menu-md-slide-in', ActionMenuMdSlideIn);
|
||||
Animation.register('action-sheet-md-slide-in', ActionSheetMdSlideIn);
|
||||
|
||||
class ActionMenuMdSlideOut extends ActionMenuSlideOut {
|
||||
class ActionSheetMdSlideOut extends ActionSheetSlideOut {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this.backdrop.fromTo('opacity', 0.26, 0.01);
|
||||
}
|
||||
}
|
||||
Animation.register('action-menu-md-slide-out', ActionMenuMdSlideOut);
|
||||
Animation.register('action-sheet-md-slide-out', ActionSheetMdSlideOut);
|
||||
98
ionic/components/action-sheet/modes/ios.scss
Normal file
98
ionic/components/action-sheet/modes/ios.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
|
||||
// iOS Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
$action-sheet-ios-group-margin: 10px !default;
|
||||
$action-sheet-ios-background-color: rgba(243,243,243,.95) !default;
|
||||
|
||||
$action-sheet-ios-height: 5.6rem !default;
|
||||
$action-sheet-ios-padding: 1.8rem !default;
|
||||
$action-sheet-ios-border-color: #d2d2d6 !default;
|
||||
$action-sheet-ios-border-radius: 1.3rem !default;
|
||||
|
||||
$action-sheet-ios-title-color: #5f5f5f !default;
|
||||
$action-sheet-ios-title-font-size: 1.2rem !default;
|
||||
|
||||
$action-sheet-ios-button-text-color: #007aff !default;
|
||||
$action-sheet-ios-button-font-size: 2rem !default;
|
||||
$action-sheet-ios-background-active: #ebebeb !default;
|
||||
|
||||
$action-sheet-ios-icon-font-size: 1.4em !default;
|
||||
|
||||
|
||||
ion-action-sheet {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.action-sheet-container {
|
||||
padding: 0 $action-sheet-ios-group-margin;
|
||||
}
|
||||
|
||||
ion-action-sheet button {
|
||||
min-height: $action-sheet-ios-height;
|
||||
padding: $action-sheet-ios-padding;
|
||||
|
||||
margin: 0;
|
||||
border: 0;
|
||||
|
||||
background: transparent;
|
||||
|
||||
&.activated {
|
||||
background: $action-sheet-ios-background-active;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
margin-bottom: $action-sheet-ios-group-margin - 2;
|
||||
border-radius: $action-sheet-ios-border-radius;
|
||||
}
|
||||
|
||||
.action-sheet-group:last-child {
|
||||
margin-bottom: $action-sheet-ios-group-margin;
|
||||
}
|
||||
|
||||
.action-sheet-title,
|
||||
.action-sheet-option {
|
||||
min-height: $action-sheet-ios-height;
|
||||
|
||||
background: $action-sheet-ios-background-color;
|
||||
font-weight: 400;
|
||||
|
||||
border-bottom: 1px solid $action-sheet-ios-border-color;
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
padding: 2rem;
|
||||
font-size: $action-sheet-ios-title-font-size;
|
||||
font-weight: 500;
|
||||
color: $action-sheet-ios-title-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-sheet-option {
|
||||
font-size: $action-sheet-ios-button-font-size;
|
||||
color: $action-sheet-ios-button-text-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.action-sheet-title:first-child,
|
||||
.action-sheet-button:first-child,
|
||||
.action-sheet-group button:first-child {
|
||||
border-top-left-radius: $action-sheet-ios-border-radius;
|
||||
border-top-right-radius: $action-sheet-ios-border-radius;
|
||||
}
|
||||
|
||||
.action-sheet-title:last-child,
|
||||
.action-sheet-button:last-child,
|
||||
.action-sheet-group button:last-child {
|
||||
border-bottom-left-radius: $action-sheet-ios-border-radius;
|
||||
border-bottom-right-radius: $action-sheet-ios-border-radius;
|
||||
}
|
||||
|
||||
|
||||
&.hairlines .action-sheet {
|
||||
.action-sheet-title,
|
||||
.action-sheet-option {
|
||||
border-bottom-width: 0.55px;
|
||||
}
|
||||
}
|
||||
82
ionic/components/action-sheet/modes/md.scss
Normal file
82
ionic/components/action-sheet/modes/md.scss
Normal file
@@ -0,0 +1,82 @@
|
||||
|
||||
// Material Design Action Sheet
|
||||
// --------------------------------------------------
|
||||
|
||||
$action-sheet-md-background-color: #fafafa !default;
|
||||
|
||||
$action-sheet-md-height: 4.8rem !default;
|
||||
|
||||
$action-sheet-md-title-color: #757575 !default;
|
||||
$action-sheet-md-title-font-size: 1.6rem !default;
|
||||
$action-sheet-md-title-padding: 1.9rem 1.6rem 1.7rem !default;
|
||||
|
||||
$action-sheet-md-button-text-color: #222 !default;
|
||||
$action-sheet-md-button-font-size: 1.6rem !default;
|
||||
$action-sheet-md-background-active: #f1f1f1 !default;
|
||||
|
||||
$action-sheet-md-icon-font-size: 2.4rem !default;
|
||||
$action-sheet-md-icon-margin: 0 28px 0 0 !default;
|
||||
|
||||
|
||||
ion-action-sheet {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-sheet-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.action-sheet-title,
|
||||
.action-sheet-option,
|
||||
.action-sheet-destructive,
|
||||
.action-sheet-cancel button {
|
||||
text-align: left;
|
||||
border-color: transparent;
|
||||
font-size: $action-sheet-md-button-font-size;
|
||||
color: $action-sheet-md-button-text-color;
|
||||
box-shadow: none;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
ion-action-sheet icon {
|
||||
display: inline-block;
|
||||
margin: $action-sheet-md-icon-margin;
|
||||
min-width: 24px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
font-size: $action-sheet-md-icon-font-size;
|
||||
}
|
||||
|
||||
.action-sheet-title {
|
||||
padding: $action-sheet-md-title-padding;
|
||||
font-size: $action-sheet-md-title-font-size;
|
||||
color: $action-sheet-md-title-color;
|
||||
}
|
||||
|
||||
ion-action-sheet button {
|
||||
font-weight: normal;
|
||||
min-height: $action-sheet-md-height;
|
||||
|
||||
&.activated {
|
||||
background: $action-sheet-md-background-active;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-group {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background-color: $action-sheet-md-background-color;
|
||||
|
||||
&:last-child button {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-sheet-cancel {
|
||||
background-color: $action-sheet-md-background-color;
|
||||
width: auto;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
|
||||
it('should open action menu', function() {
|
||||
it('should open action sheet', function() {
|
||||
element(by.css('button')).click();
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {App, ActionMenu} from 'ionic/ionic';
|
||||
import {App, ActionSheet} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
@@ -6,13 +6,13 @@ import {App, ActionMenu} from 'ionic/ionic';
|
||||
})
|
||||
class IonicApp {
|
||||
|
||||
constructor(actionMenu: ActionMenu) {
|
||||
this.actionMenu = actionMenu;
|
||||
constructor(actionSheet: ActionSheet) {
|
||||
this.actionSheet = actionSheet;
|
||||
}
|
||||
|
||||
openMenu() {
|
||||
|
||||
this.actionMenu.open({
|
||||
this.actionSheet.open({
|
||||
buttons: [
|
||||
{ text: 'Share This' },
|
||||
{ text: 'Move' }
|
||||
@@ -32,8 +32,8 @@ class IonicApp {
|
||||
return true;
|
||||
}
|
||||
|
||||
}).then(actionMenuRef => {
|
||||
this.actionMenuRef = actionMenuRef;
|
||||
}).then(actionSheetRef => {
|
||||
this.actionSheetRef = actionSheetRef;
|
||||
});
|
||||
|
||||
}
|
||||
3
ionic/components/action-sheet/test/basic/main.html
Normal file
3
ionic/components/action-sheet/test/basic/main.html
Normal file
@@ -0,0 +1,3 @@
|
||||
<ion-content class="padding">
|
||||
<button (click)="openMenu()">Open Action Sheet</button>
|
||||
</ion-content>
|
||||
@@ -8,7 +8,7 @@ import * as util from '../../util/util';
|
||||
|
||||
// injectables
|
||||
import {Activator} from './activator';
|
||||
import {ActionMenu} from '../action-menu/action-menu';
|
||||
import {ActionSheet} from '../action-sheet/action-sheet';
|
||||
import {Modal} from '../modal/modal';
|
||||
import {Popup} from '../popup/popup';
|
||||
import {FocusHolder} from '../form/focus-holder';
|
||||
@@ -80,7 +80,7 @@ export class IonicApp {
|
||||
/**
|
||||
* Sets if the app is currently enabled or not, meaning if it's
|
||||
* available to accept new user commands. For example, this is set to `false`
|
||||
* while views transition, a modal slides up, an action-menu
|
||||
* while views transition, a modal slides up, an action-sheet
|
||||
* slides up, etc. After the transition completes it is set back to `true`.
|
||||
* @param {bool} isEnabled
|
||||
* @param {bool} fallback When `isEnabled` is set to `false`, this argument
|
||||
@@ -280,7 +280,7 @@ export function ionicBootstrap(rootComponentType, config) {
|
||||
|
||||
// TODO: probs need a better way to inject global injectables
|
||||
let activator = new Activator(app, config, window, document);
|
||||
let actionMenu = new ActionMenu(app, config);
|
||||
let actionSheet = new ActionSheet(app, config);
|
||||
let modal = new Modal(app, config);
|
||||
let popup = new Popup(app, config);
|
||||
|
||||
@@ -290,7 +290,7 @@ export function ionicBootstrap(rootComponentType, config) {
|
||||
bind(IonicConfig).toValue(config),
|
||||
bind(IonicPlatform).toValue(platform),
|
||||
bind(Activator).toValue(activator),
|
||||
bind(ActionMenu).toValue(actionMenu),
|
||||
bind(ActionSheet).toValue(actionSheet),
|
||||
bind(Modal).toValue(modal),
|
||||
bind(Popup).toValue(popup),
|
||||
ROUTER_BINDINGS,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {App, IonicView, IonicApp, IonicConfig, IonicPlatform} from 'ionic/ionic';
|
||||
import {Modal, ActionMenu, NavController, NavParams, Animation} from 'ionic/ionic';
|
||||
import {Modal, ActionSheet, NavController, NavParams, Animation} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
@@ -81,7 +81,7 @@ export class ContactModal {
|
||||
<button (click)="push()">Push (Go to 2nd)</button>
|
||||
</p>
|
||||
<p>
|
||||
<button (click)="openActionMenu()">Open Action Menu</button>
|
||||
<button (click)="openActionSheet()">Open Action Sheet</button>
|
||||
</p>
|
||||
<p>
|
||||
<button (click)="closeByHandeModal()">Close By Handle</button>
|
||||
@@ -95,11 +95,11 @@ export class ModalFirstPage {
|
||||
constructor(
|
||||
nav: NavController,
|
||||
modal: Modal,
|
||||
actionMenu: ActionMenu
|
||||
actionSheet: ActionSheet
|
||||
) {
|
||||
this.nav = nav;
|
||||
this.modal = modal;
|
||||
this.actionMenu = actionMenu;
|
||||
this.actionSheet = actionSheet;
|
||||
}
|
||||
|
||||
push() {
|
||||
@@ -116,8 +116,8 @@ export class ModalFirstPage {
|
||||
modal.close();
|
||||
}
|
||||
|
||||
openActionMenu() {
|
||||
this.actionMenu.open({
|
||||
openActionSheet() {
|
||||
this.actionSheet.open({
|
||||
buttons: [
|
||||
{ text: 'Share This' },
|
||||
{ text: 'Move' }
|
||||
@@ -136,8 +136,8 @@ export class ModalFirstPage {
|
||||
if(index == 1) { return false; }
|
||||
return true;
|
||||
}
|
||||
}).then(actionMenuRef => {
|
||||
this.actionMenuRef = actionMenuRef;
|
||||
}).then(actionSheetRef => {
|
||||
this.actionSheetRef = actionSheetRef;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,10 +5,10 @@ import {IonicConfig} from './config';
|
||||
// iOS Mode Settings
|
||||
IonicConfig.modeConfig('ios', {
|
||||
|
||||
actionMenuEnter: 'action-menu-slide-in',
|
||||
actionMenuLeave: 'action-menu-slide-out',
|
||||
actionMenuCancelIcon: '',
|
||||
actionMenuDestructiveIcon: '',
|
||||
actionSheetEnter: 'action-sheet-slide-in',
|
||||
actionSheetLeave: 'action-sheet-slide-out',
|
||||
actionSheetCancelIcon: '',
|
||||
actionSheetDestructiveIcon: '',
|
||||
|
||||
backButtonText: 'Back',
|
||||
backButtonIcon: 'ion-ios-arrow-back',
|
||||
@@ -25,10 +25,10 @@ IonicConfig.modeConfig('ios', {
|
||||
// Material Design Mode Settings
|
||||
IonicConfig.modeConfig('md', {
|
||||
|
||||
actionMenuEnter: 'action-menu-md-slide-in',
|
||||
actionMenuLeave: 'action-menu-md-slide-out',
|
||||
actionMenuCancelIcon: 'ion-md-close',
|
||||
actionMenuDestructiveIcon: 'ion-md-trash',
|
||||
actionSheetEnter: 'action-sheet-md-slide-in',
|
||||
actionSheetLeave: 'action-sheet-md-slide-out',
|
||||
actionSheetCancelIcon: 'ion-md-close',
|
||||
actionSheetDestructiveIcon: 'ion-md-trash',
|
||||
|
||||
backButtonText: '',
|
||||
backButtonIcon: 'ion-md-arrow-back',
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
// Core Components
|
||||
@import
|
||||
"components/toolbar/toolbar",
|
||||
"components/action-menu/action-menu",
|
||||
"components/action-sheet/action-sheet",
|
||||
"components/badge/badge",
|
||||
"components/button/button",
|
||||
"components/button/button-clear",
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
@import
|
||||
"components/item/modes/ios",
|
||||
"components/toolbar/modes/ios",
|
||||
"components/action-menu/modes/ios",
|
||||
"components/action-sheet/modes/ios",
|
||||
"components/card/modes/ios",
|
||||
"components/content/modes/ios",
|
||||
"components/list/modes/ios",
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
@import
|
||||
"components/material/ripple",
|
||||
"components/toolbar/modes/md",
|
||||
"components/action-menu/modes/md",
|
||||
"components/action-sheet/modes/md",
|
||||
"components/button/modes/md",
|
||||
"components/content/modes/md",
|
||||
"components/item/modes/md",
|
||||
|
||||
Reference in New Issue
Block a user