キャラ数が多いときにスクロールバーを表示する (VOICEVOX#749)

* キャラ数が多いときにスクロールバーを表示する * .transparent-backdropクラス追加、seamless除去 * 追加し忘れ
coolkiwiii · May 10, 2022 · f40f4ad · f40f4ad
1 parent c3d67b1
commit f40f4ad
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 17 deletions.
diff --git a/src/components/AcceptRetrieveTelemetryDialog.vue b/src/components/AcceptRetrieveTelemetryDialog.vue
@@ -1,10 +1,9 @@
 <template>
   <q-dialog
     maximized
-    seamless
     transition-show="jump-up"
     transition-hide="jump-down"
-    class="accept-retrieve-telemetry-dialog"
+    class="accept-retrieve-telemetry-dialog transparent-backdrop"
     v-model="modelValueComputed"
   >
     <q-layout container view="hHh Lpr lff" class="bg-background">

diff --git a/src/components/AcceptTermsDialog.vue b/src/components/AcceptTermsDialog.vue
@@ -1,10 +1,9 @@
 <template>
   <q-dialog
     maximized
-    seamless
     transition-show="jump-up"
     transition-hide="jump-down"
-    class="accept-terms-dialog"
+    class="accept-terms-dialog transparent-backdrop"
     v-model="modelValueComputed"
   >
     <q-layout container view="hHh Lpr lff" class="bg-background">

diff --git a/src/components/CharacterOrderDialog.vue b/src/components/CharacterOrderDialog.vue
@@ -1,9 +1,9 @@
 <template>
   <q-dialog
     maximized
-    seamless
     transition-show="jump-up"
     transition-hide="jump-down"
+    class="transparent-backdrop"
     v-model="modelValueComputed"
   >
     <q-layout container view="hHh Lpr lff" class="bg-background">
@@ -501,10 +501,19 @@ export default defineComponent({
   width: 180px;
   height: 100%;
 
+  display: flex;
+  flex-direction: column;
+
   .character-order {
+    flex: 1;
+
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    height: 100%;
+
+    overflow-y: auto;
+
     .character-order-item {
       border-radius: 10px;
       border: 2px solid colors.$display-light;

diff --git a/src/components/DefaultStyleSelectDialog.vue b/src/components/DefaultStyleSelectDialog.vue
@@ -1,10 +1,9 @@
 <template>
   <q-dialog
     maximized
-    seamless
     transition-show="jump-up"
     transition-hide="jump-down"
-    class="default-style-select-dialog"
+    class="default-style-select-dialog transparent-backdrop"
     v-model="modelValueComputed"
   >
     <q-layout container view="hHh Lpr lff" class="bg-background">

diff --git a/src/components/DictionaryManageDialog.vue b/src/components/DictionaryManageDialog.vue
@@ -1,10 +1,9 @@
 <template>
   <q-dialog
     maximized
-    seamless
     transition-show="jump-up"
     transition-hide="jump-down"
-    class="setting-dialog"
+    class="setting-dialog transparent-backdrop"
     v-model="dictionaryManageDialogOpenedComputed"
   >
     <q-layout container view="hHh Lpr fFf" class="bg-background">

diff --git a/src/components/HeaderBarCustomDialog.vue b/src/components/HeaderBarCustomDialog.vue
@@ -1,10 +1,9 @@
 <template>
   <q-dialog
     maximized
-    seamless
     transition-show="jump-up"
     transition-hide="jump-down"
-    class="header-bar-custom-dialog"
+    class="header-bar-custom-dialog transparent-backdrop"
     v-model="headerBarCustomDialogOpenComputed"
   >
     <q-layout container view="hHh Lpr fFf" class="bg-background">

diff --git a/src/components/HelpDialog.vue b/src/components/HelpDialog.vue
@@ -1,10 +1,9 @@
 <template>
   <q-dialog
     maximized
-    seamless
     transition-show="jump-up"
     transition-hide="jump-down"
-    class="help-dialog"
+    class="help-dialog transparent-backdrop"
     v-model="modelValueComputed"
   >
     <q-layout container view="hHh Lpr lff">

diff --git a/src/components/HotkeySettingDialog.vue b/src/components/HotkeySettingDialog.vue
@@ -1,10 +1,9 @@
 <template>
   <q-dialog
     maximized
-    seamless
     transition-show="jump-up"
     transition-hide="jump-down"
-    class="hotkey-setting-dialog"
+    class="hotkey-setting-dialog transparent-backdrop"
     v-model="hotkeySettingDialogOpenComputed"
   >
     <q-layout container view="hHh Lpr lff" class="bg-background">

diff --git a/src/components/SettingDialog.vue b/src/components/SettingDialog.vue
@@ -1,10 +1,9 @@
 <template>
   <q-dialog
     maximized
-    seamless
     transition-show="jump-up"
     transition-hide="jump-down"
-    class="setting-dialog"
+    class="setting-dialog transparent-backdrop"
     v-model="settingDialogOpenedComputed"
   >
     <q-layout container view="hHh Lpr fFf" class="bg-background">

diff --git a/src/styles/_index.scss b/src/styles/_index.scss
@@ -92,6 +92,11 @@ img {
   }
 }
 
+.transparent-backdrop > .q-dialog__backdrop {
+  background: transparent; // デフォルトの設定だと全画面ダイアログが出る際に黒背景がちらつく
+}
+
+// Markdown
 .markdown-body {
   color: colors.$markdown-color;
   background: colors.$markdown-background;