javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(actionSheet): rename interface

Browse Source
This commit is contained in:
mhartington
2017-08-07 16:52:20 -04:00
parent abdf9ff320
commit f33af0623f
7 changed files with 265 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/demos/action-sheet/basic.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Ionic Slides Basic</title>
<title>Action Sheet Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
</head>

26
packages/core/src/components/action-sheet-controller/action-sheet-controller.scss
View File

@ -1,32 +1,10 @@
@import "../../themes/ionic.globals";
// Loading Controller
// ActionSheet Controller
// --------------------------------------------------
ion-loading-controller {
ion-action-sheet-controller {
display: none;
}
// Loading Controller Backdrop
// --------------------------------------------------
/// @prop - Color of the backdrop
$loading-backdrop-color: #000 !default;
.loading-backdrop {
position: absolute;
top: 0;
left: 0;
z-index: $z-index-backdrop;
display: block;
width: 100%;
height: 100%;
background-color: $loading-backdrop-color;
opacity: .01;
transform: translateZ(0);
}

18
packages/core/src/components/action-sheet-controller/action-sheet-controller.tsx
View File

@ -1,6 +1,11 @@
import { Component, Listen } from '@stencil/core';
import { ActionSheetEvent, ActionSheetOptions, ActionSheet, IonicControllerApi, Ionic } from '../../index';
import {
ActionSheetEvent,
ActionSheetOptions,
ActionSheet,
IonicControllerApi,
Ionic
} from '../../index';
@Component({
tag: 'ion-action-sheet-controller',
@ -8,17 +13,15 @@ import { ActionSheetEvent, ActionSheetOptions, ActionSheet, IonicControllerApi,
})
export class ActionSheetController implements IonicControllerApi {
private ids = 0;
private actionsheetResolves: {[actionsheetId: string]: Function} = {};
private actionsheetResolves: { [actionsheetId: string]: Function } = {};
private actionsheets: ActionSheet[] = [];
private appRoot: Element;
ionViewDidLoad() {
this.appRoot = document.querySelector('ion-app') || document.body;
Ionic.registerController('action-sheet', this);
}
load(opts?: ActionSheetOptions) {
// create ionic's wrapping ion-actionsheet component
const actionsheet = document.createElement('ion-action-sheet');
@ -41,7 +44,6 @@ export class ActionSheetController implements IonicControllerApi {
});
}
@Listen('body:ionActionSheetDidLoad')
viewDidLoad(ev: ActionSheetEvent) {
const actionsheet = ev.detail.actionsheet;
@ -52,13 +54,11 @@ export class ActionSheetController implements IonicControllerApi {
}
}
@Listen('body:ionActionSheetWillPresent')
willPresent(ev: ActionSheetEvent) {
this.actionsheets.push(ev.detail.actionsheet);
}
@Listen('body:ionActionSheetWillDismiss, body:ionActionSheetDidUnload')
willDismiss(ev: ActionSheetEvent) {
const index = this.actionsheets.indexOf(ev.detail.actionsheet);
@ -67,7 +67,6 @@ export class ActionSheetController implements IonicControllerApi {
}
}
@Listen('body:keyup.escape')
escapeKeyUp() {
const lastActionSheet = this.actionsheets[this.actionsheets.length - 1];
@ -75,5 +74,4 @@ export class ActionSheetController implements IonicControllerApi {
lastActionSheet.dismiss();
}
}
}

182
packages/core/src/components/action-sheet/action-sheet.ios.scss
View File

@ -1,109 +1,159 @@
@import "../../themes/ionic.globals.ios";
@import "./loading";
@import "./action-sheet";
// iOS Loading Indicator
// iOS Action Sheet
// --------------------------------------------------
/// @prop - Text align of the action sheet
$action-sheet-ios-text-align: center !default;
// deprecated
$loading-ios-padding: null !default;
$action-sheet-ios-padding: null !default;
/// @prop - Padding top of the loading wrapper
$loading-ios-padding-top: 24px !default;
/// @prop - Padding top of the action sheet
$action-sheet-ios-padding-top: 0 !default;
/// @prop - Padding end of the loading wrapper
$loading-ios-padding-end: 34px !default;
/// @prop - Padding end of the action sheet
$action-sheet-ios-padding-end: 10px !default;
/// @prop - Padding bottom of the loading wrapper
$loading-ios-padding-bottom: $loading-ios-padding-top !default;
/// @prop - Padding bottom of the action sheet
$action-sheet-ios-padding-bottom: $action-sheet-ios-padding-top !default;
/// @prop - Padding start of the loading wrapper
$loading-ios-padding-start: $loading-ios-padding-end !default;
/// @prop - Padding start of the action sheet
$action-sheet-ios-padding-start: $action-sheet-ios-padding-end !default;
/// @prop - Max width of the loading wrapper
$loading-ios-max-width: 270px !default;
/// @prop - Bottom margin of the action sheet button group
$action-sheet-ios-group-margin-bottom: 10px !default;
/// @prop - Maximum height of the loading wrapper
$loading-ios-max-height: 90% !default;
/// @prop - Background color of the action sheet
$action-sheet-ios-background: #f9f9f9 !default;
/// @prop - Border radius of the loading wrapper
$loading-ios-border-radius: 8px !default;
/// @prop - Border color of the action sheet
$action-sheet-ios-border-color: #d6d6da !default;
/// @prop - Text color of the loading wrapper
$loading-ios-text-color: #000 !default;
/// @prop - Border radius of the action sheet
$action-sheet-ios-border-radius: 13px !default;
/// @prop - Background of the loading wrapper
$loading-ios-background: #f8f8f8 !default;
/// @prop - Padding of the action sheet title
$action-sheet-ios-title-padding: 1.5rem !default;
/// @prop - Font weight of the loading content
$loading-ios-content-font-weight: bold !default;
/// @prop - Color of the action sheet title
$action-sheet-ios-title-color: #8f8f8f !default;
/// @prop - Color of the loading spinner
$loading-ios-spinner-color: #69717d !default;
/// @prop - Font size of the action sheet title
$action-sheet-ios-title-font-size: 1.3rem !default;
/// @prop - Color of the ios loading spinner
$loading-ios-spinner-ios-color: $loading-ios-spinner-color !default;
/// @prop - Font weight of the action sheet title
$action-sheet-ios-title-font-weight: 400 !default;
/// @prop - Color of the bubbles loading spinner
$loading-ios-spinner-bubbles-color: $loading-ios-spinner-color !default;
/// @prop - Border radius of the action sheet title
$action-sheet-ios-title-border-radius: 0 !default;
/// @prop - Color of the circles loading spinner
$loading-ios-spinner-circles-color: $loading-ios-spinner-color !default;
/// @prop - Minimum height of the action sheet button
$action-sheet-ios-button-min-height: 5.6rem !default;
/// @prop - Color of the crescent loading spinner
$loading-ios-spinner-crescent-color: $loading-ios-spinner-color !default;
/// @prop - Padding of the action sheet button
$action-sheet-ios-button-padding: 18px !default;
/// @prop - Color of the dots loading spinner
$loading-ios-spinner-dots-color: $loading-ios-spinner-color !default;
/// @prop - Text color of the action sheet button
$action-sheet-ios-button-text-color: #007aff !default;
/// @prop - Font size of the action sheet button
$action-sheet-ios-button-font-size: 2rem !default;
/// @prop - Border width of the action sheet button
$action-sheet-ios-button-border-width: $hairlines-width !default;
/// @prop - Border style of the action sheet button
$action-sheet-ios-button-border-style: solid !default;
/// @prop - Border color of the action sheet button
$action-sheet-ios-button-border-color: #d1d3d6 !default;
/// @prop - Background color of the action sheet button
$action-sheet-ios-button-background: transparent !default;
/// @prop - Background color of the activated action sheet button
$action-sheet-ios-button-background-activated: #ebebeb !default;
/// @prop - Destructive text color of the action sheet button
$action-sheet-ios-button-destructive-text-color: #f53d3d !default;
/// @prop - Background color of the action sheet cancel button
$action-sheet-ios-button-cancel-background: #fff !default;
/// @prop - Font weight of the action sheet cancel button
$action-sheet-ios-button-cancel-font-weight: 600 !default;
.loading-ios .loading-wrapper {
@include border-radius($loading-ios-border-radius);
.action-sheet-ios {
@include text-align($action-sheet-ios-text-align);
}
max-width: $loading-ios-max-width;
max-height: $loading-ios-max-height;
color: $loading-ios-text-color;
background: $loading-ios-background;
@include deprecated-variable(padding, $loading-ios-padding) {
@include padding($loading-ios-padding-top, $loading-ios-padding-end, $loading-ios-padding-bottom, $loading-ios-padding-start);
.action-sheet-ios .action-sheet-container {
@include deprecated-variable(padding, $action-sheet-ios-padding) {
@include padding($action-sheet-ios-padding-top, $action-sheet-ios-padding-end, $action-sheet-ios-padding-bottom, $action-sheet-ios-padding-start);
}
}
.action-sheet-ios .action-sheet-group {
@include border-radius($action-sheet-ios-border-radius);
@include margin(null, null, $action-sheet-ios-group-margin-bottom - 2, null);
// iOS Loading Content
// -----------------------------------------
overflow: hidden;
.loading-ios .loading-content {
font-weight: $loading-ios-content-font-weight;
background: $action-sheet-ios-background;
}
.loading-ios .loading-spinner + .loading-content {
@include margin-horizontal(16px, null);
.action-sheet-ios .action-sheet-group:last-child {
@include margin(null, null, $action-sheet-ios-group-margin-bottom, null);
}
.action-sheet-ios .action-sheet-title {
@include padding($action-sheet-ios-title-padding);
@include text-align($action-sheet-ios-text-align);
@include border-radius($action-sheet-ios-title-border-radius);
// iOS Loading Spinner fill colors
// -----------------------------------------
.loading-ios .spinner-ios line,
.loading-ios .spinner-ios-small line {
stroke: $loading-ios-spinner-ios-color;
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
font-size: $action-sheet-ios-title-font-size;
font-weight: $action-sheet-ios-title-font-weight;
color: $action-sheet-ios-title-color;
}
.loading-ios .spinner-bubbles circle {
fill: $loading-ios-spinner-bubbles-color;
.action-sheet-ios .action-sheet-button {
@include margin(0);
@include padding($action-sheet-ios-button-padding);
min-height: $action-sheet-ios-button-min-height;
border-bottom: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-border-color;
font-size: $action-sheet-ios-button-font-size;
color: $action-sheet-ios-button-text-color;
background: $action-sheet-ios-button-background;
}
.loading-ios .spinner-circles circle {
fill: $loading-ios-spinner-circles-color;
.action-sheet-ios .action-sheet-button:last-child {
border-bottom-color: transparent;
}
.loading-ios .spinner-crescent circle {
stroke: $loading-ios-spinner-crescent-color;
.action-sheet-ios .action-sheet-button.activated {
@include margin(-$action-sheet-ios-button-border-width, null, null, null);
border-top: $action-sheet-ios-button-border-width $action-sheet-ios-button-border-style $action-sheet-ios-button-background-activated;
border-bottom-color: $action-sheet-ios-button-background-activated;
background: $action-sheet-ios-button-background-activated;
}
.loading-ios .spinner-dots circle {
fill: $loading-ios-spinner-dots-color;
.action-sheet-ios .action-sheet-selected {
font-weight: bold;
background: #fff;
}
.action-sheet-ios .action-sheet-destructive {
color: $action-sheet-ios-button-destructive-text-color;
}
.action-sheet-ios .action-sheet-cancel {
font-weight: $action-sheet-ios-button-cancel-font-weight;
background: $action-sheet-ios-button-cancel-background;
}

14
packages/core/src/components/action-sheet/action-sheet.tsx
View File

@ -15,9 +15,9 @@ import iOSLeaveAnimation from './animations/ios.leave';
@Component({
tag: 'ion-action-sheet',
styleUrls: {
// ios: 'action-sheet.ios.scss',
md: 'action-sheet.md.scss'
// wp: 'action-sheet.wp.scss'
ios: 'action-sheet.ios.scss',
md: 'action-sheet.md.scss',
wp: 'action-sheet.wp.scss'
},
host: {
theme: 'action-sheet'
@ -39,7 +39,7 @@ export class ActionSheet {
@Prop() cssClass: string;
@Prop() title: string;
@Prop() subTitle: string;
@Prop() buttons: ActionSheetButtons[];
@Prop() buttons: ActionSheetButton[];
@Prop() enableBackdropDismiss: boolean = true;
@Prop() showBackdrop: boolean = true;
@ -130,7 +130,7 @@ export class ActionSheet {
}
}
click(button: ActionSheetButtons) {
click(button: ActionSheetButton) {
let shouldDismiss = true;
if (button.handler) {
if (button.handler() === false) {
@ -180,11 +180,11 @@ export interface ActionSheetOptions {
title?: string;
subTitle?: string;
cssClass?: string;
buttons?: (ActionSheetButtons | string)[];
buttons?: (ActionSheetButton | string)[];
enableBackdropDismiss?: boolean;
}
export interface ActionSheetButtons {
export interface ActionSheetButton {
text?: string;
role?: string;
icon?: string;

188
packages/core/src/components/action-sheet/action-sheet.wp.scss
View File

@ -1,102 +1,168 @@
@import "../../themes/ionic.globals.wp";
@import "./loading";
@import "./action-sheet";
// Windows Loading Indicator
// Windows Action Sheet
// --------------------------------------------------
/// @prop - Text align of the action sheet
$action-sheet-wp-text-align: start !default;
/// @prop - Background color of the action sheet
$action-sheet-wp-background: #fff !default;
/// @prop - Box shadow color of the action sheet
$action-sheet-wp-box-shadow-color: rgba(0, 0, 0, .2) !default;
/// @prop - Box shadow of the action sheet
$action-sheet-wp-box-shadow: 0 -1px 0 $action-sheet-wp-box-shadow-color !default;
// deprecated
$loading-wp-padding: null !default;
$action-sheet-wp-title-padding: null !default;
/// @prop - Padding top of the loading wrapper
$loading-wp-padding-top: 20px !default;
/// @prop - Padding top of the action sheet title
$action-sheet-wp-title-padding-top: 11px !default;
/// @prop - Padding end of the loading wrapper
$loading-wp-padding-end: $loading-wp-padding-top !default;
/// @prop - Padding end of the action sheet title
$action-sheet-wp-title-padding-end: 16px !default;
/// @prop - Padding bottom of the loading wrapper
$loading-wp-padding-bottom: $loading-wp-padding-top !default;
/// @prop - Padding bottom of the action sheet title
$action-sheet-wp-title-padding-bottom: 17px !default;
/// @prop - Padding start of the loading wrapper
$loading-wp-padding-start: $loading-wp-padding-end !default;
/// @prop - Padding start of the action sheet title
$action-sheet-wp-title-padding-start: $action-sheet-wp-title-padding-end !default;
/// @prop - Max width of the loading wrapper
$loading-wp-max-width: 280px !default;
/// @prop - Font size of the action sheet title
$action-sheet-wp-title-font-size: 2rem !default;
/// @prop - Maximum height of the loading wrapper
$loading-wp-max-height: 90% !default;
/// @prop - Color of the action sheet title
$action-sheet-wp-title-color: #4d4d4d !default;
/// @prop - Border radius of the loading wrapper
$loading-wp-border-radius: 2px !default;
/// @prop - Text align of the action sheet title
$action-sheet-wp-title-text-align: $action-sheet-wp-text-align !default;
/// @prop - Text color of the loading wrapper
$loading-wp-text-color: #fff !default;
/// @prop - Height of the action sheet button
$action-sheet-wp-button-height: 4.8rem !default;
/// @prop - Background of the loading wrapper
$loading-wp-background: #000 !default;
/// @prop - Text color of the action sheet button
$action-sheet-wp-button-text-color: #4d4d4d !default;
/// @prop - Color of the loading spinner
$loading-wp-spinner-color: $loading-wp-text-color !default;
/// @prop - Font size of the action sheet button
$action-sheet-wp-button-font-size: 1.5rem !default;
/// @prop - Color of the ios loading spinner
$loading-wp-spinner-ios-color: $loading-wp-spinner-color !default;
// deprecated
$action-sheet-wp-button-padding: null !default;
/// @prop - Color of the bubbles loading spinner
$loading-wp-spinner-bubbles-color: $loading-wp-spinner-color !default;
/// @prop - Padding top of the action sheet button
$action-sheet-wp-button-padding-top: 0 !default;
/// @prop - Color of the circles loading spinner
$loading-wp-spinner-circles-color: $loading-wp-spinner-color !default;
/// @prop - Padding end of the action sheet button
$action-sheet-wp-button-padding-end: 16px !default;
/// @prop - Color of the crescent loading spinner
$loading-wp-spinner-crescent-color: $loading-wp-spinner-color !default;
/// @prop - Padding bottom of the action sheet button
$action-sheet-wp-button-padding-bottom: $action-sheet-wp-button-padding-top !default;
/// @prop - Color of the dots loading spinner
$loading-wp-spinner-dots-color: $loading-wp-spinner-color !default;
/// @prop - Padding start of the action sheet button
$action-sheet-wp-button-padding-start: $action-sheet-wp-button-padding-end !default;
/// @prop - Text align of the action sheet button
$action-sheet-wp-button-text-align: $action-sheet-wp-text-align !default;
/// @prop - Background color of the action sheet button
$action-sheet-wp-button-background: transparent !default;
/// @prop - Background color of the action sheet activated button
$action-sheet-wp-button-background-activated: $list-wp-activated-background-color !default;
/// @prop - Font size of the icon in the action sheet button
$action-sheet-wp-icon-font-size: 2.4rem !default;
/// @prop - Width of the icon in the action sheet button
$action-sheet-wp-icon-width: 2.3rem !default;
/// @prop - Text align of the icon in the action sheet button
$action-sheet-wp-icon-text-align: center !default;
/// @prop - Vertical align of the icon in the action sheet button
$action-sheet-wp-icon-vertical-align: middle !default;
// deprecated
$action-sheet-wp-icon-margin: null !default;
/// @prop - Margin top of the icon in the action sheet button
$action-sheet-wp-icon-margin-top: 0 !default;
/// @prop - Margin end of the icon in the action sheet button
$action-sheet-wp-icon-margin-end: 20px !default;
/// @prop - Margin bottom of the icon in the action sheet button
$action-sheet-wp-icon-margin-bottom: 0 !default;
/// @prop - Margin start of the icon in the action sheet button
$action-sheet-wp-icon-margin-start: 0 !default;
.loading-wp .loading-wrapper {
@include border-radius($loading-wp-border-radius);
.action-sheet-wp .action-sheet-wrapper {
box-shadow: $action-sheet-wp-box-shadow;
}
max-width: $loading-wp-max-width;
max-height: $loading-wp-max-height;
.action-sheet-wp .action-sheet-title {
@include text-align($action-sheet-wp-title-text-align);
color: $loading-wp-text-color;
background: $loading-wp-background;
font-size: $action-sheet-wp-title-font-size;
color: $action-sheet-wp-title-color;
@include deprecated-variable(padding, $loading-wp-padding) {
@include padding($loading-wp-padding-top, $loading-wp-padding-end, $loading-wp-padding-bottom, $loading-wp-padding-start);
@include deprecated-variable(padding, $action-sheet-wp-title-padding) {
@include padding($action-sheet-wp-title-padding-top, $action-sheet-wp-title-padding-end, $action-sheet-wp-title-padding-bottom, $action-sheet-wp-title-padding-start);
}
}
.action-sheet-wp .action-sheet-button {
@include text-align($action-sheet-wp-button-text-align);
// Windows Loading Content
// -----------------------------------------
min-height: $action-sheet-wp-button-height;
.loading-wp .loading-spinner + .loading-content {
@include margin-horizontal(16px, null);
font-size: $action-sheet-wp-button-font-size;
color: $action-sheet-wp-button-text-color;
background: $action-sheet-wp-button-background;
@include deprecated-variable(padding, $action-sheet-wp-button-padding) {
@include padding($action-sheet-wp-button-padding-top, $action-sheet-wp-button-padding-end, $action-sheet-wp-button-padding-bottom, $action-sheet-wp-button-padding-start);
}
}
// Windows Loading Spinner fill colors
// -----------------------------------------
.loading-wp .spinner-ios line,
.loading-wp .spinner-ios-small line {
stroke: $loading-wp-spinner-ios-color;
.action-sheet-wp .action-sheet-button.activated {
background: $action-sheet-wp-button-background-activated;
}
.loading-wp .spinner-bubbles circle {
fill: $loading-wp-spinner-bubbles-color;
.action-sheet-wp .action-sheet-icon {
@include padding(0);
@include text-align($action-sheet-wp-icon-text-align);
width: $action-sheet-wp-icon-width;
font-size: $action-sheet-wp-icon-font-size;
vertical-align: $action-sheet-wp-icon-vertical-align;
@include deprecated-variable(margin, $action-sheet-wp-icon-margin) {
@include margin($action-sheet-wp-icon-margin-top, $action-sheet-wp-icon-margin-end, $action-sheet-wp-icon-margin-bottom, $action-sheet-wp-icon-margin-start);
}
}
.loading-wp .spinner-circles circle {
fill: $loading-wp-spinner-circles-color;
.action-sheet-wp .action-sheet-container {
@include padding(.8rem, 0);
background: $action-sheet-wp-background;
}
.loading-wp .spinner-crescent circle {
stroke: $loading-wp-spinner-crescent-color;
.action-sheet-wp .action-sheet-group .button-inner {
justify-content: flex-start;
}
.loading-wp .spinner-dots circle {
fill: $loading-wp-spinner-dots-color;
.action-sheet-wp .action-sheet-selected {
font-weight: bold;
}
.action-sheet-wp .action-sheet-cancel {
background: $action-sheet-wp-button-background;
}

8
packages/core/src/index.d.ts vendored
View File

@ -1,6 +1,6 @@
import { AnimationController } from './components/animation/animation';
import { Animation, AnimationBuilder } from './components/animation/animation-interface';
import { ActionSheet, ActionSheetButtons, ActionSheetEvent, ActionSheetOptions } from './components/action-sheet/action-sheet';
import { AnimationController } from './components/animation-controller/animation-controller';
import { Animation, AnimationBuilder } from './components/animation-controller/animation-interface';
import { ActionSheet, ActionSheetButton, ActionSheetEvent, ActionSheetOptions } from './components/action-sheet/action-sheet';
import { ActionSheetController } from './components/action-sheet-controller/action-sheet-controller';
import { Backdrop } from './components/backdrop/backdrop'
import { Loading, LoadingEvent, LoadingOptions } from './components/loading/loading';
@ -49,7 +49,7 @@ export interface BooleanInputComponent extends BaseInputComponent {
export {
ActionSheet,
ActionSheetButtons,
ActionSheetButton,
ActionSheetEvent,
ActionSheetOptions,
ActionSheetController,