Skip to content

Commit

Permalink
compose: Redesign the "go to conversation" button.
Browse files Browse the repository at this point in the history 
Now the button uses an eye icon, is placed at the start of the topic/dm
recipient input, and has a bluish purple look. It slides in and out of
view as needed.

Fixes: zulip#28697.
  • Loading branch information
@N-Shar-ma @timabbott
N-Shar-ma authored and timabbott committed Feb 21, 2024
1 parent 640f8b7 commit 90474ee
Show file tree
Hide file tree
Showing 9 changed files with 119 additions and 71 deletions.
5 changes: 5 additions & 0 deletions web/shared/icons/jump-to-conversation.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions web/src/compose_actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export function complete_starting_tasks(msg_type, opts) {
}
$(document).trigger(new $.Event("compose_started.zulip", opts));
compose_recipient.update_placeholder_text();
compose_recipient.update_narrow_to_recipient_visibility();
compose_recipient.update_narrow_to_recipient_visibility(true);
}

export function maybe_scroll_up_selected_message(opts) {
Expand Down Expand Up @@ -289,11 +289,11 @@ export function start(msg_type, opts) {
compose_validate.check_overflow_text();
}

const $clear_topic_button = $("#recipient_box_clear_topic_button");
const $compose_recipient_box = $("#compose_recipient_box");
if (is_clear_topic_button_triggered || opts.topic.length === 0) {
$clear_topic_button.hide();
$compose_recipient_box.toggleClass("empty", true);
} else {
$clear_topic_button.show();
$compose_recipient_box.toggleClass("empty", false);
}

// Show a warning if topic is resolved
Expand Down
15 changes: 11 additions & 4 deletions web/src/compose_recipient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,14 @@ function composing_to_current_private_message_narrow() {
);
}

export function update_narrow_to_recipient_visibility() {
export function update_narrow_to_recipient_visibility(skip_transition = false) {
// We skip the transition when opening a collapsed compose box.
if (skip_transition) {
$(".narrow_to_compose_recipients").toggleClass("no-transition", true);
setTimeout(() => {
$(".narrow_to_compose_recipients").toggleClass("no-transition", false);
}, 10);
}
const message_type = compose_state.get_message_type();
if (message_type === "stream") {
const stream_exists = Boolean(compose_state.stream_id());
Expand All @@ -59,7 +66,7 @@ export function update_narrow_to_recipient_visibility() {
!composing_to_current_topic_narrow() &&
compose_state.has_full_recipient()
) {
$(".narrow_to_compose_recipients").toggleClass("invisible", false);
$(".narrow_to_compose_recipients").toggleClass("collapsed", false);
return;
}
} else if (message_type === "private") {
Expand All @@ -69,11 +76,11 @@ export function update_narrow_to_recipient_visibility() {
!composing_to_current_private_message_narrow() &&
compose_state.has_full_recipient()
) {
$(".narrow_to_compose_recipients").toggleClass("invisible", false);
$(".narrow_to_compose_recipients").toggleClass("collapsed", false);
return;
}
}
$(".narrow_to_compose_recipients").toggleClass("invisible", true);
$(".narrow_to_compose_recipients").toggleClass("collapsed", true);
}

function update_fade() {
Expand Down
10 changes: 5 additions & 5 deletions web/src/compose_setup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -424,20 +424,20 @@ export function initialize() {

$("#compose_recipient_box").on("click", "#recipient_box_clear_topic_button", () => {
const $input = $("input#stream_message_recipient_topic");
const $button = $("#recipient_box_clear_topic_button");
const $container = $("#compose_recipient_box");

$input.val("");
$input.trigger("focus");
$button.hide();
$container.toggleClass("empty", true);
});

$("#compose_recipient_box").on("input", "input#stream_message_recipient_topic", (e) => {
const $button = $("#recipient_box_clear_topic_button");
const $container = $("#compose_recipient_box");
const value = $(e.target).val();
if (value.length === 0) {
$button.hide();
$container.toggleClass("empty", true);
} else {
$button.show();
$container.toggleClass("empty", false);
}
});

Expand Down
10 changes: 10 additions & 0 deletions web/styles/app_variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,13 @@
--color-compose-embedded-button-background-hover: hsl(
231deg 100% 90% / 50%
);
--color-narrow-to-compose-recipients-background: hsl(227deg 100% 70% / 25%);
--color-narrow-to-compose-recipients-background-hover: hsl(
227deg 100% 70% / 35%
);
--color-narrow-to-compose-recipients-color: hsl(227deg 76% 64%);
--color-narrow-to-compose-recipients-color-hover: hsl(227deg 78% 59%);
--color-narrow-to-compose-recipients-border: transparent;

/* Text colors */
--color-text-default: hsl(0deg 0% 20%);
Expand Down Expand Up @@ -515,6 +522,9 @@
235deg 100% 70% / 11%
);
--color-background-popover: hsl(212deg 32% 14%);
--color-narrow-to-compose-recipients-color: hsl(224deg 28% 81%);
--color-narrow-to-compose-recipients-border: hsl(225deg 9% 9%);
--color-narrow-to-compose-recipients-color-hover: hsl(221deg 100% 95%);

/* Text colors */
--color-text-default: hsl(0deg 0% 100% / 75%);
Expand Down
124 changes: 75 additions & 49 deletions web/styles/compose.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,27 +188,43 @@
}

& a.narrow_to_compose_recipients {
background: transparent;
font-size: 18px;
padding: 0 1px;
align-self: center;
display: flex;
align-items: center;
background: var(--color-narrow-to-compose-recipients-background);
color: var(--color-narrow-to-compose-recipients-color);
border: 1px solid var(--color-narrow-to-compose-recipients-border);
font-size: 20px;
/* extra 4px padding, and -ive 4px margin on the right so that the
curved edge of the next element will overlap this by 4px */
padding: 0 8px 0 4px;
margin-right: -4px;
line-height: 20px;
opacity: 0.7;
border: 0;
margin-left: 3px;
text-decoration: none;
color: inherit;
transition: all 100ms ease-in-out;
border-radius: 4px 0 0 4px;

&:hover {
opacity: 1;
background: var(
--color-narrow-to-compose-recipients-background-hover
);
color: var(--color-narrow-to-compose-recipients-color-hover);
}

&.no-transition {
transition: none;
}

&.collapsed {
width: 0;
padding: 0;
}
}
}

