search

kenkoooo / AtCoderProblems

Extend your AtCoder
https://kenkoooo.com/atcoder/
MIT License
1.39k stars 149 forks source link

show difficulty subボタンの追加 #1470

Open ningenMe opened 2 months ago

ningenMe commented 2 months ago

https://github.com/kenkoooo/AtCoderProblems/issues/1468

show difficulty = off かつ on/off切り替えのためのボタン = off

show difficulty = off かつ on/off切り替えのためのボタン = on

show difficulty = on (as-isと同じ)

image

各問題ごとにon/off切り替えのためのボタンを設置したことで、見た目の影響が大きい...？ 大元のshow difficultyボタンそのものを、on/offの2値ではなく、full/sub/noneみたいな3値にした方が、ユーザビリティ高かったりする？要議論。

reactは得意ではないので実装方針変だったらすみません。

hotate29 commented 2 months ago

概ねいい感じに見えます。difficultyを表示するボタンを👉で表現するのは分かりやすくていいと思いました。

👉ボタンについて

buttonではなくspanで実装されているのが気になります。普通の文字と同じ扱いなので、カーソルをかざした時これがボタンなのかどうか分かりづらいと感じました。また、Tabキーでのカーソル移動に引っかからずアクセシビリティに問題があるので、buttonでの実装にした方が良いと思います。

2値 or 3値

これは完全に個人の感想なのですが、👉の絵文字がたくさん並んでいると従来と比べて情報量が多くて、自分的にはちょっとつらいです。full/sub/noneの3値だとうれしいかもです。

tooltipの説明は確かにいらないかも...内容が全部同じなのでどこか一か所に置けば事足りるような気もします。

ningenMe commented 2 months ago

buttonではなくspanで実装されているのが気になります。普通の文字と同じ扱いなので、カーソルをかざした時これがボタンなのかどうか分かりづらいと感じました。また、Tabキーでのカーソル移動に引っかからずアクセシビリティに問題があるので、buttonでの実装にした方が良いと思います。

ありがとうございます！マークアップ分かってなさすぎてよくなかったです、、修正してみますw

これは完全に個人の感想なのですが、👉の絵文字がたくさん並んでいると従来と比べて情報量が多くて、自分的にはちょっとつらいです。full/sub/noneの3値だとうれしいかもです。

同じ気持ちです、ありがとうございます。3値に変えるってなると、大項目の show difficulty のトグルを、ドロップダウンのデザインにする必要が出てくるので、まずそっちの修正してみます。

tooltipの説明は確かにいらないかも...内容が全部同じなのでどこか一か所に置けば事足りるような気もします。

確かに、3値にするなら使わない人は使わないですし、一旦省いてみます。

ningenMe commented 2 months ago

2値から3値に実装修正してみたバージョン

機能的には意図通りだけど、show difficulty modeを選ぶところのデザインがちょっとごちゃごちゃしてる？置き場所が難しい。。

ningenMe commented 2 months ago

差分大きくなっちゃってるのでPR自体は必要であれば分けます。まずは完成版の機能の議論をできると嬉しいです。

hotate29 commented 2 months ago

思い付きなんですが、Color ByでContest Resultを選択したときのShow Penaltiesみたいな感じで、Show DifficultyがオフなときにPartial Show Difficulty（もっといい命名がありそう）的なボタンを表示してみるのはどうでしょうか。Difficultyを表示する（All相当）のときの見た目は以前と変わらなくなります。

https://github.com/kenkoooo/AtCoderProblems/assets/44938840/0520f0c0-cb96-4e48-b0ab-d5a89b4eab7e

ただごちゃつき具合はうーんという感じですね。むずかしい...

（動画が再生できなかったので差し替えました）

hotate29 commented 2 months ago

設定について考えていて思ったのですが、あくまで自分の理想として、部分表示は常に「有効」になっていて、表示ボタンは👉ほど目立たない...というのが良いよなあと感じました（さっき3値の方がいいかもと言ったのに。申し訳ない）。デザインとしてどうなるかは謎ですが...。

hotate29 commented 2 months ago

（こういう系統はどうかという意味で）ちょっと控えめなボタン案です。👉ほど主張が激しくなくて、部分表示のon/off関係なく表示されても許容できるかも？がコンセプトです。

image

本当は切り欠きみたいな感じでボックスの左上の角に付けようと思ったのですが、自分のCSS力が足りなくてこうなっています。

主張を抑えたのが裏目に出て、ボタンとしてはちょっとトリッキーな見た目というか、分かりづらさがあります。拡大すればいいとはいえ、スマホから押せるのか？という心配も。

ningenMe commented 2 months ago

返事遅れました。諸々ご提案ありがとうございます！

設定について考えていて思ったのですが、あくまで自分の理想として、部分表示は常に「有効」になっていて、表示ボタンは👉ほど目立たない...というのが良いよなあと感じました（さっき3値の方がいいかもと言ったのに。申し訳ない）。デザインとしてどうなるかは謎ですが...。

なるほど、確かにです。

ちょっと控えめなボタン案です。👉ほど主張が激しくなくて、部分表示のon/off関係なく表示されても許容できるかも？がコンセプトです。

この案で、スマホの方は最悪UIをトルツメとかでもいいですかね。一旦PCだけでも導入できたらいいのかなと。 確かに3値の方はデザインの議論がまとまらない気がするので、この方針でちょっと実装してみます。

ningenMe commented 2 months ago

ちょっとローカルで実装してて思ったのですが、

部分表示は常に「有効」になっていて

これを導入するとどうしても誤表示が起きてしまうかも、と思ったのでやるなら表示/非表示自体は選べた方がいいのかも。と思いました。。 また議論になっちゃうんですがどうでしょう...？

Color ByでContest Resultを選択したときのShow Penaltiesみたいな感じで、Show DifficultyがオフなときにPartial Show Difficulty（もっといい命名がありそう）的なボタンを表示してみるのはどうでしょうか。

3値よりこちらの方が良さそうというのは僕も思ったので、partial showのボタンを追加する仕様にしつつ、デザインは上記で挙げてもらったような控えめな感じのやつってイメージです。どうでしょう...？

hotate29 commented 2 months ago

ありがとうございます！部分表示の常時有効はデメリットが大きそうなので、選択制にしましょう。選択方法も含めて、自分が追加で議論したいことは無いです。

控えめな表示ボタンは大きく分けると

の二種類があると思ったのですが、どちらが良いでしょうか（もちろん、3、４種類目があるかもしれない）。

自分の感想、放言ですが、前者は画面に残り続けるのではっきり言って邪魔だと思いました。後者はボタンをクリックしたら消えてしまうので、余計な情報が無くて良いのではないかと思っています。

hotate29 commented 2 months ago

（おふとぴ）ところで、開発時のホットリロードは効いていますか？コードの変更がすぐブラウザに反映されて大変便利なのですが、今のmasterだと効かないんですよね。#1466 で修正をしているので、もし困っていたらお試しください。