リアクションをホバーしたときに拡大して表示 #4434
リアクションをホバーしたときに拡大して表示 #4434
Conversation
|
Preview (prod) → https://4434-prod.traq-preview.trapti.tech/ |
| @@ -4,6 +4,8 @@ | |||
| :title="tooltip" | |||
There was a problem hiding this comment.
今の状態だと、↑の画像みたいにマウスホバー時のポップアップが 2 つ同時に出てしまうので title 属性を消していいと思います
ただ、これをしてしまうと a11y (アクセシビリティ) の観点から困ったことになる可能性もあるので、 aria-label などの属性に切り替えるのを検討したほうがいいと思います
| :title="tooltip" | |
| <!-- :title="tooltip" ここを消す --> |
There was a problem hiding this comment.
title属性を消去してaria-label属性に切り替えました
Discordを参考にしてaria-labelの内容を定めたのでa11yの観点からも問題はないと思われます
|
対応完了しました |
|
確認したんですが、今の状態でも 2 列に収まらない場合はそれ以降のスタンプを押した人の名前が表示されなくなってそうです (本番環境で確認しました) |
|
リアクションした人数が3人を超過した場合に「他n人」と圧縮表示するよう変更しました |
| .scaleReaction { | ||
| @include background-tertiary; | ||
| display: flex; | ||
| height: 3.5rem; |
There was a problem hiding this comment.
ここで高さが指定されていると思うんですが、これをしなくてもいいのかなと思いました
現状だと親要素の message-element での overflow や contain: content; オプションが効いているので absolute で位置を指定した tooltip がメッセージの領域をはみ出したときに欠けてしまいます
多分 UN くんはこれを見てはみ出さないように高さを調整してくれたんだと思っているんですが、スタンプパレットのように teleport タグとかを使いながら、メッセージ要素の子要素ではなくすことでその制約を考えなくて済むようになるのかな、と
| const hoverTimeout = ref<ReturnType<typeof setTimeout> | null>(null) | ||
| const isLongHovered = ref(false) | ||
|
|
||
| watch(isHovered, beginHover => { |
There was a problem hiding this comment.
スマホで無効化したので、ここは即時表示に戻してもいいのかなと思いました
| @include background-tertiary; | ||
| display: flex; | ||
| height: 3.5rem; | ||
| align-items: flex-start; |
There was a problem hiding this comment.
高さを可変にすることを考えると、これは上下中央揃えにしたほうが見栄えが良さそうな気がします
| <div v-for="user in limitedUsers" :key="user.id" :class="$style.contents"> | ||
| <stamp-detail-element-content | ||
| :user-id="user.id" | ||
| :count="user.count" | ||
| :class="$style.content" | ||
| /> | ||
| <span | ||
| v-if=" | ||
| (!isLastUser(user) && !isSecondLastUser(user)) || | ||
| isOverLimitSecondUser(user) | ||
| " | ||
| :class="$style.contents" | ||
| > | ||
| 、 | ||
| </span> | ||
| <span | ||
| v-if="isSecondLastUser(user) && !isOverLimitSecondUser(user)" | ||
| :class="$style.contents" | ||
| >と</span | ||
| > | ||
| <span v-if="isOverLimitUser(user)" :class="$style.contents" | ||
| >と他{{ props.stamp.users.length - 3 }}人</span | ||
| > | ||
| <span v-if="isLastUser(user)" :class="$style.contents"> | ||
| にリアクションされました | ||
| </span> |
There was a problem hiding this comment.
この辺り、 v-for とかを使ってうまく表現してくれているんですが、 span 要素に表示する内容を直接 scripts 部分で生成してからここに持ってくるようにしてもいいのかなと思いました
詳細表示しているときならユーザー名でクリックできるようにするのもあって、クリック判定が別々になるように書かれていると思うんですけど、今回の場合はクリックされることを考えなくてよさそうですし
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #4434 +/- ##
==========================================
- Coverage 86.41% 9.23% -77.18%
==========================================
Files 66 652 +586
Lines 4747 28105 +23358
Branches 503 521 +18
==========================================
- Hits 4102 2595 -1507
- Misses 639 25504 +24865
Partials 6 6
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
リアクションをホバーしたときに拡大して表示して欲しい #4433