Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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>
This commit is contained in:
Ishita Gupta 2023-04-08 18:49:10 +05:30 committed by Tim Abbott
parent fe1a2f6f02
commit aa86533f22
7 changed files with 56 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/testing/manual-testing.md
View File

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

2
help/collapse-a-message.md
View File

@ -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.

2
web/src/click_handlers.js
View File

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

14
web/src/condense.js
View File

@ -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();

2
web/src/resize.js
View File

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

47
web/styles/zulip.css
View File

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

7
web/templates/message_body.hbs
View File

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