App: Main-menu: Add custom svg icons

Signed-off-by: Arturo Manzoli <[email protected]>
bluerobotics · Feb 3, 2025 · 0334d9a · 0334d9a
1 parent e9c418a
commit 0334d9a
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 60 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -38,19 +38,18 @@
                 class="relative flex flex-col h-full justify-between align-center items-center select-none"
                 :class="
                   interfaceStore.isOnSmallScreen
-                    ? 'gap-y-2 pt-2 pb-3 sm:gap-y-1 sm:py-0 sm:-ml-[3px] xs:gap-y-1 xs:py-0 xs:-ml-[3px]'
-                    : 'lg:gap-y-3 xl:gap-y-4 gap-y-5 py-5'
+                    ? 'gap-y-0 pt-2 pb-3 sm:sm:py-0 sm:-ml-[3px] xs:xs:py-0 xs:-ml-[3px]'
+                    : 'lg:gap-y-1 xl:gap-y-2 gap-y-3 py-4'
                 "
               >
                 <GlassButton
                   v-if="route.name === 'widgets-view'"
                   :label="simplifiedMainMenu ? '' : 'Edit Interface'"
                   :selected="widgetStore.editingMode"
-                  :label-class="[menuLabelSize, '-mb-0.5']"
-                  icon="mdi-pencil"
-                  :icon-class="interfaceStore.isOnSmallScreen ? 'scale-[90%] -mr-[2px]' : 'scale-[90%] -mr-[3px]'"
+                  :label-class="[menuLabelSize, '-mb-0.5 mt-4']"
+                  :icon="simplifiedMainMenu ? 'mdi-pencil' : undefined"
                   :icon-size="simplifiedMainMenu ? 25 : undefined"
-                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  variant="uncontained"
                   :tooltip="simplifiedMainMenu ? 'Edit Mode' : undefined"
                   :width="buttonSize"
                   @click="
@@ -59,17 +58,15 @@
                       closeMainMenu()
                     }
                   "
-                />
+                  ><img v-if="!simplifiedMainMenu" :src="EditModeIcon" alt="Edit Mode Icon" />
+                </GlassButton>
                 <GlassButton
                   v-if="route.name !== 'widgets-view'"
                   :label="simplifiedMainMenu ? '' : 'Flight'"
                   :label-class="menuLabelSize"
-                  icon="mdi-send"
-                  :icon-class="
-                    interfaceStore.isOnSmallScreen ? '-mb-[1px] -mr-[3px] scale-90' : '-mb-[1px] -mr-[5px] scale-90'
-                  "
+                  :icon="simplifiedMainMenu ? 'mdi-send' : undefined"
                   :icon-size="simplifiedMainMenu ? 25 : undefined"
-                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  variant="uncontained"
                   :tooltip="simplifiedMainMenu ? 'Flight' : undefined"
                   :width="buttonSize"
                   :selected="$route.name === 'Flight'"
@@ -79,19 +76,15 @@
                       closeMainMenu()
                     }
                   "
-                />
+                  ><img v-if="!simplifiedMainMenu" :src="FlightIcon" alt="Flight Icon" />
+                </GlassButton>
                 <GlassButton
                   v-if="route.name !== 'Mission planning'"
                   :label="simplifiedMainMenu ? '' : 'Mission Planning'"
-                  :label-class="menuLabelSize"
-                  icon="mdi-map-marker-radius-outline"
-                  :icon-class="
-                    interfaceStore.isOnSmallScreen
-                      ? 'scale-[95%] -mr-[2px] -mb-[1px]'
-                      : 'scale-[95%] ml-[2px] lg:-mr-[2px]'
-                  "
+                  :label-class="[menuLabelSize, 'mt-4']"
+                  :icon="simplifiedMainMenu ? 'mdi-map-marker-radius-outline' : undefined"
                   :icon-size="simplifiedMainMenu ? 25 : undefined"
-                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  variant="uncontained"
                   :tooltip="simplifiedMainMenu ? 'Mission Planning' : undefined"
                   :width="buttonSize"
                   :selected="$route.name === 'Mission planning'"
@@ -101,18 +94,14 @@
                       closeMainMenu()
                     }
                   "
-                />
+                  ><img v-if="!simplifiedMainMenu" :src="MissionPlanningIcon" alt="MissionPlanning Icon"
+                /></GlassButton>
                 <GlassButton
                   :label="simplifiedMainMenu ? '' : 'Settings'"
-                  :label-class="[menuLabelSize, '-mb-1']"
-                  icon="mdi-cog"
+                  :label-class="[menuLabelSize, '-mb-1 mt-4']"
+                  :icon="simplifiedMainMenu ? 'mdi-cog' : undefined"
                   :icon-size="simplifiedMainMenu ? 25 : undefined"
-                  :icon-class="
-                    interfaceStore.isOnSmallScreen
-                      ? 'scale-[100%] -mb-[1px] md:ml-[2px]'
-                      : 'scale-[97%]  lg:ml-[1px] -mr-[2px] xl:-mb-[4px]'
-                  "
-                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  variant="uncontained"
                   :tooltip="simplifiedMainMenu ? 'Configuration' : undefined"
                   :width="buttonSize"
                   :selected="showConfigurationMenu"
@@ -124,18 +113,14 @@
                     }
                   "
                   @click="interfaceStore.mainMenuCurrentStep = 2"
-                />
+                  ><img v-if="!simplifiedMainMenu" :src="SettingsIcon" alt="Settings Icon" />
+                </GlassButton>
                 <GlassButton
                   :label="simplifiedMainMenu ? '' : isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'"
