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,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;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user