Skip to content
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.

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

Update Django messages to reuse toast component used by htmx #4385

Merged
merged 4 commits into from
Feb 12, 2025

Conversation

theskumar
Copy link
Member

@theskumar theskumar commented Feb 7, 2025

This updates the full page load to use the same mechanism to display the messages from django.contrib.messages as used during htmx request

This is achieved by generating a javascript custom event for toast component instead of rendering html content.

Add/update icons and color for different message types and handle long words and urls

The web accessibility is maintained as the toast component handles it when it's is initialized.

This is a further enhancement to #4374 to keep things DRY and consistent.

Screenshot 2025-02-10 at 4  53 25@2x

@theskumar theskumar self-assigned this Feb 7, 2025
@@ -10,7 +10,7 @@
<script>
function toastHandler() {
"use strict";
const AUTO_HIDE_TIMEOUT = 2500;
const AUTO_HIDE_TIMEOUT = 3000;
Copy link
Member Author

Choose a reason for hiding this comment

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

Give a generous time to reader of the notification.

This updates the full page load to use the same mechanism to
display the messages from django.contrib.messages as used during htmx
request
@theskumar theskumar force-pushed the enchancement/django-messages branch from c31adb4 to 258377e Compare February 7, 2025 09:15
Copy link
Member

@frjo frjo left a comment

Choose a reason for hiding this comment

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

Nice! Less code, improved function.

Have a small suggestion, see comment.

@@ -103,7 +103,7 @@
@click="remove(toast.id)"
@mouseenter="pause(toast.id)"
@mouseleave="resume(toast.id)"
class="relative py-3 px-4 mt-4 w-full max-w-full text-sm font-bold text-white rounded-md shadow-xl cursor-pointer sm:w-auto sm:max-w-sm group"
class="relative py-3 px-4 mt-4 w-full max-w-full text-sm font-bold text-white rounded-md shadow-xl cursor-pointer sm:w-auto sm:max-w-sm group sm:min-w-64"
Copy link
Member

Choose a reason for hiding this comment

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

What do you think of adding a "me-2" or similar here, just to get it a little out from the side.

Copy link
Member Author

Choose a reason for hiding this comment

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

Sure

Copy link
Member Author

Choose a reason for hiding this comment

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

Updated.

@frjo frjo added Type: Maintenance Type: Patch Mini change, used in release drafter labels Feb 7, 2025
@frjo frjo added Status: Needs testing Tickets that need testing/qa Status: Needs dev testing 🧑‍💻 Tasks that should be tested by the dev team labels Feb 10, 2025
- handle long urls and words
@theskumar
Copy link
Member Author

@frjo Update to include more spaces near edges and also added a max-width for a very large screen.

Add/update icons and color for different message types and handle long words and urls

Screenshot added in the PR description.

@wes-otf wes-otf added Status: Tested - approved for live ✅ and removed Status: Needs testing Tickets that need testing/qa Status: Needs dev testing 🧑‍💻 Tasks that should be tested by the dev team labels Feb 12, 2025
@frjo frjo merged commit 99a7bdd into main Feb 12, 2025
7 checks passed
@theskumar theskumar deleted the enchancement/django-messages branch March 11, 2025 18:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants