Modify btn position and fix hover style (#1177)

* Modify btn position and fix hover style

src/components/ZclDomainClusterView.vue

@@ -16,6 +16,16 @@ limitations under the License.
 
 <template>
   <div class="row justify-center">
+    <q-btn
+      v-if="showEnableAllClustersButton"
+      @click="showEnableAllClustersDialog = true"
+      label="Enable All Clusters"
+      color="primary"
+      class="full-height"
+      flat
+      rounded
+    />
+
     <q-table
       :rows="clusters"
       :columns="columns"
@@ -180,14 +190,7 @@ limitations under the License.
         </q-tr>
       </template>
     </q-table>
-    <q-btn
-      v-if="this.$store.state.zap.showDevTools"
-      @click="showEnableAllClustersDialog = true"
-      label="Enable All Clusters"
-      color="primary"
-      class="col-3"
-      rounded
-    />
+
     <q-dialog
       v-model="showEnableAllClustersDialog"
       class="background-color:transparent"
@@ -258,6 +261,19 @@ export default {
       }
       return names
     },
+    showEnableAllClustersButton: function () {
+      let hasNotEnabled = false
+      if (this.clusters && this.clusters.length > 0) {
+        this.clusters.forEach((singleCluster) => {
+          if (!this.isClusterEnabled(singleCluster.id)) {
+            hasNotEnabled = true
+            return
+          }
+        })
+      }
+
+      return hasNotEnabled && this.$store.state.zap.showDevTools
+    },
   },
   methods: {
     enableAllClusters() {

src/css/quasar.variables.scss

@@ -97,6 +97,14 @@ $warning: #f2c037;
         .q-focus-helper {
           opacity: 0 !important;
         }
+        .q-btn {
+          &.q-hoverable:hover {
+            .q-focus-helper {
+              background: currentColor;
+              opacity: 0.15 !important;
+            }
+          }
+        }
         .q-expansion-item__container {
           .q-item {
             transition: all 0.4s ease-out;
@@ -175,6 +183,14 @@ $warning: #f2c037;
           .q-focus-helper {
             opacity: 0 !important;
           }
+          .q-btn {
+            &.q-hoverable:hover {
+              .q-focus-helper {
+                background: currentColor;
+                opacity: 0.15 !important;
+              }
+            }
+          }
           .q-expansion-item__container {
             .q-item {
               transition: all 0.4s ease-out;
@@ -316,6 +332,14 @@ $warning: #f2c037;
         .q-focus-helper {
           opacity: 0 !important;
         }
+        .q-btn {
+          &.q-hoverable:hover {
+            .q-focus-helper {
+              background: currentColor;
+              opacity: 0.15 !important;
+            }
+          }
+        }
         .q-expansion-item__container {
           .q-item {
             transition: all 0.4s ease-out;
@@ -397,6 +421,14 @@ $warning: #f2c037;
           .q-focus-helper {
             opacity: 0 !important;
           }
+          .q-btn {
+            &.q-hoverable:hover {
+              .q-focus-helper {
+                background: currentColor;
+                opacity: 0.15 !important;
+              }
+            }
+          }
           .q-expansion-item__container {
             .q-item {
               transition: all 0.4s ease-out;