diff --git a/web/shared/icons/jump-to-conversation.svg b/web/shared/icons/jump-to-conversation.svg new file mode 100644 index 00000000000000..4e27c7a7f1307a --- /dev/null +++ b/web/shared/icons/jump-to-conversation.svg @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/web/src/compose_actions.js b/web/src/compose_actions.js index 5370c60af76c52..26dc057deaf641 100644 --- a/web/src/compose_actions.js +++ b/web/src/compose_actions.js @@ -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) { @@ -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 diff --git a/web/src/compose_recipient.js b/web/src/compose_recipient.js index 45bd2809bf12d1..3be50bb7a566a3 100644 --- a/web/src/compose_recipient.js +++ b/web/src/compose_recipient.js @@ -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()); @@ -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") { @@ -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() { diff --git a/web/src/compose_setup.js b/web/src/compose_setup.js index 7e1a2831207aa5..06ef0e4c9facc1 100644 --- a/web/src/compose_setup.js +++ b/web/src/compose_setup.js @@ -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); } }); diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 6a6ca2783ecbd6..6ef99123d03a55 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -228,6 +228,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%); @@ -519,6 +526,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%); diff --git a/web/styles/compose.css b/web/styles/compose.css index f70536572ebe87..d9fe67e19ff4ca 100644 --- a/web/styles/compose.css +++ b/web/styles/compose.css @@ -188,19 +188,35 @@ } & 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; } } } @@ -208,7 +224,7 @@ #compose-direct-recipient { flex-grow: 1; display: grid; - grid-template-columns: 1fr; + grid-template-columns: auto 1fr; align-items: stretch; } @@ -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) { @@ -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 { @@ -743,41 +768,23 @@ 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 `