UPD: Big layout changes.

App now looks like an app.
2024-01-29 17:47:12 +01:00
parent 351f1435af
commit 82d9a8132f
9 changed files with 162 additions and 34 deletions
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,18 +12,17 @@ const currentConfigPage = ref('profile_settings')

 </script>
 <template>
-  <main class="select-none">
-    <Navbar />
-    <div class="grid grid-cols-11">
-      <ProfileManager class="col-span-3 border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
-      <div class="col-span-4 border-solid border-0 border-r">
-        <DevicePreview />
-        <ConfigSection :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt">
-          <ConfigSelect v-model="currentConfigPage" />
-        </ConfigSection>
+  <main class="select-none w-screen h-screen flex flex-col">
+    <Navbar class="flex-none" />
+    <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>
      <ConfigPane
-        class="col-span-4 border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
+        class="flex-1 basis-1/3 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
        :page="currentConfigPage" />
    </div>
  </main>
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -4,6 +4,25 @@
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
-        margin: 0;
    }
+}
+
+body {
+    overflow: hidden;
+    --scrollbar-foreground: rgb(39 39 42);
+    --scrollbar-background: black;
+    scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
+}
+
+::-webkit-scrollbar {
+    width: 0.5em;
+    height: 0.5em;
+}
+
+::-webkit-scrollbar-thumb { /* Foreground */
+    background: var(--scrollbar-foreground);
+}
+
+::-webkit-scrollbar-track { /* Background */
+    background: var(--scrollbar-background);
 }
--- a/src/components/config/ConfigPane.vue
+++ b/src/components/config/ConfigPane.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
    <div
