diff --git a/packages/core/demos/action-sheet/basic.html b/packages/core/demos/action-sheet/basic.html index 132fe35343..a95359d4db 100644 --- a/packages/core/demos/action-sheet/basic.html +++ b/packages/core/demos/action-sheet/basic.html @@ -28,11 +28,14 @@ console.log('Destructive clicked'); } }, { + icon: 'trash', text: 'Archive', handler: () => { console.log('Archive clicked'); + return false } }, { + icon: 'close', text: 'Cancel', role: 'cancel', handler: () => { diff --git a/packages/core/src/components/action-sheet/actionsheet.ios.scss b/packages/core/src/components/action-sheet/action-sheet.ios.scss similarity index 100% rename from packages/core/src/components/action-sheet/actionsheet.ios.scss rename to packages/core/src/components/action-sheet/action-sheet.ios.scss diff --git a/packages/core/src/components/action-sheet/action-sheet.md.scss b/packages/core/src/components/action-sheet/action-sheet.md.scss new file mode 100644 index 0000000000..e482160292 --- /dev/null +++ b/packages/core/src/components/action-sheet/action-sheet.md.scss @@ -0,0 +1,158 @@ +@import "../../themes/ionic.globals.md"; +@import "./action-sheet"; + +// Material Design Action Sheet +// -------------------------------------------------- + +/// @prop - Text align of the action sheet +$action-sheet-md-text-align: start !default; + +/// @prop - Background color of the action sheet +$action-sheet-md-background: #fafafa !default; + +/// @prop - Bottom margin of the action sheet button group +$action-sheet-md-group-margin-bottom: 8px !default; + +/// @prop - Color of the action sheet title +$action-sheet-md-title-color: #757575 !default; + +/// @prop - Font size of the action sheet title +$action-sheet-md-title-font-size: 1.6rem !default; + +// deprecated +$action-sheet-md-title-padding: null !default; + +/// @prop - Padding top of the action sheet title +$action-sheet-md-title-padding-top: 11px !default; + +/// @prop - Padding end of the action sheet title +$action-sheet-md-title-padding-end: 16px !default; + +/// @prop - Padding bottom of the action sheet title +$action-sheet-md-title-padding-bottom: 17px !default; + +/// @prop - Padding start of the action sheet title +$action-sheet-md-title-padding-start: $action-sheet-md-title-padding-end !default; + +/// @prop - Minimum height of the action sheet button +$action-sheet-md-button-min-height: 4.8rem !default; + +/// @prop - Text color of the action sheet button +$action-sheet-md-button-text-color: #222 !default; + +/// @prop - Font size of the action sheet button +$action-sheet-md-button-font-size: 1.6rem !default; + +// deprecated +$action-sheet-md-button-padding: null !default; + +/// @prop - Padding top of the action sheet button +$action-sheet-md-button-padding-top: 0 !default; + +/// @prop - Padding end of the action sheet button +$action-sheet-md-button-padding-end: 16px !default; + +/// @prop - Padding bottom of the action sheet button +$action-sheet-md-button-padding-bottom: $action-sheet-md-button-padding-top !default; + +/// @prop - Padding start of the action sheet button +$action-sheet-md-button-padding-start: $action-sheet-md-button-padding-end !default; + +/// @prop - Background color of the action sheet button +$action-sheet-md-button-background: transparent !default; + +/// @prop - Background color of the action sheet activated button +$action-sheet-md-button-background-activated: #f1f1f1 !default; + +/// @prop - Font size of the icon in the action sheet button +$action-sheet-md-icon-font-size: 2.4rem !default; + +/// @prop - Width of the icon in the action sheet button +$action-sheet-md-icon-width: 2.3rem !default; + +/// @prop - Text align of the icon in the action sheet button +$action-sheet-md-icon-text-align: center !default; + +/// @prop - Vertical align of the icon in the action sheet button +$action-sheet-md-icon-vertical-align: middle !default; + +// deprecated +$action-sheet-md-icon-margin: null !default; + +/// @prop - Margin top of the icon in the action sheet button +$action-sheet-md-icon-margin-top: 0 !default; + +/// @prop - Margin end of the icon in the action sheet button +$action-sheet-md-icon-margin-end: 32px !default; + +/// @prop - Margin bottom of the icon in the action sheet button +$action-sheet-md-icon-margin-bottom: 0 !default; + +/// @prop - Margin start of the icon in the action sheet button +$action-sheet-md-icon-margin-start: 0 !default; + +.action-sheet-md .action-sheet-container { + @include padding(.8rem, 0); + + background: $action-sheet-md-background; +} + +.action-sheet-md .action-sheet-title, +.action-sheet-md .action-sheet-sub-title { + @include text-align($action-sheet-md-text-align); + + font-size: $action-sheet-md-title-font-size; + color: $action-sheet-md-title-color; + + @include deprecated-variable(padding, $action-sheet-md-title-padding) { + @include padding($action-sheet-md-title-padding-top, $action-sheet-md-title-padding-end, $action-sheet-md-title-padding-bottom, $action-sheet-md-title-padding-start); + } +} + +.action-sheet-md .action-sheet-button { + @include text-align($action-sheet-md-text-align); + + position: relative; + overflow: hidden; + + min-height: $action-sheet-md-button-min-height; + + font-size: $action-sheet-md-button-font-size; + color: $action-sheet-md-button-text-color; + background: $action-sheet-md-button-background; + + + @include deprecated-variable(padding, $action-sheet-md-button-padding) { + @include padding($action-sheet-md-button-padding-top, $action-sheet-md-button-padding-end, $action-sheet-md-button-padding-bottom, $action-sheet-md-button-padding-start); + } +} + +.action-sheet-md .action-sheet-button.activated { + background: $action-sheet-md-button-background-activated; +} + +.action-sheet-md .action-sheet-icon { + @include padding(0); + @include text-align($action-sheet-md-icon-text-align); + + width: $action-sheet-md-icon-width; + + font-size: $action-sheet-md-icon-font-size; + vertical-align: $action-sheet-md-icon-vertical-align; + + @include deprecated-variable(margin, $action-sheet-md-icon-margin) { + @include margin($action-sheet-md-icon-margin-top, $action-sheet-md-icon-margin-end, $action-sheet-md-icon-margin-bottom, $action-sheet-md-icon-margin-start); + } +} + +.action-sheet-md .action-sheet-group { + overflow: hidden; +} + +.action-sheet-md .action-sheet-group .button-inner { + justify-content: flex-start; +} + +.action-sheet-md .action-sheet-selected { + font-weight: bold; +} diff --git a/packages/core/src/components/action-sheet/action-sheet.scss b/packages/core/src/components/action-sheet/action-sheet.scss new file mode 100644 index 0000000000..f141381386 --- /dev/null +++ b/packages/core/src/components/action-sheet/action-sheet.scss @@ -0,0 +1,38 @@ +@import "../../themes/ionic.globals"; + +// Action Sheet +// -------------------------------------------------- + +/// @prop - Width of the action sheet +$action-sheet-width: 100% !default; + +/// @prop - Maximum width of the action sheet +$action-sheet-max-width: 500px !default; + +ion-action-sheet { + @include position(0, null, null, 0); + + position: absolute; + z-index: $z-index-overlay; + display: block; + + width: $action-sheet-width; + height: $action-sheet-width; +} + +.action-sheet-wrapper { + @include position(null, 0, 0, 0); + @include margin(auto); + @include transform(translate3d(0, 100%, 0)); + + position: absolute; + z-index: $z-index-overlay-wrapper; + display: block; + + width: $action-sheet-width; + max-width: $action-sheet-max-width; +} + +.action-sheet-button { + width: $action-sheet-width; +} diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index 7cbcbdf77e..9eaf3b1ec1 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/packages/core/src/components/action-sheet/action-sheet.tsx @@ -7,18 +7,18 @@ import { Prop, State } from '@stencil/core'; -import { AnimationBuilder, Animation } from '../../index'; +import { AnimationBuilder, Animation, Ionic } from '../../index'; import iOSEnterAnimation from './animations/ios.enter'; 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' - // }, + styleUrls: { + // ios: 'action-sheet.ios.scss', + md: 'action-sheet.md.scss' + // wp: 'action-sheet.wp.scss' + }, host: { theme: 'action-sheet' } @@ -66,53 +66,54 @@ export class ActionSheet { } private _present(resolve: Function) { - // if (this.animation) { - // this.animation.destroy(); - // this.animation = null; - // } + if (this.animation) { + this.animation.destroy(); + this.animation = null; + } this.ionActionSheetWillPresent.emit({ actionsheet: this }); - // let animationBuilder = this.enterAnimation - // ? this.enterAnimation - // : iOSEnterAnimation; + let animationBuilder = this.enterAnimation + ? this.enterAnimation + : iOSEnterAnimation; // build the animation and kick it off - // this.animation = animationBuilder(this.el); - - // this.animation.onFinish((a: any) => { - // a.destroy(); - // this.ionViewDidLoad(); - resolve(); - // }).play(); + Ionic.controller('animation').then(Animation => { + this.animation = animationBuilder(Animation, this.el); + this.animation + .onFinish((a: any) => { + a.destroy(); + this.ionActionSheetDidLoad.emit({ actionsheet: this }); + resolve(); + }) + .play(); + }); } dismiss() { - // - // if (this.animation) { - // this.animation.destroy(); - // this.animation = null; - // } - + if (this.animation) { + this.animation.destroy(); + this.animation = null; + } return new Promise(resolve => { this.ionActionSheetWillDismiss.emit({ actionsheet: this }); - - - // let animationBuilder = this.exitAnimation - // ? this.exitAnimation - // : iOSLeaveAnimation; + let animationBuilder = this.exitAnimation + ? this.exitAnimation + : iOSLeaveAnimation; // build the animation and kick it off - // this.animation = animationBuilder(this.el); - // this.animation.onFinish((a: any) => { - // a.destroy(); - this.ionActionSheetDidDismiss.emit({ actionsheet: this }); - - Core.dom.write(() => { - this.el.parentNode.removeChild(this.el); + Ionic.controller('animation').then(Animation => { + this.animation = animationBuilder(Animation, this.el); + this.animation + .onFinish((a: any) => { + a.destroy(); + this.ionActionSheetDidDismiss.emit({ actionsheet: this }); + Core.dom.write(() => { + this.el.parentNode.removeChild(this.el); + }); + resolve(); + }) + .play(); }); - - resolve(); - // }).play(); }); } @@ -129,18 +130,27 @@ export class ActionSheet { } } + click(button: ActionSheetButtons) { + let shouldDismiss = true; + if (button.handler) { + if (button.handler() === false) { + shouldDismiss = false; + } + } + if (shouldDismiss) { + this.dismiss(); + } + } + render() { let userCssClass = 'action-sheet-content'; if (this.cssClass) { userCssClass += ' ' + this.cssClass; } return [ -
, diff --git a/packages/core/src/components/action-sheet/actionsheet.wp.scss b/packages/core/src/components/action-sheet/action-sheet.wp.scss similarity index 100% rename from packages/core/src/components/action-sheet/actionsheet.wp.scss rename to packages/core/src/components/action-sheet/action-sheet.wp.scss diff --git a/packages/core/src/components/action-sheet/actionsheet.md.scss b/packages/core/src/components/action-sheet/actionsheet.md.scss deleted file mode 100644 index 85f57c693f..0000000000 --- a/packages/core/src/components/action-sheet/actionsheet.md.scss +++ /dev/null @@ -1,110 +0,0 @@ -@import "../../themes/ionic.globals.md"; -@import "./loading"; - - -// Material Design Loading Indicator -// -------------------------------------------------- - -// deprecated -$loading-md-padding: null !default; - -/// @prop - Padding top of the loading wrapper -$loading-md-padding-top: 24px !default; - -/// @prop - Padding end of the loading wrapper -$loading-md-padding-end: $loading-md-padding-top !default; - -/// @prop - Padding bottom of the loading wrapper -$loading-md-padding-bottom: $loading-md-padding-top !default; - -/// @prop - Padding start of the loading wrapper -$loading-md-padding-start: $loading-md-padding-end !default; - -/// @prop - Max width of the loading wrapper -$loading-md-max-width: 280px !default; - -/// @prop - Maximum height of the loading wrapper -$loading-md-max-height: 90% !default; - -/// @prop - Border radius of the loading wrapper -$loading-md-border-radius: 2px !default; - -/// @prop - Text color of the loading wrapper -$loading-md-text-color: rgba(0, 0, 0, .5) !default; - -/// @prop - Background of the loading wrapper -$loading-md-background: #fafafa !default; - -/// @prop - Box shadow color of the loading wrapper -$loading-md-box-shadow-color: rgba(0, 0, 0, .4) !default; - -/// @prop - Box shadow of the loading wrapper -$loading-md-box-shadow: 0 16px 20px $loading-md-box-shadow-color !default; - -/// @prop - Color of the loading spinner -$loading-md-spinner-color: color($colors-md, primary) !default; - -/// @prop - Color of the ios loading spinner -$loading-md-spinner-ios-color: $loading-md-spinner-color !default; - -/// @prop - Color of the bubbles loading spinner -$loading-md-spinner-bubbles-color: $loading-md-spinner-color !default; - -/// @prop - Color of the circles loading spinner -$loading-md-spinner-circles-color: $loading-md-spinner-color !default; - -/// @prop - Color of the crescent loading spinner -$loading-md-spinner-crescent-color: $loading-md-spinner-color !default; - -/// @prop - Color of the dots loading spinner -$loading-md-spinner-dots-color: $loading-md-spinner-color !default; - - -.loading-md .loading-wrapper { - @include border-radius($loading-md-border-radius); - - max-width: $loading-md-max-width; - max-height: $loading-md-max-height; - - color: $loading-md-text-color; - background: $loading-md-background; - - box-shadow: $loading-md-box-shadow; - - @include deprecated-variable(padding, $loading-md-padding) { - @include padding($loading-md-padding-top, $loading-md-padding-end, $loading-md-padding-bottom, $loading-md-padding-start); - } -} - - -// Material Design Loading Content -// ----------------------------------------- - -.loading-md .loading-spinner + .loading-content { - @include margin-horizontal(16px, null); -} - - -// Material Design Loading Spinner fill colors -// ----------------------------------------- - -.loading-md .spinner-ios line, -.loading-md .spinner-ios-small line { - stroke: $loading-md-spinner-ios-color; -} - -.loading-md .spinner-bubbles circle { - fill: $loading-md-spinner-bubbles-color; -} - -.loading-md .spinner-circles circle { - fill: $loading-md-spinner-circles-color; -} - -.loading-md .spinner-crescent circle { - stroke: $loading-md-spinner-crescent-color; -} - -.loading-md .spinner-dots circle { - fill: $loading-md-spinner-dots-color; -} diff --git a/packages/core/src/components/action-sheet/actionsheet.scss b/packages/core/src/components/action-sheet/actionsheet.scss deleted file mode 100644 index 77b4f8a8a8..0000000000 --- a/packages/core/src/components/action-sheet/actionsheet.scss +++ /dev/null @@ -1,37 +0,0 @@ -@import "../../themes/ionic.globals"; - - -// Loading Indicator -// -------------------------------------------------- - -ion-loading { - @include position(0, 0, 0, 0); - - position: absolute; - z-index: $z-index-overlay; - - display: flex; - - align-items: center; - justify-content: center; - - contain: strict; -} - -ion-loading ion-gesture { - display: block; - - width: 100%; - height: 100%; - - visibility: inherit; -} - -.loading-wrapper { - z-index: $z-index-overlay-wrapper; - display: flex; - - align-items: center; - - opacity: 0; -} diff --git a/packages/core/src/components/action-sheet/animations/ios.enter.ts b/packages/core/src/components/action-sheet/animations/ios.enter.ts index 4beedd04d6..ec15295383 100644 --- a/packages/core/src/components/action-sheet/animations/ios.enter.ts +++ b/packages/core/src/components/action-sheet/animations/ios.enter.ts @@ -7,20 +7,19 @@ export default function(Animation: Animation, baseElm: HTMLElement) { const baseAnimation = new Animation(); const backdropAnimation = new Animation(); - backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop')); + backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop')); const wrapperAnimation = new Animation(); - wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper')); + wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper')); - backdropAnimation.fromTo('opacity', 0.01, 0.3); + backdropAnimation.fromTo('opacity', 0.01, 0.26); - wrapperAnimation.fromTo('opacity', 0.01, 1) - .fromTo('scale', 1.1, 1); + wrapperAnimation.fromTo('translateY', '100%', '0%'); return baseAnimation .addElement(baseElm) - .easing('ease-in-out') - .duration(200) + .easing('cubic-bezier(.36,.66,.04,1)') + .duration(400) .add(backdropAnimation) .add(wrapperAnimation); } diff --git a/packages/core/src/components/action-sheet/animations/ios.leave.ts b/packages/core/src/components/action-sheet/animations/ios.leave.ts index b9f1dd5b16..cf280b2af6 100644 --- a/packages/core/src/components/action-sheet/animations/ios.leave.ts +++ b/packages/core/src/components/action-sheet/animations/ios.leave.ts @@ -7,21 +7,19 @@ export default function(Animation: Animation, baseElm: HTMLElement) { const baseAnimation = new Animation(); const backdropAnimation = new Animation(); - backdropAnimation.addElement(baseElm.querySelector('.loading-backdrop')); + backdropAnimation.addElement(baseElm.querySelector('.action-sheet-backdrop')); const wrapperAnimation = new Animation(); - wrapperAnimation.addElement(baseElm.querySelector('.loading-wrapper')); + wrapperAnimation.addElement(baseElm.querySelector('.action-sheet-wrapper')); - backdropAnimation.fromTo('opacity', 0.3, 0); - - wrapperAnimation.fromTo('opacity', 0.99, 0) - .fromTo('scale', 1, 0.9); + backdropAnimation.fromTo('opacity', 0.26, 0); + wrapperAnimation.fromTo('translateY', '0%', '100%'); return baseAnimation .addElement(baseElm) - .easing('ease-in-out') - .duration(200) + .easing('cubic-bezier(.36,.66,.04,1)') + .duration(450) .add(backdropAnimation) .add(wrapperAnimation); } diff --git a/packages/core/src/components/backdrop/backdrop.scss b/packages/core/src/components/backdrop/backdrop.scss new file mode 100644 index 0000000000..5eab9f1179 --- /dev/null +++ b/packages/core/src/components/backdrop/backdrop.scss @@ -0,0 +1,26 @@ +@import "../../themes/ionic.globals"; + +// Backdrop +// -------------------------------------------------- + +/// @prop - Color of the backdrop +$backdrop-color: #000 !default; + +ion-backdrop { + @include position(0, null, null, 0); + + position: absolute; + z-index: $z-index-backdrop; + display: block; + + width: 100%; + height: 100%; + + background-color: $backdrop-color; + opacity: .01; + transform: translateZ(0); +} + +ion-backdrop.backdrop-no-tappable { + cursor: auto; +} diff --git a/packages/core/src/components/backdrop/backdrop.tsx b/packages/core/src/components/backdrop/backdrop.tsx new file mode 100644 index 0000000000..2360c9f098 --- /dev/null +++ b/packages/core/src/components/backdrop/backdrop.tsx @@ -0,0 +1,9 @@ +import { Component } from '@stencil/core'; + +@Component({ + tag: 'ion-backdrop', + styleUrl: 'backdrop.scss' +}) +export class Backdrop { + +} diff --git a/packages/core/src/index.d.ts b/packages/core/src/index.d.ts index a2ce1df3f0..add8349d02 100644 --- a/packages/core/src/index.d.ts +++ b/packages/core/src/index.d.ts @@ -2,6 +2,7 @@ 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 { ActionSheetController } from './components/action-sheet-controller/action-sheet-controller'; +import { Backdrop } from './components/backdrop/backdrop' import { Loading, LoadingEvent, LoadingOptions } from './components/loading/loading'; import { LoadingController } from './components/loading-controller/loading-controller'; import { GestureDetail, GestureCallback } from './components/gesture/gesture'; @@ -55,6 +56,7 @@ export { Animation, AnimationBuilder, AnimationController, + Backdrop, GestureCallback, GestureDetail, Loading, diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js index 8edf712309..7931ce0238 100644 --- a/packages/core/stencil.config.js +++ b/packages/core/stencil.config.js @@ -8,6 +8,7 @@ exports.config = { { components: ['ion-app', 'ion-content', 'ion-fixed', 'ion-footer', 'ion-header', 'ion-navbar', 'ion-page', 'ion-title', 'ion-toolbar'] }, { components: ['ion-action-sheet', 'ion-action-sheet-controller'] }, { components: ['ion-avatar', 'ion-badge', 'ion-thumbnail'] }, + { components: ['ion-backdrop'] }, { components: ['ion-button', 'ion-buttons', 'ion-icon'] }, { components: ['ion-card', 'ion-card-content', 'ion-card-header', 'ion-card-title'] }, { components: ['ion-chip', 'ion-chip-button'] },