Redesign broadcast cards and add modal header customization#6488
Open
ericnewcomer wants to merge 4 commits intomainfrom
Open
Redesign broadcast cards and add modal header customization#6488ericnewcomer wants to merge 4 commits intomainfrom
ericnewcomer wants to merge 4 commits intomainfrom
Conversation
Adds ModalHeaderMixin to support custom header colors in modal views. Redesigns broadcast card layout with grid display, fixed height, and improved text handling. Updates broadcast list and scheduled pages to use onSpload for proper SPA navigation. Restructures card footer for better exclusions visibility. Improves ContactSearchWidget to handle both string and parsed values.
There was a problem hiding this comment.
Pull request overview
This PR updates the broadcast UI and modal experience by introducing customizable modal header colors for modax-rendered views, redesigning broadcast cards into a fixed-height grid layout, and improving recipient/exclusion rendering and contact-search widget handling.
Changes:
- Add
ModalHeaderMixinand plumb modal header CSS variables for modax header theming. - Redesign broadcast cards (layout, truncation, footer/exclusions placement) and render broadcasts in a responsive grid.
- Improve SPA behavior (onSpload) and make
ContactSearchWidget.render()handle both JSON strings and already-parsed values.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| templates/msgs/includes/broadcast.html | Broadcast card redesign (fixed height, grid-friendly layout, footer restructuring, attachments placement). |
| templates/msgs/broadcast_update_target.html | Adds/changes modax disable/enable logic based on contact-search widget events. |
| templates/msgs/broadcast_scheduled.html | Wraps cards in a CSS grid; uses onSpload to adjust attachment thumb sizing; minor CSS tweaks. |
| templates/msgs/broadcast_list.html | Same grid + onSpload thumb sizing adjustments as scheduled page. |
| templates/includes/exclusions.html | Reworks exclusions display markup and styling. |
| temba/utils/views/mixins.py | Adds ModalHeaderMixin to set response headers for modal header customization. |
| temba/utils/fields.py | Makes ContactSearchWidget.render() accept non-string values without json.loads. |
| temba/msgs/views.py | Uses ModalHeaderMixin for broadcast create/update wizards; updates context-menu label text. |
| static/js/frame.js | Sets --header-bg / --header-text CSS vars on modax when opening via showModax. |
You can also share your feedback on Copilot code review. Take the survey.
| </temba-label> | ||
| </div> | ||
| {% endif %} | ||
| {% if exclusion.not_seen_since_days %} |
Comment on lines
+3
to
+16
| {% block extra-script %} | ||
| <script type="text/javascript"> | ||
| { | ||
| const modax = getModax(); | ||
| const modalBody = modax.shadowRoot; | ||
| const queryWidget = modalBody.querySelector("temba-contact-search"); | ||
|
|
||
| queryWidget.addEventListener("temba-content-changed", function(e) { | ||
| if (e.detail.blockers && e.detail.blockers.length > 0) { | ||
| modax.disabled = true; | ||
| } else if (e.detail.query) { | ||
| modax.disabled = false; | ||
| } | ||
| }); |
Move recipients from header to body, add JS-based truncation to show max 5 recipients with "+N more" overflow. Use content-based card height instead of fixed height, move attachments and quick replies outside line-clamped text, and limit message text to 3 lines.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6488 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 520 520
Lines 25266 25271 +5
=========================================
+ Hits 25266 25271 +5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
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
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.
Adds ModalHeaderMixin to support custom header colors in modal views. Redesigns broadcast card layout with grid display, fixed height, and improved text handling. Updates broadcast list and scheduled pages to use onSpload for proper SPA navigation. Restructures card footer with improved exclusions visibility, and fixes ContactSearchWidget to handle both string and parsed values.