メニューを開くボタンをトグルにする

[saitenntaisei]

#3773

[github-actions]

Preview (prod) → https://4137-prod.traq-preview.trapti.tech/
Preview (dev) → https://4137-dev.traq-preview.trapti.tech/

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (9e8f0d6) 86.35% compared to head (454fa36) 86.35%.
Report is 4 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #4137   +/-   ##
=======================================
  Coverage   86.35%   86.35%           
=======================================
  Files          66       66           
  Lines        4719     4719           
  Branches      564      564           
=======================================
  Hits         4075     4075           
  Misses        638      638           
  Partials        6        6           

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

[saitenntaisei]

3番目を直したら4番目が壊れた
4番目を直したら3番目が壊れた

[mehm8128]

↑の翻訳
メッセージのコンテキストメニューで上手く動くようにしたらサイドバーのピン留めのメッセージで再度三点リーダーをクリックしたときにページがリロードされてしまうaタグのような動作でピン留めされているメッセージに移動する
ピン留めの方で上手く動くようにしたらメッセージコンテキストメニューが上手く動かなくなる

[mehm8128]

stopPropagationしたらaタグで遷移しちゃうって話だったから、router-linkじゃなくてチャンネルリストでのチャンネル遷移みたいに↓のようにすれば一応動くようにはなりそう

traQ_S-UI/src/components/Main/NavigationBar/ChannelList/ChannelElement.vue

Lines 97 to 101 in 6b1ea3f

	const { openLink } = useOpenLink()
	const { channelIdToLink } = useChannelPath()
	const openChannel = (event: MouseEvent) => {
	openLink(event, channelIdToLink(props.channel.id))
	}

ただ、a11y的にはあんまりよくないので、できれば別の方法を考えたい

[mehm8128]

そもそもaタグの中にボタンみたいなものが入っているのが間違ってるので、三点リーダーのボタンはrouter-linkの兄弟に置いてdisplay: absoluteで上に重ねるとかがいいかも

[mehm8128]

大変そうなら一旦9点リーダーボタンとチャンネルのコンテキストメニューだけでPR作っちゃってもOKです！

[saitenntaisei]

できたはず　acctiveelementが何かわからなかったそこのテストができてない
css　わからなさ過ぎてrouterlinkのかかる場所を結局ずらした

[saitenntaisei]

@mehm8128 rereqができなかったからmention:gomen:

[mehm8128]

だいぶ前で忘れちゃったんですけど、今の状態ってどこもtoggleできない(開いてる状態でクリックしても閉じてくれない)気がするんですけど僕の環境だけですか？

[mehm8128]

acctiveelementが何かわからなかったそこのテストができてない

ってActivityElementのことですかね？これ↓だと思います

[saitenntaisei]

マージが原因でなんかすべてが吹き飛んでた

[saitenntaisei]

masterを取り込んだ瞬間にすべてが破壊される

[saitenntaisei]

別に上書きも起きてないし分からず

[saitenntaisei]

master マージする前

general.-.traQ.-.Google.Chrome.2023-12-28.11-44-01.mp4

[saitenntaisei]

:kan:

[saitenntaisei]

三点とか9点部分clickからmousedownにしても使用感ほとんど変わらないはずという考えで書いた

[mehm8128]

mousedownにするのは個人的にはあんまりやりたくないですね🤔
現時点で思いついてるのは以下の2つ

• ClickOutsideの対象からいい感じにボタンだけ外す
  • ClickOutsideのclose→それぞれのtoggleで再度表示されてしまっている状態なので、toggleが発火するようなボタンを押したときはClickOutsideのcloseが走らないようにすればいいはず
  • 例えばClickOutsideとボタンとポップアップがセットになってて、ボタンとポップアップをClickOutsideが囲ってるコンポーネントを作るとか？
• closeする関数をsetTimeoutの秒数0で囲む
  • setTimeout 0とかで調べれば色々出てくると思うけど、toggleした後にcloseするようにできるので、表示された状態ならclose→closeになって動作自体は問題なくなる

[saitenntaisei]

setTimeout 0が楽そうだったのでそれで解決

[mehm8128]

importの順序変わって余計な差分出てそうなので直してほしいです(機能の差分が分かりづらくてレビューしづらいので)

[saitenntaisei]

これなんで発生してるのかわからんくて困ってる

[mehm8128]

保存時に勝手に入れ替わるなら拡張機能のせいか、手元のglobalなprettier or eslintの設定が変に効いちゃってるとかだと思います
保存時に入れ替わらないなら分からないので、とりあえず手動で戻しておいてください

[saitenntaisei]

@mehm8128 .containerと.iconのやつ直しました
reviewお願いします

[mehm8128]

よさそうだと思ったのですが、スマホでサイドバーを開いたときに暗くなってる部分をタップしてもサイドバーが閉じなくなってしまってますね:eyes_komatta:(画像を赤く囲った部分)

[saitenntaisei]

それ自分の環境(pixel4a)だともとからできないが

[mehm8128]

あれ、ほんとだ
別でissue立てておきます

[saitenntaisei]

re-req投げれば良い感じ?

[mehm8128]

じゃあ問題なさそうです