【読み方&アクセント辞書 単語一覧】登録単語の編集・削除ボタンの常時表示をやめてOOUI的に

[honey32]

内容

表題の通り、「編集」「削除」ボタンは、タスク指向的ではなく、OOUI的に配置されるのが相応しいので、そのようにスタイルを変更してみました。

• Before
  • リストのヘッダ部分
    • 削除ボタン (選択中のアイテムがあるときのみクリック可)
    • 編集ボタン (選択中のアイテムがあるときのみクリック可)
    • 追加ボタン
  • リスト本体
    • アイテム1
    • アイテム2
    • ...
• After
  • リストのヘッダ部分
    • 追加ボタン
  • リスト本体
    • アイテム1 (選択中の場合)
      • 削除ボタン
      • 編集ボタン
    • アイテム2
    • アイテム3
    • ...

ついでに、

• リストの一番下の部分が少し窮屈にならないように 16px の padding を追加しました。
• リストの各項目を1行のみ表示、あふれたらエリプシス「…」に設定しました。
  • アイコンボタンが現れたり消えたりするとき、行数が変わるとガタつくので

関連 Issue

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

Before

After

voicevox-dict-manager-ooui-like.mp4

その他

[honey32]

e2e テストの存在を忘れてた… 時間のあるときに対応します

[honey32]

修正してみました！

[Hiroshiba]

とても良いですね！！！
（なぜこのUIを思いつけなかったのか。。。。。）

UIとしては全く問題ないのですがUXとしてちょっとだけ変更お願いできると！！

• 削除ボタンを右にしたい
  • 操作が左から右に流れると考えると、削除は一番最後なので一番右がいいかな、みたいな
• 削除ボタンを赤色にしたい
  • テキスト欄を削除する時にゴミ箱が出るのですが、それが確か赤色なので統一感あった方がいいかなと
• ボタンが現れるの「選択時」のみから「選択時orマウスホバー時」にしたい
  • 難しいければ「マウスホバー時」のみでも
  • テキスト欄の挙動がそうなっているのと、クリックするのに若干勇気がいるかもと思ったので

UXに関しては議論の余地ありかもなので、何でもコメントいただけると！！

[honey32]

了解しました！空いた時間で対応してみます！

[honey32]

AudioCell の削除ボタン、確認してみると赤ではなく、通常の色のままでした。（あと、アイコンは delete ではなく delete_outline でした。）

一旦は、そちらにスタイルを合わせてみましたが、いかがでしょうか？

[Hiroshiba]

遅くなってすみません！
UIとても良いと思います！！！ありがとうございます！！！

動作には関係ないのですが、より良いコーディング方法があるので提案してみました！
もしよければ･･･！

[Hiroshiba]

LGTM！！

調整頂きありがとうございました！！
もしよかったらまたプルリクエスト作成に挑戦してみませんか･･･！

UI 含む リファクタリングにご興味あれば、例えば今回の辞書ダイアログのコンポーネント分けとか、あとこちらとか。

• リファクタリング：キー割り当て画面で、ショートカット設定ダイアログを別コンポーネントにする #2002

ちょっとした機能実装にご興味あれば、保存周りの処理が必要ですがこの辺りとか。

• トーク・ソングどちらを前回開いていたか保存し、再開時にそちらが表示されている状態で起動する #2010

あるいは UI の見た目を良くする系だと、ちょっと CSS との戦いになりますが こちら とか

• トークの立ち絵表示を良い感じにしたい #2058

もしご興味あれば是非･･･！！！

[honey32]

なるほど！リファクタリングが面白そうなので、余力のあるときにやってみます！

[Hiroshiba]

ぜひぜひ！！
分からないことあったら本当に何でも聞いてください･･･！