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/App.vue
+++ b/src/App.vue
@@ -22,11 +22,7 @@ store.fetchProfiles()
    <div class="flex-1 min-h-0 flex flex-row">
      <ProfileManager
        class="basis-1/3 min-w-80 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
-      <div class="basis-1/3 flex-1 flex flex-col border-solid border-0 border-r">
-        <DevicePreview class="flex-col flex flex-none" />
-        <ConfigSection class="flex-none" :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt" />
-        <ConfigSelect v-model="currentConfigPage" class="overflow-y-auto flex-1" />
-      </div>
+      <DevicePreview class="basis-1/3 flex-col flex border-solid border-0 border-r" />
      <ConfigPane
        class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
        :page="currentConfigPage" />
--- 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
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -5,7 +5,7 @@
  "config_options": {
    "dev_playground": {
      "subtitle": "UI Designer's Paradise",
-      "title": "Dev Playground"
+      "title": "Debug"
    },
    "feedback_designer": {
      "auditory_response": {
@@ -27,12 +27,12 @@
        "title": "Haptic Response"
      },
      "subtitle": "Adjust haptic and auditory feedback",
-      "title": "Feedback Designer",
+      "title": "Feedback",
      "total_positions": "Total Positions"
    },
    "gui_designer": {
      "subtitle": "Adjust graphic interface parameters",
-      "title": "GUI Designer"
+      "title": "Display"
    },
    "light_designer": {
      "led_colors": "LED Colors",
@@ -42,7 +42,7 @@
      "primary_color": "Primary",
      "secondary_color": "Secondary",
      "subtitle": "Adjust behavior of LED Ring. Turn On/Off.",
-      "title": "Light Designer"
+      "title": "Lighting"
    },
    "mapping_configuration": {
      "key_mapping": {
@@ -60,7 +60,7 @@
        "title": "Knob Mapping"
      },
      "subtitle": "Assign function to Knob and Keys",
-      "title": "Mapping Configuration"
+      "title": "Mapping"
    },
    "profile_settings": {
      "connection_type": {
@@ -81,7 +81,7 @@
        "title": "Profile Properties"
      },
      "subtitle": "Operation mode and Profile Naming",
-      "title": "Profile Settings"
+      "title": "Profile"
    },
    "title": "Configuration Options"
  },
@@ -98,13 +98,13 @@
    }
  },
  "preview": {
-    "title": "Live Preview"
+    "title": "Preview"
  },
  "profiles": {
    "filter_placeholder": "Filter Profiles...",
    "name_placeholder": "Profile name",
    "not_found": "No profiles found ;-;",
    "subtitle": "Customize to your heart's content",
-    "title": "Device Profiles"
+    "title": "Profiles"
  }
 }