Improve widget options access

src/assets/defaults.ts

@@ -18,6 +18,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             size: { width: 0.1, height: 0.62 },
             managerVars: {
               timesMounted: 0,
+              configMenuOpen: false,
               lastNonMaximizedX: 0.4,
               lastNonMaximizedY: 0.32,
               lastNonMaximizedWidth: 0.2,
@@ -36,6 +37,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             size: { width: 0.72, height: 0.6 },
             managerVars: {
               timesMounted: 0,
+              configMenuOpen: false,
               lastNonMaximizedX: 0.4,
               lastNonMaximizedY: 0.32,
               lastNonMaximizedWidth: 0.2,
@@ -58,6 +60,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             size: { width: 0.7, height: 0.065 },
             managerVars: {
               timesMounted: 0,
+              configMenuOpen: false,
               lastNonMaximizedX: 0.4,
               lastNonMaximizedY: 0.32,
               lastNonMaximizedWidth: 0.2,
@@ -76,6 +79,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             size: { width: 1, height: 1 },
             managerVars: {
               timesMounted: 0,
+              configMenuOpen: false,
               lastNonMaximizedX: 0.4,
               lastNonMaximizedY: 0.32,
               lastNonMaximizedWidth: 0.2,
@@ -101,6 +105,7 @@ export const widgetProfiles: { [key: string]: Profile } = {
             size: { width: 1, height: 1 },
             managerVars: {
               timesMounted: 0,
+              configMenuOpen: false,
               lastNonMaximizedX: 0.4,
               lastNonMaximizedY: 0.32,
               lastNonMaximizedWidth: 0.2,

src/components/EditMenu.vue

@@ -87,6 +87,10 @@
               class="flex items-center justify-center w-8 ml-2 bg-slate-700 aspect-square mdi mdi-trash-can hover:bg-slate-500"
               @click="store.deleteWidget(widget)"
             />
+            <Button
+              class="flex items-center justify-center w-8 ml-2 bg-slate-700 aspect-square mdi mdi-pencil hover:bg-slate-500"
+              @click="store.openWidgetConfigMenu(widget)"
+            />
           </div>
         </TransitionGroup>
       </VueDraggable>

src/components/WidgetHugger.vue

@@ -269,9 +269,6 @@ const cursorStyle = computed(() => {
 })
 
 const devInfoBlurLevel = computed(() => `${devStore.widgetDevInfoBlurLevel}px`)
-
-const mouseOverWidgetStyle = computed(() => (hoveringWidgetOrOverlay.value ? 'block' : 'none'))
-const optionsBtnTopStyle = computed(() => `${48 - constrain(widget.value.position.y * windowHeight.value, 0, 48)}px`)
 </script>
 
 <style>
@@ -332,17 +329,6 @@ const optionsBtnTopStyle = computed(() => `${48 - constrain(widget.value.positio
   left: calc(50% - 16px);
   bottom: calc(50% - 16px);
 }
-.options-btn {
-  display: none;
-  position: absolute;
-  margin: 5px;
-  top: v-bind('optionsBtnTopStyle');
-  right: 0;
-  color: white;
-  filter: drop-shadow(0.5px 0.5px 0.5px black);
-  display: v-bind('mouseOverWidgetStyle');
-  cursor: pointer;
-}
 
 .resize-handle {
   position: absolute;

src/components/widgets/Attitude.vue

@@ -1,16 +1,8 @@
 <template>
   <div class="main">
     <canvas ref="canvasRef" :width="canvasSize.width" :height="canvasSize.height" />
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
   </div>
-  <v-dialog v-model="showOptionsDialog" min-width="400" max-width="35%">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
     <v-card class="pa-2">
       <v-card-title>Attitude widget config</v-card-title>
       <v-card-text>
@@ -99,7 +91,6 @@ type RenderVariables = {
   pitchLinesHeights: { [angle: string]: number }
 }
 
-const showOptionsDialog = ref(false)
 const rollAngleDeg = ref(0)
 const pitchAngleDeg = ref(0)
 

src/components/widgets/Compass.vue

@@ -13,7 +13,7 @@
       draggable="false"
     />
   </div>
-  <Dialog v-model:show="showConfigurationMenu" class="w-72">
+  <Dialog v-model:show="widget.managerVars.configMenuOpen" class="w-72">
     <div class="w-full h-full">
       <div class="flex flex-col items-center justify-around">
         <div class="flex items-center justify-between w-full my-1">
@@ -23,11 +23,10 @@
       </div>
     </div>
   </Dialog>
-  <span class="options-btn mdi mdi-dots-vertical" @click="showConfigurationMenu = !showConfigurationMenu" />
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, toRefs } from 'vue'
+import { computed, onBeforeMount, toRefs } from 'vue'
 
 import Dialog from '@/components/Dialog.vue'
 import Dropdown from '@/components/Dropdown.vue'
@@ -49,7 +48,6 @@ enum HeadingStyle {
 }
 const headingOptions = Object.values(HeadingStyle)
 
-const showConfigurationMenu = ref(false)
 const props = defineProps<{
   /**
    * Widget reference

src/components/widgets/CompassHUD.vue

@@ -1,16 +1,8 @@
 <template>
   <div class="main">
     <canvas ref="canvasRef" :width="canvasSize.width" :height="canvasSize.height" />
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
   </div>
-  <v-dialog v-model="showOptionsDialog" min-width="400" max-width="35%">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
     <v-card class="pa-2">
       <v-card-title>HUD Compass widget config</v-card-title>
       <v-card-text>
@@ -56,7 +48,6 @@ const widget = toRefs(props).widget
 
 // Pre-defined HUD colors
 const colorSwatches = ref([['#FFFFFF'], ['#FF2D2D'], ['#0ADB0ACC']])
-const showOptionsDialog = ref(false)
 
 // prettier-ignore
 const angleRender = (angle: number): string => {

src/components/widgets/DepthHUD.vue

@@ -1,16 +1,8 @@
 <template>
   <div class="main">
     <canvas ref="canvasRef" :width="canvasSize.width" :height="canvasSize.height" />
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
   </div>
-  <v-dialog v-model="showOptionsDialog" min-width="400" max-width="35%">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
     <v-card class="pa-2">
       <v-card-title>Depth HUD config</v-card-title>
       <v-card-text>
@@ -56,7 +48,6 @@ const widget = toRefs(props).widget
 
 // Pre-defined HUD colors
 const colorSwatches = ref([['#FF2D2D'], ['#0ADB0ACC'], ['#FFFFFF']])
-const showOptionsDialog = ref(false)
 
 type RenderVariables = {
   /**

src/components/widgets/ImageView.vue

@@ -1,15 +1,7 @@
 <template>
   <div class="w-full h-full">
     <img :src="src" draggable="false" />
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
-    <v-dialog v-model="showOptionsDialog" min-width="400" max-width="35%">
+    <v-dialog v-model="widget.managerVars.configMenuOpen" min-width="400" max-width="35%">
       <v-card class="pa-2">
         <v-card-title>Image URL</v-card-title>
         <v-card-text>
@@ -25,21 +17,20 @@
           </div>
         </v-card-text>
         <v-card-actions>
-          <v-btn color="primary" text @click="showOptionsDialog = false">Close</v-btn>
+          <v-btn color="primary" text @click="widget.managerVars.configMenuOpen = false">Close</v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onBeforeMount, ref, toRefs } from 'vue'
+import { computed, onBeforeMount, toRefs } from 'vue'
 
 import type { Widget } from '@/types/widgets'
 
 import Dropdown from '../Dropdown.vue'
 
-const showOptionsDialog = ref(false)
 const props = defineProps<{
   /**
    * Widget reference

src/components/widgets/Indicators.vue

@@ -1,13 +1,5 @@
 <template>
   <v-sheet rounded color="rgba(255, 255, 255, 0.9)" class="indications">
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
     <template v-if="widget.options.showDebugInfo">
       <p class="font-weight-bold text-body-1">Vehicle online?</p>
       <p class="text-body-1">{{ store.isVehicleOnline }}</p>
@@ -41,7 +33,7 @@
       </p>
     </template>
   </v-sheet>
-  <v-dialog v-model="showOptionsDialog" width="auto">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" width="auto">
     <v-card class="pa-2">
       <v-card-title>Indicators widget config</v-card-title>
       <v-card-text>
@@ -55,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref, toRefs } from 'vue'
+import { onBeforeMount, toRefs } from 'vue'
 
 import { degrees } from '@/libs/utils'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
@@ -70,7 +62,6 @@ const props = defineProps<{
 }>()
 
 const widget = toRefs(props).widget
-const showOptionsDialog = ref(false)
 
 onBeforeMount(() => {
   // Set initial widget options if they don't exist

src/components/widgets/Map.vue

@@ -9,14 +9,6 @@
     class="map"
     @ready="onLeafletReady"
   >
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
     <v-btn
       class="absolute left-0 m-3 bottom-12 bg-slate-50"
       elevation="2"
@@ -90,7 +82,7 @@
     <l-polyline v-if="widget.options.showVehiclePath" :lat-lngs="vehicleLatLongHistory" />
     <l-tile-layer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
   </l-map>
-  <v-dialog v-model="showOptionsDialog" width="auto">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" width="auto">
     <v-card class="pa-2">
       <v-card-title>Map widget settings</v-card-title>
       <v-card-text>
@@ -271,8 +263,6 @@ onBeforeMount(() => {
 onBeforeUnmount(() => {
   clearInterval(followInterval)
 })
-
-const showOptionsDialog = ref(false)
 </script>
 
 <style>

src/components/widgets/VideoPlayer.vue

@@ -6,16 +6,8 @@
     <video ref="videoElement" muted autoplay playsinline disablePictureInPicture>
       Your browser does not support the video tag.
     </video>
-    <v-btn
-      class="options-btn"
-      icon="mdi-dots-vertical"
-      size="x-small"
-      variant="text"
-      flat
-      @click="showOptionsDialog = !showOptionsDialog"
-    />
   </div>
-  <v-dialog v-model="showOptionsDialog" width="auto">
+  <v-dialog v-model="widget.managerVars.configMenuOpen" width="auto">
     <v-card class="pa-2">
       <v-card-title>Video widget config</v-card-title>
       <v-card-text>
@@ -88,7 +80,6 @@ const props = defineProps<{
 const widget = toRefs(props).widget
 
 const selectedStream = ref<Stream | undefined>()
-const showOptionsDialog = ref(false)
 const videoElement = ref<HTMLVideoElement | undefined>()
 const webRTCManager = new WebRTCManager(webRTCSignallingURI.val, rtcConfiguration)
 const { availableStreams, mediaStream, signallerStatus, streamStatus } = webRTCManager.startStream(selectedStream)

src/stores/widgetManager.ts

@@ -19,9 +19,9 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
   const editingMode = ref(false)
   const showGrid = ref(true)
   const gridInterval = ref(0.01)
-  const currentProfile = useStorage('cockpit-current-profile-v2', widgetProfile)
+  const currentProfile = useStorage('cockpit-current-profile-v3', widgetProfile)
   const currentMiniWidgetsProfile = useStorage('cockpit-mini-widgets-profile', miniWidgetsProfile)
-  const savedProfiles = useStorage('cockpit-saved-profiles-v2', widgetProfiles)
+  const savedProfiles = useStorage('cockpit-saved-profiles-v3', widgetProfiles)
   const currentViewIndex = useStorage('cockpit-current-view-index', 0)
 
   const currentView = computed<View>({
@@ -222,6 +222,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
       options: {},
       managerVars: {
         timesMounted: 0,
+        configMenuOpen: false,
         lastNonMaximizedX: 0.4,
         lastNonMaximizedY: 0.32,
         lastNonMaximizedWidth: 0.2,
@@ -240,6 +241,14 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     view.widgets.splice(index, 1)
   }
 
+  /**
+   * Open widget configuration menu
+   * @param { Widget } widget - Widget
+   */
+  const openWidgetConfigMenu = (widget: Widget): void => {
+    widget.managerVars.configMenuOpen = true
+  }
+
   const fullScreenPosition = { x: 0, y: 0 }
   const fullScreenSize = { width: 1, height: 1 }
   const defaultRestoredPosition: Point2D = { x: 0.15, y: 0.15 }
@@ -321,6 +330,7 @@ export const useWidgetManagerStore = defineStore('widget-manager', () => {
     importView,
     addWidget,
     deleteWidget,
+    openWidgetConfigMenu,
     toggleFullScreen,
     isFullScreen,
   }

src/types/widgets.ts

@@ -53,6 +53,10 @@ export type Widget = {
      * Number of times the widget was mounted
      */
     timesMounted: number
+    /**
+     * If the configuration menu is open or not
+     */
+    configMenuOpen: boolean
     /**
      * Last widget X position when it wasn't maximized
      */