Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

enhance(frontend): カラーモードの設定画面を視覚的にわかりやすく #13512

Open
wants to merge 23 commits into
base: develop
Choose a base branch
from
Open

enhance(frontend): カラーモードの設定画面を視覚的にわかりやすく #13512

wants to merge 23 commits into from
+26 −12

Conversation

kakkokari-gtyih
Copy link
Contributor

@kakkokari-gtyih kakkokari-gtyih commented Mar 4, 2024 •
edited
Loading

What

image

  • 「デバイスのダークモードと同期する」がオンのあいだはスイッチの切替ができないように

Why

Fix #13161

Additional info (optional)

Checklist

  • Read the contribution guide
  • Test working in a local environment
  • (If needed) Add story of storybook
  • (If needed) Update CHANGELOG.md
  • (If possible) Add tests

@github-actions github-actions bot added the packages/frontend Client side specific issue/PR label Mar 4, 2024
@codecov Codecov
Copy link

codecov bot commented Mar 4, 2024 •
edited
Loading

Codecov Report

Attention: Patch coverage is 28.00000% with 18 lines in your changes missing coverage. Please review.

Project coverage is 20.07%. Comparing base (8b163cd) to head (a2b39a5).
Report is 2 commits behind head on develop.

Files Patch % Lines
packages/frontend/src/pages/settings/theme.vue 0.00% 17 Missing ⚠️
packages/frontend/src/os.ts 50.00% 1 Missing ⚠️
Additional details and impacted files 
@@             Coverage Diff              @@
##           develop   #13512       +/-   ##
============================================
- Coverage    39.81%   20.07%   -19.75%     
============================================
  Files         1544      722      -822     
  Lines       190344   100228    -90116     
  Branches      2693     1050     -1643     
============================================
- Hits         75791    20121    -55670     
+ Misses      113990    79565    -34425     
+ Partials       563      542       -21

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@kakkokari-gtyih

This comment was marked as resolved.

Sign in to view
@kakkokari-gtyih
Copy link
Contributor Author

c解消

@syuilo
Copy link
Member

syuilo commented Mar 9, 2024

同期設定に気付かずに設定が元に戻ると訴える人は、同期設定有効時に切り替えできなくしても「なぜか切り替わらない」という訴えに変わるだけな気もするわね
そこまでケアするのであれば同期設定有効時に切り替えようとした場合「同期設定がオンのため切り替えられません」とか「同期設定がオンのため次回起動時には戻ります」的な警告を出す方が良さそう

@syuilo
Copy link
Member

syuilo commented Mar 9, 2024

とりあえずマージ

@syuilo
Copy link
Member

syuilo commented Mar 9, 2024

あーでもacrylicPanelは用途が違う可能性がある

@kakkokari-gtyih
Copy link
Contributor Author

kakkokari-gtyih commented Mar 11, 2024 •
edited
Loading

あーでもacrylicPanelは用途が違う可能性がある

なにかにオーバーレイするときに使う色な気がする（acrylicBgなど）ので使用用途としては間違ってない気はするけど

@kakkokari-gtyih
Copy link
Contributor Author

あーでもacrylicPanelは用途が違う可能性がある

これ使わないようにした

@kakkokari-gtyih
Copy link
Contributor Author

kakkokari-gtyih commented Jun 22, 2024 •
edited
Loading

同期設定に気付かずに設定が元に戻ると訴える人は、同期設定有効時に切り替えできなくしても「なぜか切り替わらない」という訴えに変わるだけな気もするわね

あとdキーを押したときにデバイスカラーモードの追従も一緒に切るようにした
（カラーモード追従をONにしたときには即時的にカラーモードが追従されるので、その逆）

@fruitriin
Copy link
Contributor

ややオフトピですが、dキーのショートカットを意図せず押してしまって、何を押してどの設定が変わったのかわからない人がたくさん見受けられるので、ダイアログか通知だしてあげるなどしてあげるとより良い可能性があるなと思いました

@kakkokari-gtyih
Copy link
Contributor Author

kakkokari-gtyih commented Jun 22, 2024 •
edited
Loading

ややオフトピですが、dキーのショートカットを意図せず押してしまって、何を押してどの設定が変わったのかわからない人がたくさん見受けられるので、ダイアログか通知だしてあげるなどしてあげるとより良い可能性があるなと思いました

「次回以降表示しない」を実装するべきだが、それをここでやるとあれかもしれないので別PRか何かでまとめてやったほうが良い気がした

@Sayamame-beans
Copy link
Collaborator

「リノートしました。」と同じ形の表示でどうでしょう?

@kakkokari-gtyih
Copy link
Contributor Author

kakkokari-gtyih commented Jun 22, 2024 •
edited
Loading

「リノートしました。」と同じ形の表示でどうでしょう?

「""何を押して""どの設定が変わったのかわからない」を解消しようと思うとメッセージが長くなりそう

@kakkokari-gtyih
Copy link
Contributor Author

