From a358035e438e156a9f8fcfb5a7a09e732999baf6 Mon Sep 17 00:00:00 2001
From: tbrkollar <116916192+tbrkollar@users.noreply.github.com>
Date: Thu, 26 Oct 2023 19:56:09 +0200
Subject: [PATCH] Modify btn position and fix hover style (#1177)
* Modify btn position and fix hover style
---
src/components/ZclDomainClusterView.vue | 32 ++++++++++++++++++-------
src/css/quasar.variables.scss | 32 +++++++++++++++++++++++++
2 files changed, 56 insertions(+), 8 deletions(-)
diff --git a/src/components/ZclDomainClusterView.vue b/src/components/ZclDomainClusterView.vue
index d3b6e28d..06455f88 100644
--- a/src/components/ZclDomainClusterView.vue
+++ b/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() {
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 40bc6e47..764f648c 100644
--- a/src/css/quasar.variables.scss
+++ b/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;
--
GitLab