Merge pull request #26 from jvb93/master

Added toggleable rotation, updated documentation

Author: Edujugon

README.md

@@ -45,6 +45,7 @@ And
 |  `main-tooltip`       | String    | <b>Default `null`</b>  |
 |  `actions`            | Array    | <b>[Details bellow](https://github.com/PygmySlowLoris/vue-fab/#actions)</b>
 |  `fixed-tooltip`      | Boolean    | <b>Default 'false'</b><br> if true, it shows the tooltip beside the actions
+|  `enable-rotation`      | Boolean    | <b>Default 'true'</b><br> if true, the fab will rotate to indicate that it has been opened. Will not rotate if there are no actions specified.
 
 ### actions
 

demo/App.vue

@@ -160,6 +160,10 @@
                                                 </div>
                                             </div>
                                         </div>
+                                        <label class="checkbox" style="display: flex; align-items: center; padding-right: 1rem;">
+                                            <input type="checkbox" v-model="enableRotation">
+                                            Enable Rotation
+                                        </label>
                                     </div>
                                 </div>
                                 <div class="columns">
@@ -198,6 +202,7 @@
                 :actions="[{name: 'alertMe',icon: firstIcon, tooltip: firstTooltip, color:'#d11014'},{name: 'alertMe',icon: secondIcon, tooltip: secondTooltip}]"
                 @alertMe="alert"
                 :fixed-tooltip="fixedTooltip"
+                :enable-rotation="enableRotation"
         ></fab>
     </div>
 </template>
@@ -271,7 +276,8 @@
                 firstIcon: 'cached',
                 firstTooltip: 'cached',
                 secondIcon: 'add_alert',
-                secondTooltip: 'add_alert'
+                secondTooltip: 'add_alert',
+                enableRotation: true
             }
         },
         computed: {

src/FAB.vue

@@ -37,16 +37,16 @@
                      v-tooltip="{ content: mainTooltip, placement: tooltipPosition, classes: 'fab-tooltip' }"
                      class="fab-main pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
-                    <i :class="[ mainIconSize , { rotate: toggle } ,'material-icons main']">{{mainIcon}}</i>
-                    <i :class="[ mainIconSize , { rotate: toggle } ,'material-icons close']">add</i>
+                    <i :class="[ mainIconSize , { rotate: toggle && allowRotation } ,'material-icons main']">{{mainIcon}}</i>
+                    <i :class="[ mainIconSize , { rotate: toggle && allowRotation } ,'material-icons close']">add</i>
                 </div>
             </template>
             <template v-else>
                 <div v-ripple="rippleColor == 'light' ? 'rgba(255, 255, 255, 0.35)' : ''" @click="toggle = !toggle"
                      class="fab-main pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
-                    <i :class="[ mainIconSize , { rotate: toggle }, 'material-icons main']">{{mainIcon}}</i>
-                    <i :class="[ mainIconSize , { rotate: toggle }, 'material-icons close']">add</i>
+                    <i :class="[ mainIconSize , { rotate: toggle && allowRotation }, 'material-icons main']">{{mainIcon}}</i>
+                    <i :class="[ mainIconSize , { rotate: toggle && allowRotation }, 'material-icons close']">add</i>
                 </div>
             </template>
         </template>
@@ -55,15 +55,15 @@
                 <div v-bind:v-tooltip="{ content: mainTooltip, placement: tooltipPosition, classes: 'fab-tooltip'}"
                      class="fab-main pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
-                    <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
-                    <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
+                    <i class="material-icons md-36 main" :class="{ rotate: toggle && allowRotation }">{{mainIcon}}</i>
+                    <i class="material-icons md-36 close" :class="{ rotate: toggle && allowRotation }">add</i>
                 </div>
             </template>
             <template v-else>
                 <div class="fab-main pointer" :style="{ 'background-color': bgColor, 'padding': paddingAmount }"
                 >
-                    <i class="material-icons md-36 main" :class="{ rotate: toggle }">{{mainIcon}}</i>
-                    <i class="material-icons md-36 close" :class="{ rotate: toggle }">add</i>
+                    <i class="material-icons md-36 main" :class="{ rotate: toggle && allowRotation }">{{mainIcon}}</i>
+                    <i class="material-icons md-36 close" :class="{ rotate: toggle && allowRotation }">add</i>
                 </div>
             </template>
         </template>
@@ -116,9 +116,12 @@
             fixedTooltip: {
                 default: false
             },
+            enableRotation:{
+                default: true
+            },
             actions: {
                 default: () => []
-            }
+            }   
         },
         computed: {
             actionIconSize() {
@@ -136,6 +139,9 @@
                         return 'md-24';
                 }
             },
+            allowRotation(){
+                return this.enableRotation &&  this.actions && this.actions.length;
+            },
             mainIconSize() {
                 switch (this.iconSize) {
                     case 'small':