-                  :label-class="menuLabelSize"
-                  :icon="fullScreenToggleIcon"
+                  :label-class="[menuLabelSize, ' mt-4']"
+                  :icon="simplifiedMainMenu ? fullScreenToggleIcon : undefined"
                   :icon-size="simplifiedMainMenu ? 25 : undefined"
-                  :icon-class="
-                    interfaceStore.isOnSmallScreen
-                      ? '-mb-[1px] scale-90 -mr-[2px] md:ml-[1px] md:-mb-[2px]'
-                      : '2xl:-mb-[2px] xl:-mb-[2px] -mb-[1px] scale-90 -mr-[3px]'
-                  "
-                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  variant="uncontained"
                   :tooltip="simplifiedMainMenu ? (isFullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen') : undefined"
                   :button-class="simplifiedMainMenu ? '-mb-2' : ''"
                   :width="buttonSize"
@@ -146,24 +131,25 @@
                       closeMainMenu()
                     }
                   "
-                />
+                  ><img
+                    v-if="!simplifiedMainMenu"
+                    :src="isFullscreen ? ExitFullScreenIcon : FullScreenIcon"
+                    alt="Fullscreen Icon"
+                  />
+                </GlassButton>
                 <GlassButton
                   :label="simplifiedMainMenu ? '' : 'About'"
-                  :label-class="[menuLabelSize, '-mb-1']"
-                  icon="mdi-information-outline"
+                  :label-class="[menuLabelSize, '-mb-1 mt-4']"
+                  :icon="simplifiedMainMenu ? 'mdi-information-outline' : undefined"
                   :icon-size="simplifiedMainMenu ? 25 : undefined"
-                  :icon-class="
-                    interfaceStore.isOnSmallScreen
-                      ? 'scale-[90%] mt-[15px] -mr-[4px] md:ml-[1px] md:-mb-[2px]'
-                      : 'scale-[95%] -mb-[2px] lg:-mr-[1px] -mr-[2px] xl:-mb-[2px]'
-                  "
-                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  variant="uncontained"
                   :tooltip="simplifiedMainMenu ? 'About' : undefined"
                   :button-class="!simplifiedMainMenu ? '-mt-[5px]' : undefined"
                   :width="buttonSize"
                   :selected="showConfigurationMenu"
                   @click="openAboutDialog"
-                />
+                  ><img v-if="!simplifiedMainMenu" :src="InfoIcon" alt="Info Icon" />
+                </GlassButton>
               </div>
             </v-window-item>
             <v-window-item :value="2" class="h-full w-full">
@@ -189,9 +175,10 @@
                     }
                   "
                   @click="toggleConfigComponent(menuitem.component)"
-                  ><template #content
-                    ><div v-if="currentConfigMenuComponent === menuitem.component" class="arrow-left"></div></template
-                ></GlassButton>
+                  ><template #content>
+                    <div v-if="currentConfigMenuComponent === menuitem.component" class="arrow-left"></div
+                  ></template>
+                </GlassButton>
                 <div class="flex flex-col justify-center align-center">
                   <v-divider width="70%" class="mb-3" />
                   <GlassButton
@@ -325,6 +312,13 @@ import { onClickOutside, useDebounceFn, useFullscreen, useStorage, useWindowSize
 import { computed, markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
+import EditModeIcon from '@/assets/icons/edit-mode.svg'
+import ExitFullScreenIcon from '@/assets/icons/exit-full-screen.svg'
+import FlightIcon from '@/assets/icons/flight.svg'
+import FullScreenIcon from '@/assets/icons/full-screen.svg'
+import InfoIcon from '@/assets/icons/info.svg'
+import MissionPlanningIcon from '@/assets/icons/mission-planning.svg'
+import SettingsIcon from '@/assets/icons/settings.svg'
 import GlassModal from '@/components/GlassModal.vue'
 import Tutorial from '@/components/Tutorial.vue'
 import UpdateNotification from '@/components/UpdateNotification.vue'
@@ -618,14 +612,14 @@ watch(
 )
 
 const buttonSize = computed(() => {
-  if (interfaceStore.is2xl) return 60
-  if (interfaceStore.isXl) return 55
-  if (interfaceStore.isLg) return 50
-  if (interfaceStore.isMd) return 45
-  if (interfaceStore.isSm && windowHeight.value > 700) return 50
-  if (interfaceStore.isSm && windowHeight.value < 700) return 40
-  if (interfaceStore.isXs && windowHeight.value >= 700) return 50
-  return 40
+  if (interfaceStore.is2xl) return 72
+  if (interfaceStore.isXl) return 66
+  if (interfaceStore.isLg) return 60
+  if (interfaceStore.isMd) return 54
+  if (interfaceStore.isSm && windowHeight.value > 700) return 60
+  if (interfaceStore.isSm && windowHeight.value < 700) return 48
+  if (interfaceStore.isXs && windowHeight.value >= 700) return 60
+  return 48
 })
 
 const menuLabelSize = computed(() => {

diff --git a/src/assets/icons/edit-mode.svg b/src/assets/icons/edit-mode.svg
diff --git a/src/assets/icons/exit-full-screen.svg b/src/assets/icons/exit-full-screen.svg
diff --git a/src/assets/icons/flight.svg b/src/assets/icons/flight.svg
diff --git a/src/assets/icons/full-screen.svg b/src/assets/icons/full-screen.svg
diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg
diff --git a/src/assets/icons/mission-planning.svg b/src/assets/icons/mission-planning.svg
diff --git a/src/assets/icons/settings.svg b/src/assets/icons/settings.svg
diff --git a/src/assets/icons/tools.svg b/src/assets/icons/tools.svg