ヘルプ画面のライセンス情報セクションのリデザイン

src/components/base/BaseButton.vue

@@ -0,0 +1,86 @@
+<template>
+  <button
+    class="button"
+    :class="variant ? variant : 'default'"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <q-icon v-if="icon" :name="icon" size="sm" />
+    {{ label }}
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  icon?: string;
+  variant?: "default" | "primary" | "danger";
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+
+.button {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: vars.$size-control;
+  border-radius: vars.$radius-control;
+  padding: 0 vars.$padding-button;
+  gap: vars.$gap-control;
+  border: 1px solid;
+  transition: background-color vars.$transition-duration;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+
+  &:active:not(:disabled) {
+    box-shadow: 0 0 0 transparent;
+  }
+}
+
+.default {
+  color: #222;
+  background-color: #fff;
+  border-color: #0002;
+
+  &:hover:not(:disabled) {
+    background-color: #f4f5f4;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #ebeceb;
+  }
+}
+
+.primary {
+  color: #fff;
+  border-color: #0002;
+  background-color: #a5d4ad;
+
+  &:hover:not(:disabled) {
+    background-color: #97cfa1;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #86c291;
+  }
+}
+
+.danger {
+  color: #d04756;
+  border-color: #d04756;
+  background-color: #fff;
+
+  &:hover:not(:disabled) {
+    background-color: #ffe0e0;
+  }
+
+  &:active:not(:disabled) {
+    background-color: #ffc1c1;
+  }
+}
+</style>

src/components/base/BaseRowCard.vue

@@ -0,0 +1,64 @@
+<template>
+  <button
+    class="row-card"
+    :class="{ clickable: clickable }"
+    @click="(payload) => $emit('click', payload)"
+  >
+    <div class="text">
+      <div class="title">{{ title }}</div>
+      <div class="description">{{ description }}</div>
+    </div>
+    <div class="control">
+      <slot />
+    </div>
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string;
+  description?: string;
+  clickable: boolean;
+}>();
+
+defineEmits<{
+  (e: "click", payload: MouseEvent): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+
+.row-card {
+  display: flex;
+  text-align: unset;
+  align-items: center;
+  border: 1px solid #0002;
+  background-color: #fff;
+  border-radius: vars.$radius-container;
+  padding: vars.$padding-container;
+  gap: vars.$gap-container;
+  transition: background-color vars.$transition-duration;
+}
+
+.clickable:not(:disabled) {
+  cursor: pointer;
+
+  &:hover {
+    background-color: #f4f5f4;
+  }
+
+  &:active {
+    background-color: #ebeceb;
+  }
+}
+
+.text {
+  flex-grow: 1;
+}
+
+.description {
+  font-size: 0.75rem;
+}
+</style>

src/components/help/HelpDialog.vue

@@ -86,10 +86,10 @@
 
 <script setup lang="ts">
 import { computed, ref, type Component } from "vue";
+import OssLicense from "../template/OssLicenseSection.vue";
 import HelpPolicy from "./HelpPolicy.vue";
 import LibraryPolicy from "./LibraryPolicy.vue";
 import HowToUse from "./HowToUse.vue";
-import OssLicense from "./OssLicense.vue";
 import UpdateInfo from "./UpdateInfo.vue";
 import OssCommunityInfo from "./OssCommunityInfo.vue";
 import QAndA from "./QAndA.vue";

src/components/template/OssLicenseSection.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="container">
+    <div v-if="detailIndex === undefined" class="inner inner-list">
+      <h1 class="headline">ライセンス情報</h1>
+      <div class="list">
+        <BaseRowCard
+          v-for="(license, index) in props.licenses"
+          :key="index"
+          :title="
+            license.name + (license.version ? ' | ' + license.version : '')
+          "
+          clickable
+          @click="selectLicenseIndex(index)"
+        >
+          <q-icon name="arrow_right" size="sm" />
+        </BaseRowCard>
+      </div>
+    </div>
+    <div v-else class="inner inner-detail">
+      <div>
+        <BaseButton
+          label="戻る"
+          icon="keyboard_arrow_left"
+          @click="selectLicenseIndex(undefined)"
+        />
+      </div>
+      <h1 class="headline">{{ licenses[detailIndex].name }}</h1>
+      <pre>{{ licenses[detailIndex].text }}</pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import BaseRowCard from "../base/BaseRowCard.vue";
+import BaseButton from "../base/BaseButton.vue";
+
+const props =
+  defineProps<{
+    licenses: Record<string, string>[];
+  }>();
+
+const detailIndex = ref<number | undefined>(undefined);
+
+const selectLicenseIndex = (index: number | undefined) => {
+  detailIndex.value = index;
+};
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+
+.container {
+  // 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
+  // height: 100%;
+  height: calc(100vh - 90px);
+  overflow-y: auto;
+  background-color: #e9f3e7;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  padding: vars.$padding-container;
+  gap: vars.$gap-container;
+  min-height: 100%;
+}
+
+.inner-detail {
+  background-color: #fff;
+}
+
+.headline {
+  font-size: 1.5rem;
+  line-height: 1;
+  margin: 0;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: vars.$gap-control;
+}
+</style>

src/styles/variables.scss

@@ -6,3 +6,22 @@ $menubar-height: 24px;
 $detail-view-splitter-cell-z-index: 2;
 
 $character-item-size: 215px; // キャラクター並び替えダイアログなどでの１キャラ表示要素の横幅
+
+$size-scrollbar: 8px;
+$size-icon: 16px;
+$size-indicator: 24px;
+$size-control: 32px;
+$size-listitem: 40px;
+$size-fab: 48px;
+
+$padding-control: 8px;
+$padding-button: 16px;
+$padding-container: 16px;
+
+$gap-control: 8px;
+$gap-container: 16px;
+
+$radius-control: 8px;
+$radius-container: 16px;
+
+$transition-duration: 100ms;