about: Create about page

src/App.vue

@@ -142,6 +142,23 @@
                     }
                   "
                 />
+                <GlassButton
+                  :label="simplifiedMainMenu ? '' : 'About'"
+                  :label-class="[menuLabelSize, '-mb-1']"
+                  icon="mdi-information-outline"
+                  :icon-size="simplifiedMainMenu ? 25 : undefined"
+                  :icon-class="
+                    interfaceStore.isOnSmallScreen
+                      ? 'scale-[100%] -mb-[1px] md:ml-[2px]'
+                      : 'scale-[95%] -mb-[2px] lg:-mr-[1px] -mr-[2px] xl:-mb-[2px]'
+                  "
+                  :variant="simplifiedMainMenu ? 'uncontained' : 'round'"
+                  :tooltip="simplifiedMainMenu ? 'About' : undefined"
+                  :button-class="!simplifiedMainMenu ? '-mt-[5px]' : undefined"
+                  :width="buttonSize"
+                  :selected="showConfigurationMenu"
+                  @click="openAboutDialog"
+                />
               </div>
             </v-window-item>
             <v-window-item :value="2" class="h-full w-full">
@@ -279,6 +296,7 @@
       </div>
     </v-main>
   </v-app>
+  <About v-if="showAboutDialog" />
 </template>
 
 <script setup lang="ts">
@@ -294,6 +312,7 @@ import {
   unregisterActionCallback,
 } from '@/libs/joystick/protocols/cockpit-actions'
 
+import About from './components/About.vue'
 import AltitudeSlider from './components/AltitudeSlider.vue'
 import EditMenu from './components/EditMenu.vue'
 import GlassButton from './components/GlassButton.vue'
@@ -318,6 +337,7 @@ const widgetStore = useWidgetManagerStore()
 const vehicleStore = useMainVehicleStore()
 const interfaceStore = useAppInterfaceStore()
 
+const showAboutDialog = ref(false)
 const showConfigurationMenu = ref(false)
 type ConfigComponent = DefineComponent<Record<string, never>, Record<string, never>, unknown> | null
 const currentConfigMenuComponent = ref<ConfigComponent>(null)
@@ -542,6 +562,11 @@ const glassMenuStyles = computed(() => ({
   backdropFilter: `blur(${interfaceStore.UIGlassEffect.blur}px)`,
 }))
 
+const openAboutDialog = (): void => {
+  showAboutDialog.value = true
+  closeMainMenu()
+}
+
 const route = useRoute()
 const routerSection = ref()
 

src/components/About.vue

@@ -0,0 +1,65 @@
+<template>
+  <teleport to="body">
+    <InteractionDialog :show-dialog="showDialog" max-width="740" variant="text-only">
+      <template #content>
+        <div class="flex flex-col justify-center align-center w-full h-full">
+          <img :src="CockpitLogo" alt="Cockpit Logo" class="w-64 my-4" />
+          <div class="w-[90%] flex justify-between my-8 py-3">
+            <div class="w-[45%] flex flex-col text-start">
+              <p class="mb-1">
+                Cockpit is an intuitive and customizable cross-platform ground control station for remote vehicles of
+                all types.
+              </p>
+              <p class="my-3">It was created by Blue Robotics and is entirely open-source.</p>
+              <p class="mt-1">
+                It currently supports Ardupilot-based vehicles, but has plans to support any generic vehicle, be it
+                communicating MAVLink or not.
+              </p>
+            </div>
+            <div class="w-[45%] flex flex-col justify-end text-end">
+              <p class="mb-1">Version 1.0.0</p>
+              <p class="my-3">Created by Blue Robotics</p>
+              <p class="mt-1">Licensed under AGPL-3.0-only or LicenseRef-Cockpit-Custom</p>
+            </div>
+          </div>
+          <div class="mb-5 flex justify-center align-center">
+            <v-btn
+              class="mx-3"
+              variant="text"
+              icon="mdi-github"
+              size="xs"
+              target="_blank"
+              href="https://github.com/bluerobotics/cockpit"
+            />
+            <v-btn
+              class="mx-3"
+              variant="text"
+              icon="mdi-web"
+              size="xs"
+              target="_blank"
+              href="https://bluerobotics.com"
+            />
+            <v-btn
+              class="mx-3"
+              variant="text"
+              icon="mdi-file-document-outline"
+              size="xs"
+              target="_blank"
+              href="https://docs.bluerobotics.com/ardusub-zola/software/control-station/Cockpit-1.0/overview"
+            />
+          </div>
+        </div>
+      </template>
+      <template #actions></template>
+    </InteractionDialog>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import CockpitLogo from '@/assets/cockpit-logo.png'
+import InteractionDialog from '@/components/InteractionDialog.vue'
+
+const showDialog = ref(true)
+</script>