From 038ec58a5edb6d24793b1ddefcde428a22147297 Mon Sep 17 00:00:00 2001
From: sabonerune <102559104+sabonerune@users.noreply.github.com>
Date: Fri, 31 Mar 2023 19:02:59 +0900
Subject: [PATCH 1/4] =?UTF-8?q?ENH:=20CharacterButton=E3=81=AE=E3=83=A1?=
 =?UTF-8?q?=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=8C=E5=B8=B8=E3=81=AB=E4=B8=8B?=
 =?UTF-8?q?=E6=96=B9=E5=90=91=E3=81=AB=E5=B1=95=E9=96=8B=E3=81=95=E3=82=8C?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CharacterButton.vue | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index 13c1eb9528..e6b662ac93 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -2,6 +2,7 @@
   <q-btn
     flat
     class="q-pa-none character-button"
+    ref="buttonRef"
     :disable="uiLocked"
     :class="{ opaque: loading }"
   >
@@ -23,6 +24,8 @@
       class="character-menu"
       transition-show="none"
       transition-hide="none"
+      :max-height="maxMenuHeight"
+      @before-show="updateMenuHeight"
     >
       <q-list style="min-width: max-content" class="character-item-container">
         <q-item
@@ -179,8 +182,8 @@
 </template>
 
 <script setup lang="ts">
-import { debounce } from "quasar";
-import { computed, ref } from "vue";
+import { debounce, QBtn } from "quasar";
+import { computed, Ref, ref } from "vue";
 import { base64ImageToUri } from "@/helpers/imageHelper";
 import { useStore } from "@/store";
 import { CharacterInfo, SpeakerId, Voice } from "@/type/preload";
@@ -291,6 +294,18 @@ const reassignSubMenuOpen = debounce((idx: number) => {
   arr[idx] = true;
   subMenuOpenFlags.value = arr;
 }, 100);
+
+const buttonRef: Ref<InstanceType<typeof QBtn> | undefined> = ref();
+const heightLimit = "65vh"; // QMenuのデフォルト値
+const maxMenuHeight = ref(heightLimit);
+const updateMenuHeight = () => {
+  if (buttonRef.value == undefined)
+    throw new Error("buttonRef.value == undefined");
+  const el = buttonRef.value.$el;
+  if (!(el instanceof Element)) throw new Error("!(el instanceof Element)");
+  const buttonRect = el.getBoundingClientRect();
+  maxMenuHeight.value = `max(170px, min(${heightLimit}, calc(96vh - ${buttonRect.bottom}px)))`;
+};
 </script>
 
 <style scoped lang="scss">

From cf01c89a7bcfd5046fdb016d8c5bc960302c9945 Mon Sep 17 00:00:00 2001
From: sabonerune <102559104+sabonerune@users.noreply.github.com>
Date: Wed, 19 Apr 2023 18:17:46 +0900
Subject: [PATCH 2/4] =?UTF-8?q?FIX:=20=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CharacterButton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index e6b662ac93..2b1c6f6dad 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -295,6 +295,7 @@ const reassignSubMenuOpen = debounce((idx: number) => {
   subMenuOpenFlags.value = arr;
 }, 100);
 
+// 高さを制限してメニューが下方向に展開されるようにする
 const buttonRef: Ref<InstanceType<typeof QBtn> | undefined> = ref();
 const heightLimit = "65vh"; // QMenuのデフォルト値
 const maxMenuHeight = ref(heightLimit);

From 1e1cecf62b53790a99755a8120e96104112914ce Mon Sep 17 00:00:00 2001
From: sabonerune <102559104+sabonerune@users.noreply.github.com>
Date: Mon, 24 Apr 2023 17:58:26 +0900
Subject: [PATCH 3/4] =?UTF-8?q?FIX:=20=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E8=BF=BD=E8=A8=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CharacterButton.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index 2b1c6f6dad..7371e5d29c 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -305,6 +305,8 @@ const updateMenuHeight = () => {
   const el = buttonRef.value.$el;
   if (!(el instanceof Element)) throw new Error("!(el instanceof Element)");
   const buttonRect = el.getBoundingClientRect();
+  // QMenuは展開する方向のスペースが不足している場合、自動的に展開方向を変更してしまうためmax-heightで制限する。
+  // AudioDetailよりボタンが下に来ることはないのでその最低高185pxに余裕を持たせた170pxを最小の高さにする。
   maxMenuHeight.value = `max(170px, min(${heightLimit}, calc(96vh - ${buttonRect.bottom}px)))`;
 };
 </script>

From 9a25d08eace7a4b969fa4587d4c3cded8c6a3111 Mon Sep 17 00:00:00 2001
From: sabonerune <102559104+sabonerune@users.noreply.github.com>
Date: Thu, 27 Apr 2023 18:13:16 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E8=BF=BD=E8=A8=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CharacterButton.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/CharacterButton.vue b/src/components/CharacterButton.vue
index 7371e5d29c..989fc64298 100644
--- a/src/components/CharacterButton.vue
+++ b/src/components/CharacterButton.vue
@@ -307,6 +307,7 @@ const updateMenuHeight = () => {
   const buttonRect = el.getBoundingClientRect();
   // QMenuは展開する方向のスペースが不足している場合、自動的に展開方向を変更してしまうためmax-heightで制限する。
   // AudioDetailよりボタンが下に来ることはないのでその最低高185pxに余裕を持たせた170pxを最小の高さにする。
+  // pxで指定するとウインドウサイズ変更に追従できないので ウインドウの高さの96% - ボタンの下端の座標 でメニューの高さを決定する。
   maxMenuHeight.value = `max(170px, min(${heightLimit}, calc(96vh - ${buttonRect.bottom}px)))`;
 };
 </script>