From 397c1f062189dbcd86e233adc04951ee401c0ae0 Mon Sep 17 00:00:00 2001 From: hitarth-gg Date: Wed, 30 Oct 2024 16:04:49 +0530 Subject: [PATCH] compose_box: Add background color and border for length limits. This commit introduces background and border color changes to the compose box, distinguishing between cases where the message length is approaching the limit and when it exceeds the limit. Fixes #32171. --- web/src/compose_validate.ts | 13 ++++++++++--- web/styles/app_variables.css | 11 +++++++++++ web/styles/compose.css | 23 ++++++++++++++++++++--- 3 files changed, 41 insertions(+), 6 deletions(-) diff --git a/web/src/compose_validate.ts b/web/src/compose_validate.ts index 1ca902763e..3dd26bb414 100644 --- a/web/src/compose_validate.ts +++ b/web/src/compose_validate.ts @@ -725,10 +725,13 @@ export function check_overflow_text(): number { const max_length = realm.max_message_length; const remaining_characters = max_length - text.length; const $indicator = $("#compose-limit-indicator"); + const $textarea = $("textarea#compose-textarea"); if (text.length > max_length) { + $indicator.removeClass("approaching-limit"); + $textarea.removeClass("approaching-limit"); $indicator.addClass("over-limit"); - $("textarea#compose-textarea").addClass("over-limit"); + $textarea.addClass("over-limit"); $indicator.html( render_compose_limit_indicator({ remaining_characters, @@ -737,7 +740,10 @@ export function check_overflow_text(): number { set_message_too_long(true); } else if (remaining_characters <= 900) { $indicator.removeClass("over-limit"); - $("textarea#compose-textarea").removeClass("over-limit"); + $textarea.removeClass("over-limit"); + $indicator.addClass("approaching-limit"); + $textarea.addClass("approaching-limit"); + $indicator.html( render_compose_limit_indicator({ remaining_characters, @@ -746,7 +752,8 @@ export function check_overflow_text(): number { set_message_too_long(false); } else { $indicator.text(""); - $("textarea#compose-textarea").removeClass("over-limit"); + $textarea.removeClass("over-limit"); + $textarea.removeClass("approaching-limit"); set_message_too_long(false); } diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 4bc6081de7..1aa0930036 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -675,6 +675,8 @@ /* 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-warning: hsl(50deg 75% 92%); + --color-compose-message-content-background-error: hsl(3deg 35% 90%); --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%); @@ -742,6 +744,13 @@ --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-warning: hsl(038deg 70% 50%); + --color-message-content-container-border-error: hsl(0deg 76% 65%); + --color-message-content-container-border-invalid: hsl(3deg 57% 33%); + --color-message-content-container-shadow-warning: 0 0 0 1pt + hsl(038deg 70% 50%); + --color-message-content-container-shadow-error: 0 0 0 1pt hsl(0deg 76% 65%); + --color-message-content-container-shadow-invalid: 0 0 2px hsl(3deg 57% 33%); --color-compose-control-button-background-hover: hsl(0deg 0% 0% / 5%); --color-compose-focus-ring: var(--color-outline-focus); @@ -1230,6 +1239,8 @@ var(--color-compose-box-background), hsl(0deg 0% 0%) 20% ); + --color-compose-message-content-background-warning: hsl(50deg 75% 12%); + --color-compose-message-content-background-error: hsl(3deg 50% 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; diff --git a/web/styles/compose.css b/web/styles/compose.css index e55f508945..7fd523d12c 100644 --- a/web/styles/compose.css +++ b/web/styles/compose.css @@ -329,7 +329,14 @@ &:has(.new_message_textarea.over-limit), &:has(.new_message_textarea.over-limit:focus) { - box-shadow: 0 0 0 1pt hsl(0deg 76% 65%); + border-color: var(--color-message-content-container-border-error); + box-shadow: var(--color-message-content-container-shadow-error); + } + + &:has(.new_message_textarea.approaching-limit), + &:has(.new_message_textarea.approaching-limit:focus) { + border-color: var(--color-message-content-container-border-warning); + box-shadow: var(--color-message-content-container-shadow-warning); } &:has(.new_message_textarea.over-limit.flash) { @@ -338,8 +345,8 @@ &:has(.new_message_textarea.invalid), &:has(.new_message_textarea.invalid:focus) { - border-color: hsl(3deg 57% 33%); - box-shadow: 0 0 2px hsl(3deg 57% 33%); + border-color: var(--color-message-content-container-border-invalid); + box-shadow: var(--color-message-content-container-shadow-invalid); } } @@ -400,6 +407,16 @@ padding-right: var(--composebox-buttons-width); background-color: var(--color-compose-message-content-background); color: var(--color-text-default); + + &.over-limit { + background-color: var(--color-compose-message-content-background-error); + } + + &.approaching-limit { + background-color: var( + --color-compose-message-content-background-warning + ); + } } .surround-formatting-buttons-row {