[project-redisign-help-dialog] ヘルプ画面のナビゲーションバーのリデザイン

src/components/base/BaseListItem.vue

@@ -0,0 +1,73 @@
+<template>
+  <button
+    class="listitem"
+    :class="selected && 'selected'"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <div class="indicator"></div>
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  selected: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/mixin' as mixin;
+@use '@/styles/new-colors' as colors;
+
+.listitem {
+  color: colors.$display;
+  cursor: pointer;
+  position: relative;
+  height: vars.$size-listitem;
+  display: flex;
+  align-items: center;
+  background-color: colors.$clear;
+  border: none;
+  padding: 0 vars.$padding-2;
+  border-radius: vars.$radius-1;
+  transition: background-color vars.$transition-duration;
+
+  &:not(.selected):hover {
+    background-color: colors.$clear-hovered;
+  }
+
+  &:not(.selected):active {
+    background-color: colors.$clear-pressed;
+  }
+
+  &:focus-visible {
+    @include mixin.on-focus;
+  }
+}
+
+.indicator {
+  position: absolute;
+  left: 6px;
+  height: 0;
+  width: 4px;
+  border-radius: 2px;
+  background-color: colors.$primary;
+  opacity: 0;
+  transition-duration: vars.$transition-duration;
+  transition-property: height opacity;
+}
+
+.selected {
+  background-color: colors.$selected;
+
+  .indicator {
+    opacity: 1;
+    height: 16px;
+  }
+}
+</style>

src/components/help/HelpDialog.vue

@@ -7,85 +7,78 @@
     class="help-dialog transparent-backdrop"
   >
     <q-layout container view="hHh Lpr lff">
-      <q-drawer
-        bordered
-        show-if-above
-        class="bg-background"
-        :model-value="true"
-        :width="250"
-        :breakpoint="0"
-      >
-        <div class="column full-height">
-          <q-list>
-            <template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
-              <q-item
-                v-if="page.type === 'item'"
-                v-ripple
-                clickable
-                active-class="selected-item"
-                :active="selectedPageIndex === pageIndex"
-                @click="selectedPageIndex = pageIndex"
-              >
-                <q-item-section> {{ page.name }} </q-item-section>
-              </q-item>
-              <template v-else-if="page.type === 'separator'">
-                <q-separator />
-                <q-item-label header>{{ page.name }}</q-item-label>
+      <div class="grid">
+        <div class="list-wrapper">
+          <BaseScrollArea>
+            <div class="list-inner">
+              <template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
+                <BaseListItem
+                  v-if="page.type === 'item'"
+                  :selected="selectedPageIndex === pageIndex"
+                  @click="selectedPageIndex = pageIndex"
+                >
+                  {{ page.name }}
+                </BaseListItem>
+                <div v-else-if="page.type === 'separator'" class="list-label">
+                  {{ page.name }}
+                </div>
               </template>
-            </template>
-          </q-list>
+            </div>
+          </BaseScrollArea>
         </div>
-      </q-drawer>
 
-      <q-page-container>
-        <q-page>
-          <q-tab-panels v-model="selectedPageIndex">
-            <q-tab-panel
-              v-for="(page, pageIndex) of pagedata"
-              :key="pageIndex"
-              :name="pageIndex"
-              class="q-pa-none"
-            >
-              <div v-if="page.type === 'item'" class="root">
-                <q-header class="q-pa-sm">
-                  <q-toolbar>
-                    <q-toolbar-title class="text-display">
-                      ヘルプ / {{ page.parent ? page.parent + " / " : ""
-                      }}{{ page.name }}
-                    </q-toolbar-title>
-                    <q-btn
-                      v-if="page.shouldShowOpenLogDirectoryButton"
-                      unelevated
-                      color="toolbar-button"
-                      text-color="toolbar-button-display"
-                      class="text-no-wrap text-bold q-mr-sm"
-                      @click="openLogDirectory"
-                    >
-                      ログフォルダを開く
-                    </q-btn>
-                    <!-- close button -->
-                    <q-btn
-                      round
-                      flat
-                      icon="close"
-                      color="display"
-                      aria-label="ヘルプを閉じる"
-                      @click="modelValueComputed = false"
-                    />
-                  </q-toolbar>
-                </q-header>
-                <component :is="page.component" v-bind="page.props" />
-              </div>
-            </q-tab-panel>
-          </q-tab-panels>
-        </q-page>
-      </q-page-container>
+        <q-page-container>
+          <q-page>
+            <q-tab-panels v-model="selectedPageIndex">
+              <q-tab-panel
+                v-for="(page, pageIndex) of pagedata"
+                :key="pageIndex"
+                :name="pageIndex"
+                class="q-pa-none"
+              >
+                <div v-if="page.type === 'item'" class="root">
+                  <q-header class="q-pa-sm">
+                    <q-toolbar>
+                      <q-toolbar-title class="text-display">
+                        ヘルプ / {{ page.parent ? page.parent + " / " : ""
+                        }}{{ page.name }}
+                      </q-toolbar-title>
+                      <q-btn
+                        v-if="page.shouldShowOpenLogDirectoryButton"
+                        unelevated
+                        color="toolbar-button"
+                        text-color="toolbar-button-display"
+                        class="text-no-wrap text-bold q-mr-sm"
+                        @click="openLogDirectory"
+                      >
+                        ログフォルダを開く
+                      </q-btn>
+                      <!-- close button -->
+                      <q-btn
+                        round
+                        flat
+                        icon="close"
+                        color="display"
+                        aria-label="ヘルプを閉じる"
+                        @click="modelValueComputed = false"
+                      />
+                    </q-toolbar>
+                  </q-header>
+                  <component :is="page.component" v-bind="page.props" />
+                </div>
+              </q-tab-panel>
+            </q-tab-panels>
+          </q-page>
+        </q-page-container>
+      </div>
     </q-layout>
   </q-dialog>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
