mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-09 16:16:41 +08:00
chore(actionSheet): rename interface
This commit is contained in:
mhartington
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user