show difficulty subボタンの追加

[ningenMe]

#1468

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

• 各問題のprefixにon/off切り替えのためのボタンが表示されてる以外は挙動同じ

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

• subボタンがクリックされたものに関して、show difficulty = onの時と同じ表示になる
• 指ボタンの上にカーソル置くとtooltipで説明が出る(これいらないかも)

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

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

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

[hotate29]

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

👉ボタンについて

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

2値 or 3値

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

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

[ningenMe]

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

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

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

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

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

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

[ningenMe]

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

• show difficulty mode = noneのとき

• show difficulty mode = fullのとき

• show difficulty mode = subのとき

• drop down toggle

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

[ningenMe]

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

[hotate29]

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

2024-04-21.050156.mp4

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

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

[hotate29]

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

[hotate29]

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

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

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

[ningenMe]

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

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

なるほど、確かにです。

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

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

[ningenMe]

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

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

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

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

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

[hotate29]

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

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

• Difficultyを表示（ボタンをクリック）してもその場に残るというもの（show difficulty subボタンの追加 #1470 (comment) はこれ）
• クリックするとDifficulty表示の丸（〇）と置き換わり、丸をクリックすると表示ボタンに戻るというもの。

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

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

[hotate29]

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