Views: Configuiration-interface: Add reset colors to defaults

Signed-off-by: Arturo Manzoli <[email protected]>

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',

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>