From f1dd8d88c9ac2f6771d92bcc7d0a3260cf91f5bd Mon Sep 17 00:00:00 2001 From: whilstsomebody Date: Sat, 7 Dec 2024 00:34:54 +0530 Subject: [PATCH] compose: Add background and border colors for message limit. Added colors to notify users when the message length is near the limit or has exceeded it. Used distinct colors for each case to provide clear feedback. Fixes: #32171. --- web/src/compose_validate.ts | 5 +++++ web/styles/app_variables.css | 13 ++++++++++++- web/styles/compose.css | 32 ++++++++++++++++++++++++++++---- web/styles/message_row.css | 12 ++++++++++++ 4 files changed, 57 insertions(+), 5 deletions(-) diff --git a/web/src/compose_validate.ts b/web/src/compose_validate.ts index 7e91d7deb5058..67f68ddc269c6 100644 --- a/web/src/compose_validate.ts +++ b/web/src/compose_validate.ts @@ -765,6 +765,8 @@ export function check_overflow_text($container: JQuery): number { const is_edit_container = $textarea.closest(".message_row").length > 0; if (text.length > max_length) { + $indicator.removeClass("textarea-approaching-limit"); + $textarea.removeClass("textarea-approaching-limit"); $indicator.addClass("textarea-over-limit"); $textarea.addClass("textarea-over-limit"); $indicator.html( @@ -780,6 +782,8 @@ export function check_overflow_text($container: JQuery): number { } else if (remaining_characters <= 900) { $indicator.removeClass("textarea-over-limit"); $textarea.removeClass("textarea-over-limit"); + $indicator.addClass("textarea-approaching-limit"); + $textarea.addClass("textarea-approaching-limit"); $indicator.html( render_compose_limit_indicator({ remaining_characters, @@ -793,6 +797,7 @@ export function check_overflow_text($container: JQuery): number { } else { $indicator.text(""); $textarea.removeClass("textarea-over-limit"); + $textarea.removeClass("textarea-approaching-limit"); if (is_edit_container) { set_message_too_long_for_edit(false, $container); diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 0285085df4cf5..a39df61a5cb48 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -721,6 +721,10 @@ /* Compose box colors */ --color-compose-box-background: hsl(232deg 30% 92%); --color-compose-message-content-background: hsl(0deg 0% 100%); + --color-compose-message-content-background-over-limit: hsl(3deg 35% 90%); + --color-compose-message-content-background-approaching-limit: hsl( + 50deg 75% 92% + ); --color-compose-send-button-icon-color: hsl(0deg 0% 100%); --color-compose-send-button-background: hsl(240deg 96% 68%); --color-compose-send-button-background-interactive: hsl(240deg 41% 50%); @@ -788,6 +792,10 @@ --color-message-formatting-controls-container: hsl(232deg 30% 96%); --color-message-content-container-border: hsl(0deg 0% 0% / 10%); --color-message-content-container-border-focus: hsl(0deg 0% 57%); + --color-message-content-container-border-over-limit: hsl(0deg 76% 65%); + --color-message-content-container-border-approaching-limit: hsl( + 38deg 70% 50% + ); --color-compose-control-button-background-hover: hsl(0deg 0% 0% / 5%); --color-compose-formatting-button-divider: hsl(0deg 0% 75%); --color-compose-focus-ring: var(--color-outline-focus); @@ -1634,6 +1642,10 @@ var(--color-compose-box-background), hsl(0deg 0% 0%) 20% ); + --color-compose-message-content-background-over-limit: hsl(3deg 50% 12%); + --color-compose-message-content-background-approaching-limit: hsl( + 50deg 75% 12% + ); --color-compose-send-button-focus-shadow: hsl(0deg 0% 100% / 80%); --color-compose-send-control-button: hsl(240deg 30% 70%); --color-compose-send-control-button-background: transparent; @@ -1690,7 +1702,6 @@ --color-message-formatting-controls-container: hsl(0deg 0% 0% / 8%); --color-message-content-container-border: hsl(0deg 0% 0% / 80%); --color-message-content-container-border-focus: hsl(0deg 0% 100% / 27%); - --color-message-content-container-border-over-limit: hsl(0deg 76% 65%); --color-compose-control-button-background-hover: hsl(0deg 0% 100% / 5%); --color-compose-formatting-button-divider: hsl(236deg 33% 90% / 25%); --color-compose-focus-ring: hsl(0deg 0% 67%); diff --git a/web/styles/compose.css b/web/styles/compose.css index fd5568c149496..954a1fc27b8be 100644 --- a/web/styles/compose.css +++ b/web/styles/compose.css @@ -337,15 +337,27 @@ } #message-content-container:has(.new_message_textarea.textarea-over-limit), -#message-content-container:has(.new_message_textarea.textarea-over-limit:focus), -.edit-content-container:has(.message_edit_content.textarea-over-limit), -.edit-content-container:has(.message_edit_content.textarea-over-limit:focus) { +.edit-content-container:has(.message_edit_content.textarea-over-limit) { box-shadow: 0 0 0 1pt var(--color-message-content-container-border-over-limit); } +#message-content-container:has( + .new_message_textarea.textarea-approaching-limit + ), +.edit-content-container:has(.message_edit_content.textarea-approaching-limit) { + box-shadow: 0 0 0 1pt + var(--color-message-content-container-border-approaching-limit); +} + #message-content-container:has(.new_message_textarea.textarea-over-limit.flash), -.edit-content-container:has(.message_edit_content.textarea-over-limit.flash) { +#message-content-container:has( + .new_message_textarea.textarea-approaching-limit.flash + ), +.edit-content-container:has(.message_edit_content.textarea-over-limit.flash), +.edit-content-container:has( + .message_edit_content.textarea-approaching-limit.flash + ) { animation: message-limit-flash 0.5s ease-in-out 3; } @@ -406,6 +418,18 @@ padding-right: var(--composebox-buttons-width); background-color: var(--color-compose-message-content-background); color: var(--color-text-default); + + &.textarea-over-limit { + background-color: var( + --color-compose-message-content-background-over-limit + ); + } + + &.textarea-approaching-limit { + background-color: var( + --color-compose-message-content-background-approaching-limit + ); + } } .surround-formatting-buttons-row { diff --git a/web/styles/message_row.css b/web/styles/message_row.css index 0bc42c3e50e6b..4d18681a84314 100644 --- a/web/styles/message_row.css +++ b/web/styles/message_row.css @@ -669,6 +669,18 @@ .message-edit-textbox { position: relative; + + .textarea-over-limit { + background-color: var( + --color-compose-message-content-background-over-limit + ); + } + + .textarea-approaching-limit { + background-color: var( + --color-compose-message-content-background-approaching-limit + ); + } } }