Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Conversation

Hiroshiba
Copy link
Member

内容

キャラクター数が多いときにスクロールバーを表示するようにします。

関連 Issue

close #746

スクリーンショット・動画など

voicevox.2022-03-11.01-36-17.mp4

その他

動画にあるように、ドラッグで上に持っていくとなぜかメニューバーが消えてしまうバグがあります。
原因がわかりませんでした・・・。
レアケースだし、とりあえずスクロールできないよりは良いかなと思ったのですが、どうでしょう。

@madosuki
Copy link
Contributor

試してみた感じdraggableタグをdivタグで囲んだらメニューバーが消える現象が無くなるぽいです。

@Hiroshiba
Copy link
Member Author

@madosuki さん
コメントありがとうございます!!
どんな感じですれば良さそうでしょうか・・・?👀
(試してみたのですがcss的にサクッとうまく行かず。。)

@madosuki
Copy link
Contributor

madosuki commented Mar 15, 2022

あーどうやら勘違いのようでした。すみません。
スクロールバーが出なくなってたのでバグが再現しなかったようです。

スクロールバーが出ている状態でドラッグするとメニューバーが消滅するが、ウィンドウ操作してウィンドウサイズを変えるとメニューバーが再出現するのでDOMが何かしら壊れているのかなぁとは思いますが、audio cellの方だとこの現象現れないし原因がさっぱりわかりません。

@Hiroshiba
Copy link
Member Author

再現を試みていただきありがとうございます!!
本当に仰るとおりで、audio cellの方では起こっていいないので謎なんですよね・・・。ダイアログ周りなのかな・・・

@madosuki
Copy link
Contributor

再現を試みていただきありがとうございます!! 本当に仰るとおりで、audio cellの方では起こっていいないので謎なんですよね・・・。ダイアログ周りなのかな・・・

試しにq-dialogseamlessを外してみたところバグが出なくなったので多分そうかもしれません。

@Hiroshiba
Copy link
Member Author

なるほど!!
seamlessを付けると下からにゅっと出てきそうで、これがスクロールに悪影響を及ぼしてる、みたいな・・・?

@k-chop
Copy link
Contributor

k-chop commented Apr 17, 2022

ズレがどうして起こってしまうのかは謎ですが、QDialogにseamlessをつけていると
ダイアログ下のコンテンツのスクロールを防止する機能が働かなくなるので
この問題の対応策としては、madosukiさんが仰っている通りQDialogからseamlessを外すで間違いなさそうです。

maximizeがついており、ダイアログ開いている間はダイアログを見て欲しい・下のコンテンツを操作してほしくない意図があると思うので、
seamless指定がそもそも用途に合っていなさそうな気がしました。
https://quasar.dev/vue-components/dialog#different-modes

Seamless: Dialogs can also be a part of the page, without requiring immediate focus.

@Hiroshiba
Copy link
Member Author

おーーーなるほどです!!
seamlessを外していろいろ良い感じになるなら、それで全然良い気がしました!!!

@Hiroshiba
Copy link
Member Author

seamlessを消すと、遷移時に一瞬背景が真っ黒になってから白背景に戻るので、ちょっとUI的によくなさそうでした。

遷移時の黒背景はq-dialog__backdropclassについてそうだったので消したかったのですが、

.q-dialog__backdrop {
  background-color: transparent !important;
}

などと指定してもうまくいきませんでした。。

とりあえずスクロールできないことが問題なので、seamlessは付けたままにして、今のPRのままマージしちゃうのが良いのかなとちょっと思っています。

@k-chop
Copy link
Contributor

k-chop commented May 3, 2022

(この対応が他に問題を起こしそうだったら華麗にスルーしてください 🙇 )

こんな感じ(対応してみたコミットへのリンク) でseamless外しつつ背景透明にできました。

<q-dialog
    maximized
-   seamless
+   class="transparent-backdrop"
    ...
+ <style>
+ .transparent-backdrop > .q-dialog__backdrop {
+   background: transparent;
+ }
+ </style>

上記コミットでは CharacterOrderDialog.vue に記述しちゃってますが、
もはやscopedではないので _index.scss に置いちゃってもいいかもしれません。
scopedだと実現できない理由は後述してます。

背景を透明にしたいdialogにだけ class="transparent-backdrop" を指定する運用なので、プリセット登録や出力ファイル名指定等の他のダイアログには影響を与えません。


scopedで実現できなかった理由:
QDialog内部で使っているTeleport(ReactPortalみたいなやつ)のバグ?仕様?が原因のようでした
Teleportの直下だとscopedで使う data-v-xxx がうまく付与できないらしいです

