Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(loading): loading enhancements + re-haul to use material modules. (closes #255) (closes #84) #259

Merged
merged 33 commits into from
Jan 18, 2017
Merged

feature(loading): loading enhancements + re-haul to use material modules. (closes #255) (closes #84) #259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
33 commits
Select commit Hold shift + click to select a range
c5dd5e4
added tdFadeInOut animation in common module
emoralesb05 Jan 16, 2017
a8b787d
use tdFadeInOut animation in loading component
emoralesb05 Jan 16, 2017
a9572c4
no more need for the reset flag to get the determinate loading at val…
emoralesb05 Jan 16, 2017
15bff8f
add display animation change on fadeInOut animation
emoralesb05 Jan 16, 2017
7e089ed
feature(loading): call loading module to replace or overlay templates…
emoralesb05 Jan 16, 2017
48da19a
add default main fullscreen mask `td-loading-main` to be called ignor…
emoralesb05 Jan 16, 2017
888596f
added code docs and deprecation messages
emoralesb05 Jan 16, 2017
5b20d03
reparated code into service (execution) and factory (creation) + rena…
emoralesb05 Jan 16, 2017
d96b65d
added `tdLoadingColor` for directive or config usage
emoralesb05 Jan 16, 2017
21a14ab
better error messages
emoralesb05 Jan 16, 2017
dec4115
updated code blocks for loading.factory
emoralesb05 Jan 16, 2017
bc59397
added more codeblocks
emoralesb05 Jan 16, 2017
8c92f9d
fix zone.js ver to 0.7.2
emoralesb05 Jan 16, 2017
17a96b2
added demo for overlay + accent color in * syntax
emoralesb05 Jan 16, 2017
d6a027c
remove padding from loading component
emoralesb05 Jan 17, 2017
917436f
remove componet if trying to create with same name
emoralesb05 Jan 17, 2017
6a38123
clean up demo with better examples
emoralesb05 Jan 17, 2017
1ad7032
updated tdLoadingDirective docs
emoralesb05 Jan 17, 2017
ddf532e
updated tdLoadingService docs
emoralesb05 Jan 17, 2017
4486fbf
use create() method in docs
emoralesb05 Jan 17, 2017
3532f25
Merge branch 'develop' into feature/loading-enhancements
emoralesb05 Jan 17, 2017
432feaa
fix lint issue
emoralesb05 Jan 17, 2017
38bbffa
initial loading.directive.spec.ts
emoralesb05 Jan 17, 2017
e0ba95b
loading service initial unit tests
emoralesb05 Jan 17, 2017
23e28c3
added unit tests for name duplication in directive
emoralesb05 Jan 17, 2017
af098ab
fixed lint errors
emoralesb05 Jan 17, 2017
453bf63
rename demo buttons in loading from `Register` to `Toggle`
Jan 18, 2017
443bb1b
readd ILoadingOptions but deprecate it
Jan 18, 2017
09a8788
load first demo by default
Jan 18, 2017
a0b0787
changed Toggle to Toggle Loader
Jan 18, 2017
8a72478
Merge branch 'develop' into feature/loading-enhancements
emoralesb05 Jan 18, 2017
c218f67
better explanation on demos
Jan 18, 2017
d6e83d0
Merge branch 'feature/loading-enhancements' of https://github.com/Ter…
Jan 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"webdriver-update": "bash ./node_modules/.bin/webdriver-manager update",
"test": "ng test --code-coverage --single-run",
"coverage-win": "start chrome ./coverage/index.html",
"coverage-mac": "open -a \"Google Chrome\" coverage/index.html",
"coveralls": "cat ./coverage/coverage.lcov | node ./node_modules/coveralls/bin/coveralls.js",
"bump-dev": "gulp bump-version",
"bump-patch": "gulp bump-version --ver patch",
Expand Down Expand Up @@ -66,7 +67,7 @@
"highlight.js": "9.6.0",
"rxjs": "^5.0.1",
"showdown": "1.4.2",
"zone.js": "^0.7.2",
"zone.js": "0.7.2",
"d3": "^4.2.1"
},
"devDependencies": {
Expand Down
315 changes: 245 additions & 70 deletions src/app/components/components/loading/loading.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,71 +3,246 @@
<md-card-subtitle>Circular or linear progress loader</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<div layout="row" layout-align="start center" flex>
<md-button-toggle-group name="mode" [(ngModel)]="determinate" (click)="modeChange()">
<md-button-toggle mdTooltip="Indeterminate Loading" [value]="0"><md-icon>timer_off</md-icon> Indeterminate</md-button-toggle>
<md-button-toggle mdTooltip="Determinate Loading" [value]="1"><md-icon>timer</md-icon> Determinate</md-button-toggle>
</md-button-toggle-group>
</div>
<p>Loading Registered: {{replaceRegistered}} times</p>
<div *ngIf="!determinate">
<h3>Indeterminate Mode</h3>
<p>Circular Type</p>
<template tdLoading="test.indeterminate">
<div layout="column" flex>
<md-input-container flex>
<input md-input placeholder="Name" maxLength="20" [(ngModel)]="demo.name"/>
</md-input-container>
<md-input-container flex>
<textarea md-input placeholder="Description" maxLength="100" [(ngModel)]="demo.desc" rows="4"></textarea>
</md-input-container>
<h3 class="md-title">[tdLoading] directive with (*) syntax</h3>
<h4 class="md-subhead">with indetederminate [tdLoadingMode], circular [tdLoadingType], overlay [tdLoadingStrategy], accent [tdLoadingColor]</h4>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>Demo</template>
<div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">
<div layout="column" flex>
<md-input-container flex>
<input md-input placeholder="Name"/>
</md-input-container>
<md-input-container flex>
<textarea md-input placeholder="Description" rows="4"></textarea>
</md-input-container>
</div>
</div>
</template>
<p>Linear Type</p>
<template tdLoading="test2.indeterminate" loadingType="linear">
<div layout="column" flex>
<md-input-container flex>
<input md-input placeholder="Name" maxLength="20" [(ngModel)]="demo2.name"/>
</md-input-container>
<md-input-container flex>
<textarea md-input placeholder="Description" maxLength="100" [(ngModel)]="demo2.desc" rows="4"></textarea>
</md-input-container>
<div layout="row">
<button md-button color="primary" (click)="toggleOverlayStarSyntax()">Toggle Loader</button>
</div>
</template>
</div>
<div *ngIf="determinate">
<h3>Determinate Mode</h3>
<p>Circular Type</p>
<template tdLoading="test.determinate" loadingMode="determinate">
<div layout="column" flex>
<md-input-container flex>
<input md-input placeholder="Name" maxLength="20" [(ngModel)]="demo.name"/>
</md-input-container>
<md-input-container flex>
<textarea md-input placeholder="Description" maxLength="100" [(ngModel)]="demo.desc" rows="4"></textarea>
</md-input-container>
</md-tab>
<md-tab>
<template md-tab-label>Code</template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<div *tdLoading="'overlayStarSyntax'; mode:'indeterminate'; type:'circle'; strategy:'overlay'; color:'accent'">
<div layout="column" flex>
<md-input-container flex>
<input md-input placeholder="Name"/>
</md-input-container>
<md-input-container flex>
<textarea md-input placeholder="Description" rows="4"></textarea>
</md-input-container>
</div>
</div>
<div layout="row">
<button md-button color="primary" (click)="toggleOverlayStarSyntax()">Toggle Loader</button>
</div>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
import { TdLoadingService } from '@covalent/core';
...
export class Demo implements AfterViewInit {
overlayStarSyntax: boolean = false;

constructor(private _loadingService: TdLoadingService) {}

ngAfterViewInit(): void {
this._loadingService.register('overlayStarSyntax');
}

toggleOverlayStarSyntax(): void {
if (this.overlayStarSyntax) {
this._loadingService.register('overlayStarSyntax');
} else {
this._loadingService.resolve('overlayStarSyntax');
}
this.overlayStarSyntax = !this.overlayStarSyntax;
}
}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">[tdLoading] directive with template syntax</h3>
<h4 class="md-subhead">with determinate [tdLoadingMode], linear [tdLoadingType], replace [tdLoadingStrategy], warn [tdLoadingColor]</h4>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>Demo</template>
<template tdLoading="replaceTemplateSyntax" tdLoadingMode="determinate" tdLoadingType="linear" tdLoadingStrategy="replace" tdLoadingColor="warn">
<div layout="column" flex>
<md-input-container flex>
<input md-input placeholder="Name"/>
</md-input-container>
<md-select placeholder="Select">
<md-option>Demo 1</md-option>
<md-option>Demo 2</md-option>
</md-select>
<md-input-container flex>
<textarea md-input placeholder="Description" rows="4"></textarea>
</md-input-container>
</div>
</template>
<div layout="row">
<button md-button color="primary" (click)="toggleReplaceTemplateSyntax()">Toggle Loader</button>
</div>
</template>
<p>Linear Type</p>
<template tdLoading="test2.determinate" loadingType="linear" loadingMode="determinate">
<div layout="column" flex>
<md-input-container flex>
<input md-input placeholder="Name" maxLength="20" [(ngModel)]="demo2.name"/>
</md-input-container>
<md-input-container flex>
<textarea md-input placeholder="Description" maxLength="100" [(ngModel)]="demo2.desc" rows="4"></textarea>
</md-input-container>
</md-tab>
<md-tab>
<template md-tab-label>Code</template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<template tdLoading="replaceTemplateSyntax" tdLoadingMode="determinate" tdLoadingType="linear" tdLoadingStrategy="replace" tdLoadingColor="warn">
<div layout="column" flex>
<md-input-container flex>
<input md-input placeholder="Name"/>
</md-input-container>
<md-select placeholder="Select">
<md-option>Demo 1</md-option>
<md-option>Demo 2</md-option>
</md-select>
<md-input-container flex>
<textarea md-input placeholder="Description" rows="4"></textarea>
</md-input-container>
</div>
</template>
<div layout="row">
<button md-button color="primary" (click)="toggleReplaceTemplateSyntax()">Toggle Loader</button>
</div>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
import { TdLoadingService } from '@covalent/core';
...
export class Demo {
constructor(private _loadingService: TdLoadingService) {}

toggleReplaceTemplateSyntax(): void {
this._loadingService.register('replaceTemplateSyntax');
let value: number = 0;
let interval: number = setInterval(() => {
this._loadingService.setValue('replaceTemplateSyntax', value);
value = value + 10;
if (value > 100) {
clearInterval(interval);
}
}, 250);
setTimeout(() => {
this._loadingService.resolve('replaceTemplateSyntax');
}, 3000);
}
}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">Preloaded [TdLoading] fullscreen mask</h3>
<h4 class="md-subhead">with indeterminate [mode], circular [type], primary [color] by default</h4>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>Demo</template>
<div layout="row">
<button md-button color="primary" (click)="toggleDefaultFullscreenDemo()">Toggle Loader</button>
</div>
</template>
</div>
</md-tab>
<md-tab>
<template md-tab-label>Code</template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<div layout="row">
<button md-button color="primary" (click)="toggleDefaultFullscreenDemo()">Toggle Loader</button>
</div>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
import { TdLoadingService } from '@covalent/core';
...
export class Demo implements OnInit {
constructor(private _loadingService: TdLoadingService) {}

ngOnInit(): void {
this.toggleDefaultFullscreenDemo();
}

toggleDefaultFullscreenDemo(): void {
this._loadingService.register();
setTimeout(() => {
this._loadingService.resolve();
}, 1500);
}
}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
</md-card>
<md-card>
<md-card-content>
<h3 class="md-title">Custom [TdLoading] fullscreen mask</h3>
<h4 class="md-subhead">with indeterminate [mode], linear [type], accent [color]</h4>
<md-tab-group md-stretch-tabs>
<md-tab>
<template md-tab-label>Demo</template>
<div layout="row">
<button md-button color="primary" (click)="toggleConfigFullscreenDemo()">Toggle Loader</button>
</div>
</md-tab>
<md-tab>
<template md-tab-label>Code</template>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<div layout="row">
<button md-button color="primary" (click)="toggleConfigFullscreenDemo()">Toggle Loader</button>
</div>
]]>
</td-highlight>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
import { TdLoadingService } from '@covalent/core';
...
export class Demo {
constructor(private _loadingService: TdLoadingService) {
this._loadingService.create({
name: 'configFullscreenDemo',
mode: LoadingMode.Indeterminate,
type: LoadingType.Linear,
color: 'accent',
});
}

toggleConfigFullscreenDemo(): void {
this._loadingService.register('configFullscreenDemo');
setTimeout(() => {
this._loadingService.resolve('configFullscreenDemo');
}, 1500);
}
}
]]>
</td-highlight>
</md-tab>
</md-tab-group>
</md-card-content>
<md-divider></md-divider>
<md-card-actions>
<button md-button color="primary" (click)="registerCircleLoadingMain()">3 Second Circle Loading Main</button>
<button md-button color="primary" (click)="registerLinearLoadingMain()">3 Second Linear Loading Main</button>
<button md-button color="primary" (click)="registerLoadingDirective()">Register Loading Directive</button>
<button md-button color="primary" (click)="resolveLoadingDirective()">Resolve Loading Directive</button>
</md-card-actions>
</md-card>
<md-card>
<md-card-title>TdLoadingDirective</md-card-title>
Expand All @@ -94,15 +269,15 @@ <h3>Example(after setup):</h3>
<p>HTML (*) syntax:</p>
<td-highlight lang="html">
<![CDATA[
<div *tdLoading="'stringName'">
<div *tdLoading="'stringName'; type:'circular'; mode:'indeterminate'; strategy:'replace'; color:'primary'">
...
</div>
]]>
</td-highlight>
<p>HTML <![CDATA[<template>]]> syntax</p>
<td-highlight lang="html">
<![CDATA[
<template tdLoading="stringName" loadingType="circular|linear" loadingMode="ciruclar|linear">
<template tdLoading="stringName" tdLoadingType="circular" tdLoadingMode="indeterminate" tdLoadingStrategy="replace" tdLoadingColor="primary">
...
</template>
]]>
Expand Down Expand Up @@ -158,12 +333,13 @@ <h3>Setup:</h3>
<h2><code>TdLoadingService</code></h2>
<p>This service is designed to be a factory of loading masks and serves as a facade for their usage.</p>
<p>Simply add this service as a provider to be able to use it in a component.</p>
<p>TdLoadingService.createOverlayComponent() method recieves as parameter an object that implements the [ILoadingOptions] interface.</p>
<p>TdLoadingService.create() method recieves as parameter an object that implements the [ITdLoadingConfig] interface.</p>
<td-highlight lang="typescript">
interface ILoadingOptions {{'{'}}
interface ITdLoadingConfig {{'{'}}
name: string;
type?: LoadingType;
mode?: LoadingMode;
color?: 'primary' | 'accent' | 'warn';
}
</td-highlight>
<h3>Methods:</h3>
Expand All @@ -181,17 +357,16 @@ <h3>Example(after setup):</h3>
<p>Typescript:</p>
<td-highlight lang="typescript">
<![CDATA[
import { ViewContainerRef } from '@angular/core';
import { TdLoadingService, ILoadingOptions, LoadingType, LoadingMode } from '@covalent/core';
import { TdLoadingService, LoadingType, LoadingMode } from '@covalent/core';
...
export class Demo {
constructor(private _loadingService: TdLoadingService, viewContainerRef: ViewContainerRef) {
let options: ILoadingOptions = {
constructor(private _loadingService: TdLoadingService) {
this._loadingService.create({
name: 'stringName',
type: LoadingType.Circular,
mode: LoadingMode.Indeterminate,
};
this._loadingService.createOverlayComponent(options, viewContainerRef);
color: 'accent',
});
}

registerLoading(): void {
Expand Down
Loading