From bba633513d80a4d5d585863b01bdeca11fa71848 Mon Sep 17 00:00:00 2001
From: Daniel Lando <daniel.sorridi@gmail.com>
Date: Mon, 22 Feb 2021 11:29:02 +0100
Subject: [PATCH] fix(ui): use button toggle for on/off value ids (#686)

---
 src/components/ValueId.vue | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/components/ValueId.vue b/src/components/ValueId.vue
index 5ec3ed31642..7ede0d29472 100644
--- a/src/components/ValueId.vue
+++ b/src/components/ValueId.vue
@@ -103,13 +103,12 @@
       ></v-select>
 
       <div v-if="value.type == 'boolean' && value.writeable && value.readable">
-        <div style="display: flex;margin-top:20px">
+        <v-btn-toggle v-model="value.newValue" rounded class="mt-5">
           <v-btn
             outlined
-            class="on-button"
+            :value="true"
             :style="{
-              background: value.newValue ? '#4CAF50' : '',
-              'border-color': this.$vuetify.theme.dark ? 'white' : 'grey'
+              background: value.newValue ? '#4CAF50' : ''
             }"
             :color="value.newValue ? 'white' : 'green'"
             dark
@@ -119,10 +118,9 @@
           </v-btn>
           <v-btn
             outlined
-            class="off-button"
+            :value="false"
             :style="{
-              background: !value.newValue ? '#f44336' : '',
-              'border-color': this.$vuetify.theme.dark ? 'white' : 'grey'
+              background: !value.newValue ? '#f44336' : ''
             }"
             :color="!value.newValue ? 'white' : 'red'"
             @click="updateValue(value, false)"
@@ -130,8 +128,8 @@
           >
             OFF
           </v-btn>
-        </div>
-        <div v-if="help" class="caption">{{ help }}</div>
+        </v-btn-toggle>
+        <div v-if="help" class="caption mt-2">{{ help }}</div>
       </div>
 
       <v-tooltip v-if="value.type == 'boolean' && !value.readable" right>
@@ -152,14 +150,6 @@
 </template>
 
 <style scoped>
-.on-button {
-  border-radius: 20px 0 0 20px;
-  margin-right: 0;
-}
-.off-button {
-  border-radius: 0 20px 20px 0;
-  margin-right: 0;
-}
 .valueid-label {
   font-weight: bold;
   color: black;