@Hiroshiba
Copy link
Member Author

@k-chop さんのご助言を採用したところ、望みの動作になりました!!ありがとうございます!!

@Hiroshiba
Copy link
Member Author

大丈夫そうなのでマージします!

@Hiroshiba Hiroshiba merged commit f40f4ad into VOICEVOX:main May 10, 2022
@Hiroshiba Hiroshiba deleted the キャラ数が多いときにスクロールバーを表示する branch May 10, 2022 16:06
coolkiwiii added a commit to coolkiwiii/voicevox_EN that referenced this pull request May 15, 2022
commit 9d742ac
Author: Hiroshiba <hihokaruta@gmail.com>
Date:   Mon May 16 01:13:58 2022 +0900

    エンジンのバージョンを0.12.4-previewに (VOICEVOX#809)

commit 4ffd776
Author: kantas-spike <101532773+kantas-spike@users.noreply.github.com>
Date:   Sat May 14 04:12:08 2022 +0900

    テキストの「読み込み」及び「繋げて書き出し」で「キャラ名(スタイル名)」を利用可能に (VOICEVOX#805)

    * テキストの「読み込み」及び「繋げて書き出し」で「キャラ名(スタイル名)」を利用可能に

    * StyleInfo型のstyleNameが未定義時は"ノーマル"をテキスト出力する

commit f40f4ad
Author: Hiroshiba <hihokaruta@gmail.com>
Date:   Wed May 11 01:06:36 2022 +0900

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

    * キャラ数が多いときにスクロールバーを表示する

    * .transparent-backdropクラス追加、seamless除去

    * 追加し忘れ

commit c3d67b1
Author: Gray Suitcase <41382894+PickledChair@users.noreply.github.com>
Date:   Wed May 11 01:04:48 2022 +0900

    Fix: LinuxとmacOSの配布パッケージを動作可能にする (VOICEVOX#798)

    * ビルド後はappDirPathにある.envを読みに行く

    * .envのパス指定に関するコメントを追加

commit 4157aec
Author: kchop <whelmaze@gmail.com>
Date:   Wed May 11 01:02:47 2022 +0900

    書き出しファイル名をカスタマイズ可能にする (VOICEVOX#789)

    * 設定値の型等に項目追加

    * 与えたパターンからファイル名が決定できるようにした

    * 値を取ってくるのとファイル名のために加工するメソッドを分ける

    * utilityへ移動

    * ツールチップが特定条件でしか出てこなかったのを修正

    * コンポーネントの実装

    * スタイルの調整

    * 重複し得るファイル名指定で一括出力した場合に上書きされないようにする

    * 日付も挿入可能にする

    * デバッグ出力の削除

    * 連番を必須にしつつコンポーネントを多少リファクタ

    * テストの修正

    * Revert "重複し得るファイル名指定で一括出力した場合に上書きされないようにする"

    This reverts commit 8a1be6b.

    * サンプルテキストの修正

    * テキストにタグ文字列を含めたとき悪いことができないようにする

    * 変数名などのリファクタ

    * 別名つけただけの型を削除

    * 表示される文言の調整

    * 出力ファイル名に$を使えなくしてマッチ対象の問題をちょっと強引に解決

    * nextTickを使う

    * 日付がyyyymmddじゃなかった問題を修正

    * 型定義をシンプルに

    * styleNameタグにかっこを含めない

    * 初回に設定ダイアログを開いたときデフォルト値をフォームに入れるように

commit fc04a18
Author: madosuki <yurikasamaaikatsu@gmail.com>
Date:   Mon May 9 02:34:46 2022 +0900

    「エンジンを再起動する機能」を機能するように修正 (VOICEVOX#800)

    * add detectNvidia function

    * follow to menu bar

    * remove no longer a variable

    * run fmt

    * fix typo

    * remove utils.ts and some changes in background.ts

    * change message box type and detail, and change behaviour of setOnLaunchModeItemClicked

    * recreate package-lock.json using node 12.18.2

    * re recreate package-lock.json using node 12.18.2 and npm 7.20.5

    * recreate package-lock.json using node 12.18.2 and npm 6.14.5

    * recreate package-lock.json using node 12.18.2 and npm 7.20.3

    * fix conflict

    * fix feature of restart engine, add a argument

commit 9f8cf04
Author: kantas-spike <101532773+kantas-spike@users.noreply.github.com>
Date:   Thu May 5 03:13:57 2022 +0900

    全テキスト欄の文章をキャラ名とともに一括してテキスト書き出す機能 (VOICEVOX#787)

    * 全テキスト欄の文章をキャラ名とともに一括してテキスト書き出す機能を追加

    * 一括して出力することがわかるようにメニューの文言を修正

    * "つなげて書き出す"ことがわかるように関数とメッセージの名称を修正

    connectAndExportTextで名称を統一
    * メニューハンドラ名 exportTextFile => connectAndExportText
    * ダイアログ名 exportTextFileWithDialog => connectAndExportTextWithDialog
    * メッセージ名 EXPORT_TEXT_FILE => CONNECT_AND_EXPORT_TEXT

    * 未定義判定の誤り修正

    * スタイルIDとスピーカー名の対応付けを修正

    デフォルトスタイルIDではなく全てのスタイルIDとスピーカー名を対応付ける

    * コードフォーマット実施漏れを修正

commit 8accdfe
Author: nebocco <73807432+nebocco@users.noreply.github.com>
Date:   Tue May 3 03:07:09 2022 +0900

    イントネーション欄の文字横幅をそろえる (VOICEVOX#792)

    * fix: .q-slider width

    * fix: centered text in .text-cell

    * fix: getHoveredClass -> isHovered

    * fix: .text-cell-inner { z-index: 10; }

    * fix: CSS

commit e1ab04c
Author: MT <mt224244@gmail.com>
Date:   Tue May 3 01:57:29 2022 +0900

    .envのDEFAULT_ENGINE_INFOSを改行して定義 (VOICEVOX#794)

    * ➕ dependenciesにdotenvを追加

    * 🔧 DEFAULT_ENGINE_INFOSを改行して定義

    * 🩹 開発時にdotenvが動いていないっぽかったので修正

commit 2088b1e
Author: MT <mt224244@gmail.com>
Date:   Thu Apr 28 01:05:40 2022 +0900

    lodash.debounceを削除 (VOICEVOX#795)

    * ♻️ debounce関数はquasarにもあるので、そちらを使用するよう変更

    * ➖ lodash.debounceを削除

commit f48c89b
Author: madosuki <yurikasamaaikatsu@gmail.com>
Date:   Wed Apr 20 17:43:30 2022 +0900

    タイトルバーのモード表示が固定化されているのを修正 (VOICEVOX#791)

    * add detectNvidia function

    * follow to menu bar

    * remove no longer a variable

    * run fmt

    * fix typo

    * remove utils.ts and some changes in background.ts

    * change message box type and detail, and change behaviour of setOnLaunchModeItemClicked

    * recreate package-lock.json using node 12.18.2

    * re recreate package-lock.json using node 12.18.2 and npm 7.20.5

    * recreate package-lock.json using node 12.18.2 and npm 6.14.5

    * recreate package-lock.json using node 12.18.2 and npm 7.20.3

    * fix conflict

    * become computed

commit 3641a4b
Author: madosuki <yurikasamaaikatsu@gmail.com>
Date:   Sun Apr 17 13:54:53 2022 +0900

    設定に入れたペースト時の挙動を変える項目を「保存」から「操作」に移動 (VOICEVOX#781)

    * add detectNvidia function

    * follow to menu bar

    * remove no longer a variable

    * run fmt

    * fix typo

    * remove utils.ts and some changes in background.ts

    * change message box type and detail, and change behaviour of setOnLaunchModeItemClicked

    * recreate package-lock.json using node 12.18.2

    * re recreate package-lock.json using node 12.18.2 and npm 7.20.5

    * recreate package-lock.json using node 12.18.2 and npm 6.14.5

    * recreate package-lock.json using node 12.18.2 and npm 7.20.3

    * fix conflict

    * move splitTextWhenPaste from saving to 操作

    * add restore from store feature

    * change place of process of init splitTextWhenPaste

    * move init process to Home.vue's onMounted

    * move process of initial splitTextWhenPaste, at Home.vue to store/index.ts

    * fix conflict

    * Revert "fix conflict"

    This reverts commit 7f6cd34.

    * refix conflict

commit 5a37c37
Author: kchop <whelmaze@gmail.com>
Date:   Sat Apr 16 20:02:44 2022 +0900

    ウィンドウ位置・splitterの位置を記憶できるようにする (VOICEVOX#782)

    * electron-window-stateのインストール

    * windowの位置を記憶するように

    * splitterの位置をとりあえず保存・復元できるようにする

    * 最大化状態の復元時、vuexのstoreにも反映する

    manageメソッドの中で最大化状態の復元を行っているので、maximizeハンドラを追加してからでないとstoreのisMaximizedがfalseのままになる

    * 設定ファイル書き換えで異常値が入り得るケースの対策

    * 共通部分の切り出し

    * 書き込みもawaitしておく

    * set時の型が間違っていたので修正

    * viewから直接window.electronを呼ぶのをやめる

    * テスト修正

    * typo修正

commit 35b00ea
Author: 南風 <cyatarow@outlook.com>
Date:   Sat Apr 16 16:54:46 2022 +0900

    DirectMLへの対応 (VOICEVOX#788)

    * Update build.yml

    * directmlの記述を追加

    * DirectMLの記述をさらに追加

    * 微調整

    VOICEVOX#775 (comment)

    * 1個修正忘れ

    VOICEVOX#788 (review)

commit 15763fc
Author: Haruki Tazoe <40142697+jdkfx@users.noreply.github.com>
Date:   Fri Apr 8 22:49:49 2022 +0900

    設定画面の項目の詳細情報をヘルプとして表示する (VOICEVOX#780)

    * パラメータの引き継ぎの詳細表示アイコンを追加

    * 書き出し先を固定についての詳細表示アイコンを追加

    * 上書き防止の詳細表示アイコンを追加

    * txtファイルを書き出しの詳細表示アイコンを追加

    * labファイルを書き出しの詳細表示アイコンを追加

    * 音声をステレオ化の詳細表示アイコンを追加

    * プリセット機能の詳細表示アイコンを追加

    * 疑問文を自動調整の詳細表示アイコンを追加

    * 利用状況のデータ収集の詳細表示アイコンを追加

    * 再生位置を追従の詳細表示アイコンを追加

    * エンジンモードの詳細表示アイコンを追加

    * 文字コードの詳細表示アイコンを追加

    * 分割の挙動の詳細表示アイコンを追加

    * 再生デバイスの詳細表示アイコンを追加

    * 音声のサンプリングレートの詳細表示アイコンを追加

commit 8aa6157
Author: kchop <whelmaze@gmail.com>
Date:   Fri Apr 8 22:47:08 2022 +0900

    選択中のアクセント句をリセットする機能を追加 (VOICEVOX#779)

    * 選択中のアクセント句のみリセットするコマンドとショートカットキー追加

    * 全体リセットのショートカットキー

    * エラーが起きたことが分からなくなるのでここでcatchしない

commit b641f4b
Author: madosuki <yurikasamaaikatsu@gmail.com>
Date:   Fri Apr 8 22:43:51 2022 +0900

    Fix UNLOCK_UI (VOICEVOX#774)

    * add detectNvidia function

    * follow to menu bar

    * remove no longer a variable

    * run fmt

    * fix typo

    * remove utils.ts and some changes in background.ts

    * change message box type and detail, and change behaviour of setOnLaunchModeItemClicked

    * recreate package-lock.json using node 12.18.2

    * re recreate package-lock.json using node 12.18.2 and npm 7.20.5

    * recreate package-lock.json using node 12.18.2 and npm 6.14.5

    * recreate package-lock.json using node 12.18.2 and npm 7.20.3

    * fix conflict

    * add process of check whether 0 for state.uiLockCount

    * add console.warn

    * add eslint disable line

    * fix

commit be239a1
Author: Hiroshiba <hihokaruta@gmail.com>
Date:   Fri Apr 8 14:19:23 2022 +0900

    .envのエンジンへのパスは\区切りではなく/区切りだとわかりやすくする (VOICEVOX#778)

    * .envのエンジンへのパスは\ではなく

    * Update .env.production

    * Update README.md

commit 09c1a18
Author: Hiroshiba <hihokaruta@gmail.com>
Date:   Tue Apr 5 19:56:39 2022 +0900

    テキスト読み込み時にデフォルトスタイルが適用されるように変更 (VOICEVOX#765)

commit 64044d1
Author: kchop <whelmaze@gmail.com>
Date:   Mon Apr 4 00:36:47 2022 +0900

    アクセントからイントネーションを再設定する機能 (VOICEVOX#776)

    * FETCH_MORA_DATAで取ってきたaccentPhrasesでまるっと上書きするactionを追加

    * ショートカットキーで実行できるように

    * 何をリセットするのか明確にする

    * FETCH_MORA_PITCHを追加してそちらを使うように

    * デフォルトショートカットキーをRに変更

    * FETCH_MORA_DATAを使い音素長もリセットする

    * 長さも変更することを示すためaction名の変更
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

キャラクター並び替えUIをスクロールできるようにする
3 participants