#compose-direct-recipient {
flex-grow: 1;
display: grid;
grid-template-columns: 1fr;
grid-template-columns: auto 1fr;
align-items: stretch;
}

Expand Down Expand Up @@ -349,18 +365,18 @@
align-items: center;
height: var(--compose-recipient-box-min-height);
/* Align to compose controls; that's 112px width,
minus 23px for the narrow indicator, but then
add back 6px of grid gap for 95px here.
but then add back 6px of grid gap for 118px
here.
TODO: Make variables here; expanded use of grid
on the compose box will make these unnecessary,
eventually. */
width: calc(112px - 23px + 6px);
width: calc(112px + 6px);
justify-content: flex-end;

@media ((width >= $sm_min) and (width < $mc_min)) {
/* Align to compose controls at narrower widths */
width: calc(62px - 23px + 6px);
width: calc(62px + 6px);
}

@media (width < $sm_min) {
Expand Down Expand Up @@ -718,8 +734,17 @@ textarea.new_message_textarea {
resize: vertical !important;
margin-top: 5px;
border-radius: 4px;
color: hsl(0deg 0% 33%);
background-color: hsl(0deg 0% 100%);
border: 1px solid hsl(0deg 0% 0% / 20%);
box-shadow: none;
transition: border 0.2s ease;
color: var(--color-text-default);

&:focus {
outline: 0;
border: 1px solid hsl(0deg 0% 67%);
box-shadow: none;
}

&.over_limit,
&.over_limit:focus {
Expand All @@ -743,63 +768,44 @@ textarea.new_message_textarea {
}
}

textarea.new_message_textarea,
#compose_recipient_box {
border: 1px solid hsl(0deg 0% 0% / 20%);
box-shadow: none;
transition: border 0.2s ease;
color: var(--color-text-default);

&:focus {
outline: 0;
border: 1px solid hsl(0deg 0% 67%);
box-shadow: none;
}
}

#compose_recipient_box {
display: grid;
grid-template-columns: 1fr auto;
grid-template-columns: auto 1fr auto;
align-items: stretch;
flex: 1 1 0;
border-radius: 3px;
border-radius: 4px;
background: hsl(0deg 0% 100%);

/* Give the recipient box, a `<div>`, the
correct styles when focus is in the
#stream_message_recipient_topic `<input>` */
&:focus-within {
outline: 0;
border: 1px solid hsl(0deg 0% 67%);
box-shadow: none;
}

#stream_message_recipient_topic,
#recipient_box_clear_topic_button {
background: none;
border: none;
/* background: none makes the topic input transparent in which
case it would not hide the edge of .narrow_to_compose_recipients
it overlaps, hence we use inherit instead */
background: inherit;
/* We make the borders of both these elements look like 1
single element's border */
border: 1px solid hsl(0deg 0% 0% / 20%);
}

/* Styles for input in the recipient_box */
#stream_message_recipient_topic {
/* Override grid's effective `max-content` min-width */
overflow: hidden;
text-overflow: ellipsis;

