feat(md-fab-speed-dial): implementation

src/demo-app/demo-app-module.ts

@@ -43,6 +43,7 @@ import {PlatformDemo} from './platform/platform-demo';
 import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
 import {InputDemo} from './input/input-demo';
 import {StyleDemo} from './style/style-demo';
+import {FabSpeedDialDemo} from './fab-speed-dial/fab-speed-dial-demo';
 
 @NgModule({
   imports: [
@@ -100,6 +101,7 @@ import {StyleDemo} from './style/style-demo';
     RainyTabContent,
     FoggyTabContent,
     PlatformDemo,
+    FabSpeedDialDemo
   ],
   providers: [
     {provide: OverlayContainer, useClass: FullscreenOverlayContainer}

src/demo-app/demo-app/demo-app.ts

@@ -50,7 +50,8 @@ export class DemoApp {
     {name: 'Toolbar', route: 'toolbar'},
     {name: 'Tooltip', route: 'tooltip'},
     {name: 'Platform', route: 'platform'},
-    {name: 'Style', route: 'style'}
+    {name: 'Style', route: 'style'},
+    {name: 'FAB Speed Dial', route: 'fab-speed-dial'}
   ];
 
   constructor(private _element: ElementRef) {

src/demo-app/demo-app/routes.ts

@@ -33,6 +33,7 @@ import {PlatformDemo} from '../platform/platform-demo';
 import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
 import {InputDemo} from '../input/input-demo';
 import {StyleDemo} from '../style/style-demo';
+import {FabSpeedDialDemo} from '../fab-speed-dial/fab-speed-dial-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: Home},
@@ -68,4 +69,5 @@ export const DEMO_APP_ROUTES: Routes = [
   {path: 'snack-bar', component: SnackBarDemo},
   {path: 'platform', component: PlatformDemo},
   {path: 'style', component: StyleDemo},
+  {path: 'fab-speed-dial', component: FabSpeedDialDemo},
 ];

src/demo-app/fab-speed-dial/fab-speed-dial-demo.html

@@ -0,0 +1,55 @@
+<md-card class="fab-demo-actions">
+  <div>
+    Direction:
+    <md-radio-group [(ngModel)]="direction" name="direction">
+      <md-radio-button value="up">Up</md-radio-button>
+      <md-radio-button value="down">Down</md-radio-button>
+      <md-radio-button value="left">Left</md-radio-button>
+      <md-radio-button value="right">Right</md-radio-button>
+    </md-radio-group>
+  </div>
+  <div>
+    Animation Mode:
+    <md-radio-group [(ngModel)]="animationMode" name="animationMode">
+      <md-radio-button value="fling">fling</md-radio-button>
+      <md-radio-button value="scale">scale</md-radio-button>
+    </md-radio-group>
+  </div>
+  <div>
+    <md-slide-toggle [(ngModel)]="fixed">Fixed</md-slide-toggle>
+    <md-slide-toggle [(ngModel)]="spin">Enable Spinning</md-slide-toggle>
+  </div>
+</md-card>
+
+<div class="container-fab-demo">
+  <md-card>
+    <md-card-title>Click me!!</md-card-title>
+    <md-slide-toggle [(ngModel)]="open">Open</md-slide-toggle>
+    <md-fab-speed-dial [(open)]="open" [direction]="direction" [animationMode]="animationMode" [fixed]="fixed">
+      <md-fab-trigger [spin]="spin">
+        <button md-fab><md-icon>add</md-icon></button>
+      </md-fab-trigger>
+
+      <md-fab-actions>
+        <button md-mini-fab><md-icon>search</md-icon></button>
+        <button md-mini-fab><md-icon>edit</md-icon></button>
+        <button md-mini-fab><md-icon>home</md-icon></button>
+      </md-fab-actions>
+    </md-fab-speed-dial>
+  </md-card>
+  <md-card>
+    <md-card-title>Hover me!!</md-card-title>
+    <md-fab-speed-dial #myFab [direction]="direction" [animationMode]="animationMode" [fixed]="fixed"
+                        (mouseleave)="myFab.open = false">
+      <md-fab-trigger [spin]="spin" (mouseenter)="myFab.open = true" >
+        <button md-fab><md-icon>check</md-icon></button>
+      </md-fab-trigger>
+
+      <md-fab-actions>
+        <button md-mini-fab><md-icon>add</md-icon></button>
+        <button md-mini-fab><md-icon>edit</md-icon></button>
+        <button md-mini-fab><md-icon>menu</md-icon></button>
+      </md-fab-actions>
+    </md-fab-speed-dial>
+  </md-card>
+</div>

src/demo-app/fab-speed-dial/fab-speed-dial-demo.js

@@ -0,0 +1,38 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var core_1 = require('@angular/core');
+var FabSpeedDialDemo = (function () {
+    function FabSpeedDialDemo() {
+        this._fixed = false;
+        this.open = false;
+        this.spin = false;
+        this.direction = 'up';
+        this.animationMode = 'fling';
+    }
+    Object.defineProperty(FabSpeedDialDemo.prototype, "fixed", {
+        get: function () { return this._fixed; },
+        set: function (fixed) {
+            this._fixed = fixed;
+            if (this._fixed) {
+                this.open = true;
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FabSpeedDialDemo = __decorate([
+        core_1.Component({
+            moduleId: module.id,
+            selector: 'fab-speed-dial-demo',
+            templateUrl: 'fab-speed-dial-demo.html',
+            styleUrls: ['fab-speed-dial-demo.css'],
+        })
+    ], FabSpeedDialDemo);
+    return FabSpeedDialDemo;
+}());
+exports.FabSpeedDialDemo = FabSpeedDialDemo;

src/demo-app/fab-speed-dial/fab-speed-dial-demo.scss

@@ -0,0 +1,41 @@
+md-card {
+  margin: 30px 10px;
+
+  &.fab-demo-actions {
+    display:flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    align-content: flex-start;
+    align-items: flex-start;
+
+    & > div {
+      min-height: 50px;
+
+      & md-slide-toggle {
+        display: inline-block;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.container-fab-demo {
+  width: 100%;
+  display:flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-content: flex-start;
+  align-items: flex-start;
+
+  & md-card {
+    height: 300px;
+    padding: 20px;
+    flex-grow: 1;
+    flex-shrink: 0;
+    flex-basis: 300px;
+  }
+
+}
+

src/demo-app/fab-speed-dial/fab-speed-dial-demo.ts

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+
+
+@Component({
+  moduleId: module.id,
+  selector: 'fab-speed-dial-demo',
+  templateUrl: 'fab-speed-dial-demo.html',
+  styleUrls: ['fab-speed-dial-demo.css'],
+})
+export class FabSpeedDialDemo {
+  private _fixed: boolean = false;
+
+  open: boolean = false;
+  spin: boolean = false;
+  direction: string = 'up';
+  animationMode: string = 'fling';
+
+  get fixed() { return this._fixed; }
+  set fixed(fixed: boolean) {
+    this._fixed = fixed;
+    if (this._fixed) {
+      this.open = true;
+    }
+  }
+
+}

src/lib/fab-speed-dial/fab-speed-dial.scss

@@ -0,0 +1,157 @@
+@mixin mat-fab-speed-dial-container($box-orient, $flex-direction) {
+  -webkit-box-orient: $box-orient;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: $flex-direction;
+  flex-direction: $flex-direction;
+
+}
+
+@mixin mat-fab-speed-dial-box-order($ordinal-group, $order) {
+  -webkit-box-ordinal-group: $ordinal-group;
+  -webkit-order: $order;
+  order: $order;
+
+}
+
+@mixin mat-fab-speed-dial-actions($box-orient, $box-direction, $flex-direction, $ordinal-group, $order, $action-item-margin-direction) {
+  -webkit-box-orient: $box-orient;
+  -webkit-box-direction: $box-direction;
+  -webkit-flex-direction: $flex-direction;
+  flex-direction: $flex-direction;
+
+  @include mat-fab-speed-dial-box-order($ordinal-group, $order);
+
+  & .mat-fab-action-item {
+    margin-#{$action-item-margin-direction}: 10px;
+  }
+
+}
+
+.mat-fab-speed-dial {
+  display: inline-block;
+
+  &.mat-opened {
+    .mat-fab-speed-dial-container {
+      .mat-fab-trigger {
+        &.mat-spin {
+          -webkit-transform: rotate(360deg);
+          transform: rotate(360deg);
+        }
+      }
+    }
+  }
+
+  .mat-fab-speed-dial-container {
+    position: relative;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+    z-index: 20;
+
+    .mat-fab-trigger {
+      pointer-events: auto;
+      z-index: 24;
+
+      &.mat-spin {
+        -webkit-transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
+        transition: all 600ms cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
+    .mat-fab-actions {
+      display: -webkit-box;
+      display: -webkit-flex;
+      display: flex;
+      height: auto;
+    }
+  }
+
+  &.mat-fling {
+    .mat-fab-speed-dial-container {
+      .mat-fab-actions {
+        & .mat-fab-action-item {
+          display: block;
+          opacity: 1;
+          -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
+          transition: all 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
+        }
+      }
+    }
+  }
+
+  &.mat-scale {
+    .mat-fab-speed-dial-container {
+      .mat-fab-actions {
+        & .mat-fab-action-item {
+          -webkit-transform: scale(0);
+          transform: scale(0);
+          -webkit-transition: all 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
+          transition: all 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
+          -webkit-transition-duration: 142.86ms;
+          transition-duration: 142.86ms;
+        }
+      }
+    }
+  }
+
+  &.mat-down {
+    .mat-fab-speed-dial-container {
+      @include mat-fab-speed-dial-container(vertical, column);
+
+      .mat-fab-trigger {
+        @include mat-fab-speed-dial-box-order(2, 1);
+      }
+
+      .mat-fab-actions {
+        @include mat-fab-speed-dial-actions(vertical, normal, column, 3, 2, top);
+      }
+    }
+  }
+
+  &.mat-up {
+    .mat-fab-speed-dial-container {
+      @include mat-fab-speed-dial-container(vertical, column);
+
+      .mat-fab-trigger {
+        @include mat-fab-speed-dial-box-order(3, 2);
+      }
+
+      .mat-fab-actions {
+        @include mat-fab-speed-dial-actions(vertical, reverse, column-reverse, 2, 1, bottom);
+      }
+    }
+  }
+
+  &.mat-left {
+    .mat-fab-speed-dial-container {
+      @include mat-fab-speed-dial-container(horizontal, row);
+
+      .mat-fab-trigger {
+        @include mat-fab-speed-dial-box-order(3, 2);
+      }
+
+      .mat-fab-actions {
+        @include mat-fab-speed-dial-actions(horizontal, normal, row-reverse, 2, 1, right);
+      }
+    }
+  }
+
+  &.mat-right {
+    .mat-fab-speed-dial-container {
+      @include mat-fab-speed-dial-container(horizontal, row);
+
+      .mat-fab-trigger {
+        @include mat-fab-speed-dial-box-order(2, 1);
+      }
+
+      .mat-fab-actions {
+        @include mat-fab-speed-dial-actions(horizontal, normal, row, 3, 2, left);
+      }
+    }
+  }
+
+}
+