-      class="px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40">
+      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`)" />
@@ -11,7 +11,9 @@
        </p>
      </div>
    </div>
-    <component :is="configPages[page]" />
+    <div class="overflow-y-auto">
+      <component :is="configPages[page]" />
+    </div>
  </div>
 </template>
 <script setup>
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -1,13 +1,13 @@
 <template>
  <div>
-    <div class="px-4 py-5">
+    <div class="px-4 pt-5 pb-3">
      <h1 class="text-lg">
        {{ $t('preview.title') }}
      </h1>
    </div>
    <div class="flex justify-center">
      <div
-        class="flex bg-cover m-6 w-full aspect-square"
+        class="flex bg-cover mb-6 w-72 aspect-square"
        style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
        <div class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
          <div class="self-center w-8 mb-1 opacity-50">
--- a/src/components/profile/ProfileButton.vue
+++ b/src/components/profile/ProfileButton.vue
@@ -1,6 +1,6 @@
 <template>
  <div
-    class="h-12 flex profile-row"
+    class="h-12 flex"
    @mouseenter="hover=true" @mouseleave="hover=false">
    <form
      v-if="nameEditable && editing"
--- a/src/components/profile/ProfileManager.vue
+++ b/src/components/profile/ProfileManager.vue
@@ -1,18 +1,20 @@
 <template>
  <div>
-    <div
-      class="w-full px-4 h-20 flex items-center">
-      <div>
-        <h1 class="text-lg">
-          {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles
-          }})</span>
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          {{ $t(`profiles.subtitle`) }}
-        </p>
+    <div>
+      <div
+        class="w-full px-4 h-20 flex items-center">
+        <div>
+          <h1 class="text-lg">
+            {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles
+            }})</span>
+          </h1>
+          <p class="text-xs text-muted-foreground">
+            {{ $t(`profiles.subtitle`) }}
+          </p>
+        </div>
      </div>
+      <Separator />
    </div>
-    <Separator />
    <div>
      <div class="flex w-full h-12 items-center">
        <label for="filter" class="flex h-full items-center cursor-text">
@@ -22,13 +24,15 @@
          id="filter"
          v-model="filter"
          :placeholder="$t('profiles.filter_placeholder')"
-          class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
+          class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0">
        <button
          class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
          <Plus />
        </button>
      </div>
      <Separator />
+    </div>
+    <div class="overflow-y-auto">
      <div v-if="filteredProfiles.length === 0">
        <div class="flex flex-col items-center justify-center h-32">
          <ScrambleText
@@ -36,7 +40,7 @@
            :text="$t('profiles.not_found')" />
        </div>
      </div>
-      <div>
+      <div v-else>
        <Collapsible
          v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
          v-model:open="collapse[profileTag]"
--- a/src/data/nanoConfig.json
+++ b/src/data/nanoConfig.json
@@ -314,6 +314,110 @@
      "guiConfig": {
        "guiEnable": true
      }
+    },
+    {
+      "id": "1337",
+      "name": "Brought to you by...",
+      "profileTag": "Custom",
+      "profileConfig": {
+        "profileDesc": "Hwhawdhuawhdaddjwidjaiwdiawjdijaidjiawjdj",
+        "profileType": 1,
+        "showDesc": true
+      },
+      "feedbackConfig": {
+        "feedbackEn": true,
+        "feedbackType": "fd",
+        "multiRev": false,
+        "feedbackStrength": 1,
+        "endstopStrength": 1,
+        "outputRamp": 10000,
+        "pos": 140,
+        "secondaryHaptic": true,
+        "secondaryVol": 5
+      },
+      "mappingConfig": {
+        "internalMacro": false,
+        "knobMap": "arrL",
+        "switchA": "shift",
+        "switchB": "ctrl",
+        "switchC": "alt",
+        "switchD": "esc"
+      },
+      "ledConfig": {
+        "ledEnable": true,
+        "ledBrightness": 100,
+        "ledMode": 1,
+        "primary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "secondary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "pointer": {
+          "h": 255,
+          "s": 255,
+          "v": 10
+        }
+      },
+      "guiConfig": {
+        "guiEnable": true
+      }
+    },
+    {
+      "id": "0420",
+      "name": "Overflow Testing Inc.",
+      "profileTag": "Custom",
+      "profileConfig": {
+        "profileDesc": "whaduwhawhdwadhwaudhuwahdu huwadhuawhduhwadhuawhu dwaijdwajiawjdijawidiwajidawidiawjddhawgdjzgesfgkhsfsza",
+        "profileType": 1,
+        "showDesc": true
+      },
+      "feedbackConfig": {
+        "feedbackEn": true,
+        "feedbackType": "fd",
+        "multiRev": false,
+        "feedbackStrength": 1,
+        "endstopStrength": 1,
+        "outputRamp": 10000,
+        "pos": 140,
+        "secondaryHaptic": true,
+        "secondaryVol": 5
+      },
+      "mappingConfig": {
+        "internalMacro": false,
+        "knobMap": "arrL",
+        "switchA": "shift",
+        "switchB": "ctrl",
+        "switchC": "alt",
+        "switchD": "esc"
+      },
+      "ledConfig": {
+        "ledEnable": true,
+        "ledBrightness": 100,
+        "ledMode": 1,
+        "primary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "secondary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "pointer": {
+          "h": 255,
+          "s": 255,
+          "v": 10
+        }
+      },
+      "guiConfig": {
+        "guiEnable": true
+      }
    }
  ]
 }
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -22,7 +22,7 @@
        "output_ramp_dampening": "Output Ramp Dampening",
        "title": "Haptic Response"
      },
-      "subtitle": "Feedback mode selector and parameter adjustment",
+      "subtitle": "Adjust haptic and auditory feedback",
      "title": "Feedback Designer",
      "total_positions": "Total Positions"
    },
@@ -98,9 +98,9 @@
  },
  "profiles": {
    "filter_placeholder": "Filter Profiles...",
+    "name_placeholder": "Profile name",
    "not_found": "No profiles found ;-;",
    "subtitle": "Customize to your heart's content",
-    "title": "Device Profiles",
-    "name_placeholder": "Profile name"
+    "title": "Device Profiles"
  }
 }
--- a/src/main.js
+++ b/src/main.js
@@ -14,8 +14,8 @@ if (ess) {
 const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
-    width: 1100,
-    height: 912,
+    width: 1024,
+    height: 768,
    icon: path.join(__dirname, `/assets/favicon.png`),
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),