+import BaseScrollArea from "../base/BaseScrollArea.vue";
+import BaseListItem from "../base/BaseListItem.vue";
 import MarkdownView from "../template/HelpMarkdownViewSection.vue";
 import OssLicense from "../template/HelpOssLicenseSection.vue";
 import UpdateInfo from "../template/HelpUpdateInfoSection.vue";
@@ -277,7 +270,41 @@ const openLogDirectory = window.electron.openLogDirectory;
 </script>
 
 <style scoped lang="scss">
-@use '@/styles/colors' as colors;
+@use '@/styles/new-colors' as colors;
+@use '@/styles/variables' as vars;
+
+.grid {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  backdrop-filter: blur(32px);
+
+  &::before {
+    content: "";
+    position: fixed;
+    inset: 0;
+    background-color: colors.$background;
+    opacity: 0.75;
+    z-index: -1;
+  }
+}
+
+// TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
+.list-wrapper {
+  margin-top: 66px;
+  height: calc(100vh - 90px);
+}
+
+.list-inner {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-2;
+}
+
+.list-label {
+  padding: 8px 16px;
+  padding-top: 16px;
+  color: colors.$display-sub;
+}
 
 .help-dialog .q-layout-container :deep(.absolute-full) {
   right: 0 !important;
@@ -289,12 +316,7 @@ const openLogDirectory = window.electron.openLogDirectory;
   }
 }
 
-.selected-item {
-  background-color: rgba(colors.$primary-rgb, 0.4);
-  color: colors.$display;
-}
-
-.q-item__label {
-  padding: 8px 16px;
+.q-tab-panels {
+  background: none;
 }
 </style>

src/components/template/HelpLibraryPolicySection.vue

@@ -134,11 +134,11 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$background;
 }
 
 .container-detail {
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {

src/components/template/HelpMarkdownViewSection.vue

@@ -40,6 +40,7 @@ onMounted(async () => {
   // height: 100%;
   height: calc(100vh - 90px);
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {

src/components/template/HelpOssLicenseSection.vue

@@ -64,11 +64,11 @@ const selectLicenseIndex = (index: number | undefined) => {
   // TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
   // height: 100%;
   height: calc(100vh - 90px);
-  background-color: colors.$background;
 }
 
 .container-detail {
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {

src/components/template/HelpUpdateInfoSection.vue

@@ -66,6 +66,7 @@ const props =
   // height: 100%;
   height: calc(100vh - 90px);
   background-color: colors.$surface;
+  border-left: 1px solid colors.$border;
 }
 
 .inner {

src/styles/new-colors.scss

@@ -14,7 +14,7 @@ $primitive-red: #d04756;
 
   --newcolor-display: #{$primitive-black, 10%};
   --newcolor-display-oncolor: #{$primitive-black, 10%};
-  --newcolor-display-placeholder: #{rgba($primitive-black, 0.5)};
+  --newcolor-display-sub: #{rgba($primitive-black, 0.5)};
   --newcolor-display-link: #{$primitive-blue};
   --newcolor-display-warning: #{$primitive-red};
 
@@ -48,7 +48,7 @@ $primitive-red: #d04756;
 
   --newcolor-display: #{$primitive-white};
   --newcolor-display-oncolor: #{$primitive-black};
-  --newcolor-display-placeholder: #{rgba($primitive-white, 0.5)};
+  --newcolor-display-sub: #{rgba($primitive-white, 0.5)};
   --newcolor-display-link: #{lighten($primitive-blue, 25%)};
   --newcolor-display-warning: #{lighten($primitive-red, 25%)};
 
@@ -80,7 +80,7 @@ $selected: var(--newcolor-selected);
 
 $display: var(--newcolor-display);
 $display-oncolor: var(--newcolor-display-oncolor);
-$display-placeholder: var(--newcolor-display-placeholder);
+$display-sub: var(--newcolor-display-sub);
 $display-link: var(--newcolor-display-link);
 $display-warning: var(--newcolor-display-warning);