feat(component): 完善speed-dial组件功能

stbui · May 19, 2018 · 3d549d5 · 3d549d5
1 parent d8f6852
commit 3d549d5
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 101 deletions.
diff --git a/src/app/admin/navigation/navigation.component.ts b/src/app/admin/navigation/navigation.component.ts
@@ -12,7 +12,6 @@ export class NavigationComponent implements OnInit, OnDestroy {
   navigationModelChangeSubscription: Subscription;
 
   constructor(private service: NavigationService) {
-    console.log(1)
     this.navigationModelChangeSubscription = this.service.onNavigationModelChange.subscribe(
       navigation => {
         this.navigationModel = navigation;

diff --git a/src/app/component/speed-dial/speed-dial.component.html b/src/app/component/speed-dial/speed-dial.component.html
@@ -1,4 +1,4 @@
-<div class="speed-dial-container">
+<div class="speed-dial-container" [ngClass]="position">
 
   <div class="speed-dial-trigger" (click)="toggle()">
     <button mat-fab>
@@ -7,14 +7,6 @@
   </div>
 
   <div class="speed-dial-actions" #actions>
-    <button mat-mini-fab>
-      <mat-icon>search</mat-icon>
-    </button>
-    <button mat-mini-fab>
-      <mat-icon>edit</mat-icon>
-    </button>
-    <button mat-mini-fab>
-      <mat-icon>home</mat-icon>
-    </button>
+    <ng-content></ng-content>
   </div>
 </div>
diff --git a/src/app/component/speed-dial/speed-dial.component.scss b/src/app/component/speed-dial/speed-dial.component.scss
@@ -1,37 +1,73 @@
-:host {
+.speed-dial {
   display: inline-block;
+  &-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+  &-trigger {
+    z-index: 20;
+    order: 2;
+  }
+  &-actions {
+    display: flex;
+    order: 1;
+  }
+  &-action,
+  button {
+    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+  }
 }
 
-.speed-dial-container {
-  position: relative;
-  display: flex;
+.speed-dial-container.up {
   flex-direction: column;
-  align-items: center;
-}
-
-.speed-dial-trigger {
-  z-index: 20;
-  order: 2;
-}
-
-.speed-dial-actions {
-  display: flex;
-  flex-direction: column-reverse;
-  order: 1;
-  >button {
-    margin-bottom: 10px;
-    transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2);
+  .speed-dial-actions {
+    flex-direction: column-reverse;
+    .spped-dial-action {
+      margin-bottom: 10px;
+    }
   }
 }
 
 .speed-dial-container.down {
+  flex-direction: column;
   .speed-dial-trigger {
     order: 1;
   }
   .speed-dial-actions {
     flex-direction: column;
+    .spped-dial-action {
+      margin-top: 10px;
+    }
   }
   .speed-dial-actions button {
     margin-top: 10px;
   }
 }
+
+.speed-dial-container.left {
+  flex-direction: row;
+  .speed-dial-trigger {
+    order: 2;
+  }
+  .speed-dial-actions {
+    flex-direction: row-reverse;
+    order: 1;
+    .spped-dial-action {
+      margin-right: 10px;
+    }
+  }
+}
+
+.speed-dial-container.right {
+  flex-direction: row;
+  .speed-dial-trigger {
+    order: 1;
+  }
+  .speed-dial-actions {
+    order: 2;
+    .spped-dial-action {
+      margin-left: 10px;
+    }
+  }
+}
diff --git a/src/app/component/speed-dial/speed-dial.component.ts b/src/app/component/speed-dial/speed-dial.component.ts
@@ -5,61 +5,44 @@
 
 import {
   Component,
-  OnInit,
   Input,
-  Output,
-  EventEmitter,
-  HostListener,
   ContentChildren,
   QueryList,
   ViewChild,
   ElementRef,
-  Renderer2
+  Renderer2,
+  AfterContentInit,
+  ViewEncapsulation
 } from '@angular/core';
 import { MatButton } from '@angular/material/button';
 
-export type Direction = 'up' | 'down' | 'left' | 'right';
+export type Position = 'up' | 'down' | 'left' | 'right';
 
 @Component({
+  moduleId: module.id,
   selector: 'stbui-speed-dial',
   templateUrl: './speed-dial.component.html',
-  styleUrls: ['./speed-dial.component.scss']
-})
-export class SpeedDialComponent implements OnInit {
-  private _direction: Direction = 'up';
-  private _open: boolean = false;
-
-  @Input()
-  get open(): boolean {
-    return this._open;
+  styleUrls: ['./speed-dial.component.scss'],
+  encapsulation: ViewEncapsulation.None,
+  exportAs: 'stbuiSpeedDial',
+  host: {
+    class: 'speed-dial'
   }
-
-  set open(open: boolean) {
-    this._open = open;
-  }
-
-  @Input()
-  get direction(): Direction {
-    return this._direction;
-  }
-
-  set direction(direction: Direction) {
-    this._direction = direction;
-  }
-
-  @Output() openChange: EventEmitter<boolean> = new EventEmitter<boolean>();
+})
+export class SpeedDialComponent implements AfterContentInit {
+  @Input() position: Position = 'up';
+  @Input() open: boolean = false;
 
   @ContentChildren(MatButton) _buttons: QueryList<MatButton>;
   @ViewChild('actions') _actions: ElementRef;
 
   constructor(private renderer: Renderer2) {}
 
-  ngOnInit() {}
-
-  dialTrigger() {
-    if (this.open) {
-      this.open = false;
-    }
+  ngAfterContentInit() {
+    this.toggle();
+    this._buttons.toArray().forEach(button => {
+      this.renderer.addClass(button._getHostElement(), 'spped-dial-action');
+    });
   }
 
   toggle(): void {
@@ -73,28 +56,25 @@ export class SpeedDialComponent implements OnInit {
   }
 
   show() {
-    const _buttons = this._actions.nativeElement.children;
-
-    for (let i = 0; i < _buttons.length; i++) {
-      const transform = 0;
-      this.renderer.setStyle(
-        _buttons[i],
-        'transform',
-        `translateY(${transform})`
-      );
-    }
+    this._buttons.toArray().forEach(button => {
+      const transform = this._getOrigin('0');
+      this.renderer.setStyle(button._getHostElement(), 'transform', transform);
+    });
   }
 
   hide() {
-    const _buttons = this._actions.nativeElement.children;
+    this._buttons.toArray().forEach((button, index) => {
+      const pos = 55 * (index + 1) - index * 5;
+      const transform = this._getOrigin(pos + 'px');
+      this.renderer.setStyle(button._getHostElement(), 'transform', transform);
+    });
+  }
 
-    for (let i = 0; i < _buttons.length; i++) {
-      const transform = 55 * (i + 1) - i * 5 + 'px';
-      this.renderer.setStyle(
-        _buttons[i],
-        'transform',
-        `translateY(${transform})`
-      );
-    }
+  _getOrigin(value) {
+    let position = this.position;
+    let translateFn =
+      position === 'up' || position === 'down' ? 'translateY' : 'translateX';
+    let sign = position === 'down' || position === 'right' ? '-' : '';
+    return translateFn + '(' + sign + value + ')';
   }
 }
diff --git a/src/app/component/speed-dial/speed-dial.md b/src/app/component/speed-dial/speed-dial.md
@@ -0,0 +1,56 @@
+# speed-dial
+
+## Usage
+
+### default
+```
+<stbui-speed-dial>
+    <button mat-mini-fab>
+        <mat-icon>search</mat-icon>
+    </button>
+    <button mat-mini-fab>
+        <mat-icon>edit</mat-icon>
+    </button>
+    <button mat-mini-fab>
+        <mat-icon>home</mat-icon>
+    </button>
+</stbui-speed-dial>
+```
+
+### setting open properties 
+```
+<stbui-speed-dial open="true">
+    <button mat-mini-fab>
+        <mat-icon>search</mat-icon>
+    </button>
+    <button mat-mini-fab>
+        <mat-icon>edit</mat-icon>
+    </button>
+    <button mat-mini-fab>
+        <mat-icon>home</mat-icon>
+    </button>
+</stbui-speed-dial>
+```
+open value
+* false
+* true
+
+### setting position properties
+```
+<stbui-speed-dial position="down">
+    <button mat-mini-fab>
+        <mat-icon>search</mat-icon>
+    </button>
+    <button mat-mini-fab>
+        <mat-icon>edit</mat-icon>
+    </button>
+    <button mat-mini-fab>
+        <mat-icon>home</mat-icon>
+    </button>
+</stbui-speed-dial>
+```
+position value
+* up
+* down
+* left
+* right
diff --git a/src/app/materials/chat-widget/chat-widget.component.html b/src/app/materials/chat-widget/chat-widget.component.html
@@ -1,21 +1,63 @@
-<mat-card class="fab-demo-actions">
+<mat-card>
+  <mat-card-title>speed dial</mat-card-title>
+  <mat-card-subtitle>default</mat-card-subtitle>
+  <stbui-speed-dial>
+    <button mat-mini-fab>
+      <mat-icon>search</mat-icon>
+    </button>
+    <button mat-mini-fab>
+      <mat-icon>edit</mat-icon>
+    </button>
+    <button mat-mini-fab>
+      <mat-icon>home</mat-icon>
+    </button>
+  </stbui-speed-dial>
+</mat-card>
+
+<mat-card>
   <mat-card-title>speed dial</mat-card-title>
-  <mat-card-subtitle>Options</mat-card-subtitle>
-  <p>
-    Direction:
-    <mat-radio-group [(ngModel)]="direction" name="direction">
-      <mat-radio-button value="up">Up</mat-radio-button>
-      <mat-radio-button value="down">Down</mat-radio-button>
-      <mat-radio-button value="left">Left</mat-radio-button>
-      <mat-radio-button value="right">Right</mat-radio-button>
-    </mat-radio-group>
-  </p>
-  <p>
-    <mat-slide-toggle [(ngModel)]="open">Open</mat-slide-toggle>
-  </p>
+  <mat-card-subtitle>position: down</mat-card-subtitle>
+  <stbui-speed-dial open="true" position="down">
+    <button mat-mini-fab>
+      <mat-icon>search</mat-icon>
+    </button>
+    <button mat-mini-fab>
+      <mat-icon>edit</mat-icon>
+    </button>
+    <button mat-mini-fab>
+      <mat-icon>home</mat-icon>
+    </button>
+  </stbui-speed-dial>
 </mat-card>
 
 <mat-card>
-  <mat-card-title>Click me</mat-card-title>
-  <stbui-speed-dial></stbui-speed-dial>
+  <mat-card-title>speed dial</mat-card-title>
+  <mat-card-subtitle>position: left</mat-card-subtitle>
+  <stbui-speed-dial open="true" position="left">
+    <button mat-mini-fab>
+      <mat-icon>search</mat-icon>
+    </button>
+    <button mat-mini-fab>
+      <mat-icon>edit</mat-icon>
+    </button>
+    <button mat-mini-fab>
+      <mat-icon>home</mat-icon>
+    </button>
+  </stbui-speed-dial>
+</mat-card>
+
+<mat-card>
+  <mat-card-title>speed dial</mat-card-title>
+  <mat-card-subtitle>position: right</mat-card-subtitle>
+  <stbui-speed-dial open="true" position="right">
+    <button mat-mini-fab>
+      <mat-icon>search</mat-icon>
+    </button>
+    <button mat-mini-fab>
+      <mat-icon>edit</mat-icon>
+    </button>
+    <button mat-mini-fab>
+      <mat-icon>home</mat-icon>
+    </button>
+  </stbui-speed-dial>
 </mat-card>