compose: Redesign the "go to conversation" button.

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.

web/src/compose_recipient.js

@@ -59,7 +59,9 @@ 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")
+                .parent()
+                .toggleClass("narrowed_to_compose_recipients", false);
             return;
         }
     } else if (message_type === "private") {
@@ -69,11 +71,13 @@ 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")
+                .parent()
+                .toggleClass("narrowed_to_compose_recipients", false);
             return;
         }
     }
-    $(".narrow_to_compose_recipients").toggleClass("invisible", true);
+    $(".narrow_to_compose_recipients").parent().toggleClass("narrowed_to_compose_recipients", true);
 }
 
 function update_fade() {

web/styles/compose.css

@@ -188,19 +188,49 @@
         }
 
         & a.narrow_to_compose_recipients {
-            background: transparent;
-            font-size: 18px;
-            padding: 0 1px;
-            align-self: center;
+            display: flex;
+            align-items: center;
+            background: hsl(227deg 78% 59% / 12%);
+            color: hsl(227deg 78% 59% / 100%);
+            font-size: 20px;
+            padding: 0 5px;
+            height: 100%;
             line-height: 20px;
             opacity: 0.7;
-            border: 0;
-            margin-left: 3px;
             text-decoration: none;
-            color: inherit;
+            transition: all 100ms ease-in-out;
+            border-radius: 3px 0 0 3px;
+            /* Positioned absolutely so it takes up full height but
+            stays inside its flex parent when its other children (pills)
+            wrap onto another row */
+            position: absolute;
+            left: 0;
 
             &:hover {
                 opacity: 1;
+                background: hsl(227deg 78% 59% / 18%);
+            }
+        }
+
+        .narrow_to_compose_recipients_container {
+            /* This padding makes space for the absolutely positioned
+            narrow_to_compose_recipients button. */
+            padding-left: 30px;
+            position: relative;
+            transition: padding 100ms ease-in-out;
+
+            &.narrowed_to_compose_recipients {
+                /* Remove padding reserved for the narrow_to_compose_recipients
+                button when it's hidden. */
+                padding-left: 0;
+
+                & a.narrow_to_compose_recipients {
+                    padding: 0;
+
+                    &::before {
+                        content: "";
+                    }
+                }
             }
         }
     }
@@ -346,18 +376,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) {

web/styles/dark_theme.css

@@ -654,7 +654,15 @@
         border-bottom-color: hsl(235deg 18% 7%);
     }
 
-    .narrow_to_compose_recipients,
+    .compose_table #compose-recipient a.narrow_to_compose_recipients {
+        color: hsl(220deg 100% 95% / 100%);
+        background: hsl(227deg 100% 70% / 20%);
+
+        &:hover {
+            background: hsl(227deg 100% 70% / 30%);
+        }
+    }
+
     .expand_composebox_button,
     .collapse_composebox_button,
     .clear_search_button,

web/styles/input_pill.css

@@ -120,7 +120,7 @@
 }
 
 #compose-direct-recipient.pill-container {
-    padding: 0 2px;
+    padding: 0;
     flex-grow: 1;
     align-content: center;
     border: 1px solid hsl(0deg 0% 0% / 20%);

web/templates/compose.hbs

@@ -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">
+                            <div id="compose_recipient_box" class="narrow_to_compose_recipients_container">
+                                <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" class="pill-container" data-before="{{t 'You and' }}">
+                            <div id="compose-direct-recipient" class="pill-container narrow_to_compose_recipients_container" 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="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>
                         </div>

web/tests/recent_view.test.js

@@ -466,6 +466,8 @@ test("test_recent_view_show", ({mock_template}) => {
     stub_out_filter_buttons();
     // We don't test the css calls; we just skip over them.
     $("#mark_read_on_scroll_state_banner").toggleClass = noop;
+    $(".narrow_to_compose_recipients").set_parent($(".narrow_to_compose_recipients_container"));
+    $(".narrow_to_compose_recipients_container").toggleClass = noop;
 
     rt.clear_for_tests();
     rt.process_messages(messages);