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
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;
|
||||
}
|
||||
185
ionic/components/action-sheet/action-sheet.ts
Normal file
185
ionic/components/action-sheet/action-sheet.ts
Normal file
@@ -0,0 +1,185 @@
|
||||
/**
|
||||
* @ngdoc service
|
||||
* @name ActionSheet
|
||||
* @module ionic
|
||||
* @description
|
||||
* The ActionSheet is a modal menu with options to select based on an action.
|
||||
*/
|
||||
|
||||
import {View, Injectable, NgFor, NgIf} from 'angular2/angular2';
|
||||
|
||||
import {Icon} from '../icon/icon';
|
||||
import {Overlay} from '../overlay/overlay';
|
||||
import {Animation} from '../../animations/animation';
|
||||
import * as util from 'ionic/util';
|
||||
|
||||
|
||||
/**
|
||||
* @name ActionSheet
|
||||
* @description
|
||||
* 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.
|
||||
*
|
||||
* @usage
|
||||
* ```ts
|
||||
* openMenu() {
|
||||
*
|
||||
* this.actionSheet.open({
|
||||
* buttons: [
|
||||
* { text: 'Share This' },
|
||||
* { text: 'Move' }
|
||||
* ],
|
||||
* destructiveText: 'Delete',
|
||||
* titleText: 'Modify your album',
|
||||
* cancelText: 'Cancel',
|
||||
* cancel: function() {
|
||||
* console.log('Canceled');
|
||||
* },
|
||||
* destructiveButtonClicked: () => {
|
||||
* console.log('Destructive clicked');
|
||||
* },
|
||||
* buttonClicked: function(index) {
|
||||
* console.log('Button clicked', index);
|
||||
* if(index == 1) { return false; }
|
||||
* return true;
|
||||
* }
|
||||
*
|
||||
* }).then(actionSheetRef => {
|
||||
* this.actionSheetRef = actionSheetRef;
|
||||
* });
|
||||
*
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
@View({
|
||||
template:
|
||||
'<backdrop (click)="_cancel()" tappable></backdrop>' +
|
||||
'<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-sheet-destructive">' +
|
||||
'<icon [name]="destructiveIcon" *ng-if="destructiveIcon"></icon> ' +
|
||||
'{{destructiveText}}</button>' +
|
||||
'</div>' +
|
||||
'<div class="action-sheet-group action-sheet-cancel" *ng-if="cancelText">' +
|
||||
'<button (click)="_cancel()">' +
|
||||
'<icon [name]="cancelIcon"></icon> ' +
|
||||
'{{cancelText}}</button>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</action-sheet-wrapper>',
|
||||
directives: [NgFor, NgIf, Icon]
|
||||
})
|
||||
class ActionSheetDirective {
|
||||
|
||||
_cancel() {
|
||||
this.cancel && this.cancel();
|
||||
return this.overlayRef.close();
|
||||
}
|
||||
|
||||
_destructive() {
|
||||
let shouldClose = this.destructiveButtonClicked();
|
||||
if (shouldClose === true) {
|
||||
return this.overlayRef.close();
|
||||
}
|
||||
}
|
||||
|
||||
_buttonClicked(index) {
|
||||
let shouldClose = this.buttonClicked(index);
|
||||
if (shouldClose === true) {
|
||||
return this.overlayRef.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Injectable()
|
||||
export class ActionSheet extends Overlay {
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
open(opts={}) {
|
||||
let config = this.config;
|
||||
let defaults = {
|
||||
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, ActionSheetDirective, context, context);
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @returns {TODO} TODO
|
||||
*/
|
||||
get() {
|
||||
return this.getByType(OVERLAY_TYPE);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const OVERLAY_TYPE = 'action-sheet';
|
||||
|
||||
|
||||
/**
|
||||
* Animations for action sheet
|
||||
*/
|
||||
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-sheet-wrapper'));
|
||||
|
||||
this.add(this.backdrop, this.wrapper);
|
||||
}
|
||||
}
|
||||
|
||||
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-sheet-slide-in', ActionSheetSlideIn);
|
||||
|
||||
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-sheet-slide-out', ActionSheetSlideOut);
|
||||
|
||||
|
||||
class ActionSheetMdSlideIn extends ActionSheetSlideIn {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this.backdrop.fromTo('opacity', 0.01, 0.26);
|
||||
}
|
||||
}
|
||||
Animation.register('action-sheet-md-slide-in', ActionSheetMdSlideIn);
|
||||
|
||||
class ActionSheetMdSlideOut extends ActionSheetSlideOut {
|
||||
constructor(element) {
|
||||
super(element);
|
||||
this.backdrop.fromTo('opacity', 0.26, 0.01);
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
|
||||
8
ionic/components/action-sheet/test/basic/e2e.ts
Normal file
8
ionic/components/action-sheet/test/basic/e2e.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
|
||||
it('should open action sheet', function() {
|
||||
element(by.css('button')).click();
|
||||
});
|
||||
|
||||
it('should close with backdrop click', function() {
|
||||
element(by.css('backdrop')).click();
|
||||
});
|
||||
41
ionic/components/action-sheet/test/basic/index.ts
Normal file
41
ionic/components/action-sheet/test/basic/index.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import {App, ActionSheet} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {
|
||||
|
||||
constructor(actionSheet: ActionSheet) {
|
||||
this.actionSheet = actionSheet;
|
||||
}
|
||||
|
||||
openMenu() {
|
||||
|
||||
this.actionSheet.open({
|
||||
buttons: [
|
||||
{ text: 'Share This' },
|
||||
{ text: 'Move' }
|
||||
],
|
||||
destructiveText: 'Delete',
|
||||
titleText: 'Modify your album',
|
||||
cancelText: 'Cancel',
|
||||
cancel: function() {
|
||||
console.log('Canceled');
|
||||
},
|
||||
destructiveButtonClicked: () => {
|
||||
console.log('Destructive clicked');
|
||||
},
|
||||
buttonClicked: function(index) {
|
||||
console.log('Button clicked', index);
|
||||
if(index == 1) { return false; }
|
||||
return true;
|
||||
}
|
||||
|
||||
}).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>
|
||||
Reference in New Issue
Block a user