ソング: 正式なカラーとスタイルを定義する

public/themes/dark.json

@@ -13,12 +13,6 @@
     "warning": "#F27483",
     "text-splitter-hover": "#394152",
     "active-point-focus": "#292F38",
-    "active-point-hover": "#272A2F",
-    "sequencer-whitekey-cell": "#393939",
-    "sequencer-blackkey-cell": "#2D2D2D",
-    "sequencer-main-divider": "#121212",
-    "sequencer-sub-divider": "#2C2C2C",
-    "sequencer-white-key": "#EEEEEE",
-    "sequencer-black-key": "#555555"
+    "active-point-hover": "#272A2F"
   }
 }

public/themes/default.json

@@ -13,12 +13,6 @@
     "warning": "#C10015",
     "text-splitter-hover": "#CCDDFF",
     "active-point-focus": "#E0EAFF",
-    "active-point-hover": "#EEF3FF",
-    "sequencer-whitekey-cell": "#F5F7F5",
-    "sequencer-blackkey-cell": "#EAECEA",
-    "sequencer-main-divider": "#B0B0B0",
-    "sequencer-sub-divider": "#CECECE",
-    "sequencer-white-key": "#FFFFFF",
-    "sequencer-black-key": "#333333"
+    "active-point-hover": "#EEF3FF"
   }
 }

src/components/Sing/CharacterMenuButton/CharacterSelectMenu.vue

@@ -139,7 +139,7 @@ const reassignSubMenuOpen = debounce((idx: number) => {
   subMenuOpenFlags.value = arr;
 }, 100);
 
-const changeStyleId = (speakerUuid: SpeakerId, styleId: StyleId) => {
+const changeStyleId = async (speakerUuid: SpeakerId, styleId: StyleId) => {
   const engineId = store.state.engineIds.find((_engineId) =>
     (store.state.characterInfos[_engineId] ?? []).some(
       (characterInfo) =>
@@ -152,7 +152,7 @@ const changeStyleId = (speakerUuid: SpeakerId, styleId: StyleId) => {
       `No engineId for target character style (speakerUuid == ${speakerUuid}, styleId == ${styleId})`,
     );
 
-  void store.dispatch("COMMAND_SET_SINGER", {
+  await store.dispatch("COMMAND_SET_SINGER", {
     trackId: props.trackId,
     singer: { engineId, styleId },
     withRelated: true,

src/components/Sing/CharacterMenuButton/MenuButton.vue

@@ -38,3 +38,34 @@ const selectedSinger = computed(() => {
   return store.getters.SELECTED_TRACK.singer;
 });
 </script>
+
+<style scoped lang="scss">
+@use "@/styles/variables" as vars;
+@use "@/styles/colors" as colors;
+
+.character-menu {
+  .q-menu {
+    :deep(.q-menu__container) {
+      border-radius: 1.25rem;
+    }
+  }
+  .q-item {
+    color: var(--scheme-color-on-surface);
+  }
+  .q-btn-group {
+    > .q-btn:first-child > :deep(.q-btn__content) {
+      justify-content: flex-start;
+    }
+    > div:last-child:hover {
+      background-color: rgba(var(--scheme-color-secondary-rgb), 0.1);
+    }
+  }
+  .engine-icon {
+    position: absolute;
+    width: 13px;
+    height: 13px;
+    bottom: -6px;
+    right: -6px;
+  }
+}
+</style>

src/components/Sing/CharacterMenuButton/SelectedCharacter.vue

@@ -1,27 +1,23 @@
 <template>
   <div v-if="props.showSkeleton" class="selected-character">
-    <QSkeleton class="character-avatar" type="QAvatar" size="52px" />
+    <QSkeleton class="character-avatar" type="QAvatar" size="40px" />
     <div class="character-info">
       <QSkeleton
         class="character-name skeleton"
         type="rect"
-        width="65px"
-        height="15px"
+        width="64px"
+        height="16px"
       />
       <QSkeleton
         class="character-style"
         type="rect"
         width="110px"
-        height="12px"
+        height="8px"
       />
     </div>
   </div>
   <div v-else class="selected-character">
-    <QAvatar
-      v-if="selectedStyleIconPath"
-      class="character-avatar"
-      size="3.5rem"
-    >
+    <QAvatar v-if="selectedStyleIconPath" class="character-avatar">
       <img :src="selectedStyleIconPath" class="character-avatar-icon" />
     </QAvatar>
     <div class="character-info">
@@ -83,12 +79,32 @@ const selectedStyleIconPath = computed(() => {
 @use "@/styles/colors" as colors;
 
 .selected-character {
+  border: 1px solid var(--scheme-color-outline-variant);
+  border-radius: 4px 0 0 4px;
   align-items: center;
   display: flex;
-  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+  padding: 0 8px 0 4px;
   position: relative;
+  height: 40px;
+  font-smooth: antialiased;
+
+  &:hover {
+    border-color: var(--scheme-color-outline);
+    background: rgba(var(--scheme-color-secondary-container-rgb), 0.1);
+  }
+
+  &:focus {
+    border-color: var(--scheme-color-primary);
+  }
+
+  .character-avatar {
+    background: var(--scheme-color-background);
+    width: 36px;
+    height: 36px;
+  }
 
   .character-avatar-icon {
+    border: 1px solid var(--scheme-color-outline-variant);
     display: block;
     height: 100%;
     object-fit: cover;
@@ -99,33 +115,41 @@ const selectedStyleIconPath = computed(() => {
     align-items: start;
     display: flex;
     flex-direction: column;
-    margin-left: 0.5rem;
+    margin-left: 8px;
     text-align: left;
     justify-content: center;
     white-space: nowrap;
+    font-optical-sizing: auto;
   }
+
   .character-name {
-    font-size: 0.875rem;
-    font-weight: bold;
-    line-height: 1rem;
-    padding-top: 0.5rem;
+    color: var(--scheme-color-on-surface);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 24px;
+    padding-top: 12px;
+    margin-bottom: 0;
+    font-optical-sizing: auto;
 
     &.skeleton {
-      margin-top: 0.4rem;
-      margin-bottom: 0.2rem;
+      margin-top: 0;
+      margin-bottom: 0;
     }
   }
 
   .character-style {
-    color: rgba(colors.$display-rgb, 0.6);
-    font-size: 0.75rem;
-    font-weight: bold;
-    line-height: 1rem;
+    color: var(--scheme-color-on-surface-variant);
+    font-size: 9px;
+    transform: translateY(-5px);
+    font-weight: 400;
+    line-height: 16px;
+    margin-bottom: 8px;
   }
 
   .character-menu-dropdown-icon {
-    color: rgba(colors.$display-rgb, 0.8);
-    margin-left: 0.25rem;
+    display: none;
+    color: var(--scheme-color-on-surface-variant);
+    margin-left: 4px;
   }
 }
 </style>