#470 キャラ・スタイル変更UIの改良

[MT224244]

内容

#470 の話がまとまってそうだったので、最終的に出されていた案を実装してみました

関連 Issue

close #470

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

movie.mp4

[Hiroshiba]

良いですね！！
ちょっと追加で、変更を議論したいです！

似たUIにパワポで右クリックすると出てくるメニューが有るのですが、こちらは（非常に薄いですが）左右のボタンのセパレータがあります。

セパレータがあると左右のボタンが別であると一瞬でわかって良いかもです。

右三角をクリックするとメニューが閉じますが、ホバーで開くことに気づかず閉じてしまいそうなので、クリックしても閉じない挙動が良いのかなと思いました。

あと右三角のボタンの当たり判定が小さめに感じたので、もうちょっと横方向に拡大するとより使いやすくなるのかなと思いました。
ただ見た目は今のシュッとした感じのほうが良いので、見た目は変えずに当たり判定を大きくする方法があればそちらのほうが良いかもです。

[MT224244]

少し行き詰っているので現状の報告をします

まずはデザインについて

右三角のボタンの当たり判定が小さめに感じたので、もうちょっと横方向に拡大するとより使いやすくなるのかな

横幅を少し広げました(xs -> sm)

見た目は変えずに当たり判定を大きくする方法があればそちらのほうが良い

見た目通りの当たり判定じゃないのは逆に使いづらい(誤クリックを誘発しかねない)と思うので、見た目と当たり判定は一致しているべきだと考えています

セパレータがあると左右のボタンが別であると一瞬でわかって良いかも

とりあえず4パターン用意しました
個人的には1枚目か4枚目のどちらかがいいかなと思っています

そしてここからが詰まっている原因なのですが、

ホバーで開くことに気づかず閉じてしまいそうなので、クリックしても閉じない挙動が良い

これが思った以上に厄介です
現在はリストの表示にQuasarのQMenuを使用していますが、デフォルトで「ボタンをクリックしたら開閉をトグルする」という挙動をしていて、これを抑制する方法を見つけられませんでした
更にdebounceが邪魔をしてクリックする度にdebounce時間分だけサブメニューが消える時間が生まれてしまいます

movie.mp4

QMenuに persistent というそれっぽいPropがあったので使ってみたところ、サブメニュー展開の挙動は理想的なものになりましたが、サブメニューの項目がクリック出来ないという致命的な問題が発生しました

movie.mp4

次に、クリック時だけdebounceを0にすればいいのではないかということで実装してみましたが、左クリック押下中だけサブメニューが消えるという中途半端な挙動になりました

movie.mp4

QMenuをやめて別の方法で実装するなど他に方法は考えられますが、時間がかかりそうな上に正直なところ現状そこまでするほどのモチベーションはないので、やるなら他の方にお願いしたいかなぁという感じです

[Hiroshiba]

見た目通りの当たり判定じゃないのは逆に使いづらい(誤クリックを誘発しかねない)と思う

たしかに！！

4パターン用意しました

個人的には素直な1番か、パワポの挙動の3番が良いのかなと思いました。
ということで1番でお願いします！
雰囲気を確かめてみたいのでもしよかったら3番への変更方法も教えていただけると嬉しいです。（border・・・？）

ホバーで開くことに気づかず閉じてしまいそうなので、クリックしても閉じない挙動が良い
これが思った以上に厄介です

いろいろ試して頂いてありがとうございます！！
なるほど、たしかに非常に厄介そうですね･･･。

onClickしても何もしない、という挙動は難しそうでしょうか。
もしそれも難しい or イマイチな挙動になったら、まあ１回間違えたら２回目以降は間違えないので、ホバーすると開く・クリックしたら閉じちゃうの最初の挙動が良いかなと思いました。

[MT224244]

パワポの挙動の3番

Office系のソフトを所持していなかったので実際に確認できず、貼っていただいたスクショを見た感じ4番っぽいなと思っていましたが、3番だったんですね
であれば3番もアリだと思います

1番でお願いします

3番への変更方法

とりあえずコミット自体は1番ですることにします
3番への変更方法ですが、QSeparatorのclassに q-my-xs を付けるだけです
同じように2番へは q-mx-xs を、4番へは q-ma-xs を付けるだけで変更できます

onClickしても何もしない、という挙動

こちら側でボタンのonClickをいくら弄ってもQMenuは勝手に開閉トグルしてしまいます
親がボタンだからというわけでもないようで、QMenuの親をdiv要素にしても、そのdivをクリックで勝手に開閉します(どういう実装してるんだこれ…)
ということで、サブメニューの開閉状態を完全に制御するのは現状難しい、と思います…

ホバーすると開く・クリックしたら閉じちゃうの最初の挙動

力及ばず申し訳ありませんが、一旦戻してデザイン調整のみ含んだ状態でコミットさせていただこうと思います…

[Hiroshiba]

変更の方法ありがとうございます！動かしてみた感じも１番が良いなと思いました！

コードも読んでみました。
quasarのオプション眺めていたらそれっぽいものがあったのでコメントしてみました。

[Hiroshiba]

ちょっと試した感じ、ここに:no-parent-event="true"を書くとクリックが無効にできました！
ダブルチェックのために伺いたいのですが、こうしても変な挙動が起きなそうでしょうか・・・？

[MT224244]

no-parent-event

これはこれはとんでもなく恥ずかしい見落としをしていました…
こちらで試してみた感じでも問題なく動いていそうです！

クリックしても何も起きないボタンはボタンである必要がないので、少し弄ってカーソルを通常のままにしてホバーカラーも微妙に変えてみました
これでどうでしょうか？

movie.mp4

[Hiroshiba]

ホバーカラーは良さそうに感じました！
マウスカーソルは正直どっちが良いかわからないので、デフォルトの挙動の指マークでとりあえず良いのかなと思いました・・・！

[Hiroshiba]

LGTM！！