box-shadow: none;
outline: none;

padding: 4px 6px;
/* Reset height to let `align-items: stretch` on the grid parent handle this. */
border-right: none;
border-radius: 4px 0 0 4px;
/* Reset height to let `align-items: stretch` on the grid parent handle this */
height: auto;
}

/* Styles for new conversation button in the recipient_box */
#recipient_box_clear_topic_button {
/* Set the border radius smaller, relative to the parent */
border-radius: 2px;
border-left: none;
border-radius: 0 4px 4px 0;
padding: 6px;
margin: 1px;
margin: 0;
color: var(--color-compose-embedded-button-text-color);

.zulip-icon {
Expand All @@ -818,6 +824,26 @@ textarea.new_message_textarea,
}
}

&.empty {
#stream_message_recipient_topic {
border-radius: 4px;
border-right: 1px solid hsl(0deg 0% 0% / 20%);
}

#recipient_box_clear_topic_button {
display: none;
}
}

/* Darken the combined border of the topic input and clear
topic button when focus is in the topic input */
&:focus-within {
#stream_message_recipient_topic,
#recipient_box_clear_topic_button {
border-color: hsl(0deg 0% 67%);
}
}

/* This will reset the bootstrap margin-bottom: 10px value for the inputs */
& input {
margin-bottom: 0;
Expand Down
11 changes: 6 additions & 5 deletions web/styles/dark_theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,12 @@
color: inherit;
}

#compose_recipient_box,
#compose-direct-recipient .pill-container {
/* Opaque to overlap .narrow_to_compose_recipients button */
background-color: hsl(228deg 9% 11%);
}

.dropdown-list-search .dropdown-list-search-input:focus {
background-color: hsl(225deg 6% 7%);
border: 1px solid hsl(0deg 0% 100% / 50%);
Expand All @@ -488,10 +494,6 @@
background-color: hsl(0deg 86% 14%) !important;
}

#compose-direct-recipient .pill-container {
background-color: hsl(0deg 0% 0% / 20%);
}

#searchbox {
/* Light theme shows hover mostly through box-shadow,
and dark theme shows it mostly through changing color
Expand Down Expand Up @@ -659,7 +661,6 @@
border-bottom-color: hsl(235deg 18% 7%);
}

.narrow_to_compose_recipients,
.expand_composebox_button,
.collapse_composebox_button,
.clear_search_button,
Expand Down
2 changes: 1 addition & 1 deletion web/styles/input_pill.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
}

#compose-direct-recipient .pill-container {
padding: 0 2px;
padding: 0;
border: 1px solid hsl(0deg 0% 0% / 20%);
background-color: hsl(0deg 0% 100%);

Expand Down
5 changes: 2 additions & 3 deletions web/templates/compose.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,21 +54,20 @@
<button type="button" class="close fa fa-times" id='compose_close' data-tooltip-template-id="compose_close_tooltip_template"></button>
</div>
<div id="compose-recipient" class="order-1">
<div class="topic-marker-container order-1">
<a role="button" class="narrow_to_compose_recipients zulip-icon zulip-icon-arrow-left-circle" data-tooltip-template-id="narrow_to_compose_recipients_tooltip"></a>
</div>
{{> dropdown_widget_with_stream_colorblock
widget_name="compose_select_recipient"}}
<div class="topic-marker-container">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<div id="compose_recipient_box">
<a role="button" class="narrow_to_compose_recipients zulip-icon zulip-icon-jump-to-conversation" data-tooltip-template-id="narrow_to_compose_recipients_tooltip"></a>
<input type="text" name="stream_message_recipient_topic" id="stream_message_recipient_topic" maxlength="{{ max_topic_length }}" value="" placeholder="{{t 'Topic' }}" autocomplete="off" tabindex="0" aria-label="{{t 'Topic' }}" />
<button type="button" id="recipient_box_clear_topic_button" class="button tippy-zulip-delayed-tooltip" data-tippy-content="{{t 'Clear topic' }}" tabindex="-1">
<i class="zulip-icon zulip-icon-close"></i>
</button>
</div>
<div id="compose-direct-recipient" data-before="{{t 'You and' }}">
<a role="button" class="narrow_to_compose_recipients zulip-icon zulip-icon-jump-to-conversation" data-tooltip-template-id="narrow_to_compose_recipients_tooltip"></a>
<div class="pill-container">
<div class="input" contenteditable="true" id="private_message_recipient" data-no-recipients-text="{{t 'Add one or more users' }}" data-some-recipients-text="{{t 'Add another user...' }}"></div>
</div>
Expand Down

0 comments on commit 90474ee

Please sign in to comment.