From b5ac4f719f3f28ad28bb38074e6cd2dd15714367 Mon Sep 17 00:00:00 2001
From: tunamaguro <79092292+tunamaguro@users.noreply.github.com>
Date: Mon, 6 Feb 2023 08:41:57 +0900
Subject: [PATCH] =?UTF-8?q?=E9=81=B8=E6=8A=9E=E4=B8=AD=E3=81=AE=E3=82=AD?=
 =?UTF-8?q?=E3=83=A3=E3=83=A9=E3=81=8C=E4=B8=80=E7=95=AA=E4=B8=8A=E3=81=AB?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86?=
 =?UTF-8?q?=E3=81=AB=E3=81=97=E3=81=9F=20(#1176)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Hiroshiba <hihokaruta@gmail.com>
Co-authored-by: Nanashi. <sevenc_nanashi@yahoo.co.jp>
---
 src/components/CharacterButton.vue | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index 66639a0e1a..ca4f421eea 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -24,7 +24,7 @@
       transition-show="none"
       transition-hide="none"
     >
-      <q-list style="min-width: max-content">
+      <q-list style="min-width: max-content" class="character-item-container">
         <q-item
           v-if="selectedStyleInfo == undefined && !emptiable"
           class="row no-wrap items-center"
@@ -57,6 +57,7 @@
           v-for="(characterInfo, characterIndex) in characterInfos"
           :key="characterIndex"
           class="q-pa-none"
+          :class="isSelectedItem(characterInfo) && 'selected-row'"
         >
           <q-btn-group flat class="col full-width">
             <q-btn
@@ -65,10 +66,7 @@
               v-close-popup
               class="col-grow"
               :class="
-                selectedCharacter != undefined &&
-                characterInfo.metas.speakerUuid ===
-                  selectedCharacter.metas.speakerUuid &&
-                'selected-character-item'
+                isSelectedItem(characterInfo) && 'selected-character-item'
               "
               @click="onSelectSpeaker(characterInfo.metas.speakerUuid)"
               @mouseover="reassignSubMenuOpen(-1)"
@@ -234,6 +232,11 @@ export default defineComponent({
       return character;
     });
 
+    const isSelectedItem = (characterInfo: CharacterInfo) =>
+      selectedCharacter.value != undefined &&
+      characterInfo.metas.speakerUuid ===
+        selectedCharacter.value?.metas.speakerUuid;
+
     const selectedStyleInfo = computed(() => {
       const selectedVoice = props.selectedVoice;
       const style = selectedCharacter.value?.metas.styles.find(
@@ -297,6 +300,7 @@ export default defineComponent({
       selectedCharacter,
       selectedStyleInfo,
       engineIcons,
+      isSelectedItem,
       getDefaultStyle,
       onSelectSpeaker,
       subMenuOpenFlags,
@@ -349,6 +353,11 @@ export default defineComponent({
 }
 
 .character-menu {
+  .character-item-container {
+    display: flex;
+    flex-direction: column;
+  }
+
   .q-item {
     color: colors.$display;
   }
@@ -363,6 +372,11 @@ export default defineComponent({
     }
   }
 
+  // 選択中のキャラを上にする
+  .selected-row {
+    order: -1;
+  }
+
   .selected-character-item,
   .opened-character-item {
     background-color: rgba(colors.$primary-rgb, 0.2);