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