承諾系のダイアログのリデザイン (#2315)

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>

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>

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>