From aa86533f22fa6ea6488400f61f437800394b84b4 Mon Sep 17 00:00:00 2001 From: Ishita Gupta Date: Sat, 8 Apr 2023 18:49:10 +0530 Subject: [PATCH] UI redesign: more-less message interaction. This commit encompasses the following changes: * Replace the [More...] link with a button titled "Show more". * Replace the [Show Less...] link with a button titled "Show less". * Add various on-hover interactions to the buttons. * In the condensed view, add fading to the bottom of the message to visually communicate that the message is truncated. * Update /help/ description. Fixes #22801. Co-authored-by: Evy Kassirer --- docs/testing/manual-testing.md | 2 +- help/collapse-a-message.md | 2 +- web/src/click_handlers.js | 2 +- web/src/condense.js | 14 +++++----- web/src/resize.js | 2 +- web/styles/zulip.css | 47 +++++++++++++++++++++++++++++----- web/templates/message_body.hbs | 7 +++-- 7 files changed, 56 insertions(+), 20 deletions(-) diff --git a/docs/testing/manual-testing.md b/docs/testing/manual-testing.md index 03394e06b0..c3f8aa6ddc 100644 --- a/docs/testing/manual-testing.md +++ b/docs/testing/manual-testing.md @@ -115,7 +115,7 @@ the hotkeys too: - click on the star button in the right column - use 'Ctrl + S' to star a message - Message length - - send a long message and see if '[More]' appears + - send a long message and see if 'Show more' button appears - click on the 'more' or 'collapse' link - use i to collapse/expand a message irrespective of message length - use 'v' to show all images in the thread diff --git a/help/collapse-a-message.md b/help/collapse-a-message.md index 34642ef84f..0a12258f93 100644 --- a/help/collapse-a-message.md +++ b/help/collapse-a-message.md @@ -15,5 +15,5 @@ remove the message content from view. {end_tabs} !!! tip "" - To expand a message, click **[More...]** at the bottom of the collapsed + To expand a message, click **Show more** at the bottom of the collapsed message. diff --git a/web/src/click_handlers.js b/web/src/click_handlers.js index 9760148159..e354be1632 100644 --- a/web/src/click_handlers.js +++ b/web/src/click_handlers.js @@ -114,7 +114,7 @@ export function initialize() { } // Widget for adjusting the height of a message. - if ($target.is("div.message_length_controller")) { + if ($target.is("button.message_expander") || $target.is("button.message_condenser")) { return true; } diff --git a/web/src/condense.js b/web/src/condense.js index 2f76cdd38e..75376fde10 100644 --- a/web/src/condense.js +++ b/web/src/condense.js @@ -40,8 +40,8 @@ function uncondense_row($row) { } export function uncollapse($row) { - // Uncollapse a message, restoring the condensed message [More] or - // [Show less] link if necessary. + // Uncollapse a message, restoring the condensed message "Show more" or + // "Show less" button if necessary. const message = message_lists.current.get(rows.id($row)); message.collapsed = false; message_flags.save_uncollapsed(message); @@ -52,11 +52,11 @@ export function uncollapse($row) { if (message.condensed === true) { // This message was condensed by the user, so re-show the - // [More] link. + // "Show more" button. condense_row($row); } else if (message.condensed === false) { // This message was un-condensed by the user, so re-show the - // [Show less] link. + // "Show less" button. uncondense_row($row); } else if ($content.hasClass("could-be-condensed")) { // By default, condense a long message. @@ -113,7 +113,7 @@ export function toggle_collapse(message) { // This function implements a multi-way toggle, to try to do what // the user wants for messages: // - // * If the message is currently showing any [More] link, either + // * If the message is currently showing any "Show more" button, either // because it was previously condensed or collapsed, fully display it. // * If the message is fully visible, either because it's too short to // condense or because it's already uncondensed, collapse it @@ -244,8 +244,8 @@ export function condense_and_collapse(elems) { $(elem).find(".message_expander").hide(); } - // Completely hide the message and replace it with a [More] - // link if the user has collapsed it. + // Completely hide the message and replace it with a "Show more" + // button if the user has collapsed it. if (message.collapsed) { $content.addClass("collapsed"); $(elem).find(".message_expander").show(); diff --git a/web/src/resize.js b/web/src/resize.js index 6b2e0d0926..2b487de604 100644 --- a/web/src/resize.js +++ b/web/src/resize.js @@ -176,7 +176,7 @@ export function handler() { compose_ui.autosize_textarea($("#compose-textarea")); update_recent_topics_filters_height(); - // Re-compute and display/remove [More] links to messages + // Re-compute and display/remove 'Show more' buttons to messages condense.condense_and_collapse(message_lists.all_current_message_rows()); // This function might run onReady (if we're in a narrow window), diff --git a/web/styles/zulip.css b/web/styles/zulip.css index 287abf8930..637e72a242 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -161,10 +161,15 @@ body { --color-unread-marker: hsl(217deg 64% 59%); --color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%); --color-background-modal: hsl(0deg 0% 98%); + --color-zulip-logo: hsl(0deg 0% 0% / 34%); --color-zulip-logo-loading: hsl(0deg 0% 27%); --color-zulip-logo-z: hsl(0deg 0% 100%); + --color-show-more-less-button-background: hsl(240deg 44% 56% / 8%); + --color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 15%); + --color-show-more-less-button-background-active: hsl(240deg 44% 56% / 20%); + /* Text colors */ --color-text-default: hsl(0deg 0% 20%); --color-text-message-default: hsl(0deg 0% 15%); @@ -173,6 +178,7 @@ body { --color-text-dropdown-input: hsl(0deg 0% 13.33%); --color-text-self-direct-mention: hsl(240deg 52% 45% / 100%); --color-text-self-group-mention: hsl(183deg 52% 26% / 100%); + --color-text-show-more-less-button: hsl(240deg 52% 53%); /* Icon colors */ --color-icon-bot: hsl(180deg 8% 65% / 100%); @@ -206,10 +212,15 @@ body { --color-navbar-bottom-border: hsl(0deg 0% 0% / 60%); --color-unread-marker: hsl(217deg 64% 59%); --color-background-modal: hsl(212deg 28% 18%); + --color-zulip-logo: hsl(0deg 0% 100% / 50%); --color-zulip-logo-loading: hsl(0deg 0% 100%); --color-zulip-logo-z: hsl(214deg 27% 18%); + --color-show-more-less-button-background: hsla(240deg 44% 56% / 15%); + --color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 25%); + --color-show-more-less-button-background-active: hsl(240deg 44% 56% / 15%); + /* Text colors */ --color-text-default: hsl(0deg 0% 100% / 75%); /* Unlike the light theme, the dark theme renders message @@ -222,6 +233,7 @@ body { --color-text-other-mention: hsl(0deg 0% 100% / 80%); --color-text-self-direct-mention: hsl(240deg 100% 88% / 100%); --color-text-self-group-mention: hsl(184deg 52% 63% / 100%); + --color-text-show-more-less-button: hsl(240deg 30% 65%); /* Icon colors */ --color-icon-bot: hsl(180deg 5% 50% / 100%); @@ -1693,6 +1705,12 @@ div.focused_table { max-height: 8.5em; min-height: 0; overflow: hidden; + mask-image: linear-gradient( + to top, + hsl(0deg 0% 100% / 0%) 0%, + hsl(0deg 0% 100%) 60px + ); + mask-size: cover; } &.collapsed { @@ -1852,15 +1870,30 @@ div.focused_table { } .message_length_controller { - display: none; - text-align: center; - color: hsl(200deg 100% 40%); + .message_length_toggle { + display: none; + width: 100%; + height: 24px; + margin-bottom: 4px; + color: var(--color-text-show-more-less-button); + background-color: var(--color-show-more-less-button-background); + border-radius: 4px; + border: none; + outline: none; + font-variant: all-small-caps; - /* to make message-uncollapse easier */ - margin-top: 10px; + &:hover { + background-color: var( + --color-show-more-less-button-background-hover + ); + } - &:hover { - text-decoration: underline; + &:active { + background-color: var( + --color-show-more-less-button-background-active + ); + scale: 0.98; + } } } diff --git a/web/templates/message_body.hbs b/web/templates/message_body.hbs index 8b3119c124..ba7c64af35 100644 --- a/web/templates/message_body.hbs +++ b/web/templates/message_body.hbs @@ -64,8 +64,11 @@
-
{{t "[More…]" }}
-
[{{t "Show less" }}]
+ +
+ + +
{{#unless is_hidden}}
{{> message_reactions }}