Allows to rotate a specific element in the trigger #4

Author: sambaptista

README.md

@@ -47,7 +47,11 @@ yarn add @ecodev/fab-speed-dial
 
 | Property         | Type         | Default             | Description                                     |
 |------------------|--------------|---------------------|-------------------------------------------------|
-| `spin`           | `boolean`    | `false`             | Enables the rotation (360dg) of the trigger action when the speed dial is opening |
+| `spin`           | `boolean`    | `false`             | Enables the rotation of the trigger action when the speed dial is opening |
+
+Additionally to spin property, add class "spin180" or "spin360" on html content inside of `eco-fab-speed-dial-trigger` tag to activate rotation on a specific element.
+
+In case of buttons, the icon should rotate not the whole button (box-shadow would rotate too).
 
 ## Development
 

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

@@ -16,7 +16,6 @@
     -webkit-box-direction: $box-direction;
     -webkit-flex-direction: $flex-direction;
     flex-direction: $flex-direction;
-
     @include eco-fab-speed-dial-box-order($ordinal-group, $order);
 
     & .eco-fab-action-item {
@@ -29,8 +28,12 @@ eco-fab-speed-dial {
 
     &.eco-opened {
         .eco-fab-speed-dial-container {
-            eco-fab-speed-dial-trigger {
-                &.eco-spin {
+            eco-fab-speed-dial-trigger.eco-spin {
+                .spin180 {
+                    -webkit-transform: rotate(180deg);
+                    transform: rotate(180deg);
+                }
+                .spin360 {
                     -webkit-transform: rotate(360deg);
                     transform: rotate(360deg);
                 }
@@ -53,18 +56,20 @@ eco-fab-speed-dial {
             z-index: 24;
 
             &.eco-spin {
-                -webkit-transition: all .6s cubic-bezier(.4, 0, .2, 1);
-                transition: all .6s cubic-bezier(.4, 0, .2, 1);
+                .spin180, .spin360 {
+                    -webkit-transition: all .6s cubic-bezier(.4, 0, .2, 1);
+                    transition: all .6s cubic-bezier(.4, 0, .2, 1);
+                }
             }
         }
 
         eco-fab-speed-dial-actions {
             display: -webkit-box;
             display: -webkit-flex;
             display: flex;
-            position:absolute;
-            height:0;
-            width:0
+            position: absolute;
+            height: 0;
+            width: 0
         }
     }
 
@@ -99,8 +104,8 @@ eco-fab-speed-dial {
     &.eco-down {
 
         eco-fab-speed-dial-actions {
-            bottom:2px;
-            left:7px;
+            bottom: 2px;
+            left: 7px;
         }
 
         .eco-fab-speed-dial-container {
@@ -118,8 +123,8 @@ eco-fab-speed-dial {
 
     &.eco-up {
         eco-fab-speed-dial-actions {
-            top:2px;
-            left:7px;
+            top: 2px;
+            left: 7px;
         }
 
         .eco-fab-speed-dial-container {
@@ -137,8 +142,8 @@ eco-fab-speed-dial {
 
     &.eco-left {
         eco-fab-speed-dial-actions {
-            top:7px;
-            left:2px;
+            top: 7px;
+            left: 2px;
         }
 
         .eco-fab-speed-dial-container {
@@ -156,8 +161,8 @@ eco-fab-speed-dial {
 
     &.eco-right {
         eco-fab-speed-dial-actions {
-            top:7px;
-            right:2px;
+            top: 7px;
+            right: 2px;
         }
 
         .eco-fab-speed-dial-container {

src/app/app.component.html

@@ -41,7 +41,7 @@
 
       <eco-fab-speed-dial-trigger [spin]="spin">
         <button mat-fab (click)="doAction('trigger')">
-          <mat-icon>add</mat-icon>
+          <mat-icon  class="spin180">add</mat-icon>
         </button>
       </eco-fab-speed-dial-trigger>
 
@@ -66,7 +66,7 @@
 
       <eco-fab-speed-dial-trigger [spin]="spin">
         <button mat-fab (click)="doAction('trigger')">
-          <mat-icon>check</mat-icon>
+          <mat-icon class="spin360">check</mat-icon>
         </button>
       </eco-fab-speed-dial-trigger>