feat(thread): show per-message To/Cc/Bcc recipients in thread view#12666
Open
sturlan wants to merge 5 commits intonextcloud:mainfrom
Open
feat(thread): show per-message To/Cc/Bcc recipients in thread view#12666sturlan wants to merge 5 commits intonextcloud:mainfrom
sturlan wants to merge 5 commits intonextcloud:mainfrom
Conversation
sturlan
requested review from
ChristophWurst,
GretaD and
kesselb
as code owners
Closes nextcloud#11305, nextcloud#9311, nextcloud#4258. Recipients (To, Cc, Bcc) are already returned by the API for every message in a thread but were never displayed in ThreadEnvelope. Add RecipientBubble components in the expanded message header for each recipient list, following the same pattern used for per-message subject-change display. AI-assisted: Claude Code (claude-sonnet-4-6) Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
…handling RecipientBubble uses NcUserBubble which renders as an anchor tag. Placing it inside the router-link's click handler caused navigation on click instead of opening the contact popover. Move the recipients section outside the router-link into its own envelope__recipients div. AI-assisted: Claude Code (claude-sonnet-4-6) Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
Per ChristophWurst's Sept 2023 design spec: - Hide sender email address in collapsed message state - Apply --color-text-maxcontrast to sender name when expanded - Remove thread-level participant bubble header from Thread.vue along with all associated dead code (participantsToDisplay, moreParticipantsString, updateParticipantsToDisplay, resize listener, RecipientBubble/NcPopover imports) AI-assisted: Claude Code (claude-sonnet-4-6) Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
- Fix import order in ThreadEnvelope.vue (alphabetical: ConfirmationModal, Error, EventModal, RecipientBubble) - Fix MessageLoadingSkeleton indentation (1 tab → 2 tabs) - Remove extra blank lines in ThreadEnvelope.vue and Thread.vue CSS - Fix SCSS unmatched brace in Thread.vue (leftover from avatar-header removal) - Remove unused currentAccountEmail prop from Thread.vue and its corresponding binding in MailboxThread.vue All 220 unit tests pass; webpack builds cleanly. Signed-off-by: Darko Sturlan <darko.sturlan@gmail.com>
sturlan
force-pushed
the
feat/11305-thread-per-message-recipients
branch
from
7330563 to
98f2f88
Compare
Member
ChristophWurst
left a comment
ChristophWurst
left a comment
There was a problem hiding this comment.
Thank you for the contribution!
Code looks good so far. Please provide before/after screenshots
| inset-inline-start: var(--default-grid-baseline); | ||
| } | ||
|
|
||
| .envelope__recipients { |
Member
There was a problem hiding this comment.
style: this could be broken up into a nested scss structure
src/components/ThreadEnvelope.vue
Outdated
|
|
||
| .envelope__recipients { | ||
| padding-inline: 60px 38px; | ||
| padding-block: 4px; |
Member
There was a problem hiding this comment.
nit: magic numbers. ideally we can leverage the grid spacing var for this. See #9944.
- Nest .recipients inside .envelope__recipients (nested SCSS) - Replace magic numbers (60px, 38px, 4px) with CSS variable expressions: padding-inline-start aligns with sender name via border-radius-container + avatar width (10 * grid-baseline) + gap (2 * grid-baseline); padding-inline-end mirrors the container border-radius; gaps and padding-block use --default-grid-baseline Signed-off-by: sturlan <darko.sturlan@gmail.com>
Author
Thank you for the feedback. Here are the screenshots requested. |
Member
|
Thanks 😎 Then I'm summoning our designer @nimishavijay for a quick design review :) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Closes #11305, #9311, #4258.
Recipients (To, Cc, Bcc) are already returned by the API for every message
in a thread but were never displayed in
ThreadEnvelope. This PR surfacesthem in the expanded message header using the existing
RecipientBubblecomponent (which provides the NcPopover contact card with reply/copy/add
contact actions).
Also removes the aggregate participant bubble list from the thread header
(
Thread.vue) per the design spec in #4258 — per-message recipients inthe expanded view replace that approach.
Prior attempt: #4315 (2021, closed 2023).
Changes
ThreadEnvelope.vue: render To/Cc/Bcc asRecipientBubblerows whenmessage is expanded; show sender email only when expanded; apply
--color-text-maxcontrastto sender name in expanded stateThread.vue: remove aggregate participant bubble header; remove unusedcurrentAccountEmailpropMailboxThread.vue: remove unused:current-account-emailbindingTest plan
npm run test:unit— all 220 tests passnpm run lint— no errorsAI-assisted: Claude Code (claude-sonnet-4-6)