UPD: Fancy layout changes

2024-01-31 01:04:57 +01:00
parent fdca09cc58
commit 3b46d00a17
6 changed files with 93 additions and 80 deletions
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,63 +1,75 @@
 <template>
  <div class="flex app-titlebar">
-    <Menubar class="w-full h-20 rounded-none bg-zinc-950">
-      <div
-        class="p-3 min-w-48 app-titlebar-button"
-        @click="$refs.zerooneSubtitle.scramble(1,100,0); $refs.zerooneTitle.scramble(1,100,0)">
-        <h1 class="text-3xl">
+    <Menubar class="w-full h-14 rounded-none bg-zinc-900 justify-between text-muted-foreground font-mono">
+      <div class="flex items-center">
+        <h1
+          class="text-2xl min-w-32 app-titlebar-button ml-3 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>
-        <p class="text-xs text-muted-foreground">
+        <h2 class="text-sm min-w-48 text-muted-foreground font-mono">
+          ::
          <ScrambleText
            ref="zerooneSubtitle"
            text="Haptics Configurator" scramble-on-mount :scramble-amount="1" :fill-interval="35"
            :replace-interval="40" />
-        </p>
+        </h2>
      </div>
-      <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>
-      <span class="pl-14 inline-block">STATUS: <b class="font-heading text-lg">CONNECTED</b></span>
-      <span class="text-muted-foreground px-5 inline-block">///</span>
-      <p>SYNCING...</p>
-      <div class="absolute top-0 right-0 flex h-9 w-32">
+      <div class="flex gap-2">
+        <MenubarMenu>
+          <MenubarTrigger v-t="'navbar.device.title'" class="app-titlebar-button text-muted-foreground" />
+          <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>
+        <MenubarMenu>
+          <MenubarTrigger class="app-titlebar-button text-muted-foreground">About</MenubarTrigger>
+        </MenubarMenu>
+        <MenubarMenu>
+          <MenubarTrigger class="app-titlebar-button text-muted-foreground">Help</MenubarTrigger>
+        </MenubarMenu>
+      </div>
+      <div class="text-sm">
+        Status: <span class="text-zinc-200">Connected :: Syncing...</span>
+      </div>
+      <Button variant="outline" class="app-titlebar-button">
+        Disconnect
+      </Button>
+      <div class="flex h-full w-32">
        <button
-          class="grow flex justify-center items-center app-titlebar-button hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
          @click="oi('Not implemented ¯\\_(ツ)_/¯')">
          <Minus class="h-5 w-5 mr-0.5" />
        </button>
        <button
-          class="grow flex justify-center items-center app-titlebar-button hover:bg-opacity-100 bg-zinc-900 text-zinc-100 bg-opacity-50"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
          @click="oi('Not implemented ¯\\_(ツ)_/¯')">
-          <Square class="h-4 w-4 mr-0.5" />
+          <Square class="h-3.5 w-3.5 mr-0.5" />
        </button>
        <button
-          class="grow flex justify-center items-center app-titlebar-button bg-orange-950 hover:bg-orange-900"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
          @click="oi('Not implemented ¯\\_(ツ)_/¯')">
          <X class="h-5 w-5 mr-0.5" />
        </button>
@@ -77,6 +89,7 @@ import {
 } from '@/components/ui/menubar/index.js'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { X, Square, Minus } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'

 const oi = (msg) => alert(msg)

--- a/src/components/config/ConfigPane.vue
+++ b/src/components/config/ConfigPane.vue
@@ -1,18 +1,16 @@
 <template>
  <div>
-    <div
-      class="flex-none px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40">
-      <div>
-        <h1 class="text-lg">
-          <ScrambleText class="align-middle" :text="$t(`config_options.${page}.title`)" />
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          <ScrambleText class="align-middle" :text="$t(`config_options.${page}.subtitle`)" :replace-interval="5" />
-        </p>
-      </div>
+    <div class="flex font-heading">
+      <button
+        v-for="(option, key) in configPageOptions" :key="key"
+        class="flex-1 p-4 items-center text-center"
+        :class="currentPage!==key ? 'hover:bg-zinc-800 text-zinc-200' : 'text-black bg-zinc-200 hover:bg-zinc-100'"
+        @click="currentPage = key">
+        {{ $t(option.titleKey) }}
+      </button>
    </div>
    <div class="grow overflow-y-auto">
-      <component :is="configPages[page]" />
+      <component :is="configPageOptions[currentPage].component" />
    </div>
  </div>
 </template>
@@ -21,21 +19,30 @@ import LEDsConfig from '@/components/config/pages/LEDsConfig.vue'
 import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
 import MappingConfig from '@/components/config/pages/MappingConfig.vue'
 import HapticConfig from '@/components/config/pages/HapticConfig.vue'
-import ScrambleText from '@/components/effects/ScrambleText.vue'
-import DevPlayground from '@/components/config/pages/DevPlayground.vue'

 defineProps({
-  page: {
+  currentPage: {
    type: String,
-    default: 'profile_settings',
+    default: 'profileConfig',
  },
 })

-const configPages = {
-  profile_settings: ProfileConfig,
-  feedback_designer: HapticConfig,
-  mapping_configuration: MappingConfig,
-  light_designer: LEDsConfig,
-  dev_playground: DevPlayground,
+const configPageOptions = {
+  profileConfig: {
+    titleKey: 'config_options.profile_settings.title',
+    component: ProfileConfig,
+  },
+  hapticConfig: {
+    titleKey: 'config_options.feedback_designer.title',
+    component: HapticConfig,
+  },
+  mappingConfig: {
+    titleKey: 'config_options.mapping_configuration.title',
+    component: MappingConfig,
+  },
+  ledsConfig: {
+    titleKey: 'config_options.light_designer.title',
+    component: LEDsConfig,
+  },
 }
 </script>
--- a/src/components/config/ConfigSelect.vue
+++ b/src/components/config/ConfigSelect.vue
@@ -15,9 +15,6 @@
            v-t="config.badgeKey"
            class="font-mono ml-2 rounded-full h-4 align-middle bg-zinc-900 text-muted-foreground" />
        </h1>
-        <p class="text-xs" :class="current_tab===config.id?'text-black' : 'text-muted-foreground'">
-          {{ $t(`config_options.${config.id}.subtitle`) }}
-        </p>
      </div>
      <ChevronRight v-if="current_tab === config.id" class="float-right" />
    </div>
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -1,9 +1,9 @@
 <template>
  <div>
-    <div class="px-4 pt-5 pb-3">
-      <h1 class="text-lg">
-        {{ $t('preview.title') }}
-      </h1>
+    <div class="flex px-4 pt-5 pb-3 items-baseline font-heading">
+      <span class="text-lg">{{ $t('preview.title') }}</span>
+      &nbsp;
+      <span class="text-zinc-600">(Nano_D++)</span>
    </div>
    <div class="flex justify-center">
      <div