Skip to content

Commit

Permalink
feat(button): implement speed dial fab
Browse files Browse the repository at this point in the history 
mark fab speed dial in progress
implement speed dial
add demo app

resolves angular#860
  • Loading branch information
Nils Heinemann committed Apr 27, 2019
1 parent 994d3ab commit 1f2b15b
Show file tree
Hide file tree
Showing 11 changed files with 754 additions and 441 deletions.
2 changes: 1 addition & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ High level stuff planned for Q4 2018 (October - Dec):

| Feature | Status | Docs | Issue |
|------------------|-------------------------------------|--------------|----------------|
| fab speed-dial | Not started, not planned | - | [#860][0860] |
| fab speed-dial | PR in progress | - | [#860][0860] |
| fab toolbar | Not started, not planned | - | - |
| bottom-nav | Not started, not planned | - | [#408][0408] |

Expand Down
16 changes: 15 additions & 1 deletion src/dev-app/button/button-demo-module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,28 @@
*/

import {NgModule} from '@angular/core';
import {MatButtonModule, MatIconModule} from '@angular/material';
import {FormsModule} from '@angular/forms';
import {
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatSelectModule,
MatSlideToggleModule
} from '@angular/material';
import {RouterModule} from '@angular/router';

import {ButtonDemo} from './button-demo';

@NgModule({
imports: [
MatButtonModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
FormsModule,
MatSlideToggleModule,
RouterModule.forChild([{path: '', component: ButtonDemo}]),
],
declarations: [ButtonDemo],
Expand Down
311 changes: 198 additions & 113 deletions src/dev-app/button/button-demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,115 +1,200 @@
<div class="demo-button">
<h4 class="demo-section-header">Buttons</h4>
<section>
<button mat-button>normal</button>
<button mat-raised-button>raised</button>
<button mat-stroked-button>stroked</button>
<button mat-flat-button>flat</button>
<button mat-fab><mat-icon>check</mat-icon></button>
<button mat-mini-fab><mat-icon>check</mat-icon></button>
</section>

<h4 class="demo-section-header">Anchors</h4>
<section>
<a href="//www.google.com" mat-button color="primary">SEARCH</a>
<a href="//www.google.com" mat-raised-button>SEARCH</a>
<a href="//www.google.com" mat-stroked-button color="primary">SEARCH</a>
<a href="//www.google.com" mat-flat-button>SEARCH</a>
<a href="//www.google.com" mat-fab><mat-icon>check</mat-icon></a>
<a href="//www.google.com" mat-mini-fab><mat-icon>check</mat-icon></a>
</section>

<h4 class="demo-section-header">Text Buttons [mat-button]</h4>
<section>
<button mat-button color="primary">primary</button>
<button mat-button color="accent">accent</button>
<button mat-button color="warn">warn</button>
<button mat-button disabled>disabled</button>
</section>

<h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
<section>
<button mat-raised-button color="primary">primary</button>
<button mat-raised-button color="accent">accent</button>
<button mat-raised-button color="warn">warn</button>
<button mat-raised-button disabled>disabled</button>
</section>

<h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
<section>
<button mat-stroked-button color="primary">primary</button>
<button mat-stroked-button color="accent">accent</button>
<button mat-stroked-button color="warn">warn</button>
<button mat-stroked-button disabled>disabled</button>
</section>

<h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
<section>
<button mat-flat-button color="primary">primary</button>
<button mat-flat-button color="accent">accent</button>
<button mat-flat-button color="warn">warn</button>
<button mat-flat-button disabled>disabled</button>
</section>

<h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
<section>
<button mat-icon-button color="primary"><mat-icon>cached</mat-icon></button>
<button mat-icon-button color="accent"><mat-icon>backup</mat-icon></button>
<button mat-icon-button color="warn"><mat-icon>trending_up</mat-icon></button>
<button mat-icon-button disabled><mat-icon>visibility</mat-icon></button>
</section>

<h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
<section>
<button mat-fab color="primary"><mat-icon>delete</mat-icon></button>
<button mat-fab color="accent"><mat-icon>bookmark</mat-icon></button>
<button mat-fab color="warn"><mat-icon>home</mat-icon></button>
<button mat-fab disabled><mat-icon>favorite</mat-icon></button>
</section>

<h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
<section>
<button mat-mini-fab color="primary"><mat-icon>menu</mat-icon></button>
<button mat-mini-fab color="accent"><mat-icon>plus_one</mat-icon></button>
<button mat-mini-fab color="warn"><mat-icon>filter_list</mat-icon></button>
<button mat-mini-fab disabled><mat-icon>home</mat-icon></button>
</section>

<h4 class="demo-section-header">Interaction/State</h4>
<section class="demo-no-flex">
<div>
<p>isDisabled: {{isDisabled}}</p>
<p>Button 1 as been clicked {{clickCounter}} times</p>
<button mat-flat-button (click)="isDisabled=!isDisabled">
{{isDisabled ? 'Enable All' : 'Disable All'}}
</button>
<button mat-flat-button (click)="button1.focus()">Focus 1</button>
<button mat-flat-button (click)="button2.focus()">Focus 2</button>
<button mat-flat-button (click)="button3.focus()">Focus 3</button>
<button mat-flat-button (click)="button4.focus()">Focus 4</button>
</div>
<div>
<button mat-button #button1 [disabled]="isDisabled"
(click)="clickCounter=clickCounter+1">
Button 1
</button>
<button mat-button #button2 color="primary" [disabled]="isDisabled">
Button 2
</button>
<a href="//www.google.com" #button3 mat-button color="accent"
[disabled]="isDisabled">
Button 3
</a>
<button mat-raised-button #button4 color="primary"
[disabled]="isDisabled">
Button 4
</button>
<button mat-mini-fab [disabled]="isDisabled">
<mat-icon>check</mat-icon>
</button>
<button mat-icon-button color="accent" [disabled]="isDisabled">
<mat-icon>favorite</mat-icon>
</button>
</div>
</section>
<h4 class="demo-section-header">Buttons</h4>
<section>
<button mat-button>normal</button>
<button mat-raised-button>raised</button>
<button mat-stroked-button>stroked</button>
<button mat-flat-button>flat</button>
<button mat-fab>
<mat-icon>check</mat-icon>
</button>
<button mat-mini-fab>
<mat-icon>check</mat-icon>
</button>
</section>

<h4 class="demo-section-header">Anchors</h4>
<section>
<a href="//www.google.com" mat-button color="primary">SEARCH</a>
<a href="//www.google.com" mat-raised-button>SEARCH</a>
<a href="//www.google.com" mat-stroked-button color="primary">SEARCH</a>
<a href="//www.google.com" mat-flat-button>SEARCH</a>
<a href="//www.google.com" mat-fab>
<mat-icon>check</mat-icon>
</a>
<a href="//www.google.com" mat-mini-fab>
<mat-icon>check</mat-icon>
</a>
</section>

<h4 class="demo-section-header">Text Buttons [mat-button]</h4>
<section>
<button mat-button color="primary">primary</button>
<button mat-button color="accent">accent</button>
<button mat-button color="warn">warn</button>
<button mat-button disabled>disabled</button>
</section>

<h4 class="demo-section-header">Raised Buttons [mat-raised-button]</h4>
<section>
<button mat-raised-button color="primary">primary</button>
<button mat-raised-button color="accent">accent</button>
<button mat-raised-button color="warn">warn</button>
<button mat-raised-button disabled>disabled</button>
</section>

<h4 class="demo-section-header">Stroked Buttons [mat-stroked-button]</h4>
<section>
<button mat-stroked-button color="primary">primary</button>
<button mat-stroked-button color="accent">accent</button>
<button mat-stroked-button color="warn">warn</button>
<button mat-stroked-button disabled>disabled</button>
</section>

<h4 class="demo-section-header">Flat Buttons [mat-flat-button]</h4>
<section>
<button mat-flat-button color="primary">primary</button>
<button mat-flat-button color="accent">accent</button>
<button mat-flat-button color="warn">warn</button>
<button mat-flat-button disabled>disabled</button>
</section>

<h4 class="demo-section-header"> Icon Buttons [mat-icon-button]</h4>
<section>
<button mat-icon-button color="primary">
<mat-icon>cached</mat-icon>
</button>
<button mat-icon-button color="accent">
<mat-icon>backup</mat-icon>
</button>
<button mat-icon-button color="warn">
<mat-icon>trending_up</mat-icon>
</button>
<button mat-icon-button disabled>
<mat-icon>visibility</mat-icon>
</button>
</section>

<h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
<section>
<button mat-fab color="primary">
<mat-icon>delete</mat-icon>
</button>
<button mat-fab color="accent">
<mat-icon>bookmark</mat-icon>
</button>
<button mat-fab color="warn">
<mat-icon>home</mat-icon>
</button>
<button mat-fab disabled>
<mat-icon>favorite</mat-icon>
</button>
</section>

<h4 class="demo-section-header"> Mini Fab Buttons [mat-mini-fab]</h4>
<section>
<button mat-mini-fab color="primary">
<mat-icon>menu</mat-icon>
</button>
<button mat-mini-fab color="accent">
<mat-icon>plus_one</mat-icon>
</button>
<button mat-mini-fab color="warn">
<mat-icon>filter_list</mat-icon>
</button>
<button mat-mini-fab disabled>
<mat-icon>home</mat-icon>
</button>
</section>

<h4 class="demo-section-header">Interaction/State</h4>
<section class="demo-no-flex">
<div>
<p>isDisabled: {{isDisabled}}</p>
<p>Button 1 as been clicked {{clickCounter}} times</p>
<button mat-flat-button (click)="isDisabled=!isDisabled">
{{isDisabled ? 'Enable All' : 'Disable All'}}
</button>
<button mat-flat-button (click)="button1.focus()">Focus 1</button>
<button mat-flat-button (click)="button2.focus()">Focus 2</button>
<button mat-flat-button (click)="button3.focus()">Focus 3</button>
<button mat-flat-button (click)="button4.focus()">Focus 4</button>
</div>
<div>
<button mat-button #button1 [disabled]="isDisabled"
(click)="clickCounter=clickCounter+1">
Button 1
</button>
<button mat-button #button2 color="primary" [disabled]="isDisabled">
Button 2
</button>
<a href="//www.google.com" #button3 mat-button color="accent"
[disabled]="isDisabled">
Button 3
</a>
<button mat-raised-button #button4 color="primary"
[disabled]="isDisabled">
Button 4
</button>
<button mat-mini-fab [disabled]="isDisabled">
<mat-icon>check</mat-icon>
</button>
<button mat-icon-button color="accent" [disabled]="isDisabled">
<mat-icon>favorite</mat-icon>
</button>
</div>
</section>

<h4 class="demo-section-header"> Speed dial Fab Button [mat-fab-dial]</h4>
<section class="demo-section-fab-dial">
<section class="demo-fab-dial-control">
<form>
<mat-form-field>
<mat-label>Colors</mat-label>
<select matNativeControl name="colors" [(ngModel)]="colorFab">
<option value="primary" selected>Primary</option>
<option value="accent">Accent</option>
<option value="warn">Warning</option>
</select>
</mat-form-field>


<mat-slide-toggle [(ngModel)]="disableFab" name="disable">
Disabled
</mat-slide-toggle>
<!-- direction -->
<mat-form-field>
<mat-label>direction</mat-label>
<select matNativeControl name="direction" [(ngModel)]="directionFab">
<option value="vertical" selected>Vertical</option>
<option value="horizontal">Horizontal</option>
</select>
</mat-form-field>
<!-- placement -->
<mat-form-field>
<mat-label>Placement</mat-label>
<select matNativeControl name="placement" [(ngModel)]="placementFab">
<option value="top" selected>Top</option>
<option value="bottom">Bottom</option>
</select>
</mat-form-field>

</form>

</section>

<mat-fab-dial [color]="colorFab" [attr.placement]="placementFab"
[attr.direction]="directionFab" [disabled]="disableFab">
<button mat-mini-fab color="accent">
<mat-icon>plus_one</mat-icon>
</button>
<button mat-mini-fab color="warn">
<mat-icon>filter_list</mat-icon>
</button>
<button mat-mini-fab disabled>
<mat-icon>home</mat-icon>
</button>
</mat-fab-dial>

</section>
</div>
7 changes: 7 additions & 0 deletions src/dev-app/button/button-demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,10 @@
display: block;
}
}

.demo-section-fab-dial {
min-height: 10vh;
mat-form-field {
margin: 0.5rem 1rem;
}
}
12 changes: 12 additions & 0 deletions src/dev-app/button/button-demo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
*/

import {Component} from '@angular/core';
import {ThemePalette} from '@angular/material';


@Component({
Expand All @@ -19,4 +20,15 @@ export class ButtonDemo {
isDisabled: boolean = false;
clickCounter: number = 0;
toggleDisable: boolean = false;

_colorFab: ThemePalette = 'primary';
get colorFab(): ThemePalette {
return this._colorFab;
}
set colorFab(value: ThemePalette) {
this._colorFab = value;
}
disableFab: boolean = false;
directionFab: 'horizontal'|'vertical' = 'vertical';
placementFab: 'top'|'bottom' = 'bottom';
}
Loading

0 comments on commit 1f2b15b

Please sign in to comment.