kakkokari-gtyih commented Jun 22, 2024 •
edited
Loading

「何を押して」を諦めて「カラーモードを〇〇に変更しました」だけでも良いかもしれない

@kakkokari-gtyih
Copy link
Contributor Author

kakkokari-gtyih commented Jun 22, 2024 •
edited
Loading

カラーモード追従をONにしたときにはそのタイミングでカラーモードが追従されるので、その逆の動作をしたほうが自然な気はした（意図してカラーモードを変更した際に次回の読み込みでカラーモードが元に戻るのもそれはそれで不自然）

あと間違って押した場合に意図せず同期が解除されることになりそう

これはos.confirmを初回のみ表示で解決できそう

@anatawa12
Copy link
Member

そもそもなのですが'd'でダークモードとライトモードの切り替えっていりますかね。ライトモードとダークモードの切り替えがショートカットがいるような頻出するものではないと思うのですが

@syuilo
Copy link
Member

syuilo commented Jun 22, 2024

てかUI上では同期オンのときは切り替えられないのにショートカットキー経由だと切り替えられるのは整合性が無いわね

@syuilo
Copy link
Member

syuilo commented Jun 22, 2024

そもそもなのですが'd'でダークモードとライトモードの切り替えっていりますかね。ライトモードとダークモードの切り替えがショートカットがいるような頻出するものではないと思うのですが

個人的にはよく使う

@kakkokari-gtyih
Copy link
Contributor Author

kakkokari-gtyih commented Jun 22, 2024 •
edited
Loading

'd'でダークモードとライトモードの切り替えっていりますかね

postformやemojiPickerの入力欄からフォーカス外れているときにdを押して誤爆することがままあるので要らないならいっそ消しても良いかも

@anatawa12
Copy link
Member

anatawa12 commented Jun 22, 2024 •
edited
Loading

デバッグ用途では使うのは私も(ほかソフトウェアなど作ってるものでは)頻出するのですが、日常使用で使いますかね

@syuilo
Copy link
Member

syuilo commented Jun 22, 2024

朝はライトにして夜はダークにしてる

@kakkokari-gtyih
Copy link
Contributor Author

朝はライトにして夜はダークにしてる

(off-topic) デバイス同期でできないもんなのかしら

@syuilo
Copy link
Member

syuilo commented Jun 22, 2024

なので1日2回は押すことになる

@syuilo
Copy link
Member

syuilo commented Jun 22, 2024

朝はライトにして夜はダークにしてる

(off-topic) デバイス同期でできないもんなのかしら

Windowsにはそのような機能が無い

@anatawa12
Copy link
Member

朝はライトにして夜はダークにしてる

これOSに機能なかったっけ(macOSにはあったと思うけどwindowsとかiosとかandroidだとないっけ)

@anatawa12
Copy link
Member

であれば適当な自動変更機能のほうが需要に近そう...?

@Sayamame-beans
Copy link
Collaborator

Sayamame-beans commented Jun 22, 2024 •
edited
Loading

ダーク/ライトモードを時間指定で切り替えられるような機能追加を別PRですると良さそう

@syuilo
Copy link
Member

syuilo commented Jun 22, 2024

Misskeyがそこまでケアするのは大げさじゃないかしら

@Sayamame-beans
Copy link
Collaborator

朝はライトにして夜はダークにしてる

これOSに機能なかったっけ(macOSにはあったと思うけどwindowsとかiosとかandroidだとないっけ)

ナイトモード概念はあった気がしますが、ダーク/ライト切り替えはないかも。

@anatawa12
Copy link
Member

とりあえずdひとおしで切り替えに関する賛否は一旦このPRのout of scopeになりそうなのでとりあえず discussion を立てますね

@kakkokari-gtyih

This comment was marked as off-topic.

Sign in to view
@anatawa12
Copy link
Member

とりあえずdひとおしで切り替えに関する賛否は一旦このPRのout of scopeになりそうなのでとりあえず discussion を立てますね

=> #14067

@kakkokari-gtyih
Copy link
Contributor Author

@syuilo ショートカットキー周りの変更は一旦全部もとに戻した

@kakkokari-gtyih kakkokari-gtyih changed the title enhance(frontend): カラーモードの設定や変更時の振る舞いを視覚的にわかりやすく enhance(frontend): カラーモードの設定画面を視覚的にわかりやすく Jun 22, 2024
@kakkokari-gtyih
Copy link
Contributor Author

コンフリクト解消

@kakkokari-gtyih
Copy link
Contributor Author

コンフリクト解消

@Sayamame-beans
Copy link
Collaborator

conflictを解消

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@syuilo syuilo Awaiting requested review from syuilo

Assignees
No one assigned
Labels
packages/frontend Client side specific issue/PR
Projects
None yet
Milestone
No milestone
5 participants
@kakkokari-gtyih @syuilo @fruitriin @Sayamame-beans @anatawa12