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/horizontal stepper #95

Merged
merged 30 commits into from
Oct 11, 2016
Merged

Feature/horizontal stepper #95

Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
a502f3d
first draft of re-implementation of td-steps to change between modes
Sep 18, 2016
a0d1ac6
updated demo/docs with draft
Sep 18, 2016
71d6ced
added stand alone step example
Sep 18, 2016
6a0d32f
merge with develop
Oct 10, 2016
273e43d
made step-header a dummy component
Oct 11, 2016
1000bc8
returned label/sublabel inputs and added ripple to step-header
Oct 11, 2016
5f277ee
updated doc blocks in header
Oct 11, 2016
c6d3f34
Added dummy step-body component
Oct 11, 2016
3fc7b51
updated body docblocks
Oct 11, 2016
6f3bb2e
added portal directives for content, summary and actions + removed mo…
Oct 11, 2016
8eedfc8
updated doc blocks
Oct 11, 2016
13d0eac
removed multiple attribute and added horizontal vs vertical layout in…
Oct 11, 2016
13d29d5
abstracted code (first pass) for steps
Oct 11, 2016
3e2f336
moved files into folders
Oct 11, 2016
bd9b8e2
missed compilation errors
Oct 11, 2016
0706e25
added validation to check if td-step has td-steps as parent
Oct 11, 2016
33b3c43
added validation to check if td-steps has td-step children
Oct 11, 2016
dcb35ed
fix lint errors
Oct 11, 2016
574ab84
updated stepper in layouts with breaking changes
Oct 11, 2016
42ba122
updated demo and added responsive demo
Oct 11, 2016
9398b1c
made demo better with 3 botton toggles
Oct 11, 2016
fb103d6
updated docs with breaking changes
Oct 11, 2016
da8569a
added comment on td-step-content
Oct 11, 2016
da8268b
changes validation message
Oct 11, 2016
45fcfe9
update(docs): stepper step 1 active & better content
Oct 11, 2016
c4ac818
update(docs): vertical stepper by default
Oct 11, 2016
2bba300
update(stepper): use material2 theme
Oct 11, 2016
f7d775d
update(stepper): material2 theme
Oct 11, 2016
a1493ae
added labels to loading group buttons to be inline with stepper buttons
Oct 11, 2016
be5db94
disabled hover/focus background change when step is disabled
Oct 11, 2016
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
2 changes: 1 addition & 1 deletion src/app/components/components/media/media.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export class MediaDemoComponent implements OnInit, OnDestroy {
query: 'md',
value: false,
}, {
query: 'gt-gm',
query: 'gt-md',
value: false,
}, {
query: 'lg',
Expand Down
52 changes: 34 additions & 18 deletions src/app/components/components/steps/steps.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,42 @@
<md-card-subtitle>A sequence of logical & numbered steps</md-card-subtitle>
<md-divider></md-divider>
<md-card-content>
<div layout="row" layout-align="start center">
<md-button-toggle-group (change)="modeChange()" name="mode" [(ngModel)]="mode">
<md-button-toggle md-tooltip="Vertical" [value]="0"><md-icon>swap_vert</md-icon></md-button-toggle>
<md-button-toggle md-tooltip="Horizontal" [value]="1"><md-icon>swap_horiz</md-icon></md-button-toggle>
<md-button-toggle md-tooltip="Responsive (gt-sm)" [value]="2"><md-icon>devices</md-icon></md-button-toggle>
</md-button-toggle-group>
</div>
<p>Change Event: {{stepChangeMsg}}</p>
<p>Active/Deactive Event for Step 1: {{activeDeactiveStep1Msg}}</p>
<td-steps (stepChange)="stepChange($event)">
<h3>{{horizontal ? 'Horizontal Mode' : 'Vertical Mode'}}</h3>
<td-steps (stepChange)="stepChange($event)" [mode]="horizontal ? 'horizontal' : 'vertical'">
<td-step #step1 label="Basic Usage" sublabel="Toggle between active and inactive and emit events." [disabled]="disabled" (activated)="activeStep1Event()" (deactivated)="deactiveStep1Event()">
STEP CONTENT GOES HERE
<template td-step-content>
STEP CONTENT GOES HERE
</template>
</td-step>
<td-step #step2 label="Required Step" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
STEP CONTENT GOES HERE
<td-step-actions>
<td-step #step2 label="Required State" sublabel="Toggle between active and inactive while in required state." [state]="stateStep2" [disabled]="disabled">
<template td-step-content>
STEP CONTENT GOES HERE
</template>
<template td-step-actions>
<button md-raised-button color="primary" (click)="toggleRequiredStep2()">Toggle Require</button>
<button md-button (click)="step2.active = false">Cancel</button>
</td-step-actions>
</template>
</td-step>
<td-step #step3 label="Complete State" sublabel="Toggle between active and inactive while in complete state." [state]="stateStep3" [disabled]="disabled">
STEP CONTENT GOES HERE
<td-step-actions>
<template td-step-content>
STEP CONTENT GOES HERE
</template>
<template td-step-summary>
STEP SUMMARY GOES HERE
</template>
<template td-step-actions>
<button md-raised-button color="primary" (click)="toggleCompleteStep3()">Toggle Complete</button>
<button md-button (click)="step3.active = false">Cancel</button>
</td-step-actions>
<td-step-summary>
STEP SUMMARY GOES HERE
</td-step-summary>
</template>
</td-step>
</td-steps>
</md-card-content>
Expand Down Expand Up @@ -56,7 +70,7 @@ <h3>Example:</h3>
<p>HTML:</p>
<td-highlight lang="html">
<![CDATA[
<td-steps (stepChange)="change($event)" multiple>
<td-steps (stepChange)="change($event)" mode="'vertical'|'horizontal'">
<td-step>
...
</td-step>
Expand Down Expand Up @@ -121,14 +135,16 @@ <h3>Example:</h3>
<td-highlight lang="html">
<![CDATA[
<td-step #step label="Label" sublabel="Sublabel" [active]="active" [disabled]="disabled" [state]="state" (activated)="activeEvent()" (deactivated)="deactiveEvent()">
...
<td-step-actions>
<template td-step-content>
... add content that will be shown when the step is "active"
</template>
<template td-step-actions>
<button (click)="step.close()">Close</button>
... add button elements for the step content (optional)
</td-step-actions>
<td-step-summary>
</template>
<template td-step-summary>
... add summary that will be shown when step in is "complete" state (optional)
</td-step-summary>
</template>
</td-step>
]]>
</td-highlight>
Expand Down
49 changes: 43 additions & 6 deletions src/app/components/components/steps/steps.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
import { Component } from '@angular/core';
import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { StepState, IStepChangeEvent } from '../../../../platform/core';
import { StepState, IStepChangeEvent, TdMediaService } from '../../../../platform/core';

@Component({
selector: 'steps-demo',
styleUrls: [ 'steps.component.scss' ],
templateUrl: 'steps.component.html',
})
export class StepsDemoComponent {
export class StepsDemoComponent implements OnInit, OnDestroy {

stepsAttrs: Object[] = [{
description: `Method to be executed when [onStepChange] event is emitted.
Emits an [IStepChangeEvent] implemented object.`,
name: 'stepChange?',
type: 'function($event)',
}, {
description: 'Defines if there can be one or multiple [TdStepComponent] elements active at the same time.',
name: 'multiple?',
type: 'boolean',
description: 'Defines if the mode of the [TdStepsComponent]. Defaults to [StepMode.Vertical | "vertical"]',
name: 'mode?',
type: 'StepMode or ["vertical" | "horizontal"]',
}];

stepAttrs: Object[] = [{
Expand Down Expand Up @@ -65,12 +66,48 @@ export class StepsDemoComponent {
type: 'function()',
}];

querySubscription: Subscription;
mode: number = 1;
horizontal: boolean = true;
isScreenGtSm: boolean = false;
stepChangeMsg: string = 'No change detected yet.';
activeDeactiveStep1Msg: string = 'No select/deselect detected yet';
stateStep2: StepState = StepState.Required;
stateStep3: StepState = StepState.Complete;
disabled: boolean = false;

constructor(private _mediaService: TdMediaService, private _ngZone: NgZone) {
}

ngOnInit(): void {
this.watchScreen();
}
ngOnDestroy(): void {
this.querySubscription.unsubscribe();
}

watchScreen(): void {
this._ngZone.run(() => {
this.isScreenGtSm = this._mediaService.query('gt-sm');
});
this.querySubscription = this._mediaService.registerQuery('gt-sm').subscribe((matches: boolean) => {
this._ngZone.run(() => {
this.isScreenGtSm = matches;
if (this.mode === 2) {
this.horizontal = matches;
}
});
});
}

modeChange(): void {
if (this.mode === 2) {
this.horizontal = this.isScreenGtSm;
} else {
this.horizontal = this.mode === 1;
}
}

toggleRequiredStep2(): void {
this.stateStep2 = (this.stateStep2 === StepState.Required ? StepState.None : StepState.Required);
}
Expand Down
172 changes: 90 additions & 82 deletions src/app/components/layouts/card-over/card-over.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,92 +6,100 @@
<md-card-content>
<div layout-gt-md="row">
<div flex-gt-md="45">
<td-steps multiple>
<td-steps>
<td-step [active]="true" label="Step 1: td-layout" sublabel="td-layout is the wrapper component">
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
<p md-line>The wrapper of your entire layout</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>#layout</code></h3>
<p md-line>The ID and local reference of your sidenav</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>title?: string</code></h3>
<p md-line>The title of your sidenav</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>logo?: string</code></h3>
<p md-line>The path to your sidenav logo</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
<template td-step-content>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout>]]></code></h3>
<p md-line>The wrapper of your entire layout</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>#layout</code></h3>
<p md-line>The ID and local reference of your sidenav</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>title?: string</code></h3>
<p md-line>The title of your sidenav</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>logo?: string</code></h3>
<p md-line>The path to your sidenav logo</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</template>
</td-step>
<td-step [active]="true" label="Step 2: menu-items" sublabel="the sidenav menu items">
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
<p md-line>The menu items wrapper</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
<p md-line>Loops over the routes from your Class</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
<p md-line>The SVG or font icon</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
<td-step label="Step 2: menu-items" sublabel="the sidenav menu items">
<template td-step-content>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<md-nav-list menu-items>]]></code></h3>
<p md-line>The menu items wrapper</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<a md-list-item>]]></code></h3>
<p md-line>Loops over the routes from your Class</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<md-icon>]]></code></h3>
<p md-line>The SVG or font icon</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</template>
</td-step>
<td-step [active]="true" label="Step 3: td-layout-nav" sublabel="the content wrapper of the layout">
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
<p md-line>Builds the top toolbar and content area</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>title?: string</code></h3>
<p md-line>The title of your toolbar</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>logo?: string</code></h3>
<p md-line>The path to your toolbar logo</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
<td-step label="Step 3: td-layout-nav" sublabel="the content wrapper of the layout">
<template td-step-content>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout-nav>]]></code></h3>
<p md-line>Builds the top toolbar and content area</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>title?: string</code></h3>
<p md-line>The title of your toolbar</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>logo?: string</code></h3>
<p md-line>The path to your toolbar logo</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</template>
</td-step>
<td-step [active]="true" label="Step 4: td-layout-card-over" sublabel="the main card content area">
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout-card-over>]]></code></h3>
<p md-line>Builds the card and content area</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>title?: string</code></h3>
<p md-line>The card title</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>subtitle?: string</code></h3>
<p md-line>The card subtitle</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
<p md-line>Loads html for each route (view)</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
<td-step label="Step 4: td-layout-card-over" sublabel="the main card content area">
<template td-step-content>
<md-list>
<md-list-item>
<h3 md-line><code><![CDATA[<td-layout-card-over>]]></code></h3>
<p md-line>Builds the card and content area</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>title?: string</code></h3>
<p md-line>The card title</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code>subtitle?: string</code></h3>
<p md-line>The card subtitle</p>
</md-list-item>
<md-divider></md-divider>
<md-list-item>
<h3 md-line><code><![CDATA[<router-outlet>]]></code></h3>
<p md-line>Loads html for each route (view)</p>
</md-list-item>
<md-divider></md-divider>
</md-list>
</template>
</td-step>
</td-steps>
</div>
Expand Down
Loading