diff --git a/package-lock.json b/package-lock.json index 4ae8deb995..fb8fe9e771 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,6 +27,7 @@ "multistream": "4.1.0", "pixi.js": "7.4.0", "quasar": "2.11.6", + "radix-vue": "1.2.3", "semver": "7.5.4", "shlex": "2.1.2", "systeminformation": "5.21.15", @@ -3068,6 +3069,63 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.3.tgz", + "integrity": "sha512-1ZpCvYf788/ZXOhRQGFxnYQOVgeU+pi0i+d0Ow34La7qjIXETi6RNswGVKkA6KcDO8/+Ysu2E/CeUmmeEBDvTg==", + "dependencies": { + "@floating-ui/utils": "^0.2.3" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.6.tgz", + "integrity": "sha512-qiTYajAnh3P+38kECeffMSQgbvXty2VB6rS+42iWR4FPIlZjLK84E9qtLnMTLIpPz2znD/TaFqaiavMUrS+Hcw==", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.3" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.3", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.3.tgz", + "integrity": "sha512-XGndio0l5/Gvd6CLIABvsav9HHezgDFFhDfHk1bvLfr9ni8dojqLSvBbotJEjmIwNHL7vK4QzBJTdBRoB+c1ww==" + }, + "node_modules/@floating-ui/vue": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.7.tgz", + "integrity": "sha512-tm9aMT9IrMzoZfzPpsoZHP7j7ULZ0p9AzCJV6i2H8sAlKe36tAnwuQLHdm7vE0SnRkHJJXuMB/gNz4gFdHLNrg==", + "dependencies": { + "@floating-ui/dom": "^1.0.0", + "@floating-ui/utils": "^0.2.3", + "vue-demi": ">=0.13.0" + } + }, + "node_modules/@floating-ui/vue/node_modules/vue-demi": { + "version": "0.14.8", + "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.8.tgz", + "integrity": "sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==", + "hasInstallScript": true, + "bin": { + "vue-demi-fix": "bin/vue-demi-fix.js", + "vue-demi-switch": "bin/vue-demi-switch.js" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + }, + "peerDependencies": { + "@vue/composition-api": "^1.0.0-rc.1", + "vue": "^3.0.0-0 || ^2.6.0" + }, + "peerDependenciesMeta": { + "@vue/composition-api": { + "optional": true + } + } + }, "node_modules/@fal-works/esbuild-plugin-global-externals": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/@fal-works/esbuild-plugin-global-externals/-/esbuild-plugin-global-externals-2.1.2.tgz", @@ -13137,8 +13195,7 @@ "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", - "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", - "devOptional": true + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" }, "node_modules/fast-diff": { "version": "1.3.0", @@ -19474,6 +19531,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/radix-vue": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.2.3.tgz", + "integrity": "sha512-iR4D3SoIoCzKeCldxwxjLv0roGBZNSKAxE5/CgB8V1P7Mk7RtVhnFmOIWL/Z3XNzR9XfU03s8FZLIs+1LCEXnQ==", + "dependencies": { + "@floating-ui/dom": "^1.5.3", + "@floating-ui/vue": "^1.0.2", + "fast-deep-equal": "^3.1.3" + } + }, "node_modules/ramda": { "version": "0.29.0", "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.29.0.tgz", diff --git a/package.json b/package.json index fe8d183225..67f1c4d03b 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "multistream": "4.1.0", "pixi.js": "7.4.0", "quasar": "2.11.6", + "radix-vue": "1.2.3", "semver": "7.5.4", "shlex": "2.1.2", "systeminformation": "5.21.15", diff --git a/public/howtouse.md b/public/howtouse.md index bb49033d75..4dfffa13c6 100644 --- a/public/howtouse.md +++ b/public/howtouse.md @@ -30,6 +30,7 @@ その際は Finder で `Ctrl` キーを押しながら VOICEVOX アプリケーションアイコンをクリックし、ショートカットメニューから「開く」を選択してから、「開く」をクリックしてください。 もしくは、アップルメニューから「システム設定」を選択して「プライバシーとセキュリティ」 をクリックし、ページの下にあるセキュリティの「このまま開く」を選んでください。 + Macのシステム設定の「プライバシーとセキュリティ」を開いた画面 macOS Ventura 以前をお使いの場合は、アップルメニューから「システム環境設定」を選択して「セキュリティとプライバシー」 をクリックし、「一般」パネルで「このまま開く」選んでください。 diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue new file mode 100644 index 0000000000..fd7a09e501 --- /dev/null +++ b/src/components/Base/BaseButton.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue new file mode 100644 index 0000000000..94845a8e94 --- /dev/null +++ b/src/components/Base/BaseDocumentView.vue @@ -0,0 +1,168 @@ + + + diff --git a/src/components/Base/BaseListItem.vue b/src/components/Base/BaseListItem.vue new file mode 100644 index 0000000000..24b235c83b --- /dev/null +++ b/src/components/Base/BaseListItem.vue @@ -0,0 +1,73 @@ + + + + + diff --git a/src/components/Base/BaseRowCard.vue b/src/components/Base/BaseRowCard.vue new file mode 100644 index 0000000000..4d4b5774c0 --- /dev/null +++ b/src/components/Base/BaseRowCard.vue @@ -0,0 +1,71 @@ + + + + + diff --git a/src/components/Base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue new file mode 100644 index 0000000000..13745fb07d --- /dev/null +++ b/src/components/Base/BaseScrollArea.vue @@ -0,0 +1,78 @@ + + + + + diff --git a/src/components/Dialog/HelpDialog/ContactInfo.vue b/src/components/Dialog/HelpDialog/ContactInfo.vue deleted file mode 100644 index 7503291342..0000000000 --- a/src/components/Dialog/HelpDialog/ContactInfo.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - - - diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue index 8cdfd166ae..3898ab7460 100644 --- a/src/components/Dialog/HelpDialog/HelpDialog.vue +++ b/src/components/Dialog/HelpDialog/HelpDialog.vue @@ -7,79 +7,70 @@ class="help-dialog transparent-backdrop" > - -
- - @@ -87,14 +78,12 @@ diff --git a/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue new file mode 100644 index 0000000000..4007eaa0dc --- /dev/null +++ b/src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue @@ -0,0 +1,163 @@ + + + + + diff --git a/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue new file mode 100644 index 0000000000..44648f80c6 --- /dev/null +++ b/src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue @@ -0,0 +1,50 @@ + + + + + diff --git a/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue new file mode 100644 index 0000000000..cd575c5980 --- /dev/null +++ b/src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue @@ -0,0 +1,88 @@ + + + + + diff --git a/src/components/Dialog/HelpDialog/HelpPolicy.vue b/src/components/Dialog/HelpDialog/HelpPolicy.vue deleted file mode 100644 index 2f4832cc32..0000000000 --- a/src/components/Dialog/HelpDialog/HelpPolicy.vue +++ /dev/null @@ -1,31 +0,0 @@ - - - - - diff --git a/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue new file mode 100644 index 0000000000..d7639fac87 --- /dev/null +++ b/src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue @@ -0,0 +1,87 @@ + + + + + diff --git a/src/components/Dialog/HelpDialog/HowToUse.vue b/src/components/Dialog/HelpDialog/HowToUse.vue deleted file mode 100644 index 2eb0fd2259..0000000000 --- a/src/components/Dialog/HelpDialog/HowToUse.vue +++ /dev/null @@ -1,34 +0,0 @@ - - - - - diff --git a/src/components/Dialog/HelpDialog/LibraryPolicy.vue b/src/components/Dialog/HelpDialog/LibraryPolicy.vue deleted file mode 100644 index 2d56b1ee1c..0000000000 --- a/src/components/Dialog/HelpDialog/LibraryPolicy.vue +++ /dev/null @@ -1,139 +0,0 @@ - - - - - diff --git a/src/components/Dialog/HelpDialog/OssCommunityInfo.vue b/src/components/Dialog/HelpDialog/OssCommunityInfo.vue deleted file mode 100644 index ff31d53391..0000000000 --- a/src/components/Dialog/HelpDialog/OssCommunityInfo.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - - - diff --git a/src/components/Dialog/HelpDialog/OssLicense.vue b/src/components/Dialog/HelpDialog/OssLicense.vue deleted file mode 100644 index b723902798..0000000000 --- a/src/components/Dialog/HelpDialog/OssLicense.vue +++ /dev/null @@ -1,63 +0,0 @@ - - - - - diff --git a/src/components/Dialog/HelpDialog/QAndA.vue b/src/components/Dialog/HelpDialog/QAndA.vue deleted file mode 100644 index 4a304b0bfa..0000000000 --- a/src/components/Dialog/HelpDialog/QAndA.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - - - diff --git a/src/components/Dialog/HelpDialog/UpdateInfo.vue b/src/components/Dialog/HelpDialog/UpdateInfo.vue deleted file mode 100644 index ee19cf6f2d..0000000000 --- a/src/components/Dialog/HelpDialog/UpdateInfo.vue +++ /dev/null @@ -1,70 +0,0 @@ - - - - - diff --git a/src/components/Dialog/ImportSongProjectDialog.vue b/src/components/Dialog/ImportSongProjectDialog.vue index 70cb072a58..8bc528f960 100644 --- a/src/components/Dialog/ImportSongProjectDialog.vue +++ b/src/components/Dialog/ImportSongProjectDialog.vue @@ -301,3 +301,13 @@ const handleCancel = () => { onDialogCancel(); }; + + diff --git a/src/styles/_index.scss b/src/styles/_index.scss index f598a5995a..dad189293b 100644 --- a/src/styles/_index.scss +++ b/src/styles/_index.scss @@ -1,5 +1,7 @@ -@use "./variables" as vars; -@use "./colors" as colors; +@use './variables' as vars; +@use './colors' as colors; +@use './v2/variables' as vars-v2; +@use './v2/colors' as colors-v2; @import "./fonts"; // 優先度を強引に上げる @@ -20,14 +22,6 @@ img { pointer-events: none; } -// detailsタグのスタイル -details { - summary { - display: list-item; - cursor: pointer; - } -} - // スクロールバーのデザイン ::-webkit-scrollbar { width: 12px; diff --git a/src/styles/v2/colors.scss b/src/styles/v2/colors.scss new file mode 100644 index 0000000000..0be6e9fc8c --- /dev/null +++ b/src/styles/v2/colors.scss @@ -0,0 +1,114 @@ +// 新デザインで使用する色変数の定義 +// 詳細: https://github.com/VOICEVOX/voicevox_project/issues/40 + +// 基本色 +$primitive-black: #242626; +$primitive-white: #ffffff; +$primitive-primary: #a5d4ad; +$primitive-blue: #0969da; +$primitive-red: #d04756; + +// ライトテーマの色 +:root[is-dark-theme="false"] { + --color-v2-background: #{lighten($primitive-primary, 25%)}; + --color-v2-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)}; + + --color-v2-surface: #{$primitive-white}; + --color-v2-border: #{rgba($primitive-black, 0.2)}; + --color-v2-selected: #{rgba($primitive-primary, 0.3)}; + + --color-v2-display: #{lighten($primitive-black, 10%)}; + --color-v2-display-oncolor: #{lighten($primitive-black, 10%)}; + --color-v2-display-sub: #{rgba($primitive-black, 0.5)}; + --color-v2-display-link: #{$primitive-blue}; + --color-v2-display-warning: #{$primitive-red}; + + --color-v2-control: #{$primitive-white}; + --color-v2-control-hovered: #{darken($primitive-white, 5%)}; + --color-v2-control-pressed: #{darken($primitive-white, 10%)}; + + --color-v2-clear: #{rgba($primitive-black, 0)}; + --color-v2-clear-hovered: #{rgba($primitive-black, 0.05)}; + --color-v2-clear-pressed: #{rgba($primitive-black, 0.1)}; + + --color-v2-primary: #{$primitive-primary}; + --color-v2-primary-hovered: #{darken($primitive-primary, 5%)}; + --color-v2-primary-pressed: #{darken($primitive-primary, 10%)}; + + --color-v2-warning: #{$primitive-white}; + --color-v2-warning-hovered: #{lighten($primitive-red, 40%)}; + --color-v2-warning-pressed: #{lighten($primitive-red, 35%)}; + + --color-v2-scrollbar: #{rgba($primitive-black, 0.3)}; + --color-v2-scrollbar-hovered: #{rgba($primitive-black, 0.4)}; + --color-v2-scrollbar-pressed: #{rgba($primitive-black, 0.5)}; +} + +// ダークテーマの色 +:root[is-dark-theme="true"] { + --color-v2-background: #{$primitive-black}; + --color-v2-background-drawer: #{rgba($primitive-black, 0.75)}; + + --color-v2-surface: #{lighten($primitive-black, 3%)}; + --color-v2-border: #{rgba($primitive-white, 0.2)}; + --color-v2-selected: #{rgba($primitive-primary, 0.3)}; + + --color-v2-display: #{$primitive-white}; + --color-v2-display-oncolor: #{$primitive-black}; + --color-v2-display-sub: #{rgba($primitive-white, 0.5)}; + --color-v2-display-link: #{lighten($primitive-blue, 25%)}; + --color-v2-display-warning: #{lighten($primitive-red, 25%)}; + + --color-v2-control: #{lighten($primitive-black, 10%)}; + --color-v2-control-hovered: #{lighten($primitive-black, 15%)}; + --color-v2-control-pressed: #{lighten($primitive-black, 20%)}; + + --color-v2-clear: #{rgba($primitive-white, 0)}; + --color-v2-clear-hovered: #{rgba($primitive-white, 0.05)}; + --color-v2-clear-pressed: #{rgba($primitive-white, 0.1)}; + + --color-v2-primary: #{darken($primitive-primary, 10%)}; + --color-v2-primary-hovered: #{darken($primitive-primary, 5%)}; + --color-v2-primary-pressed: #{$primitive-primary}; + + --color-v2-warning: #{lighten($primitive-black, 10%)}; + --color-v2-warning-hovered: #{darken($primitive-red, 35%)}; + --color-v2-warning-pressed: #{darken($primitive-red, 30%)}; + + --color-v2-scrollbar: #{rgba($primitive-white, 0.3)}; + --color-v2-scrollbar-hovered: #{rgba($primitive-white, 0.4)}; + --color-v2-scrollbar-pressed: #{rgba($primitive-white, 0.5)}; +} + +$background: var(--color-v2-background); +$background-drawer: var(--color-v2-background-drawer); + +$surface: var(--color-v2-surface); +$border: var(--color-v2-border); +$selected: var(--color-v2-selected); + +$display: var(--color-v2-display); +$display-oncolor: var(--color-v2-display-oncolor); +$display-sub: var(--color-v2-display-sub); +$display-link: var(--color-v2-display-link); +$display-warning: var(--color-v2-display-warning); + +$control: var(--color-v2-control); +$control-hovered: var(--color-v2-control-hovered); +$control-pressed: var(--color-v2-control-pressed); + +$clear: var(--color-v2-clear); +$clear-hovered: var(--color-v2-clear-hovered); +$clear-pressed: var(--color-v2-clear-pressed); + +$primary: var(--color-v2-primary); +$primary-hovered: var(--color-v2-primary-hovered); +$primary-pressed: var(--color-v2-primary-pressed); + +$warning: var(--color-v2-warning); +$warning-hovered: var(--color-v2-warning-hovered); +$warning-pressed: var(--color-v2-warning-pressed); + +$scrollbar: var(--color-v2-scrollbar); +$scrollbar-hovered: var(--color-v2-scrollbar-hovered); +$scrollbar-pressed: var(--color-v2-scrollbar-pressed); diff --git a/src/styles/v2/mixin.scss b/src/styles/v2/mixin.scss new file mode 100644 index 0000000000..e547874fa0 --- /dev/null +++ b/src/styles/v2/mixin.scss @@ -0,0 +1,53 @@ +// キーボードフォーカス時のOutline表示用のスタイル +@mixin on-focus { + outline-color: #a5d4ad; + outline-width: 2px; +} + +// 見出し1(h1)用のスタイル +@mixin headline-1 { + font-size: 1.75rem; + font-weight: 600; + line-height: 1.5; + margin: 0; +} + +// 見出し2(h2)用のスタイル +@mixin headline-2 { + font-size: 1.25rem; + font-weight: bold; + line-height: 1.5; + margin: 0; +} + +// 見出し3(h3)用のスタイル +@mixin headline-3 { + font-size: 1.125rem; + font-weight: bold; + line-height: 1.5; + margin: 0; +} + +// 見出し4(h4)用のスタイル +@mixin headline-4 { + font-size: 1rem; + font-weight: bold; + line-height: 1.5; + margin: 0; +} + +// 見出し5(h5)用のスタイル +@mixin headline-5 { + font-size: 0.875rem; + font-weight: bold; + line-height: 1.5; + margin: 0; +} + +// 見出し6(h6)用のスタイル +@mixin headline-6 { + font-size: 0.75rem; + font-weight: bold; + line-height: 1.5; + margin: 0; +} diff --git a/src/styles/v2/variables.scss b/src/styles/v2/variables.scss new file mode 100644 index 0000000000..e61d32c06d --- /dev/null +++ b/src/styles/v2/variables.scss @@ -0,0 +1,24 @@ +:root { + --size-basis: 8px; + --padding-basis: 8px; + --gap-basis: 8px; + --radius-basis: 8px; +} + +$size-scrollbar: calc(var(--size-basis) * 1.5); +$size-icon: calc(var(--size-basis) * 2); +$size-indicator: calc(var(--size-basis) * 3); +$size-control: calc(var(--size-basis) * 4); +$size-listitem: calc(var(--size-basis) * 5); +$size-fab: calc(var(--size-basis) * 6); + +$padding-1: var(--padding-basis); +$padding-2: calc(var(--padding-basis) * 2); + +$gap-1: var(--gap-basis); +$gap-2: calc(var(--gap-basis) * 2); + +$radius-1: var(--radius-basis); +$radius-2: calc(var(--radius-basis) * 2); + +$transition-duration: 100ms; diff --git a/tests/unit/components/help/HelpMarkdownViewSection.spec.ts b/tests/unit/components/help/HelpMarkdownViewSection.spec.ts new file mode 100644 index 0000000000..2e6a024e0e --- /dev/null +++ b/tests/unit/components/help/HelpMarkdownViewSection.spec.ts @@ -0,0 +1,32 @@ +import { mount, flushPromises } from "@vue/test-utils"; +import { describe, it } from "vitest"; +import HelpMarkdownViewSection from "@/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue"; +import { markdownItPlugin } from "@/plugins/markdownItPlugin"; + +describe("HelpMarkdownViewSection.vue", () => { + it("can mount", () => { + mount(HelpMarkdownViewSection, { + global: { + plugins: [markdownItPlugin], + }, + props: { + markdown: "", + }, + }); + }); + + it("has markdown text", async () => { + const wrapper = mount(HelpMarkdownViewSection, { + global: { + plugins: [markdownItPlugin], + }, + props: { + markdown: "# title", + }, + }); + + await flushPromises(); + + expect(wrapper.find("h1").text()).to.equal("title"); + }); +}); diff --git a/tests/unit/components/help/HowToUse.spec.ts b/tests/unit/components/help/HowToUse.spec.ts deleted file mode 100644 index c060633099..0000000000 --- a/tests/unit/components/help/HowToUse.spec.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { mount, flushPromises } from "@vue/test-utils"; -import { createStore } from "vuex"; -import { describe, it } from "vitest"; -import { Quasar } from "quasar"; -import { wrapQPage } from "../../utils"; -import HowToUse from "@/components/Dialog/HelpDialog/HowToUse.vue"; -import { markdownItPlugin } from "@/plugins/markdownItPlugin"; -import { storeKey } from "@/store"; - -const store = createStore({ - actions: { - GET_HOW_TO_USE_TEXT: async () => { - return "test string"; - }, - }, -}); - -describe("HowToUse.vue", () => { - it("can mount", () => { - mount(wrapQPage(HowToUse), { - global: { - plugins: [markdownItPlugin, [store, storeKey], Quasar], - }, - }); - }); - - it("has how to use text", async () => { - const wrapper = mount(wrapQPage(HowToUse), { - global: { - plugins: [markdownItPlugin, [store, storeKey], Quasar], - }, - }); - - await flushPromises(); - - expect(wrapper.find(".markdown").text()).to.equal("test string"); - }); -});