エディタのUIをリデザインする

[takusea]

エディタのUIのリデザインを行います。Figmaで作成したデザインをたたき台に決定・実装を行っていきます。

• コンポーネントのディレクトリ構造の決定
• デザイントークンの仕様策定
  • 色変数の設計
  • PaddingやSize等の数値系の変数の設計
• ベースコンポーネント（ButtonやTextFieldなどこれまでQuasarが担っていた部分）
  • 実装方法の決定（Quasarのスタイルを打ち消す形かUnstyledなUIフレームワークを採用するか）
    • 使用するライブラリはRadix Vueに決定
  • アイコンライブラリの決定（QIconを用いている部分）
  • 実装
    • Button
    • IconButton
    • Floating Action Button
    • CheckBox
    • RadioButton
    • Switch
    • RowCard
    • Slider
    • TextField
    • ToggleButtonGroup
    • Menu
    • Dialog
    • Toast
• 画面
  • 構成の変更
    • キャラクターに関する情報・設定の画面を1つにまとめる
  • 実装
    • ホーム画面
    • エンジンの管理
    • 読み方&アクセント辞書
    • キー割り当て
    • ツールバーのカスタマイズ
    • オプション
    • ヘルプ
      • 利用規約
      • 使い方
      • 開発コミュニティ
      • ライセンス情報
      • アップデート情報
      • よくある質問
      • お問い合わせ
• その他
  • カスタムテーマ対応

[Hiroshiba]

どれぐらいの期間になるか分かりませんが、ぜひよろしくお願いします！！！

コンポーネントライブラリに関するコメントの転記です！
議論の続きができれば 🙇

---

quasarを使わない場合、アクセシビリティ対応がたぶんかなり大変かなと思います。
ちゃんと知らないんですが、WCAGが定めている各コンポーネントの挙動がいろいろあるんですよね。例えば今回のPRと関係ないけど、ドロップダウンリストは上下キーでメニュー移動できてenterとspaceで決定できるべき、みたいな。

アクセシビリティを考えると既存のライブラリに乗っからないと厳しいのかなと思ってます。（自作するならこんな感じのことを気をつけないといけない）
その場合手は２つあって、quasarのデザインを打ち消すか（大変）、デザインレスのコンポーネントフレームワークを使うか（メンテされるかが見通せないので将来大変かも）かなと。
unstyledなフレームワークは例えばPrimeVueやHeadless UIが良さそう･･･？まだデファクトスタンダードが定まってない状態なのかなと思っています。

[takusea]

転記ありがとうございます！

個人的にはスタイルレスなライブラリを用いるのが一番ちょうどいい気がしてます。中でも、PrimeVueと他を比べた感じ、元からスタイルレス用途前提で作られたもののほうが記述が素直で扱いやすそうに感じました。

その中だとHeadless UIがやはり一番使われがちな気がしますね…コンポーネント数が少ないのはHTML要素としてあるものだったり（Sliderはで実装するとか）、比較的アクセシブルな挙動づくりが複雑なもののみ用意するという思想でしょうか…

用意されてるコンポーネント数的にちょうどいいのは、ark-uiとかradix-vueとか見つけましたが、あまり利用されてなかったり出来たてだったりで選びづらい感じでした。

[Hiroshiba]

PrimeVueと他を比べた感じ、元からスタイルレス用途前提で作られたもののほうが記述が素直で扱いやすそうに感じました。

なるほどぉ･････････。

radix-vue

Weekly Downloadsを見る感じ、ちょっと期待はできそうかも･･･って感じですね。

Headless UI

プルリクエストとか眺めている感じ、コンポーネントが増える気配はもうなさそうでした。
Sliderの他にToastなどもなさそうでした。（Sliderは簡単かもですが、Toastは結構accessibilityがいろいろありそうでした）

---

うーーーーーーーーーん。。。
PrimeVueかradix-vueかなぁ。。。。。。

[takusea]

Sliderの他にToastなどもなさそうでした。

確かにオーバーレイ系のコントロールが無いのは痛いですね。流石に実用するには乏しいか…

PrimeVueかradix-vue

その2つだったらRadix VueがReact版同様に安定と利用数を得るのを期待したい気もしますね。PrimeVueがWeekly Downloads10万超えてるのは安心感ありますけどね…

[Hiroshiba]

@takusea なるほどです･･･！！ではRadix Vueにしてみますか･･･！！！
僕もドキュメント読んだりしてみます！

[Hiroshiba]

@takusea リデザインの進行ありがとうございます！！！
（ソング周りがあってレビューが遅れてしまって申し訳ないです 🙇 ）

ヘルプが完了した･･･という認識なのですがあってそうでしょうか 👀
この後の方針どうしましょう？

個人的にはせっかく一区切りなので、一旦mainブランチへのマージを目指すのもありなのかなと思ってます！！
その場合は全体設計を見直してみて、改良した方が良さそうなところがあればリファクタリングする流れかなと！

あるいはもうちょっと書き心地を確かめて設計を考える方針もありだと思います！
その場合は今までとちょっとデザインが異なりそうなとこを狙ってみるのもありなのかなとか･･･！

[takusea]

ヘルプダイアログのリデザインというとナビゲーションバーやヘッダー等も含めて完成とも考えてました。ただ、一旦コンテンツの部分のみで完成としたほうが他ダイアログとの整合性を保ったまま進められそうなので、ヘルプに関してはこれで大体は完了で良いと思います！

あとは、細かな調整やmainブランチにディレクトリ構造を合わせてマージしていくことをひとまず目指していこうかなと。

[Hiroshiba]

ひとまずマージを目指していく、了解です！ぜひよろしくお願いします！

一旦調整やディレクトリ構造は合わせのプルリクエストをお待ちしようと思います！
これで完成というタイミングで合図いただければ･･･！相談等あればいつでもお声かけください 🙏

[Hiroshiba]

ヘルプダイアログのデザイン置き換え完了！！！ 🎉 🎉 🎉

次の計画練って行かないとですね！！
ものすごく漠然としてますが、どうしていきましょう･･･？

[takusea]

引き続き各ダイアログを新デザインの適用範囲を広げていきながらコンポーネントを追加していく…といった感じかなと思ってます！

ToolbarCustomDialog, EngineManageDialog, DictionaryManageDialog, HotkeySettingDialogあたりはほぼ単純にすげ替えてくだけなので取り掛かりやすそうです。ToolbarCustomDialogが次やるのに良さそう？

[Hiroshiba]

@takusea 方針良さそうに感じます！！

HelpDialogもそうでしたが、Dialog系はどれも若干くせがあるので不明な点などあればなんでもお尋ねください！
ちなみにToolbarCustomDialogはドラッグアンドドロップを使ってる部分があり、もしかしたら一筋縄ではいかない可能性もあるかもです。
引き続きよろしくお願いいたします！！