+
+
+
+
diff --git a/src/components/help/ContactInfo.vue b/src/components/help/ContactInfo.vue
deleted file mode 100644
index 7120407ecd..0000000000
--- a/src/components/help/ContactInfo.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-
-
-
-
- -
- 最新バージョン {{ props.latestVersion }} が見つかりました
- ダウンロードページ -- -
アップデート履歴
- -バージョン {{ info.version }}
--
-
-
- {{ item }} - -
貢献者リスト
-- - / - {{ - item - }} - -
- -
+
+
+
+
+
+
+
+
diff --git a/src/components/template/HelpHowToUseSection.vue b/src/components/template/HelpHowToUseSection.vue
new file mode 100644
index 0000000000..6add146bd5
--- /dev/null
+++ b/src/components/template/HelpHowToUseSection.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/template/HelpOssCommunityInfoSection.vue b/src/components/template/HelpOssCommunityInfoSection.vue
new file mode 100644
index 0000000000..b166454e2f
--- /dev/null
+++ b/src/components/template/HelpOssCommunityInfoSection.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/template/OssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
similarity index 100%
rename from src/components/template/OssLicenseSection.vue
rename to src/components/template/HelpOssLicenseSection.vue
diff --git a/src/components/template/HelpPolicySection.vue b/src/components/template/HelpPolicySection.vue
new file mode 100644
index 0000000000..88a1ec5552
--- /dev/null
+++ b/src/components/template/HelpPolicySection.vue
@@ -0,0 +1,47 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/template/HelpQAndASection.vue b/src/components/template/HelpQAndASection.vue
new file mode 100644
index 0000000000..81f2de9361
--- /dev/null
+++ b/src/components/template/HelpQAndASection.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
new file mode 100644
index 0000000000..61de18b37a
--- /dev/null
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index d3e528a73c..4c684b7853 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -7,7 +7,47 @@
// 見出し1(h1)用のスタイル
@mixin headline-1 {
font-size: 1.5rem;
+ font-weight: 600;
+ line-height: 2;
+ margin: 0;
+}
+
+// 見出し2(h2)用のスタイル
+@mixin headline-2 {
+ font-size: 1.25rem;
+ font-weight: bold;
+ line-height: 2;
+ margin: 0;
+}
+
+// 見出し3(h3)用のスタイル
+@mixin headline-3 {
+ font-size: 1.125rem;
+ font-weight: bold;
+ line-height: 2;
+ margin: 0;
+}
+
+// 見出し4(h4)用のスタイル
+@mixin headline-4 {
+ font-size: 1rem;
+ font-weight: bold;
+ line-height: 2;
+ margin: 0;
+}
+
+// 見出し5(h5)用のスタイル
+@mixin headline-5 {
+ font-size: 0.875rem;
+ font-weight: bold;
+ line-height: 2;
+ margin: 0;
+}
+
+// 見出し6(h6)用のスタイル
+@mixin headline-6 {
+ font-size: 0.75rem;
+ font-weight: bold;
line-height: 2;
margin: 0;
- font-weight: 600;
}
diff --git a/tests/unit/components/help/HowToUse.spec.ts b/tests/unit/components/help/HowToUse.spec.ts
index f631f846c2..6185bc9195 100644
--- a/tests/unit/components/help/HowToUse.spec.ts
+++ b/tests/unit/components/help/HowToUse.spec.ts
@@ -3,7 +3,7 @@ import { createStore } from "vuex";
import { describe, it } from "vitest";
import { Quasar } from "quasar";
import { wrapQPage } from "../../utils";
-import HowToUse from "@/components/help/HowToUse.vue";
+import HowToUse from "@/components/template/HelpHowToUseSection.vue";
import { markdownItPlugin } from "@/plugins/markdownItPlugin";
import { storeKey } from "@/store";
@@ -33,6 +33,6 @@ describe("HowToUse.vue", () => {
await flushPromises();
- expect(wrapper.find(".markdown").text()).to.equal("test string");
+ expect(wrapper.find(".inner").text()).to.equal("test string");
});
});
From 38c7e30199f78917eed911f8b07752ec0f1a10aa Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sun, 4 Feb 2024 10:01:57 +0900
Subject: [PATCH 03/16] =?UTF-8?q?=E6=96=B0=E3=81=97=E3=81=84=E8=89=B2?=
=?UTF-8?q?=E5=A4=89=E6=95=B0=E3=81=AE=E4=BD=9C=E6=88=90=EF=BC=88=E3=83=AA?=
=?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E5=BE=8C=E3=81=AEUI?=
=?UTF-8?q?=E9=83=A8=E5=88=86=E3=81=AE=E3=83=80=E3=83=BC=E3=82=AF=E3=83=A2?=
=?UTF-8?q?=E3=83=BC=E3=83=89=E5=AF=BE=E5=BF=9C=EF=BC=89=20(#1756)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 新しい色変数scssファイルを作成
* _index.scssのuseにnew-colorsを追加
* 色の指定を色変数を用いるように変更
---
src/components/base/BaseButton.vue | 31 +++---
src/components/base/BaseDocumentView.vue | 14 +--
src/components/base/BaseRowCard.vue | 11 +-
src/components/base/BaseScrollArea.vue | 9 +-
.../template/HelpContactInfoSection.vue | 3 +-
.../template/HelpHowToUseSection.vue | 3 +-
.../template/HelpOssCommunityInfoSection.vue | 3 +-
.../template/HelpOssLicenseSection.vue | 6 +-
src/components/template/HelpPolicySection.vue | 3 +-
src/components/template/HelpQAndASection.vue | 3 +-
.../template/HelpUpdateInfoSection.vue | 6 +-
src/styles/_index.scss | 1 +
src/styles/new-colors.scss | 105 ++++++++++++++++++
13 files changed, 158 insertions(+), 40 deletions(-)
create mode 100644 src/styles/new-colors.scss
diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index e8c50de4da..6be124e0bf 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -25,6 +25,7 @@ defineEmits<{
diff --git a/src/components/base/BaseDocumentView.vue b/src/components/base/BaseDocumentView.vue
index be74697ba4..960140cd90 100644
--- a/src/components/base/BaseDocumentView.vue
+++ b/src/components/base/BaseDocumentView.vue
@@ -5,8 +5,8 @@
diff --git a/src/components/template/HelpContactInfoSection.vue b/src/components/template/HelpContactInfoSection.vue
index e8d9267eb2..5883dc91a8 100644
--- a/src/components/template/HelpContactInfoSection.vue
+++ b/src/components/template/HelpContactInfoSection.vue
@@ -30,12 +30,13 @@ onMounted(async () => {
From f2a741fcd96f23599d95e4649a10c454b398a31f Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sat, 2 Mar 2024 21:49:15 +0900
Subject: [PATCH 05/16] =?UTF-8?q?[project-redisign-help-dialog]=20Refactor?=
=?UTF-8?q?:=20Markdown=E8=A1=A8=E7=A4=BA=E3=81=AE=E3=82=BB=E3=82=AF?=
=?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92HelpMarkdownViewSection?=
=?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
=?UTF-8?q?=E3=81=AB=E5=85=B1=E9=80=9A=E5=8C=96=20(#1883)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* Markdown表示のセクションをHelpMarkdownViewSectionコンポーネントに統一
* テストの内容をコンポーネントに合わせて変更
* PageItem型にisShowOpenLogDirectoryButtonを追加
* is → should
---------
Co-authored-by: Hiroshiba
+
+
+
+ アップデート履歴
+
+
+
+
+ 最新バージョン {{ props.latestVersion }} が見つかりました
+
+ ダウンロードページ
+ バージョン {{ info.version }}
+-
+
- + {{ item }} + +
貢献者リスト
++ + / + + {{ item }} + + +
+ +
-
-
-
-
-
-
-
-
diff --git a/src/components/template/HelpHowToUseSection.vue b/src/components/template/HelpHowToUseSection.vue
deleted file mode 100644
index 0fe0dcb3c6..0000000000
--- a/src/components/template/HelpHowToUseSection.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/template/HelpPolicySection.vue b/src/components/template/HelpMarkdownViewSection.vue
similarity index 87%
rename from src/components/template/HelpPolicySection.vue
rename to src/components/template/HelpMarkdownViewSection.vue
index efe827e4c8..858548dc39 100644
--- a/src/components/template/HelpPolicySection.vue
+++ b/src/components/template/HelpMarkdownViewSection.vue
@@ -4,7 +4,7 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/components/template/HelpQAndASection.vue b/src/components/template/HelpQAndASection.vue
deleted file mode 100644
index 5e606d4ac7..0000000000
--- a/src/components/template/HelpQAndASection.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/tests/unit/components/help/HelpMarkdownViewSection.ts b/tests/unit/components/help/HelpMarkdownViewSection.ts
new file mode 100644
index 0000000000..4f38f080fe
--- /dev/null
+++ b/tests/unit/components/help/HelpMarkdownViewSection.ts
@@ -0,0 +1,32 @@
+import { mount, flushPromises } from "@vue/test-utils";
+import { describe, it } from "vitest";
+import HelpMarkdownViewSection from "@/components/template/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 6185bc9195..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/template/HelpHowToUseSection.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(".inner").text()).to.equal("test string");
- });
-});
From 58f82fe7f657e4e55bd25cc8468d78a3650d3554 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Thu, 21 Mar 2024 07:33:31 +0900
Subject: [PATCH 06/16] =?UTF-8?q?[project-redisign-help-dialog]=20?=
=?UTF-8?q?=E3=83=98=E3=83=AB=E3=83=97=E3=83=80=E3=82=A4=E3=82=A2=E3=83=AD?=
=?UTF-8?q?=E3=82=B0=E3=81=AE=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE?=
=?UTF-8?q?=E6=9C=80=E7=B5=82=E8=AA=BF=E6=95=B4=20(#1905)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* a要素のfocus時のoutlineのデザインを合わせる
* 背景・枠線のスタイルを統一
* 見出し1のフォントサイズを少し増加
* 最大幅・中央揃えを設定
---
src/components/base/BaseDocumentView.vue | 4 ++++
src/components/template/HelpLibraryPolicySection.vue | 4 +++-
src/components/template/HelpMarkdownViewSection.vue | 2 ++
src/components/template/HelpOssLicenseSection.vue | 2 ++
src/components/template/HelpUpdateInfoSection.vue | 5 +++--
src/styles/mixin.scss | 2 +-
6 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/src/components/base/BaseDocumentView.vue b/src/components/base/BaseDocumentView.vue
index 960140cd90..e3ef46a04f 100644
--- a/src/components/base/BaseDocumentView.vue
+++ b/src/components/base/BaseDocumentView.vue
@@ -60,6 +60,10 @@
:deep(a) {
color: colors.$display-link;
+
+ &:focus-visible {
+ @include mixin.on-focus;
+ }
}
:deep(img) {
diff --git a/src/components/template/HelpLibraryPolicySection.vue b/src/components/template/HelpLibraryPolicySection.vue
index bcd58499f7..42ef4e2d83 100644
--- a/src/components/template/HelpLibraryPolicySection.vue
+++ b/src/components/template/HelpLibraryPolicySection.vue
@@ -134,10 +134,10 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
+ background-color: colors.$background;
}
.container-detail {
- border-left: 1px solid colors.$border;
background-color: colors.$surface;
}
@@ -146,6 +146,8 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
flex-direction: column;
padding: vars.$padding-2;
gap: vars.$gap-1;
+ max-width: 960px;
+ margin: auto;
}
.title {
diff --git a/src/components/template/HelpMarkdownViewSection.vue b/src/components/template/HelpMarkdownViewSection.vue
index 858548dc39..61531e1424 100644
--- a/src/components/template/HelpMarkdownViewSection.vue
+++ b/src/components/template/HelpMarkdownViewSection.vue
@@ -44,5 +44,7 @@ onMounted(async () => {
.inner {
padding: vars.$padding-2;
+ max-width: 960px;
+ margin: auto;
}
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
index f2392b4497..05fd702a0c 100644
--- a/src/components/template/HelpOssLicenseSection.vue
+++ b/src/components/template/HelpOssLicenseSection.vue
@@ -76,6 +76,8 @@ const selectLicenseIndex = (index: number | undefined) => {
flex-direction: column;
padding: vars.$padding-2;
gap: vars.$gap-1;
+ max-width: 960px;
+ margin: auto;
}
.title {
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
index 01059c1217..a40c565c40 100644
--- a/src/components/template/HelpUpdateInfoSection.vue
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -65,12 +65,13 @@ const props =
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
- background-color: colors.$background;
+ background-color: colors.$surface;
}
.inner {
padding: vars.$padding-2;
- background-color: colors.$surface;
+ max-width: 960px;
+ margin: auto;
}
.info {
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 4c684b7853..48c33d30a2 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -6,7 +6,7 @@
// 見出し1(h1)用のスタイル
@mixin headline-1 {
- font-size: 1.5rem;
+ font-size: 1.75rem;
font-weight: 600;
line-height: 2;
margin: 0;
From 5e917cfb2d6fd2ec0996fb77813a95699b7db788 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Fri, 5 Apr 2024 12:52:39 +0900
Subject: [PATCH 07/16] =?UTF-8?q?[project-redisign-help-dialog]=20?=
=?UTF-8?q?=E3=83=98=E3=83=AB=E3=83=97=E7=94=BB=E9=9D=A2=E3=81=AE=E3=83=8A?=
=?UTF-8?q?=E3=83=93=E3=82=B2=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=83=90?=
=?UTF-8?q?=E3=83=BC=E3=81=AE=E3=83=AA=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3?=
=?UTF-8?q?=20(#1958)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 色変数名を変更
* 背景色の削除・左枠線の追加
* ナビゲーションバーを新しいデザインへ変更
* サイドバー領域をスクロールできるように変更
---
src/components/base/BaseListItem.vue | 73 +++++++
src/components/help/HelpDialog.vue | 178 ++++++++++--------
.../template/HelpLibraryPolicySection.vue | 2 +-
.../template/HelpMarkdownViewSection.vue | 1 +
.../template/HelpOssLicenseSection.vue | 2 +-
.../template/HelpUpdateInfoSection.vue | 1 +
src/styles/new-colors.scss | 6 +-
7 files changed, 180 insertions(+), 83 deletions(-)
create mode 100644 src/components/base/BaseListItem.vue
diff --git a/src/components/base/BaseListItem.vue b/src/components/base/BaseListItem.vue
new file mode 100644
index 0000000000..356080cc5c
--- /dev/null
+++ b/src/components/base/BaseListItem.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index 03076bcd0c..738dc476e6 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -7,85 +7,78 @@
class="help-dialog transparent-backdrop"
>
-
-
-
-
-
-
-
-
-
- {{ page.name }}
-
-
- {{ page.name }}
+
-
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
diff --git a/src/components/template/HelpLibraryPolicySection.vue b/src/components/template/HelpLibraryPolicySection.vue
index 42ef4e2d83..bba03517d2 100644
--- a/src/components/template/HelpLibraryPolicySection.vue
+++ b/src/components/template/HelpLibraryPolicySection.vue
@@ -134,11 +134,11 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
- background-color: colors.$background;
}
.container-detail {
background-color: colors.$surface;
+ border-left: 1px solid colors.$border;
}
.inner {
diff --git a/src/components/template/HelpMarkdownViewSection.vue b/src/components/template/HelpMarkdownViewSection.vue
index 61531e1424..2665108b98 100644
--- a/src/components/template/HelpMarkdownViewSection.vue
+++ b/src/components/template/HelpMarkdownViewSection.vue
@@ -40,6 +40,7 @@ onMounted(async () => {
// height: 100%;
height: calc(100vh - 90px);
background-color: colors.$surface;
+ border-left: 1px solid colors.$border;
}
.inner {
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
index 05fd702a0c..6791790319 100644
--- a/src/components/template/HelpOssLicenseSection.vue
+++ b/src/components/template/HelpOssLicenseSection.vue
@@ -64,11 +64,11 @@ const selectLicenseIndex = (index: number | undefined) => {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
- background-color: colors.$background;
}
.container-detail {
background-color: colors.$surface;
+ border-left: 1px solid colors.$border;
}
.inner {
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
index a40c565c40..84d2ee67f6 100644
--- a/src/components/template/HelpUpdateInfoSection.vue
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -66,6 +66,7 @@ const props =
// height: 100%;
height: calc(100vh - 90px);
background-color: colors.$surface;
+ border-left: 1px solid colors.$border;
}
.inner {
diff --git a/src/styles/new-colors.scss b/src/styles/new-colors.scss
index e915376608..248006a497 100644
--- a/src/styles/new-colors.scss
+++ b/src/styles/new-colors.scss
@@ -14,7 +14,7 @@ $primitive-red: #d04756;
--newcolor-display: #{$primitive-black, 10%};
--newcolor-display-oncolor: #{$primitive-black, 10%};
- --newcolor-display-placeholder: #{rgba($primitive-black, 0.5)};
+ --newcolor-display-sub: #{rgba($primitive-black, 0.5)};
--newcolor-display-link: #{$primitive-blue};
--newcolor-display-warning: #{$primitive-red};
@@ -48,7 +48,7 @@ $primitive-red: #d04756;
--newcolor-display: #{$primitive-white};
--newcolor-display-oncolor: #{$primitive-black};
- --newcolor-display-placeholder: #{rgba($primitive-white, 0.5)};
+ --newcolor-display-sub: #{rgba($primitive-white, 0.5)};
--newcolor-display-link: #{lighten($primitive-blue, 25%)};
--newcolor-display-warning: #{lighten($primitive-red, 25%)};
@@ -80,7 +80,7 @@ $selected: var(--newcolor-selected);
$display: var(--newcolor-display);
$display-oncolor: var(--newcolor-display-oncolor);
-$display-placeholder: var(--newcolor-display-placeholder);
+$display-sub: var(--newcolor-display-sub);
$display-link: var(--newcolor-display-link);
$display-warning: var(--newcolor-display-warning);
From 95218941e1748fd9e068465222a5ee9b5df49f3f Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Fri, 3 May 2024 11:49:55 +0900
Subject: [PATCH 08/16] =?UTF-8?q?[project-redisign-help-dialog]=E5=90=84?=
=?UTF-8?q?=E3=82=BB=E3=82=AF=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE=E8=83=8C?=
=?UTF-8?q?=E6=99=AF=E8=89=B2=E3=81=AE=E7=B5=B1=E5=90=88=20(#2048)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* ドロワー背景とその他背景の色変数を分離
* セクション間の背景色を統一
* BaseRowCardコンポーネントに影を付与
---
src/components/base/BaseRowCard.vue | 1 +
src/components/help/HelpDialog.vue | 10 +---------
src/components/template/HelpLibraryPolicySection.vue | 7 ++-----
src/components/template/HelpMarkdownViewSection.vue | 2 +-
src/components/template/HelpOssLicenseSection.vue | 7 ++-----
src/components/template/HelpUpdateInfoSection.vue | 2 +-
src/styles/new-colors.scss | 8 +++++++-
7 files changed, 15 insertions(+), 22 deletions(-)
diff --git a/src/components/base/BaseRowCard.vue b/src/components/base/BaseRowCard.vue
index 87ad993f9c..4879081af5 100644
--- a/src/components/base/BaseRowCard.vue
+++ b/src/components/base/BaseRowCard.vue
@@ -42,6 +42,7 @@ defineEmits<{
padding: vars.$padding-2;
gap: vars.$gap-2;
transition: background-color vars.$transition-duration;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.clickable:not(:disabled) {
diff --git a/src/components/help/HelpDialog.vue b/src/components/help/HelpDialog.vue
index 738dc476e6..44e901dd78 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/help/HelpDialog.vue
@@ -277,15 +277,7 @@ const openLogDirectory = window.electron.openLogDirectory;
display: grid;
grid-template-columns: auto 1fr;
backdrop-filter: blur(32px);
-
- &::before {
- content: "";
- position: fixed;
- inset: 0;
- background-color: colors.$background;
- opacity: 0.75;
- z-index: -1;
- }
+ background-color: colors.$background-drawer;
}
// TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
diff --git a/src/components/template/HelpLibraryPolicySection.vue b/src/components/template/HelpLibraryPolicySection.vue
index bba03517d2..77de3ceb4f 100644
--- a/src/components/template/HelpLibraryPolicySection.vue
+++ b/src/components/template/HelpLibraryPolicySection.vue
@@ -37,7 +37,7 @@
+
+
-
-
+
+
+ {{ page.name }}
+
+
+
+ {{ page.name }}
+
-
-
+
-
-
-
- ヘルプ / {{ page.parent ? page.parent + " / " : ""
- }}{{ page.name }}
-
-
- ログフォルダを開く
-
-
-
-
-
-
+
+
+
+ ヘルプ / {{ page.parent ? page.parent + " / " : ""
+ }}{{ page.name }}
+
+
+ ログフォルダを開く
+
+
+
+
+
+
+
-
@@ -134,10 +134,7 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
-}
-
-.container-detail {
- background-color: colors.$surface;
+ background-color: colors.$background;
border-left: 1px solid colors.$border;
}
diff --git a/src/components/template/HelpMarkdownViewSection.vue b/src/components/template/HelpMarkdownViewSection.vue
index 2665108b98..49cb20667a 100644
--- a/src/components/template/HelpMarkdownViewSection.vue
+++ b/src/components/template/HelpMarkdownViewSection.vue
@@ -39,7 +39,7 @@ onMounted(async () => {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
- background-color: colors.$surface;
+ background-color: colors.$background;
border-left: 1px solid colors.$border;
}
diff --git a/src/components/template/HelpOssLicenseSection.vue b/src/components/template/HelpOssLicenseSection.vue
index 6791790319..3cee72e51a 100644
--- a/src/components/template/HelpOssLicenseSection.vue
+++ b/src/components/template/HelpOssLicenseSection.vue
@@ -20,7 +20,7 @@
+
@@ -64,10 +64,7 @@ const selectLicenseIndex = (index: number | undefined) => {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
-}
-
-.container-detail {
- background-color: colors.$surface;
+ background-color: colors.$background;
border-left: 1px solid colors.$border;
}
diff --git a/src/components/template/HelpUpdateInfoSection.vue b/src/components/template/HelpUpdateInfoSection.vue
index 84d2ee67f6..b5f9a6e8dc 100644
--- a/src/components/template/HelpUpdateInfoSection.vue
+++ b/src/components/template/HelpUpdateInfoSection.vue
@@ -65,7 +65,7 @@ const props =
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
- background-color: colors.$surface;
+ background-color: colors.$background;
border-left: 1px solid colors.$border;
}
diff --git a/src/styles/new-colors.scss b/src/styles/new-colors.scss
index 248006a497..068e58535c 100644
--- a/src/styles/new-colors.scss
+++ b/src/styles/new-colors.scss
@@ -7,7 +7,9 @@ $primitive-red: #d04756;
// ライトテーマの色
:root[is-dark-theme="false"] {
- --newcolor-background: #{lighten($primitive-primary, 20%)};
+ --newcolor-background: #{$primitive-white};
+ --newcolor-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)};
+
--newcolor-surface: #{lighten($primitive-primary, 25%)};
--newcolor-border: #{rgba($primitive-black, 0.2)};
--newcolor-selected: #{rgba($primitive-primary, 0.3)};
@@ -42,6 +44,8 @@ $primitive-red: #d04756;
// ダークテーマの色
:root[is-dark-theme="true"] {
--newcolor-background: #{$primitive-black};
+ --newcolor-background-drawer: #{rgba($primitive-black, 0.75)};
+
--newcolor-surface: #{lighten($primitive-black, 3%)};
--newcolor-border: #{rgba($primitive-white, 0.2)};
--newcolor-selected: #{rgba($primitive-primary, 0.3)};
@@ -74,6 +78,8 @@ $primitive-red: #d04756;
}
$background: var(--newcolor-background);
+$background-drawer: var(--newcolor-background-drawer);
+
$surface: var(--newcolor-surface);
$border: var(--newcolor-border);
$selected: var(--newcolor-selected);
From b6a07ddb182158637976b7d682046a9964a17dec Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sat, 11 May 2024 01:12:46 +0900
Subject: [PATCH 09/16] =?UTF-8?q?[project-redisign-help-dialog]=E3=83=95?=
=?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E3=83=91=E3=82=B9=E3=82=92main?=
=?UTF-8?q?=E3=83=AA=E3=83=9D=E3=82=B8=E3=83=88=E3=83=AA=E3=81=AB=E5=90=88?=
=?UTF-8?q?=E3=82=8F=E3=81=9B=E3=82=8B=20(#2059)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* HelpDialog関連のファイルパスをmainリポジトリに合わせる
* Baseディレクトリの名前をPascalCaseに変更
---
src/components/{base => Base}/BaseButton.vue | 0
src/components/{base => Base}/BaseDocumentView.vue | 0
src/components/{base => Base}/BaseListItem.vue | 0
src/components/{base => Base}/BaseRowCard.vue | 0
src/components/{base => Base}/BaseScrollArea.vue | 0
.../{help => Dialog/HelpDialog}/HelpDialog.vue | 12 ++++++------
.../HelpDialog}/HelpLibraryPolicySection.vue | 8 ++++----
.../HelpDialog}/HelpMarkdownViewSection.vue | 4 ++--
.../HelpDialog}/HelpOssLicenseSection.vue | 6 +++---
.../HelpDialog}/HelpUpdateInfoSection.vue | 4 ++--
src/views/EditorHome.vue | 2 +-
11 files changed, 18 insertions(+), 18 deletions(-)
rename src/components/{base => Base}/BaseButton.vue (100%)
rename src/components/{base => Base}/BaseDocumentView.vue (100%)
rename src/components/{base => Base}/BaseListItem.vue (100%)
rename src/components/{base => Base}/BaseRowCard.vue (100%)
rename src/components/{base => Base}/BaseScrollArea.vue (100%)
rename src/components/{help => Dialog/HelpDialog}/HelpDialog.vue (95%)
rename src/components/{template => Dialog/HelpDialog}/HelpLibraryPolicySection.vue (94%)
rename src/components/{template => Dialog/HelpDialog}/HelpMarkdownViewSection.vue (89%)
rename src/components/{template => Dialog/HelpDialog}/HelpOssLicenseSection.vue (91%)
rename src/components/{template => Dialog/HelpDialog}/HelpUpdateInfoSection.vue (94%)
diff --git a/src/components/base/BaseButton.vue b/src/components/Base/BaseButton.vue
similarity index 100%
rename from src/components/base/BaseButton.vue
rename to src/components/Base/BaseButton.vue
diff --git a/src/components/base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
similarity index 100%
rename from src/components/base/BaseDocumentView.vue
rename to src/components/Base/BaseDocumentView.vue
diff --git a/src/components/base/BaseListItem.vue b/src/components/Base/BaseListItem.vue
similarity index 100%
rename from src/components/base/BaseListItem.vue
rename to src/components/Base/BaseListItem.vue
diff --git a/src/components/base/BaseRowCard.vue b/src/components/Base/BaseRowCard.vue
similarity index 100%
rename from src/components/base/BaseRowCard.vue
rename to src/components/Base/BaseRowCard.vue
diff --git a/src/components/base/BaseScrollArea.vue b/src/components/Base/BaseScrollArea.vue
similarity index 100%
rename from src/components/base/BaseScrollArea.vue
rename to src/components/Base/BaseScrollArea.vue
diff --git a/src/components/help/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
similarity index 95%
rename from src/components/help/HelpDialog.vue
rename to src/components/Dialog/HelpDialog/HelpDialog.vue
index 44e901dd78..20c2d68e6f 100644
--- a/src/components/help/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -77,12 +77,12 @@
diff --git a/src/styles/colors-v2.scss b/src/styles/colors-v2.scss
index 92ebaa73d7..79c757034a 100644
--- a/src/styles/colors-v2.scss
+++ b/src/styles/colors-v2.scss
@@ -10,10 +10,10 @@ $primitive-red: #d04756;
// ライトテーマの色
:root[is-dark-theme="false"] {
- --color-v2-background: #{$primitive-white};
+ --color-v2-background: #{lighten($primitive-primary, 25%)};
--color-v2-background-drawer: #{rgba(lighten($primitive-primary, 20%), 0.75)};
- --color-v2-surface: #{lighten($primitive-primary, 25%)};
+ --color-v2-surface: #{$primitive-white};
--color-v2-border: #{rgba($primitive-black, 0.2)};
--color-v2-selected: #{rgba($primitive-primary, 0.3)};
From 82e1507b601b06042c2ec4b6eb09a90ae33638a4 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Sat, 6 Jul 2024 05:43:57 +0900
Subject: [PATCH 15/16] =?UTF-8?q?[project-redisign-help-dialog]=20?=
=?UTF-8?q?=E3=83=87=E3=82=B6=E3=82=A4=E3=83=B3=E3=81=AE=E8=AA=BF=E6=95=B4?=
=?UTF-8?q?=20(#2155)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 横幅が狭いときの表示崩れを修正
* 改段落ができていない箇所に改段落を追加
* スクロールバーの色を濃くする
* table要素のスタイルを追加
* DocumentViewの余白を調節
* div要素を削除
---
public/howtouse.md | 1 +
src/components/Base/BaseDocumentView.vue | 71 +++++++++++++++----
.../Dialog/HelpDialog/HelpDialog.vue | 1 +
src/styles/colors-v2.scss | 12 ++--
src/styles/mixin.scss | 12 ++--
5 files changed, 73 insertions(+), 24 deletions(-)
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 アプリケーションアイコンをクリックし、ショートカットメニューから「開く」を選択してから、「開く」をクリックしてください。
もしくは、アップルメニューから「システム設定」を選択して「プライバシーとセキュリティ」 をクリックし、ページの下にあるセキュリティの「このまま開く」を選んでください。
+
macOS Ventura 以前をお使いの場合は、アップルメニューから「システム環境設定」を選択して「セキュリティとプライバシー」 をクリックし、「一般」パネルで「このまま開く」選んでください。
diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
index 84f14d76f3..8041ad2aad 100644
--- a/src/components/Base/BaseDocumentView.vue
+++ b/src/components/Base/BaseDocumentView.vue
@@ -16,27 +16,33 @@
:deep(h1) {
@include mixin.headline-1;
+ margin-bottom: 2rem;
}
:deep(h2) {
@include mixin.headline-2;
- margin-top: 1.5rem;
+ padding-block: 0.5rem;
+ margin-top: 2rem;
+ margin-bottom: 1.5rem;
border-bottom: 1px solid colors.$border;
}
:deep(h3) {
@include mixin.headline-3;
- margin-top: 1.5rem;
+ margin-top: 1.75rem;
+ margin-bottom: 1rem;
}
:deep(h4) {
@include mixin.headline-4;
- margin-top: 1.25rem;
+ margin-top: 1.5rem;
+ margin-bottom: 0.5rem;
}
:deep(h5) {
@include mixin.headline-5;
margin-top: 1rem;
+ margin-bottom: 0.25rem;
}
:deep(h6) {
@@ -46,12 +52,19 @@
:deep(p) {
line-height: 1.75;
- margin-top: 1rem;
+ margin-bottom: 1rem;
}
- :deep(div > ul),
- :deep(div > ol) {
- margin-top: 1rem;
+ :deep(ul),
+ :deep(ol) {
+ padding-left: 1.5rem;
+ }
+
+ :deep(> ul),
+ :deep(> ol),
+ :deep(:where(div, details) > ul),
+ :deep(:where(div, details) > ol) {
+ margin-bottom: 1rem;
}
:deep(li) {
@@ -68,10 +81,16 @@
}
:deep(img) {
- margin-top: 0.5rem;
border: 1px solid colors.$border;
border-radius: vars.$radius-1;
vertical-align: middle;
+ max-width: 100%;
+ }
+
+ :deep(> img),
+ :deep(:where(div, details) > img) {
+ display: block;
+ margin-bottom: 1rem;
}
:deep(hr) {
@@ -84,7 +103,7 @@
:deep(pre) {
padding: vars.$padding-1;
- margin-top: 1rem;
+ margin-bottom: 1rem;
background-color: colors.$surface;
border: 1px solid colors.$border;
border-radius: vars.$radius-1;
@@ -97,19 +116,43 @@
border-radius: 4px;
}
+ :deep(table) {
+ border-collapse: separate;
+ border-spacing: 0;
+ border-radius: vars.$radius-1;
+ border: 1px solid colors.$border;
+ }
+
+ :deep(tr) {
+ height: vars.$size-control;
+ }
+
+ :deep(td),
+ :deep(th) {
+ padding-inline: vars.$padding-2;
+ }
+
+ :deep(td) {
+ border-top: 1px solid colors.$border;
+ }
+
:deep(details) {
- padding: vars.$padding-1;
+ margin-bottom: 1rem;
+ padding: vars.$padding-2;
background-color: colors.$surface;
border: 1px solid colors.$border;
border-radius: vars.$radius-1;
}
:deep(summary) {
- padding: vars.$padding-1;
- margin: calc(#{vars.$padding-1} * -1);
+ padding: vars.$padding-2;
+ margin: calc(#{vars.$padding-2} * -1);
cursor: pointer;
}
+ :deep(details[open] > summary) {
+ margin-bottom: 0;
+ }
:deep(summary::before) {
content: "▶ ";
}
@@ -117,5 +160,9 @@
:deep(details[open] > summary::before) {
content: "▼ ";
}
+
+ :deep(:last-child) {
+ margin-bottom: 0;
+ }
}
diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index 393bd8a79f..9935c5d11a 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -298,6 +298,7 @@ const openLogDirectory = window.backend.openLogDirectory;
.list-wrapper {
margin-top: 66px;
height: calc(100vh - 90px);
+ width: max-content;
}
.list-inner {
diff --git a/src/styles/colors-v2.scss b/src/styles/colors-v2.scss
index 79c757034a..34561a7146 100644
--- a/src/styles/colors-v2.scss
+++ b/src/styles/colors-v2.scss
@@ -39,9 +39,9 @@ $primitive-red: #d04756;
--color-v2-warning-hovered: #{lighten($primitive-red, 40%)};
--color-v2-warning-pressed: #{lighten($primitive-red, 35%)};
- --color-v2-scrollbar: #{rgba($primitive-black, 0.2)};
- --color-v2-scrollbar-hovered: #{rgba($primitive-black, 0.3)};
- --color-v2-scrollbar-pressed: #{rgba($primitive-black, 0.4)};
+ --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)};
}
// ダークテーマの色
@@ -75,9 +75,9 @@ $primitive-red: #d04756;
--color-v2-warning-hovered: #{darken($primitive-red, 35%)};
--color-v2-warning-pressed: #{darken($primitive-red, 30%)};
- --color-v2-scrollbar: #{rgba($primitive-white, 0.2)};
- --color-v2-scrollbar-hovered: #{rgba($primitive-white, 0.3)};
- --color-v2-scrollbar-pressed: #{rgba($primitive-white, 0.4)};
+ --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);
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 48c33d30a2..e547874fa0 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -8,7 +8,7 @@
@mixin headline-1 {
font-size: 1.75rem;
font-weight: 600;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
@@ -16,7 +16,7 @@
@mixin headline-2 {
font-size: 1.25rem;
font-weight: bold;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
@@ -24,7 +24,7 @@
@mixin headline-3 {
font-size: 1.125rem;
font-weight: bold;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
@@ -32,7 +32,7 @@
@mixin headline-4 {
font-size: 1rem;
font-weight: bold;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
@@ -40,7 +40,7 @@
@mixin headline-5 {
font-size: 0.875rem;
font-weight: bold;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
@@ -48,6 +48,6 @@
@mixin headline-6 {
font-size: 0.75rem;
font-weight: bold;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
From 2b1aec7dc146f27ca545db9e88233f413d0f7e13 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Thu, 25 Jul 2024 02:31:35 +0900
Subject: [PATCH 16/16] =?UTF-8?q?[project-redesign-help-dialog]main?=
=?UTF-8?q?=E3=83=AA=E3=83=9D=E3=82=B8=E3=83=88=E3=83=AA=E3=81=B8=E3=81=AE?=
=?UTF-8?q?=E3=83=9E=E3=83=BC=E3=82=B8=E3=81=AB=E5=90=91=E3=81=91=E3=81=9F?=
=?UTF-8?q?=E6=9C=80=E7=B5=82=E8=AA=BF=E6=95=B4=20(#2160)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 拡張子を.spec.tsに変更
* summary要素のスタイルを追加
* display,display-on-colorにlightenを追加
* SCSS変数を用いるように変更
* HelpDialogコンポーネントのパスを修正
* 新デザインで用いるscssファイルのパスをstyles/v2下に変更
* 不要なuseを削除
---
src/components/Base/BaseButton.vue | 6 ++---
src/components/Base/BaseDocumentView.vue | 6 ++---
src/components/Base/BaseListItem.vue | 6 ++---
src/components/Base/BaseRowCard.vue | 6 ++---
src/components/Base/BaseScrollArea.vue | 4 +--
.../Dialog/HelpDialog/HelpDialog.vue | 8 +++---
.../HelpDialog/HelpLibraryPolicySection.vue | 6 ++---
.../HelpDialog/HelpMarkdownViewSection.vue | 4 +--
.../HelpDialog/HelpOssLicenseSection.vue | 6 ++---
.../HelpDialog/HelpUpdateInfoSection.vue | 18 ++++++-------
.../Dialog/ImportSongProjectDialog.vue | 10 ++++++++
src/styles/_index.scss | 3 ++-
src/styles/{colors-v2.scss => v2/colors.scss} | 4 +--
src/styles/{ => v2}/mixin.scss | 0
src/styles/v2/variables.scss | 24 ++++++++++++++++++
src/styles/variables.scss | 25 -------------------
...ion.ts => HelpMarkdownViewSection.spec.ts} | 2 +-
17 files changed, 73 insertions(+), 65 deletions(-)
rename src/styles/{colors-v2.scss => v2/colors.scss} (97%)
rename src/styles/{ => v2}/mixin.scss (100%)
create mode 100644 src/styles/v2/variables.scss
rename tests/unit/components/help/{HelpMarkdownViewSection.ts => HelpMarkdownViewSection.spec.ts} (87%)
diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index 401f3c91ac..fd7a09e501 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -23,9 +23,9 @@ defineEmits<{
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 7216c8fa49..dad189293b 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -1,6 +1,7 @@
@use './variables' as vars;
@use './colors' as colors;
-@use './colors-v2' as colors-v2;
+@use './v2/variables' as vars-v2;
+@use './v2/colors' as colors-v2;
@import "./fonts";
// 優先度を強引に上げる
diff --git a/src/styles/colors-v2.scss b/src/styles/v2/colors.scss
similarity index 97%
rename from src/styles/colors-v2.scss
rename to src/styles/v2/colors.scss
index 34561a7146..0be6e9fc8c 100644
--- a/src/styles/colors-v2.scss
+++ b/src/styles/v2/colors.scss
@@ -17,8 +17,8 @@ $primitive-red: #d04756;
--color-v2-border: #{rgba($primitive-black, 0.2)};
--color-v2-selected: #{rgba($primitive-primary, 0.3)};
- --color-v2-display: #{$primitive-black, 10%};
- --color-v2-display-oncolor: #{$primitive-black, 10%};
+ --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};
diff --git a/src/styles/mixin.scss b/src/styles/v2/mixin.scss
similarity index 100%
rename from src/styles/mixin.scss
rename to src/styles/v2/mixin.scss
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/src/styles/variables.scss b/src/styles/variables.scss
index 145de998ea..d87e1641b6 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -6,28 +6,3 @@ $menubar-height: 24px;
$detail-view-splitter-cell-z-index: 2;
$character-item-size: 215px; // キャラクター並び替えダイアログなどでの１キャラ表示要素の横幅
-
-: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.ts b/tests/unit/components/help/HelpMarkdownViewSection.spec.ts
similarity index 87%
rename from tests/unit/components/help/HelpMarkdownViewSection.ts
rename to tests/unit/components/help/HelpMarkdownViewSection.spec.ts
index 4f38f080fe..2e6a024e0e 100644
--- a/tests/unit/components/help/HelpMarkdownViewSection.ts
+++ b/tests/unit/components/help/HelpMarkdownViewSection.spec.ts
@@ -1,6 +1,6 @@
import { mount, flushPromises } from "@vue/test-utils";
import { describe, it } from "vitest";
-import HelpMarkdownViewSection from "@/components/template/HelpMarkdownViewSection.vue";
+import HelpMarkdownViewSection from "@/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue";
import { markdownItPlugin } from "@/plugins/markdownItPlugin";
describe("HelpMarkdownViewSection.vue", () => {
macOS Ventura 以前をお使いの場合は、アップルメニューから「システム環境設定」を選択して「セキュリティとプライバシー」 をクリックし、「一般」パネルで「このまま開く」選んでください。
diff --git a/src/components/Base/BaseDocumentView.vue b/src/components/Base/BaseDocumentView.vue
index 84f14d76f3..8041ad2aad 100644
--- a/src/components/Base/BaseDocumentView.vue
+++ b/src/components/Base/BaseDocumentView.vue
@@ -16,27 +16,33 @@
:deep(h1) {
@include mixin.headline-1;
+ margin-bottom: 2rem;
}
:deep(h2) {
@include mixin.headline-2;
- margin-top: 1.5rem;
+ padding-block: 0.5rem;
+ margin-top: 2rem;
+ margin-bottom: 1.5rem;
border-bottom: 1px solid colors.$border;
}
:deep(h3) {
@include mixin.headline-3;
- margin-top: 1.5rem;
+ margin-top: 1.75rem;
+ margin-bottom: 1rem;
}
:deep(h4) {
@include mixin.headline-4;
- margin-top: 1.25rem;
+ margin-top: 1.5rem;
+ margin-bottom: 0.5rem;
}
:deep(h5) {
@include mixin.headline-5;
margin-top: 1rem;
+ margin-bottom: 0.25rem;
}
:deep(h6) {
@@ -46,12 +52,19 @@
:deep(p) {
line-height: 1.75;
- margin-top: 1rem;
+ margin-bottom: 1rem;
}
- :deep(div > ul),
- :deep(div > ol) {
- margin-top: 1rem;
+ :deep(ul),
+ :deep(ol) {
+ padding-left: 1.5rem;
+ }
+
+ :deep(> ul),
+ :deep(> ol),
+ :deep(:where(div, details) > ul),
+ :deep(:where(div, details) > ol) {
+ margin-bottom: 1rem;
}
:deep(li) {
@@ -68,10 +81,16 @@
}
:deep(img) {
- margin-top: 0.5rem;
border: 1px solid colors.$border;
border-radius: vars.$radius-1;
vertical-align: middle;
+ max-width: 100%;
+ }
+
+ :deep(> img),
+ :deep(:where(div, details) > img) {
+ display: block;
+ margin-bottom: 1rem;
}
:deep(hr) {
@@ -84,7 +103,7 @@
:deep(pre) {
padding: vars.$padding-1;
- margin-top: 1rem;
+ margin-bottom: 1rem;
background-color: colors.$surface;
border: 1px solid colors.$border;
border-radius: vars.$radius-1;
@@ -97,19 +116,43 @@
border-radius: 4px;
}
+ :deep(table) {
+ border-collapse: separate;
+ border-spacing: 0;
+ border-radius: vars.$radius-1;
+ border: 1px solid colors.$border;
+ }
+
+ :deep(tr) {
+ height: vars.$size-control;
+ }
+
+ :deep(td),
+ :deep(th) {
+ padding-inline: vars.$padding-2;
+ }
+
+ :deep(td) {
+ border-top: 1px solid colors.$border;
+ }
+
:deep(details) {
- padding: vars.$padding-1;
+ margin-bottom: 1rem;
+ padding: vars.$padding-2;
background-color: colors.$surface;
border: 1px solid colors.$border;
border-radius: vars.$radius-1;
}
:deep(summary) {
- padding: vars.$padding-1;
- margin: calc(#{vars.$padding-1} * -1);
+ padding: vars.$padding-2;
+ margin: calc(#{vars.$padding-2} * -1);
cursor: pointer;
}
+ :deep(details[open] > summary) {
+ margin-bottom: 0;
+ }
:deep(summary::before) {
content: "▶ ";
}
@@ -117,5 +160,9 @@
:deep(details[open] > summary::before) {
content: "▼ ";
}
+
+ :deep(:last-child) {
+ margin-bottom: 0;
+ }
}
diff --git a/src/components/Dialog/HelpDialog/HelpDialog.vue b/src/components/Dialog/HelpDialog/HelpDialog.vue
index 393bd8a79f..9935c5d11a 100644
--- a/src/components/Dialog/HelpDialog/HelpDialog.vue
+++ b/src/components/Dialog/HelpDialog/HelpDialog.vue
@@ -298,6 +298,7 @@ const openLogDirectory = window.backend.openLogDirectory;
.list-wrapper {
margin-top: 66px;
height: calc(100vh - 90px);
+ width: max-content;
}
.list-inner {
diff --git a/src/styles/colors-v2.scss b/src/styles/colors-v2.scss
index 79c757034a..34561a7146 100644
--- a/src/styles/colors-v2.scss
+++ b/src/styles/colors-v2.scss
@@ -39,9 +39,9 @@ $primitive-red: #d04756;
--color-v2-warning-hovered: #{lighten($primitive-red, 40%)};
--color-v2-warning-pressed: #{lighten($primitive-red, 35%)};
- --color-v2-scrollbar: #{rgba($primitive-black, 0.2)};
- --color-v2-scrollbar-hovered: #{rgba($primitive-black, 0.3)};
- --color-v2-scrollbar-pressed: #{rgba($primitive-black, 0.4)};
+ --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)};
}
// ダークテーマの色
@@ -75,9 +75,9 @@ $primitive-red: #d04756;
--color-v2-warning-hovered: #{darken($primitive-red, 35%)};
--color-v2-warning-pressed: #{darken($primitive-red, 30%)};
- --color-v2-scrollbar: #{rgba($primitive-white, 0.2)};
- --color-v2-scrollbar-hovered: #{rgba($primitive-white, 0.3)};
- --color-v2-scrollbar-pressed: #{rgba($primitive-white, 0.4)};
+ --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);
diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss
index 48c33d30a2..e547874fa0 100644
--- a/src/styles/mixin.scss
+++ b/src/styles/mixin.scss
@@ -8,7 +8,7 @@
@mixin headline-1 {
font-size: 1.75rem;
font-weight: 600;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
@@ -16,7 +16,7 @@
@mixin headline-2 {
font-size: 1.25rem;
font-weight: bold;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
@@ -24,7 +24,7 @@
@mixin headline-3 {
font-size: 1.125rem;
font-weight: bold;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
@@ -32,7 +32,7 @@
@mixin headline-4 {
font-size: 1rem;
font-weight: bold;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
@@ -40,7 +40,7 @@
@mixin headline-5 {
font-size: 0.875rem;
font-weight: bold;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
@@ -48,6 +48,6 @@
@mixin headline-6 {
font-size: 0.75rem;
font-weight: bold;
- line-height: 2;
+ line-height: 1.5;
margin: 0;
}
From 2b1aec7dc146f27ca545db9e88233f413d0f7e13 Mon Sep 17 00:00:00 2001
From: Takusea <53995265+takusea@users.noreply.github.com>
Date: Thu, 25 Jul 2024 02:31:35 +0900
Subject: [PATCH 16/16] =?UTF-8?q?[project-redesign-help-dialog]main?=
=?UTF-8?q?=E3=83=AA=E3=83=9D=E3=82=B8=E3=83=88=E3=83=AA=E3=81=B8=E3=81=AE?=
=?UTF-8?q?=E3=83=9E=E3=83=BC=E3=82=B8=E3=81=AB=E5=90=91=E3=81=91=E3=81=9F?=
=?UTF-8?q?=E6=9C=80=E7=B5=82=E8=AA=BF=E6=95=B4=20(#2160)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 拡張子を.spec.tsに変更
* summary要素のスタイルを追加
* display,display-on-colorにlightenを追加
* SCSS変数を用いるように変更
* HelpDialogコンポーネントのパスを修正
* 新デザインで用いるscssファイルのパスをstyles/v2下に変更
* 不要なuseを削除
---
src/components/Base/BaseButton.vue | 6 ++---
src/components/Base/BaseDocumentView.vue | 6 ++---
src/components/Base/BaseListItem.vue | 6 ++---
src/components/Base/BaseRowCard.vue | 6 ++---
src/components/Base/BaseScrollArea.vue | 4 +--
.../Dialog/HelpDialog/HelpDialog.vue | 8 +++---
.../HelpDialog/HelpLibraryPolicySection.vue | 6 ++---
.../HelpDialog/HelpMarkdownViewSection.vue | 4 +--
.../HelpDialog/HelpOssLicenseSection.vue | 6 ++---
.../HelpDialog/HelpUpdateInfoSection.vue | 18 ++++++-------
.../Dialog/ImportSongProjectDialog.vue | 10 ++++++++
src/styles/_index.scss | 3 ++-
src/styles/{colors-v2.scss => v2/colors.scss} | 4 +--
src/styles/{ => v2}/mixin.scss | 0
src/styles/v2/variables.scss | 24 ++++++++++++++++++
src/styles/variables.scss | 25 -------------------
...ion.ts => HelpMarkdownViewSection.spec.ts} | 2 +-
17 files changed, 73 insertions(+), 65 deletions(-)
rename src/styles/{colors-v2.scss => v2/colors.scss} (97%)
rename src/styles/{ => v2}/mixin.scss (100%)
create mode 100644 src/styles/v2/variables.scss
rename tests/unit/components/help/{HelpMarkdownViewSection.ts => HelpMarkdownViewSection.spec.ts} (87%)
diff --git a/src/components/Base/BaseButton.vue b/src/components/Base/BaseButton.vue
index 401f3c91ac..fd7a09e501 100644
--- a/src/components/Base/BaseButton.vue
+++ b/src/components/Base/BaseButton.vue
@@ -23,9 +23,9 @@ defineEmits<{
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 7216c8fa49..dad189293b 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -1,6 +1,7 @@
@use './variables' as vars;
@use './colors' as colors;
-@use './colors-v2' as colors-v2;
+@use './v2/variables' as vars-v2;
+@use './v2/colors' as colors-v2;
@import "./fonts";
// 優先度を強引に上げる
diff --git a/src/styles/colors-v2.scss b/src/styles/v2/colors.scss
similarity index 97%
rename from src/styles/colors-v2.scss
rename to src/styles/v2/colors.scss
index 34561a7146..0be6e9fc8c 100644
--- a/src/styles/colors-v2.scss
+++ b/src/styles/v2/colors.scss
@@ -17,8 +17,8 @@ $primitive-red: #d04756;
--color-v2-border: #{rgba($primitive-black, 0.2)};
--color-v2-selected: #{rgba($primitive-primary, 0.3)};
- --color-v2-display: #{$primitive-black, 10%};
- --color-v2-display-oncolor: #{$primitive-black, 10%};
+ --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};
diff --git a/src/styles/mixin.scss b/src/styles/v2/mixin.scss
similarity index 100%
rename from src/styles/mixin.scss
rename to src/styles/v2/mixin.scss
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/src/styles/variables.scss b/src/styles/variables.scss
index 145de998ea..d87e1641b6 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -6,28 +6,3 @@ $menubar-height: 24px;
$detail-view-splitter-cell-z-index: 2;
$character-item-size: 215px; // キャラクター並び替えダイアログなどでの１キャラ表示要素の横幅
-
-: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.ts b/tests/unit/components/help/HelpMarkdownViewSection.spec.ts
similarity index 87%
rename from tests/unit/components/help/HelpMarkdownViewSection.ts
rename to tests/unit/components/help/HelpMarkdownViewSection.spec.ts
index 4f38f080fe..2e6a024e0e 100644
--- a/tests/unit/components/help/HelpMarkdownViewSection.ts
+++ b/tests/unit/components/help/HelpMarkdownViewSection.spec.ts
@@ -1,6 +1,6 @@
import { mount, flushPromises } from "@vue/test-utils";
import { describe, it } from "vitest";
-import HelpMarkdownViewSection from "@/components/template/HelpMarkdownViewSection.vue";
+import HelpMarkdownViewSection from "@/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue";
import { markdownItPlugin } from "@/plugins/markdownItPlugin";
describe("HelpMarkdownViewSection.vue", () => {