ノートのスタイルを改善する

romot-co · Jul 12, 2024 · 731f727 · 731f727
1 parent 64e7249
commit 731f727
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 68 deletions.
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
@@ -110,7 +110,6 @@
         }"
       ></div>
     </div>
-    <ThemeChanger />
     <QSlider
       :modelValue="zoomX"
       :min="ZOOM_X_MIN"
@@ -184,7 +183,6 @@ import SequencerPhraseIndicator from "@/components/Sing/SequencerPhraseIndicator
 import CharacterPortrait from "@/components/Sing/CharacterPortrait.vue";
 import SequencerPitch from "@/components/Sing/SequencerPitch.vue";
 import SequencerLyricInput from "@/components/Sing/SequencerLyricInput.vue";
-import ThemeChanger from "@/components/Sing/ThemeChanger.vue";
 import { isOnCommandOrCtrlKeyDown } from "@/store/utility";
 import { createLogger } from "@/domain/frontend/log";
 import { useHotkeyManager } from "@/plugins/hotkeyPlugin";

diff --git a/src/components/Sing/SequencerLyricInput.vue b/src/components/Sing/SequencerLyricInput.vue
@@ -1,18 +1,21 @@
 <template>
-  <!-- TODO: ピッチの上に歌詞入力のinputが表示されるようにする -->
-  <input
-    ref="lyricInput"
-    :value="editingLyricNote.lyric"
-    class="lyric-input"
+  <div
+    class="lyric-input-container"
     :style="{
       transform: `translate3d(${positionX}px,${positionY}px,0)`,
     }"
