Skip to content

Commit

Permalink
feat(loading): add ability to hide spinner in the config or options
Browse files Browse the repository at this point in the history 
tweak css to add a max width to the loading indicator

references #5426
  • Loading branch information
@brandyscarney
brandyscarney committed Apr 1, 2016
1 parent c251649 commit dae37e7
Show file tree
Hide file tree
Showing 6 changed files with 145 additions and 30 deletions.
2 changes: 2 additions & 0 deletions ionic/components/loading/loading.ios.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
2 changes: 2 additions & 0 deletions ionic/components/loading/loading.md.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
109 changes: 103 additions & 6 deletions ionic/components/loading/loading.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,99 @@ 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';


/**
* @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: `
* <div class="custom-spinner-container">
* <div class="custom-spinner-box"></div>
* </div>`,
* 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 {

Expand All @@ -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. |
Expand All @@ -69,8 +154,8 @@ export class Loading extends ViewController {
template:
'<div (click)="bdClick()" tappable disable-activated class="backdrop" [class.hide-backdrop]="!d.showBackdrop" role="presentation"></div>' +
'<div class="loading-wrapper">' +
'<div *ngIf="d.icon" class="loading-spinner">' +
'<ion-spinner [name]="d.icon == \'platform\' ? null : d.icon"></ion-spinner>' +
'<div *ngIf="showSpinner" class="loading-spinner">' +
'<ion-spinner [name]="d.spinner"></ion-spinner>' +
'</div>' +
'<div *ngIf="d.content" [innerHTML]="d.content" class="loading-content"></div>' +
'</div>',
Expand All @@ -83,6 +168,7 @@ class LoadingCmp {
private d: any;
private id: number;
private created: number;
private showSpinner: boolean;

constructor(
private _viewCtrl: ViewController,
Expand All @@ -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) {
Expand Down Expand Up @@ -138,7 +235,7 @@ class LoadingCmp {
}

export interface LoadingOptions {
icon?: string;
spinner?: string;
content?: string;
showBackdrop?: boolean;
dismissOnPageChange?: boolean;
Expand Down
2 changes: 2 additions & 0 deletions ionic/components/loading/loading.wp.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down
44 changes: 28 additions & 16 deletions ionic/components/loading/test/basic/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,48 @@ 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
});

this.nav.present(loading);
}

showLoadingBubbles() {
presentLoadingBubbles() {
let loading = Loading.create({
icon: 'bubbles',
spinner: 'bubbles',
content: 'Loading...',
enableBackdropDismiss: true
});

this.nav.present(loading);
}

showLoadingCircles() {
presentLoadingCircles() {
let loading = Loading.create({
icon: 'circles',
spinner: 'circles',
content: 'Loading...',
enableBackdropDismiss: true
});

this.nav.present(loading);
}

showLoadingCrescent() {
presentLoadingCrescent() {
let loading = Loading.create({
icon: 'crescent',
spinner: 'crescent',
content: 'Please wait...',
enableBackdropDismiss: true,
duration: 1500
Expand All @@ -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: `
<div class="custom-spinner-container">
<div class="custom-spinner-box"></div>
Expand All @@ -79,13 +83,21 @@ class E2EPage {
this.nav.present(loading);
}

showLoadingText() {
presentLoadingText() {
let loading = Loading.create({
content: 'Loading Please Wait...',
enableBackdropDismiss: true
spinner: 'hide',
content: 'Loading Please Wait...'
});

this.nav.present(loading);

setTimeout(() => {
this.goToPage2();
}, 1000);

setTimeout(() => {
loading.dismiss();
}, 5000);
}

goToPage2() {
Expand Down
16 changes: 8 additions & 8 deletions ionic/components/loading/test/basic/main.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
</ion-navbar>

<ion-content padding>
<button block (click)="showLoadingIos()">iOS Spinner</button>
<button block (click)="showLoadingDots()">Dots Spinner</button>
<button block (click)="showLoadingBubbles()">Bubbles Spinner</button>
<button block (click)="showLoadingCircles()">Circles Spinner</button>
<button block (click)="showLoadingCrescent()">Crescent Spinner 1500 Duration</button>
<button block (click)="showLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
<button block (click)="showLoadingCustom()" danger>Custom Spinner</button>
<button block (click)="showLoadingText()" dark>Content Only</button>
<button block (click)="presentLoadingIos()">iOS Spinner</button>
<button block (click)="presentLoadingDots()">Dots Spinner</button>
<button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
<button block (click)="presentLoadingCircles()">Circles Spinner</button>
<button block (click)="presentLoadingCrescent()">Crescent Spinner 1500 Duration</button>
<button block (click)="presentLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
<button block (click)="presentLoadingCustom()" danger>Custom Spinner</button>
<button block (click)="presentLoadingText()" dark>Content Only</button>
</ion-content>

<ion-toolbar position="bottom">
Expand Down

0 comments on commit dae37e7

Please sign in to comment.