#1696 表示調整

VOICEVOX · Jan 24, 2024 · 0b2ab35 · 0b2ab35
1 parent b5801cc
commit 0b2ab35
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 157 deletions.
diff --git a/src/components/Sing/CharacterPortrait.vue b/src/components/Sing/CharacterPortrait.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="character-portrait-wrap" :class="{ hide: !isShowSinger }">
+    <img class="character-portrait" :src="portraitPath" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from "vue";
+import { useStore } from "@/store";
+
+export default defineComponent({
+  name: "CharacterPortrait",
+  setup() {
+    const store = useStore();
+    const isShowSinger = computed(() => store.state.isShowSinger);
+
+    const userOrderedCharacterInfos = computed(
+      () => store.getters.USER_ORDERED_CHARACTER_INFOS
+    );
+
+    const characterInfo = computed(() => {
+      if (!userOrderedCharacterInfos.value || !store.state.singer) {
+        return undefined;
+      }
+      return store.getters.CHARACTER_INFO(
+        store.state.singer.engineId,
+        store.state.singer.styleId
+      );
+    });
+
+    const portraitPath = computed(() => characterInfo.value?.portraitPath);
+
+    return {
+      isShowSinger,
+      userOrderedCharacterInfos,
+      characterInfo,
+      portraitPath,
+    };
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@use '@/styles/variables' as vars;
+@use '@/styles/colors' as colors;
+
+// 画面右下に固定表示
+// 幅固定、高さ可変、画像のアスペクト比を保持、wrapのwidthに合わせてheightを調整
+// bottom位置はスクロールバーの上に表示
+.character-portrait-wrap {
+  opacity: 0.8;
+  overflow: hidden;
+  pointer-events: none;
+  position: fixed;
+  bottom: 0;
+  right: 96px;
+  min-width: 200px;
+  max-width: 20vw;
+  z-index: 10;
+}
+
+.character-portrait {
+  width: 100%;
+  height: auto;
+  transition: all 0.3s ease;
+}
+</style>
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
@@ -177,6 +177,7 @@
       }"
       @input="setZoomY"
     />
+    <character-portrait />
   </div>
 </template>
 
@@ -210,6 +211,7 @@ import SequencerRuler from "@/components/Sing/SequencerRuler.vue";
 import SequencerKeys from "@/components/Sing/SequencerKeys.vue";
 import SequencerNote from "@/components/Sing/SequencerNote.vue";
 import SequencerPhraseIndicator from "@/components/Sing/SequencerPhraseIndicator.vue";
+import CharacterPortrait from "@/components/Sing/CharacterPortrait.vue";
 
 type PreviewMode = "ADD" | "MOVE" | "RESIZE_RIGHT" | "RESIZE_LEFT";
 
@@ -225,6 +227,7 @@ export default defineComponent({
     SequencerKeys,
     SequencerNote,
     SequencerPhraseIndicator,
+    CharacterPortrait,
   },
   setup() {
     const store = useStore();

diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
@@ -199,6 +199,7 @@ export default defineComponent({
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 100;
 
   &.selected {
     // 色は仮

diff --git a/src/components/Sing/SingerPanel.vue b/src/components/Sing/SingerPanel.vue
diff --git a/src/components/Sing/ToolBar.vue b/src/components/Sing/ToolBar.vue
@@ -1,12 +1,29 @@
 <template>
   <div class="sing-toolbar">
-    <div
-      class="singer-panel-toggler"
-      :class="{ active: isShowSinger }"
-      @click="toggleShowSinger"
-    >
-      <img :src="selectedStyleIconPath" class="singer-avatar" />
-    </div>
+    <character-menu-button>
+      <div class="character-menu-toggle">
+        <q-avatar
+          v-if="selectedStyleIconPath"
+          class="character-avatar"
+          size="3.5rem"
+        >
+          <img :src="selectedStyleIconPath" class="character-avatar-icon" />
+        </q-avatar>
+        <div class="character-info">
+          <div class="character-name">
+            {{ selectedCharacterName }}
+          </div>
+          <div class="character-style">
+            {{ selectedCharacterStyle }}
+          </div>
+        </div>
+        <q-icon
+          name="arrow_drop_down"
+          size="sm"
+          class="character-menu-dropdown-icon"
+        />
+      </div>
+    </character-menu-button>
     <div class="sing-player">
       <q-btn
         flat
@@ -106,18 +123,17 @@ import {
   isValidBeats,
   isValidBpm,
 } from "@/sing/domain";
+import CharacterMenuButton from "@/components/Sing/CharacterMenuButton.vue";
 
 export default defineComponent({
   name: "SingToolBar",
-
+  components: {
+    CharacterMenuButton,
+  },
   setup() {
     const store = useStore();
-    const isShowSinger = computed(() => store.state.isShowSinger);
-    const toggleShowSinger = () => {
-      store.dispatch("SET_SHOW_SINGER", {
-        isShowSinger: !isShowSinger.value,
-      });
-    };
+
+    const uiLocked = computed(() => store.getters.UI_LOCKED);
 
     const userOrderedCharacterInfos = computed(
       () => store.getters.USER_ORDERED_CHARACTER_INFOS
@@ -131,6 +147,17 @@ export default defineComponent({
         store.state.singer.styleId
       );
     });
+    const selectedCharacterName = computed(() => {
+      return selectedCharacterInfo.value?.metas.speakerName;
+    });
+    const selectedCharacterStyle = computed(() => {
+      return selectedCharacterInfo.value?.metas.styles.find((style) => {
+        return (
+          style.styleId === store.state.singer?.styleId &&
+          style.engineId === store.state.singer?.engineId
+        );
+      })?.styleName;
+    });
     const selectedStyleIconPath = computed(() => {
       const styles = selectedCharacterInfo.value?.metas.styles;
       return styles?.find((style) => {
@@ -299,8 +326,9 @@ export default defineComponent({
     });
 
     return {
-      isShowSinger,
-      toggleShowSinger,
+      uiLocked,
+      selectedCharacterName,
+      selectedCharacterStyle,
       selectedStyleIconPath,
       bpmInputBuffer,
       beatsInputBuffer,
@@ -327,38 +355,53 @@ export default defineComponent({
 @use '@/styles/variables' as vars;
 @use '@/styles/colors' as colors;
 
-.sing-toolbar {
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+.character-menu-toggle {
   align-items: center;
   display: flex;
-  padding: 8px 16px;
+  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
+  position: relative;
+}
+.character-avatar-icon {
+  display: block;
+  height: 100%;
+  object-fit: cover;
   width: 100%;
 }
 
-.singer-panel-toggler {
-  border: 2px solid #bbb;
-  border-radius: 50%;
-  display: block;
-  height: 48px;
-  margin-right: auto;
-  overflow: hidden;
-  width: 48px;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &.active {
-    border-color: colors.$primary;
-  }
+.character-info {
+  align-items: start;
+  display: flex;
+  flex-direction: column;
+  margin-left: 0.5rem;
+  text-align: left;
+  justify-content: center;
+  white-space: nowrap;
+}
+.character-name {
+  font-size: 0.875rem;
+  font-weight: bold;
+  line-height: 1rem;
+  padding-top: 0.5rem;
 }
 
-.singer-avatar {
-  background: colors.$background;
-  display: block;
-  object-fit: cover;
-  height: 100%;
+.character-style {
+  color: #999;
+  font-size: 0.75rem;
+  font-weight: bold;
+  line-height: 1rem;
+}
+
+.character-menu-dropdown-icon {
+  color: rgba(0, 0, 0, 0.54);
+  margin-left: 0.25rem;
+}
+.sing-toolbar {
+  border-top: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px 0 0;
   width: 100%;
 }
 
@@ -396,7 +439,6 @@ export default defineComponent({
 .sing-setting {
   align-items: center;
   display: flex;
-  margin-left: auto;
 }
 
 .sing-volume {