From 4f230a58f9745042b163b3d4481e19303f0d12a0 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sat, 26 Oct 2024 10:54:26 +0900
Subject: [PATCH] =?UTF-8?q?=E6=89=BF=E8=AB=BE=E7=B3=BB=E3=81=AE=E3=83=80?=
 =?UTF-8?q?=E3=82=A4=E3=82=A2=E3=83=AD=E3=82=B0=E3=81=AE=E3=83=AA=E3=83=87?=
 =?UTF-8?q?=E3=82=B6=E3=82=A4=E3=83=B3=20(#2315)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Dialog/AcceptDialog/AcceptDialog.vue      | 126 ++++++++++++++++++
 .../AcceptRetrieveTelemetryDialog.vue         |  53 ++++++++
 .../Dialog/AcceptDialog/AcceptTermsDialog.vue |  54 ++++++++
 .../Dialog/AcceptRetrieveTelemetryDialog.vue  | 107 ---------------
 src/components/Dialog/AcceptTermsDialog.vue   | 107 ---------------
 src/components/Dialog/AllDialog.vue           |   4 +-
 6 files changed, 235 insertions(+), 216 deletions(-)
 create mode 100644 src/components/Dialog/AcceptDialog/AcceptDialog.vue
 create mode 100644 src/components/Dialog/AcceptDialog/AcceptRetrieveTelemetryDialog.vue
 create mode 100644 src/components/Dialog/AcceptDialog/AcceptTermsDialog.vue
 delete mode 100644 src/components/Dialog/AcceptRetrieveTelemetryDialog.vue
 delete mode 100644 src/components/Dialog/AcceptTermsDialog.vue

diff --git a/src/components/Dialog/AcceptDialog/AcceptDialog.vue b/src/components/Dialog/AcceptDialog/AcceptDialog.vue
new file mode 100644
index 0000000000..2aecf717de
--- /dev/null
+++ b/src/components/Dialog/AcceptDialog/AcceptDialog.vue
@@ -0,0 +1,126 @@
+<template>
+  <QDialog
+    v-model="modelValueComputed"
+    maximized
+    transitionShow="jump-up"
+    transitionHide="jump-down"
+    class="transparent-backdrop"
+  >
+    <QLayout container view="hHh Lpr lff" class="bg-background">
+      <QHeader class="q-py-sm">
+        <QToolbar>
+          <div class="column">
+            <QToolbarTitle class="text-display">{{ title }}</QToolbarTitle>
+          </div>
+
+          <QSpace />
+
+          <div class="row items-center no-wrap">
+            <QBtn
+              unelevated
+              :label="rejectLabel"
+              color="toolbar-button"
+              textColor="toolbar-button-display"
+              class="text-no-wrap q-mr-md text-bold"
+              @click="$emit('reject')"
+            />
+
+            <QBtn
+              unelevated
+              :label="acceptLabel"
+              color="toolbar-button"
+              textColor="toolbar-button-display"
+              class="text-no-wrap text-bold"
+              @click="$emit('accept')"
+            />
+          </div>
+        </QToolbar>
+      </QHeader>
+
+      <QPageContainer>
+        <QPage>
+          <div class="container">
+            <BaseScrollArea>
+              <div class="inner">
+                <div>
+                  <slot />
+                </div>
+                <h2 class="headline">{{ heading }}</h2>
+                <div class="terms">
+                  <BaseDocumentView>
+                    <!-- eslint-disable-next-line vue/no-v-html -->
+                    <div v-html="termsHtml" />
+                  </BaseDocumentView>
+                </div>
+              </div>
+            </BaseScrollArea>
+          </div>
+        </QPage>
+      </QPageContainer>
+    </QLayout>
+  </QDialog>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useMarkdownIt } from "@/plugins/markdownItPlugin";
+import BaseDocumentView from "@/components/Base/BaseDocumentView.vue";
+import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
+
+const props = defineProps<{
+  modelValue: boolean;
+  title: string;
+  heading: string;
+  terms: string;
+  rejectLabel: string;
+  acceptLabel: string;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  reject: [];
+  accept: [];
+}>();
+
+const modelValueComputed = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const md = useMarkdownIt();
+const termsHtml = computed(() => md.render(props.terms));
+</script>
+
+<style scoped lang="scss">
+@use "@/styles/v2/variables" as vars;
+@use "@/styles/v2/mixin" as mixin;
+@use "@/styles/v2/colors" as colors;
+
+.container {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 100%;
+  background-color: colors.$background;
+  color: colors.$display;
+}
+
+.inner {
+  padding: vars.$padding-2;
+  max-width: 960px;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  gap: vars.$gap-1;
+}
+
+.headline {
+  @include mixin.headline-1;
+}
+
+.terms {
+  border: 1px solid colors.$border;
+  border-radius: vars.$radius-2;
+  padding: vars.$padding-2;
+}
+</style>
diff --git a/src/components/Dialog/AcceptDialog/AcceptRetrieveTelemetryDialog.vue b/src/components/Dialog/AcceptDialog/AcceptRetrieveTelemetryDialog.vue
new file mode 100644
index 0000000000..53d572be33
--- /dev/null
+++ b/src/components/Dialog/AcceptDialog/AcceptRetrieveTelemetryDialog.vue
@@ -0,0 +1,53 @@
+<template>
+  <AcceptDialog
+    v-model="modelValueComputed"
+    title="使いやすさ向上のためのお願い"
+    rejectLabel="拒否"
+    acceptLabel="許可"
+    heading="プライバシーポリシー"
+    :terms="privacyPolicy"
+    @reject="handler(false)"
+    @accept="handler(true)"
+  >
+    <p>VOICEVOXはより使いやすいソフトウェアを目指して開発されています。</p>
+    <p>
+      ボタンの配置換えなどの方針を決める際は、各UIの利用率などの情報が重要になります。もしよろしければ、ソフトウェアの利用状況のデータ収集にご協力お願いします。
+    </p>
+    <p>
+      （入力されたテキストデータや音声データの情報は収集しておりませんのでご安心ください。）
+    </p>
+  </AcceptDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted } from "vue";
+import AcceptDialog from "./AcceptDialog.vue";
+import { useStore } from "@/store";
+
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+}>();
+
+const store = useStore();
+
+const modelValueComputed = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const handler = (acceptRetrieveTelemetry: boolean) => {
+  void store.dispatch("SET_ACCEPT_RETRIEVE_TELEMETRY", {
+    acceptRetrieveTelemetry: acceptRetrieveTelemetry ? "Accepted" : "Refused",
+  });
+
+  modelValueComputed.value = false;
+};
+
+const privacyPolicy = ref("");
+onMounted(async () => {
+  privacyPolicy.value = await store.dispatch("GET_PRIVACY_POLICY_TEXT");
+});
+</script>
diff --git a/src/components/Dialog/AcceptDialog/AcceptTermsDialog.vue b/src/components/Dialog/AcceptDialog/AcceptTermsDialog.vue
new file mode 100644
index 0000000000..64945bdce1
--- /dev/null
+++ b/src/components/Dialog/AcceptDialog/AcceptTermsDialog.vue
@@ -0,0 +1,54 @@
+<template>
+  <AcceptDialog
+    v-model="modelValueComputed"
+    title="利用規約に関するお知らせ"
+    rejectLabel="同意せずに終了"
+    acceptLabel="同意して使用開始"
+    heading="利用規約"
+    :terms
+    @reject="handler(false)"
+    @accept="handler(true)"
+  >
+    <p>
+      多くの人が安心して VOICEVOX を使えるよう、利用規約への同意をお願いします。
+    </p>
+  </AcceptDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, onMounted } from "vue";
+import AcceptDialog from "./AcceptDialog.vue";
+import { useStore } from "@/store";
+
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+const emit = defineEmits<{
+  (e: "update:modelValue", value: boolean): void;
+}>();
+
+const store = useStore();
+
+const modelValueComputed = computed({
+  get: () => props.modelValue,
+  set: (val) => emit("update:modelValue", val),
+});
+
+const handler = (acceptTerms: boolean) => {
+  void store.dispatch("SET_ACCEPT_TERMS", {
+    acceptTerms: acceptTerms ? "Accepted" : "Rejected",
+  });
+  if (acceptTerms) {
+    void store.dispatch("CHECK_EDITED_AND_NOT_SAVE", {
+      closeOrReload: "close",
+    });
+  }
+
+  modelValueComputed.value = false;
+};
+
+const terms = ref("");
+onMounted(async () => {
+  terms.value = await store.dispatch("GET_POLICY_TEXT");
+});
+</script>
diff --git a/src/components/Dialog/AcceptRetrieveTelemetryDialog.vue b/src/components/Dialog/AcceptRetrieveTelemetryDialog.vue
deleted file mode 100644
index 1007eaa434..0000000000
--- a/src/components/Dialog/AcceptRetrieveTelemetryDialog.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <QDialog
-    v-model="modelValueComputed"
-    maximized
-    transitionShow="jump-up"
-    transitionHide="jump-down"
-    class="accept-retrieve-telemetry-dialog transparent-backdrop"
-  >
-    <QLayout container view="hHh Lpr lff" class="bg-background">
-      <QHeader class="q-py-sm">
-        <QToolbar>
-          <div class="column">
-            <QToolbarTitle class="text-display"
-              >使いやすさ向上のためのお願い</QToolbarTitle
-            >
-          </div>
-
-          <QSpace />
-
-          <div class="row items-center no-wrap">
-            <QBtn
-              unelevated
-              label="拒否"
-              color="toolbar-button"
-              textColor="toolbar-button-display"
-              class="text-no-wrap q-mr-md text-bold"
-              @click="handler(false)"
-            />
-
-            <QBtn
-              unelevated
-              label="許可"
-              color="toolbar-button"
-              textColor="toolbar-button-display"
-              class="text-no-wrap text-bold"
-              @click="handler(true)"
-            />
-          </div>
-        </QToolbar>
-      </QHeader>
-
-      <QPageContainer>
-        <QPage>
-          <p class="text-body1 q-mb-lg">
-            VOICEVOXはより使いやすいソフトウェアを目指して開発されています。<br /><br />
-            ボタンの配置換えなどの方針を決める際は、各UIの利用率などの情報が重要になります。<br />
-            もしよろしければ、ソフトウェアの利用状況のデータ収集にご協力お願いします。<br />
-            <br />
-            （入力されたテキストデータや音声データの情報は収集しておりませんのでご安心ください。）
-          </p>
-          <QCard flat bordered>
-            <QCardSection>
-              <div class="text-h5">プライバシーポリシー</div>
-            </QCardSection>
-
-            <QCardSection class="text-body1">
-              <!-- eslint-disable-next-line vue/no-v-html -->
-              <div v-html="privacyPolicy"></div>
-            </QCardSection>
-          </QCard>
-        </QPage>
-      </QPageContainer>
-    </QLayout>
-  </QDialog>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, onMounted } from "vue";
-import { useStore } from "@/store";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const props = defineProps<{
-  modelValue: boolean;
-}>();
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-}>();
-
-const store = useStore();
-
-const modelValueComputed = computed({
-  get: () => props.modelValue,
-  set: (val) => emit("update:modelValue", val),
-});
-
-const handler = (acceptRetrieveTelemetry: boolean) => {
-  void store.dispatch("SET_ACCEPT_RETRIEVE_TELEMETRY", {
-    acceptRetrieveTelemetry: acceptRetrieveTelemetry ? "Accepted" : "Refused",
-  });
-
-  modelValueComputed.value = false;
-};
-
-const md = useMarkdownIt();
-const privacyPolicy = ref("");
-onMounted(async () => {
-  privacyPolicy.value = md.render(
-    await store.dispatch("GET_PRIVACY_POLICY_TEXT"),
-  );
-});
-</script>
-
-<style scoped lang="scss">
-.q-page {
-  padding: 3rem;
-}
-</style>
diff --git a/src/components/Dialog/AcceptTermsDialog.vue b/src/components/Dialog/AcceptTermsDialog.vue
deleted file mode 100644
index 8b133d9c7c..0000000000
--- a/src/components/Dialog/AcceptTermsDialog.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <QDialog
-    v-model="modelValueComputed"
-    maximized
-    transitionShow="jump-up"
-    transitionHide="jump-down"
-    class="accept-terms-dialog transparent-backdrop"
-  >
-    <QLayout container view="hHh Lpr lff" class="bg-background">
-      <QHeader class="q-py-sm">
-        <QToolbar>
-          <div class="column">
-            <QToolbarTitle class="text-display"
-              >利用規約に関するお知らせ</QToolbarTitle
-            >
-          </div>
-
-          <QSpace />
-
-          <div class="row items-center no-wrap">
-            <QBtn
-              unelevated
-              label="同意せずに終了"
-              color="toolbar-button"
-              textColor="toolbar-button-display"
-              class="text-no-wrap q-mr-md text-bold"
-              @click="handler(false)"
-            />
-
-            <QBtn
-              unelevated
-              label="同意して使用開始"
-              color="toolbar-button"
-              textColor="toolbar-button-display"
-              class="text-no-wrap text-bold"
-              @click="handler(true)"
-            />
-          </div>
-        </QToolbar>
-      </QHeader>
-
-      <QPageContainer>
-        <QPage>
-          <p class="text-body1 q-mb-lg">
-            多くの人が安心して VOICEVOX
-            を使えるよう、利用規約への同意をお願いします。
-          </p>
-          <QCard flat bordered>
-            <QCardSection>
-              <div class="text-h5">利用規約</div>
-            </QCardSection>
-
-            <QCardSection>
-              <!-- eslint-disable-next-line vue/no-v-html -->
-              <div class="q-pa-md markdown markdown-body" v-html="terms" />
-            </QCardSection>
-          </QCard>
-        </QPage>
-      </QPageContainer>
-    </QLayout>
-  </QDialog>
-</template>
-
-<script setup lang="ts">
-import { computed, ref, onMounted } from "vue";
-import { useStore } from "@/store";
-import { useMarkdownIt } from "@/plugins/markdownItPlugin";
-
-const props = defineProps<{
-  modelValue: boolean;
-}>();
-const emit = defineEmits<{
-  (e: "update:modelValue", value: boolean): void;
-}>();
-
-const store = useStore();
-
-const modelValueComputed = computed({
-  get: () => props.modelValue,
-  set: (val) => emit("update:modelValue", val),
-});
-
-const handler = (acceptTerms: boolean) => {
-  void store.dispatch("SET_ACCEPT_TERMS", {
-    acceptTerms: acceptTerms ? "Accepted" : "Rejected",
-  });
-  if (acceptTerms) {
-    void store.dispatch("CHECK_EDITED_AND_NOT_SAVE", {
-      closeOrReload: "close",
-    });
-  }
-
-  modelValueComputed.value = false;
-};
-
-const md = useMarkdownIt();
-const terms = ref("");
-onMounted(async () => {
-  terms.value = md.render(await store.dispatch("GET_POLICY_TEXT"));
-});
-</script>
-
-<style scoped lang="scss">
-.q-page {
-  padding: 3rem;
-}
-</style>
diff --git a/src/components/Dialog/AllDialog.vue b/src/components/Dialog/AllDialog.vue
index 68bec331a1..340bd467c0 100644
--- a/src/components/Dialog/AllDialog.vue
+++ b/src/components/Dialog/AllDialog.vue
@@ -34,8 +34,8 @@ import HotkeySettingDialog from "@/components/Dialog/HotkeySettingDialog.vue";
 import ToolBarCustomDialog from "@/components/Dialog/ToolBarCustomDialog.vue";
 import DefaultStyleListDialog from "@/components/Dialog/DefaultStyleListDialog.vue";
 import CharacterOrderDialog from "@/components/Dialog/CharacterOrderDialog.vue";
-import AcceptRetrieveTelemetryDialog from "@/components/Dialog/AcceptRetrieveTelemetryDialog.vue";
-import AcceptTermsDialog from "@/components/Dialog/AcceptTermsDialog.vue";
+import AcceptRetrieveTelemetryDialog from "@/components/Dialog/AcceptDialog/AcceptRetrieveTelemetryDialog.vue";
+import AcceptTermsDialog from "@/components/Dialog/AcceptDialog/AcceptTermsDialog.vue";
 import DictionaryManageDialog from "@/components/Dialog/DictionaryManageDialog.vue";
 import EngineManageDialog from "@/components/Dialog/EngineManageDialog.vue";
 import UpdateNotificationDialogContainer from "@/components/Dialog/UpdateNotificationDialog/Container.vue";