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 <evy.kassirer@gmail.com>

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

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.

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;
         }
 

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
+    // Uncollapse a message, restoring the condensed message "Show more" or
-    // [Show less] link if necessary.
+    // "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]
+        // Completely hide the message and replace it with a "Show more"
-        // link if the user has collapsed it.
+        // button if the user has collapsed it.
         if (message.collapsed) {
             $content.addClass("collapsed");
             $(elem).find(".message_expander").show();

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),

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;
+    .message_length_toggle {
-    text-align: center;
+        display: none;
-    color: hsl(200deg 100% 40%);
+        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 */
+        &:hover {
-    margin-top: 10px;
+            background-color: var(
+                --color-show-more-less-button-background-hover
+            );
+        }
 
-    &:hover {
+        &:active {
-        text-decoration: underline;
+            background-color: var(
+                --color-show-more-less-button-background-active
+            );
+            scale: 0.98;
+        }
     }
 }
 

web/templates/message_body.hbs

@@ -64,8 +64,11 @@
 <div class="message_edit">
     <div class="message_edit_form"></div>
 </div>
-<div class="message_expander message_length_controller tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "[More…]" }}</div>
+
-<div class="message_condenser message_length_controller tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">[{{t "Show less" }}]</div>
+<div class="message_length_controller">
+    <button type="button" class="message_expander message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-expander-tooltip-template">{{t "Show more" }}</button>
+    <button type="button" class="message_condenser message_length_toggle tippy-zulip-delayed-tooltip" data-tooltip-template-id="message-condenser-tooltip-template">{{t "Show less" }}</button>
+</div>
 
 {{#unless is_hidden}}
 <div class="message_reactions">{{> message_reactions }}</div>