Views: Configuiration-interface: Add reset colors to defaults

Signed-off-by: Arturo Manzoli <[email protected]>
bluerobotics · Sep 11, 2024 · 91cd347 · 91cd347
1 parent c7b817e
commit 91cd347
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 15 deletions.
diff --git a/src/assets/defaults.ts b/src/assets/defaults.ts
@@ -40,6 +40,7 @@ export const defaultMiniWidgetManagerVars: MiniWidgetManagerVars = {
 const hostname = window.location.hostname
 export const defaultBlueOsAddress = 'http://blueos-avahi.local'
 export const defaultGlobalAddress = hostname == '' || hostname == undefined ? defaultBlueOsAddress : hostname
+export const defaultUIGlassColor = { opacity: 0.8, bgColor: '#4F4F4F1A', fontColor: '#FFFFFF', blur: 25 }
 export const widgetProfiles: Profile[] = [
   {
     name: 'ROV default',

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>
@@ -141,6 +145,7 @@
 </template>
 
 <script setup lang="ts">
+import { defaultUIGlassColor } from '@/assets/defaults'
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
 import { DistanceDisplayUnit, unitPrettyName } from '@/libs/units'
 import { useAppInterfaceStore } from '@/stores/appInterface'
@@ -152,4 +157,8 @@ const interfaceStore = useAppInterfaceStore()
 const updateOpacity = (value: number): void => {
   interfaceStore.setBgOpacity(value)
 }
+
+const resetColorsToDefault = (): void => {
+  interfaceStore.UIGlassEffect = defaultUIGlassColor
+}
 </script>