forked from VOICEVOX/voicevox
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
235 additions
and
216 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
53 changes: 53 additions & 0 deletions
53
src/components/Dialog/AcceptDialog/AcceptRetrieveTelemetryDialog.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
107 changes: 0 additions & 107 deletions
107
src/components/Dialog/AcceptRetrieveTelemetryDialog.vue
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.