From dae37e7d9cbb47f7d771b32de018a1414d994921 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 1 Apr 2016 13:13:43 -0400 Subject: [PATCH] feat(loading): add ability to hide spinner in the config or options tweak css to add a max width to the loading indicator references #5426 --- ionic/components/loading/loading.ios.scss | 2 + ionic/components/loading/loading.md.scss | 2 + ionic/components/loading/loading.ts | 109 +++++++++++++++++- ionic/components/loading/loading.wp.scss | 2 + ionic/components/loading/test/basic/index.ts | 44 ++++--- ionic/components/loading/test/basic/main.html | 16 +-- 6 files changed, 145 insertions(+), 30 deletions(-) diff --git a/ionic/components/loading/loading.ios.scss b/ionic/components/loading/loading.ios.scss index ae2b691a86..7360fabba9 100644 --- a/ionic/components/loading/loading.ios.scss +++ b/ionic/components/loading/loading.ios.scss @@ -5,6 +5,7 @@ // -------------------------------------------------- $loading-ios-padding: 24px 34px !default; +$loading-ios-max-width: 270px !default; $loading-ios-max-height: 90% !default; $loading-ios-border-radius: 8px !default; $loading-ios-text-color: #000 !default; @@ -24,6 +25,7 @@ $loading-ios-spinner-dots-color: $loading-ios-spinner-color !default; .loading-wrapper { padding: $loading-ios-padding; + max-width: $loading-ios-max-width; max-height: $loading-ios-max-height; border-radius: $loading-ios-border-radius; diff --git a/ionic/components/loading/loading.md.scss b/ionic/components/loading/loading.md.scss index 4af60b2dc8..bc21e1febf 100644 --- a/ionic/components/loading/loading.md.scss +++ b/ionic/components/loading/loading.md.scss @@ -5,6 +5,7 @@ // -------------------------------------------------- $loading-md-padding: 24px !default; +$loading-md-max-width: 280px !default; $loading-md-max-height: 90% !default; $loading-md-border-radius: 2px !default; $loading-md-text-color: rgba(0, 0, 0, .5) !default; @@ -24,6 +25,7 @@ $loading-md-spinner-dots-color: $loading-md-spinner-color !default; .loading-wrapper { padding: $loading-md-padding; + max-width: $loading-md-max-width; max-height: $loading-md-max-height; border-radius: $loading-md-border-radius; diff --git a/ionic/components/loading/loading.ts b/ionic/components/loading/loading.ts index 3a0c3e4299..68f74cc7be 100644 --- a/ionic/components/loading/loading.ts +++ b/ionic/components/loading/loading.ts @@ -5,7 +5,7 @@ import {Animation} from '../../animations/animation'; import {Transition, TransitionOptions} from '../../transitions/transition'; import {Config} from '../../config/config'; import {Spinner} from '../spinner/spinner'; -import {isPresent} from '../../util/util'; +import {isPresent, isUndefined, isDefined} from '../../util/util'; import {NavParams} from '../nav/nav-params'; import {ViewController} from '../nav/view-controller'; @@ -13,6 +13,91 @@ import {ViewController} from '../nav/view-controller'; /** * @name Loading * @description + * An overlay that can be used to indicate activity while blocking user + * interaction. The loading indicator appears on top of the app's content, + * and can be automatically dismissed by the app or manually dismissed by + * the user to resume interaction with the app. It includes an optional + * backdrop, which can optionally be clicked to dismiss the loading + * indicator. + * + * ### Creating + * You can pass all of the loading options in the first argument of + * the create method: `Loading.create(opts)`. The spinner name should be + * passed in the `spinner` property, and any optional HTML can be passed + * in the `content` property. If you do not pass a value to `spinner` + * the loading indicator will use the spinner specified by the mode. To + * set the spinner name across the app, set the value of `loadingSpinner` + * in your app's config. To hide the spinner, you can set + * `loadingSpinner: 'hide'` or pass `spinner: 'hide'` in the loading + * options. See the create method below for all available options. + * + * ### Dismissing + * The loading indicator can be dismissed automatically after a specific + * amount of time by passing the number of milliseconds to display it in + * the `duration` of the loading options. It can also be dismissed by + * clicking on the backdrop or pressing the escape key if + * `enableBackdropDismiss` is set to `true` in the loading options. By + * default the loading indicator will show even during page changes, + * but this can be disabled by setting `dismissOnPageChange` to `true`. + * To dismiss the loading indicator after creation, call the `dismiss()` + * method on the Loading instance. + * + * ### Limitations + * The element is styled to appear on top of other content by setting its + * `z-index` property. You must ensure no element has a stacking context with + * a higher `z-index` than this element. + * + * @usage + * ```ts + * constructor(nav: NavController) { + * this.nav = nav; + * } + * + * presentLoadingDefault() { + * let loading = Loading.create({ + * content: 'Please wait...' + * }); + * + * this.nav.present(loading); + * + * setTimeout(() => { + * loading.dismiss(); + * }, 5000); + * } + * + * presentLoadingCustom() { + * let loading = Loading.create({ + * spinner: 'hide', + * content: ` + * `, + * duration: 5000 + * }); + * + * this.nav.present(loading); + * } + * + * presentLoadingText() { + * let loading = Loading.create({ + * spinner: 'hide', + * content: 'Loading Please Wait...' + * }); + * + * this.nav.present(loading); + * + * setTimeout(() => { + * this.nav.push(Page2); + * }, 1000); + * + * setTimeout(() => { + * loading.dismiss(); + * }, 5000); + * } + * ``` + * + * @demo /docs/v2/demos/loading/ + * @see {@link /docs/v2/api/components/spinner/Spinner Spinner API Docs} */ export class Loading extends ViewController { @@ -39,11 +124,11 @@ export class Loading extends ViewController { } /** - * Open a loading indicator with the following options + * Create a loading indicator with the following options * * | Option | Type | Description | * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------| - * | icon |`string` | The spinner icon for the loading indicator. | + * | spinner |`string` | The name of the SVG spinner for the loading indicator. | * | content |`string` | The html content for the loading indicator. | * | cssClass |`string` | An additional class for custom styles. | * | showBackdrop |`boolean` | Whether to show the backdrop. Default true. | @@ -69,8 +154,8 @@ export class Loading extends ViewController { template: '' + '
' + - '', @@ -83,6 +168,7 @@ class LoadingCmp { private d: any; private id: number; private created: number; + private showSpinner: boolean; constructor( private _viewCtrl: ViewController, @@ -101,6 +187,17 @@ class LoadingCmp { this.id = (++loadingIds); } + ngOnInit() { + // If no spinner was passed in loading options we need to fall back + // to the loadingSpinner in the app's config, then the mode spinner + if (isUndefined(this.d.spinner)) { + this.d.spinner = this._config.get('loadingSpinner', this._config.get('spinner', 'ios')); + } + + // If the user passed hide to the spinner we don't want to show it + this.showSpinner = isDefined(this.d.spinner) && this.d.spinner !== 'hide'; + } + onPageDidEnter() { let activeElement: any = document.activeElement; if (document.activeElement) { @@ -138,7 +235,7 @@ class LoadingCmp { } export interface LoadingOptions { - icon?: string; + spinner?: string; content?: string; showBackdrop?: boolean; dismissOnPageChange?: boolean; diff --git a/ionic/components/loading/loading.wp.scss b/ionic/components/loading/loading.wp.scss index 495996af1c..50bd066273 100644 --- a/ionic/components/loading/loading.wp.scss +++ b/ionic/components/loading/loading.wp.scss @@ -5,6 +5,7 @@ // -------------------------------------------------- $loading-wp-padding: 20px !default; +$loading-wp-max-width: 280px !default; $loading-wp-max-height: 90% !default; $loading-wp-border-radius: 2px !default; $loading-wp-text-color: #fff !default; @@ -22,6 +23,7 @@ $loading-wp-spinner-dots-color: $loading-wp-spinner-color !default; .loading-wrapper { padding: $loading-wp-padding; + max-width: $loading-wp-max-width; max-height: $loading-wp-max-height; border-radius: $loading-wp-border-radius; diff --git a/ionic/components/loading/test/basic/index.ts b/ionic/components/loading/test/basic/index.ts index 717ac2366d..c159a1c3d9 100644 --- a/ionic/components/loading/test/basic/index.ts +++ b/ionic/components/loading/test/basic/index.ts @@ -7,18 +7,18 @@ import {App, Page, ActionSheet, Loading, NavController, ViewController, Platform class E2EPage { constructor(private nav: NavController, private platform: Platform) {} - showLoadingIos() { + presentLoadingIos() { let loading = Loading.create({ - icon: 'ios', + spinner: 'ios', enableBackdropDismiss: true }); this.nav.present(loading); } - showLoadingDots() { + presentLoadingDots() { let loading = Loading.create({ - icon: 'dots', + spinner: 'dots', content: 'Loading...', enableBackdropDismiss: true }); @@ -26,9 +26,9 @@ class E2EPage { this.nav.present(loading); } - showLoadingBubbles() { + presentLoadingBubbles() { let loading = Loading.create({ - icon: 'bubbles', + spinner: 'bubbles', content: 'Loading...', enableBackdropDismiss: true }); @@ -36,9 +36,9 @@ class E2EPage { this.nav.present(loading); } - showLoadingCircles() { + presentLoadingCircles() { let loading = Loading.create({ - icon: 'circles', + spinner: 'circles', content: 'Loading...', enableBackdropDismiss: true }); @@ -46,9 +46,9 @@ class E2EPage { this.nav.present(loading); } - showLoadingCrescent() { + presentLoadingCrescent() { let loading = Loading.create({ - icon: 'crescent', + spinner: 'crescent', content: 'Please wait...', enableBackdropDismiss: true, duration: 1500 @@ -57,18 +57,22 @@ class E2EPage { this.nav.present(loading); } - showLoadingDefault() { + presentLoadingDefault() { let loading = Loading.create({ - icon: 'platform', content: 'Please wait...', enableBackdropDismiss: true, }); this.nav.present(loading); + + setTimeout(() => { + loading.dismiss(); + }, 5000); } - showLoadingCustom() { + presentLoadingCustom() { let loading = Loading.create({ + spinner: 'hide', content: `