feat(frontend): ナビゲーションバーのカスタマイズをドラッグ&ドロップで行えるようにする

[ekkekuru2]

What

• 設定 > クライアント設定 > ナビゲーションバー
  ナビゲーションバーの追加・削除・並び替えをドラッグ&ドロップで行えるようにした。
  

• 「デフォルト」ボタンの動作について、順番はリセットされるが、表示(横・横アイコン・上部)の設定はリセットされていなかったため場所を変更した。また、以前は押すと確認無しでリセットされていたが、保存ボタンを押さないと保存されないようにした。(蛇足かもしれないです)
  

Why

issue #10354

Additional info (optional)

UIについて

• 削除ボタンは、当初ウィジェットの削除に準拠したデザインにしていたのですが、馴染まない気がして赤いxに変えました。
  • (変更前)
    
  • (変更後)
    
    他の場所に無いデザインになってしまっているんですが問題ないでしょうか。

他にもUI結構適当なので変だと思うところありましたらご指摘お願いします。

Checklist

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

レビューありがとうございます。OSSでの作業にあまり慣れていないので至らぬ点あればすみません。

[codecov]

Codecov Report

Merging #10356 (26ead52) into develop (eb57814) will decrease coverage by 0.87%.
The diff coverage is n/a.

@@             Coverage Diff             @@
##           develop   #10356      +/-   ##
===========================================
- Coverage    75.15%   74.29%   -0.87%     
===========================================
  Files          876      719     -157     
  Lines        85543    66619   -18924     
  Branches      5811     5543     -268     
===========================================
- Hits         64289    49493   -14796     
+ Misses       21254    17126    -4128     

see 157 files with indirect coverage changes

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

[kakkokari-gtyih]

横からすみません。個人的には素晴らしい機能だと思います！

一点気になったのですが、スマホの場合、スクロール操作とドラッグが絡まって操作感が損なわれることが懸念されますが、それについては確認されましたか？

[ekkekuru2]

たしかに！確認します

[ekkekuru2]

手元にあるiPhone SE 2020で試したところ、下図の青斜線部をスクロールするとページ全体のスクロールが出来ました。

逆に言うと青斜線部の内側を触ると並び替えが起こるので、たしかに、スクロールできる範囲が少し狭いような気もします。下図のようにドラッグ&ドロップの領域を狭くした方がいいんでしょうか。うーん

[yulog]

横からすみません。

スマホアプリとかだと左端に[三]みたいなハンドル付いていて、そこしかドラッグ＆ドロップできないようなUI見かけますね。

[ekkekuru2]

すごく良い方法だと思いました。三本線のハンドルでのみドラッグ&ドロップできるようにしてみました。
ハンドルを左右どちらに置くのか、スペースをどのくらい取るのか結構迷った、、、

[kakkokari-gtyih]

@ekkekuru2 ユーザーが触れる部分の変更ですので、Changelogの方に追記したほうが良いと思います 👍

Please add the summary of the changes to CHANGELOG.md. However, this is not necessary for changes that do not affect the users, such as refactoring.

[ekkekuru2]

修正とChangelogへの追加を行いました。
Changelogはv.13.10.0 の段落に追記したほうが良かったですかね

[hikefd]

あ、間に合うなら…ﾄﾞﾗｯｸﾞ用のﾊﾝﾄﾞﾙｱｲｺﾝはMaterial Design Icon的には2本線のほうがいいかも
https://fonts.google.com/icons?selected=Material+Symbols+Outlined:drag_handle:FILL@0;wght@400;GRAD@0;opsz@48&icon.query=handle

[ekkekuru2]

2本線と3本線どちらにするか悩んだんですよね、、、
なるほどMaterial Designを参考にすればよかったのか

[syuilo]

CHANGELOGのコンフリクトを解消していただけると助かります(こちらでは編集できず)

[syuilo]

👍🏻