Views: Configuiration-interface: Add reset colors to defaults

Signed-off-by: Arturo Manzoli <[email protected]>
bluerobotics · Sep 2, 2024 · c6cabdc · c6cabdc
1 parent d784378
commit c6cabdc
Showing 1 changed file with 23 additions and 15 deletions.
diff --git a/src/views/ConfigurationUIView.vue b/src/views/ConfigurationUIView.vue
@@ -8,8 +8,8 @@
           <template #content>
             <div class="flex w-full">
               <div class="flex flex-col w-full px-4 pt-5">
-                <div class="flex flex-row justify-start items-center w-full mb-[35px] gap-x-[115px]">
-                  <div class="flex gap-x-[50px]">
+                <div class="flex flex-row justify-start items-center w-full mb-[35px] gap-x-[85px]">
+                  <div class="flex">
                     <v-menu
                       :close-on-content-click="false"
                       location="top start"
@@ -18,12 +18,13 @@
                       class="overflow-hidden"
                     >
                       <template #activator="{ props }">
-                        <span class="text-start -mt-1">Glass color</span>
-                        <div
-                          v-bind="props"
-                          class="w-[20px] h-[20px] border-2 border-slate-600 rounded-full cursor-pointer"
-                          :style="{ backgroundColor: interfaceStore.UIGlassEffect.bgColor }"
-                        ></div>
+                        <div v-bind="props" class="flex cursor-pointer gap-x-[30px]">
+                          <span class="text-start mt-[2px]">Glass color</span>
+                          <div
+                            class="w-[30px] h-[30px] border-2 border-slate-600 rounded-lg cursor-pointer"
+                            :style="{ backgroundColor: interfaceStore.UIGlassEffect.bgColor }"
+                          ></div>
+                        </div>
                       </template>
                       <v-card class="overflow-hidden"
                         ><v-color-picker
@@ -34,7 +35,7 @@
                       /></v-card>
                     </v-menu>
                   </div>
-                  <div class="flex gap-x-[50px] opacity-40">
+                  <div class="flex gap-x-[40px] opacity-40">
                     <v-menu
                       :close-on-content-click="false"
                       location="top start"
@@ -44,12 +45,14 @@
                       disabled
                     >
                       <template #activator="{ props }">
-                        <span class="text-start -mt-1">Font color</span>
-                        <div
-                          v-bind="props"
-                          class="w-[20px] h-[20px] border-2 border-slate-600 rounded-full"
-                          :style="{ backgroundColor: interfaceStore.UIGlassEffect.fontColor }"
-                        ></div>
+                        <div v-bind="props" class="flex gap-x-[30px]">
+                          <span class="text-start mt-[2px]">Font color</span>
+                          <div
+                            v-bind="props"
+                            class="w-[30px] h-[30px] border-2 border-slate-600 rounded-lg"
+                            :style="{ backgroundColor: interfaceStore.UIGlassEffect.fontColor }"
+                          ></div>
+                        </div>
                       </template>
                       <v-card class="overflow-hidden"
                         ><v-color-picker
@@ -60,6 +63,7 @@
                       /></v-card>
                     </v-menu>
                   </div>
+                  <v-btn variant="text" size="small" @click="resetColorsToDefault">Reset to defaults</v-btn>
                 </div>
                 <div class="flex w-full">
                   <div class="flex w-[33%] mt-[2px]">Opacity</div>
@@ -152,4 +156,8 @@ const interfaceStore = useAppInterfaceStore()
 const updateOpacity = (value: number): void => {
   interfaceStore.setBgOpacity(value)
 }
+
+const resetColorsToDefault = (): void => {
+  interfaceStore.setUIGlassEffect(0.8, '#4F4F4F1A', '#FFFFFF', 25)
+}
 </script>