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
N-Shar-ma committed Feb 16, 2024
1 parent fa36287 commit 0ac8b5c
Show file tree
Hide file tree
Showing 6 changed files with 74 additions and 59 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.
6 changes: 3 additions & 3 deletions web/src/compose_recipient.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,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 +69,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
95 changes: 48 additions & 47 deletions web/styles/compose.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,27 +188,36 @@
}

& a.narrow_to_compose_recipients {
background: transparent;
font-size: 18px;
padding: 0 1px;
align-self: center;
display: flex;
align-items: center;
background: hsl(227deg 100% 70% / 25%);
color: hsl(227deg 76% 64%);
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 9px 0 5px;
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: hsl(227deg 100% 70% / 35%);
color: hsl(227deg 78% 59%);
}

&.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 +358,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 +727,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,40 +761,20 @@ 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 {
flex: 1 1 0;
border-radius: 3px;
display: grid;
grid-template-columns: 1fr auto;
grid-template-columns: auto 1fr auto;
align-items: stretch;
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;
/* 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;
border: none;
}

Expand All @@ -785,21 +783,24 @@ textarea.new_message_textarea,
/* Override grid's effective `max-content` min-width */
overflow: hidden;
text-overflow: ellipsis;

box-shadow: none;
outline: none;

padding: 4px 6px;
border: 1px solid hsl(0deg 0% 0% / 20%);
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-radius: 0 4px 4px 0;
padding: 6px;
margin: 1px;
margin: 0;
border: 1px solid hsl(0deg 0% 0% / 20%);
/* We make the borders of this and the topic input look
like 1 single element's border */
border-left: none;
color: var(--color-compose-embedded-button-text-color);

.zulip-icon {
Expand Down
20 changes: 15 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,15 @@
border-bottom-color: hsl(235deg 18% 7%);
}

.narrow_to_compose_recipients,
.compose_table #compose-recipient a.narrow_to_compose_recipients {
color: hsl(224deg 28% 81%);
border: 1px solid hsl(225deg 9% 9%);

&:hover {
color: hsl(221deg 100% 95%);
}
}

.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 0ac8b5c

Please sign in to comment.