-    @input="onLyricInput"
-    @mousedown.stop
-    @dblclick.stop
-    @keydown.stop="onLyricInputKeyDown"
-    @blur="onLyricInputBlur"
-  />
+  >
+    <input
+      ref="lyricInput"
+      :value="editingLyricNote.lyric"
+      class="lyric-input"
+      @input="onLyricInput"
+      @mousedown.stop
+      @dblclick.stop
+      @keydown.stop="onLyricInputKeyDown"
+      @blur="onLyricInputBlur"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -86,11 +89,12 @@ const onLyricInput = (event: Event) => {
   if (!(event.target instanceof HTMLInputElement)) {
     throw new Error("Invalid event target");
   }
-  emit("lyricInput", event.target.value, props.editingLyricNote);
+  const newValue = event.target.value;
+  emit("lyricInput", newValue, props.editingLyricNote);
 };
 
 watch(
-  () => props.editingLyricNote,
+  () => props.editingLyricNote.lyric,
   () => {
     nextTick(() => {
       lyricInput.value?.focus();
@@ -105,20 +109,27 @@ watch(
 @use "@/styles/variables" as vars;
 @use "@/styles/colors" as colors;
 
-.lyric-input {
+.lyric-input-container {
   position: absolute;
-  top: 0;
+  top: -1px;
+}
+
+.lyric-input {
   font-weight: 500;
   font-size: 16px;
-  max-width: 4rem;
-  width: fit-content;
-  background-color: var(--md-ref-palette-neutral-99);
+  background-color: rgba(255, 255, 255, 0.72);
   color: var(--md-sys-color-on-primary-fixed);
   outline: 1px solid var(--md-sys-color-primary);
   border-radius: 4px;
   border: 0;
   box-shadow:
     0 4px 6px rgba(0, 0, 0, 0.1),
     0 1px 3px rgba(0, 0, 0, 0.08);
+  padding: 0 4px;
+  width: 8ch;
+  min-width: 8ch;
+  max-width: 16rem;
+  box-sizing: border-box;
+  letter-spacing: -0.1em;
 }
 </style>
diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
@@ -22,27 +22,34 @@
       @mousedown="onBarMouseDown"
       @dblclick="onBarDoubleClick"
     >
-      <div
-        class="note-left-edge"
-        :class="{
-          'cursor-ew-resize': editTargetIsNote,
-        }"
-        @mousedown="onLeftEdgeMouseDown"
-      ></div>
-      <div
-        class="note-right-edge"
-        :class="{
-          'cursor-ew-resize': editTargetIsNote,
-        }"
-        @mousedown="onRightEdgeMouseDown"
-      ></div>
       <ContextMenu
         v-if="editTargetIsNote"
         ref="contextMenu"
         :menudata="contextMenuData"
       />
     </div>
-    <div class="note-lyric" data-testid="note-lyric">
+    <div
+      class="note-left-edge"
+      :class="{
+        'cursor-ew-resize': editTargetIsNote,
+      }"
+      @mousedown="onLeftEdgeMouseDown"
+    ></div>
+    <div
+      class="note-right-edge"
+      :class="{
+        'cursor-ew-resize': editTargetIsNote,
+      }"
+      @mousedown="onRightEdgeMouseDown"
+    ></div>
+    <div
+      class="note-lyric"
+      data-testid="note-lyric"
+      :style="{
+        fontSize: `${height > 16 ? 16 : height - 2}px`,
+        lineHeight: `${height}px`,
+      }"
+    >
       {{ lyricToDisplay }}
     </div>
     <!-- エラー内容を表示 -->
@@ -224,25 +231,18 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
   left: 0;
 
   .note-lyric {
-    position: absolute;
-    left: 4px;
+    border-radius: 4px;
+    position: fixed;
+    left: 2px;
     bottom: 0;
-    min-width: 2em;
-    padding: 0;
     color: var(--md-sys-color-on-secondary-fixed);
     font-size: 16px;
-    font-weight: 500;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: -0.1em;
     white-space: nowrap;
     pointer-events: none;
-    text-shadow:
-      0 0 1px var(--md-ref-palette-neutral-variant-99),
-      0 0 1px var(--md-ref-palette-neutral-variant-99),
-      0 0 1px var(--md-ref-palette-neutral-variant-99),
-      0 0 1px var(--md-ref-palette-neutral-variant-99),
-      0 0 1px var(--md-ref-palette-neutral-variant-99),
-      0 0 1px var(--md-ref-palette-neutral-variant-99),
-      0 0 1px var(--md-ref-palette-neutral-variant-99),
-      0 0 1px var(--md-ref-palette-neutral-variant-99);
+    background: transparent;
   }
 
   .note-bar {
@@ -255,17 +255,14 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     border-radius: 4px;
   }
 
-  .body--light {
-    .note-bar {
-      background-color: var(--md-sys-color-surface-variant);
-    }
-  }
-
   .note-left-edge {
     position: absolute;
     top: 0;
     left: 0;
-    width: 6px;
+    border-radius: 4px 0 0 4px;
+    width: 25%;
+    min-width: 4px;
+    max-width: 8px;
     height: 100%;
 
     &:hover {
@@ -278,7 +275,10 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     position: absolute;
     top: 0;
     right: 0;
-    width: 6px;
+    border-radius: 0 4px 4px 0;
+    width: 25%;
+    min-width: 4px;
+    max-width: 8px;
     height: 100%;
 
     &:hover {
@@ -293,6 +293,10 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
       border-color: var(--md-sys-color-primary-fixed-dim);
     }
 
+    .note-lyric {
+      color: var(--md-sys-color-on-primary-fixed);
+    }
+
     .note-right-edge:hover,
     .note-left-edge:hover {
       background-color: var(--md-sys-color-primary-fixed-dim);
@@ -311,16 +315,15 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
   }
 
   &.below-pitch {
-    opacity: 0.38;
-
     .note-bar {
       background-color: var(--md-sys-color-surface-variant);
       border-color: var(--md-sys-color-outline-variant);
+      opacity: 0.38;
     }
 
     .note-lyric {
       color: var(--md-sys-color-on-surface);
-      text-shadow: none;
+      opacity: 0.72;
     }
 
     .note-right-edge:hover,

diff --git a/src/components/Sing/ToolBar/ToolBar.vue b/src/components/Sing/ToolBar/ToolBar.vue
@@ -541,12 +541,8 @@ onUnmounted(() => {
   padding: 0 12px 0 4px;
 }
 
-.body--light .sing-toolbar {
-  background: var(--md-sys-color-surface-container-low);
-}
-
 .sing-toolbar {
-  background: var(--md-sys-color-surface-container-high);
+  background: var(--md-custom-color-sing-toolbar-container);
   align-items: center;
   display: flex;
   justify-content: space-between;

diff --git a/src/store/setting.ts b/src/store/setting.ts
@@ -391,14 +391,21 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
           blend: true,
         },
         {
-          name: "sing-note-bar-background",
+          name: "sing-note-bar-container",
           palette: "secondary" as PaletteKey,
           lightTone: 90,
           darkTone: 70,
           blend: true,
         },
         {
-          name: "sing-toolbar-background",
+          name: "sing-note-bar-outline",
+          palette: "neutral" as PaletteKey,
+          lightTone: 40,
+          darkTone: 30,
+          blend: true,
+        },
+        {
+          name: "sing-toolbar-container",
           palette: "neutral" as PaletteKey,
           lightTone: 99,
           darkTone: 10,
@@ -415,7 +422,7 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
 
       const baseScheme = createDynamicScheme({
         sourceColor,
-        variant: "fidelity",
+        variant: "content",
         isDark: theme.isDark,
         contrastLevel: 0.0,
         adjustments: themeAdjustments,