Skip to content

feat(messages): コンテキストメニューやスタンプピッカーが表示されている MessageElement も背景色を強調する #4841

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
Merged
merged 2 commits into from
Oct 23, 2025
Merged

feat(messages): コンテキストメニューやスタンプピッカーが表示されている MessageElement も背景色を強調する #4841

merged 2 commits into from
Oct 23, 2025
+45 −9

Conversation

@otukado
Copy link
Contributor

@otukado otukado commented Sep 28, 2025

概要

  • コンテキストメニューやスタンプピッカーが表示されている MessageElement も背景色を強調する
    • Discord もこの仕様

なぜこの PR を入れたいのか

close: #3981

UI 変更部分のスクリーンショット

image

PR を出す前の確認事項

  • 動作確認ができている
  • 自分で一度コードを眺めて自分的に問題はなさそう

@otukado otukado requested review from a team and cp-20 September 28, 2025 03:28
@otukado otukado self-assigned this Sep 28, 2025
@github-actions
Copy link

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

@otukado otukado moved this from Inbox to In review in traQ Client Sep 28, 2025
@otukado otukado added the enhancement New feature or request label Sep 28, 2025
@otukado otukado changed the title fix(messages): コンテキストメニューやスタンプピッカーが表示されている MessageElement も背景色を強調する feat(messages): コンテキストメニューやスタンプピッカーが表示されている MessageElement も背景色を強調する Sep 28, 2025
@codecov
Copy link

codecov bot commented Sep 28, 2025 •
edited
Loading

Codecov Report

❌ Patch coverage is 0% with 30 lines in your changes missing coverage. Please review.
✅ Project coverage is 13.53%. Comparing base (15cddf3) to head (40969ec).
⚠️ Report is 3 commits behind head on master.

Files with missing lines Patch % Lines
...nents/Main/MainView/MessageElement/ClipElement.vue 0.00% 12 Missing ⚠️
...ents/Main/MainView/MessageElement/MessageTools.vue 0.00% 11 Missing ⚠️
...ts/Main/MainView/MessageElement/MessageElement.vue 0.00% 7 Missing ⚠️
Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #4841      +/-   ##
==========================================
- Coverage   13.54%   13.53%   -0.02%     
==========================================
  Files         704      704              
  Lines       31692    31717      +25     
  Branches      677      677              
==========================================
  Hits         4294     4294              
- Misses      27386    27411      +25     
  Partials       12       12

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

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@otukado otukado removed request for a team and cp-20 September 28, 2025 03:32
@otukado otukado marked this pull request as draft September 28, 2025 03:32
@otukado
Copy link
Contributor Author

otukado commented Sep 28, 2025

もう一回考えます :bow-nya2:

@otukado
Copy link
Contributor Author

otukado commented Sep 28, 2025

ClipElement も合わせて直しました。
クリップから自分のメッセージを編集するときに、 MessageTools が表示されてしまう、ホバー時に背景が変わってしまうのを MessageElement の挙動に合わせました。

@otukado otukado marked this pull request as ready for review September 28, 2025 03:56
@otukado otukado requested review from a team and cp-20 September 28, 2025 03:56
cp-20
cp-20 reviewed Oct 4, 2025
View reviewed changes
Copy link
Contributor

@cp-20 cp-20 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

動作としてはちゃんと動いてて良さそうです

設計の根本に関わるコメントをしたので読んでもらえると嬉しいです

src/components/Main/MainView/MessageElement/ClipElement.vue Outdated
:class="$style.body"
:data-is-mobile="$boolAttr(isMobile)"
:data-is-editing="$boolAttr(isEditing)"
:data-is-active="$boolAttr(!!contextMenuPosition)"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[imo] contextMenuPosition !== undefined の方が分かりやすいかも

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isDefined を使いました

src/components/Main/MainView/MessageElement/MessageTools.vue Outdated
Comment on lines 114 to 118
const emit = defineEmits([
'toggleStampPicker',
'openContextMenu',
'closeContextMenu'
])
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[should] 積極的な理由がなければ defineEmits<{ (e: 'event'): void }>() みたいに書いて欲しい

src/components/Main/MainView/MessageElement/MessageElement.vue Outdated
Comment on lines 129 to 131
const isActive = computed(
() => isStampPickerOpen.value || !!contextMenuPosition.value
)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

この値を取るためだけに必要以上に MessageTools のロジックが露出しているように感じるな　すごくきれいというわけでもないけど、MessageTools でこの computed を持って effect -> emit で同期するというのが考えられると思うけど、どうでしょう？

Copy link
Contributor Author

@otukado otukado Oct 7, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

他の実装に合わせて v-model を使ってみました 👀

cp-20
cp-20 approved these changes Oct 22, 2025
View reviewed changes
Copy link
Contributor

@cp-20 cp-20 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

良さそうです！　お疲れさまでした！

@otukado otukado force-pushed the fix/active-message-element-bg-color branch from 3e2b7ce to c3c58f2 Compare October 23, 2025 05:02
@otukado otukado force-pushed the fix/active-message-element-bg-color branch from c3c58f2 to 40969ec Compare October 23, 2025 05:12
@otukado otukado merged commit 8c4ea5a into master Oct 23, 2025
11 checks passed
@otukado otukado deleted the fix/active-message-element-bg-color branch October 23, 2025 05:16
@github-project-automation github-project-automation bot moved this from In review to Done in traQ Client Oct 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cp-20 cp-20 cp-20 approved these changes

Assignees

@otukado otukado

Labels

enhancement New feature or request feat:message

Projects

traQ Client
Status: Done

Milestone

No milestone

3 participants

@otukado @cp-20