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] =?UTF-8?q?[project-redesign-help-dialog]main=E3=83=AA?= =?UTF-8?q?=E3=83=9D=E3=82=B8=E3=83=88=E3=83=AA=E3=81=B8=E3=81=AE=E3=83=9E?= =?UTF-8?q?=E3=83=BC=E3=82=B8=E3=81=AB=E5=90=91=E3=81=91=E3=81=9F=E6=9C=80?= =?UTF-8?q?=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", () => {