UPD: Navbar buttons

2024-02-05 16:14:24 +01:00
parent ab6d7ea893
commit fffa22afea
3 changed files with 47 additions and 23 deletions
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="flex app-titlebar">
+    <Menubar class="w-full h-14 rounded-none bg-zinc-900 justify-between text-muted-foreground font-mono px-3">
+      <div v-if="isMacOS" :style="{width: 80 / zoomFactor + 'px'}" />
+      <div class="flex items-center">
+        <h1
+          class="text-2xl min-w-32 app-titlebar-button text-zinc-100"
+          @click="$refs.zerooneTitle.scramble(1,100,0); $refs.zerooneSubtitle.scramble(1,75,30)">
+          <ScrambleText
+            ref="zerooneTitle"
+            text=" ZERO/ONE" scramble-on-mount :scramble-amount="1" :fill-interval="100"
+            :replace-interval="100"
+          />
+        </h1>
+        <h2 class="text-sm min-w-[188px] text-muted-foreground font-mono">
+          ::
+          <ScrambleText
+            ref="zerooneSubtitle"
+            text="Haptics Configurator" scramble-on-mount :scramble-amount="1" :fill-interval="35"
+            :replace-interval="40" />
+        </h2>
+      </div>
+      <div class="h-8 px-2">
+        <Separator orientation="vertical" />
+      </div>
+      <div class="flex gap-2">
+        <MenubarMenu>
+          <MenubarTrigger v-t="'navbar.device.title'" class="app-titlebar-button" />
+          <MenubarContent>
+            <!-- TODO: Switch keyboard shortcut icons based on platform -->
+            <MenubarItem>
+              {{ $t('navbar.device.disconnect') }}
+              <MenubarShortcut>⌘D</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>{{ $t('navbar.device.export') }}
+              <MenubarShortcut>⌘E</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>{{ $t('navbar.device.import') }}
+              <MenubarShortcut>⌘I</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>{{ $t('navbar.device.quit') }}
+              <MenubarShortcut>⌘Q</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+        <MenubarButton class="app-titlebar-button" @click="electron.openExternal('https://discord.gg/jgRd77YN5T')">
+          Community
+        </MenubarButton>
+        <MenubarMenu>
+          <MenubarTrigger class="app-titlebar-button">Help</MenubarTrigger>
+          <MenubarContent>
+            <!-- TODO: Switch keyboard shortcut icons based on platform -->
+            <MenubarItem>
+              {{ $t('navbar.device.disconnect') }}
+              <MenubarShortcut>⌘D</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>{{ $t('navbar.device.export') }}
+              <MenubarShortcut>⌘E</MenubarShortcut>
+            </MenubarItem>
+            <MenubarItem>{{ $t('navbar.device.import') }}
+              <MenubarShortcut>⌘I</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem>{{ $t('navbar.device.quit') }}
+              <MenubarShortcut>⌘Q</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+        </MenubarMenu>
+      </div>
+      <div class="grow" />
+      <MenubarButton
+        class="app-titlebar-button border-2"
+        @click="store.setConnected(!store.connected)">
+        {{ store.connected ? 'Disconnect' : 'Connect' }}
+      </MenubarButton>
+      <div v-if="!isMacOS" class="flex h-full">
+        <button
+          v-if="minimizable"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
+          @click="electron.minimizeWindow">
+          <Minus class="h-5 w-5" />
+        </button>
+        <button
+          v-if="maximizable"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
+          @click="electron.toggleMaximizeWindow">
+          <Square class="h-3.5 w-3.5 mr-0.5" />
+        </button>
+        <button
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
+          @click="electron.closeWindow">
+          <X class="h-5 w-5 mr-0.5" />
+        </button>
+      </div>
+    </Menubar>
+  </div>
+</template>
+<script setup>
+import {
+  Menubar,
+  MenubarContent,
+  MenubarItem,
+  MenubarMenu,
+  MenubarSeparator,
+  MenubarShortcut,
+  MenubarTrigger,
+} from '@/components/ui/menubar'
+import ScrambleText from '@/components/common/ScrambleText.vue'
+import { Minus, Square, X } from 'lucide-vue-next'
+import { onMounted, ref } from 'vue'
+import { Separator } from '@/components/ui/separator'
+import { useStore } from '@/store'
+import MenubarButton from '@/components/navbar/MenubarButton.vue'
+
+const store = useStore()
+
+const minimizable = ref(true)
+const maximizable = ref(false)
+
+const { electron } = window
+
+const isMacOS = electron.platform === 'darwin'
+const zoomFactor = ref(1)
+
+onMounted(() => {
+  window.addEventListener('resize', () => {
+    zoomFactor.value = window.outerWidth / window.innerWidth
+  })
+})
+
+</script>
+<style scoped>
+.app-titlebar {
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
+}
+
+.app-titlebar-button {
+  -webkit-app-region: no-drag;
+}
+</style>