compose: Migrate out-of-view-notification to new banner style.

static/js/compose_banner.ts

@@ -7,7 +7,13 @@ import render_stream_does_not_exist_error from "../templates/compose_banner/stre
 export const WARNING = "warning";
 export const ERROR = "error";
 
+const MESSAGE_SENT_CLASSNAMES = {
+    sent_scroll_to_view: "sent_scroll_to_view",
+    narrow_to_recipient: "narrow_to_recipient",
+};
+
 export const CLASSNAMES = {
+    ...MESSAGE_SENT_CLASSNAMES,
     // warnings
     topic_resolved: "topic_resolved",
     recipient_not_subscribed: "recipient_not_subscribed",
@@ -32,6 +38,12 @@ export const CLASSNAMES = {
     user_not_subscribed: "user_not_subscribed",
 };
 
+export function clear_message_sent_banners(): void {
+    for (const classname of Object.values(MESSAGE_SENT_CLASSNAMES)) {
+        $(`#compose_banners .${classname}`).remove();
+    }
+}
+
 // TODO: Replace with compose_ui.hide_compose_spinner() when it is converted to ts.
 function hide_compose_spinner(): void {
     $("#compose-send-button .loader").hide();

static/js/notifications.js

@@ -5,6 +5,7 @@ import render_message_sent_banner from "../templates/compose_banner/message_sent
 import * as alert_words from "./alert_words";
 import * as blueslip from "./blueslip";
 import * as channel from "./channel";
+import * as compose_banner from "./compose_banner";
 import * as favicon from "./favicon";
 import * as hash_util from "./hash_util";
 import {$t} from "./i18n";
@@ -182,8 +183,7 @@ export function notify_above_composebox(
         }),
     );
     clear_compose_notifications();
-    $("#out-of-view-notification").append($notification);
+    $("#compose_banners").append($notification);
-    $("#out-of-view-notification").show();
 }
 
 if (window.electron_bridge !== undefined) {
@@ -620,7 +620,7 @@ export function notify_local_mixes(messages, need_user_to_scroll) {
                 const link_text = $t({defaultMessage: "Scroll down to view your message."});
                 notify_above_composebox(
                     banner_text,
-                    "compose_notification_scroll_to_message",
+                    compose_banner.CLASSNAMES.sent_scroll_to_view,
                     // Don't display a URL on hover for the "Scroll to bottom" link.
                     null,
                     link_msg_id,
@@ -634,8 +634,6 @@ export function notify_local_mixes(messages, need_user_to_scroll) {
             continue;
         }
 
-        const above_composebox_narrow_url = get_above_composebox_narrow_url(message);
-        const classname = "compose_notification_narrow_by_topic";
         const link_text = $t(
             {defaultMessage: "Narrow to {message_recipient}"},
             {message_recipient: get_message_header(message)},
@@ -643,8 +641,8 @@ export function notify_local_mixes(messages, need_user_to_scroll) {
 
         notify_above_composebox(
             banner_text,
-            classname,
+            compose_banner.CLASSNAMES.narrow_to_recipient,
-            above_composebox_narrow_url,
+            get_above_composebox_narrow_url(message),
             link_msg_id,
             link_text,
         );
@@ -678,7 +676,7 @@ export function notify_messages_outside_current_search(messages) {
         );
         notify_above_composebox(
             $t({defaultMessage: "Sent! Your recent message is outside the current search."}),
-            "compose_notification_narrow_by_topic",
+            compose_banner.CLASSNAMES.narrow_to_recipient,
             above_composebox_narrow_url,
             message.id,
             link_text,
@@ -687,9 +685,7 @@ export function notify_messages_outside_current_search(messages) {
 }
 
 export function clear_compose_notifications() {
-    $("#out-of-view-notification").empty();
+    compose_banner.clear_message_sent_banners();
-    $("#out-of-view-notification").stop(true, true);
-    $("#out-of-view-notification").hide();
     scroll_to_message_banner_message_id = null;
 }
 
@@ -699,7 +695,7 @@ export function reify_message_id(opts) {
 
     // If a message ID that we're currently storing (as a link) has changed,
     // update that link as well
-    for (const e of $("#out-of-view-notification a")) {
+    for (const e of $("#compose_banners a")) {
         const $elem = $(e);
         const message_id = $elem.data("message-id");
 
@@ -711,25 +707,28 @@ export function reify_message_id(opts) {
 }
 
 export function register_click_handlers() {
-    $("#out-of-view-notification").on("click", ".compose_notification_narrow_by_topic", (e) => {
+    $("#compose_banners").on(
-        const message_id = $(e.currentTarget).data("message-id");
+        "click",
-        narrow.by_topic(message_id, {trigger: "compose_notification"});
+        ".narrow_to_recipient .above_compose_banner_action_link",
-        e.stopPropagation();
+        (e) => {
-        e.preventDefault();
+            const message_id = $(e.currentTarget).data("message-id");
-    });
+            narrow.by_topic(message_id, {trigger: "compose_notification"});
-    $("#out-of-view-notification").on("click", ".compose_notification_scroll_to_message", (e) => {
+            e.stopPropagation();
-        const message_id = $(e.currentTarget).data("message-id");
+            e.preventDefault();
-        message_lists.current.select_id(message_id);
+        },
-        navigate.scroll_to_selected();
+    );
-        clear_compose_notifications();
+    $("#compose_banners").on(
-        e.stopPropagation();
+        "click",
-        e.preventDefault();
+        ".sent_scroll_to_view .above_compose_banner_action_link",
-    });
+        (e) => {
-    $("#out-of-view-notification").on("click", ".out-of-view-notification-close", (e) => {
+            const message_id = $(e.currentTarget).data("message-id");
-        clear_compose_notifications();
+            message_lists.current.select_id(message_id);
-        e.stopPropagation();
+            navigate.scroll_to_selected();
-        e.preventDefault();
+            clear_compose_notifications();
-    });
+            e.stopPropagation();
+            e.preventDefault();
+        },
+    );
 }
 
 export function handle_global_notification_updates(notification_name, setting) {

static/styles/compose.css

@@ -320,6 +320,24 @@
         padding: 12px 10px;
     }
 
+    &.success {
+        background-color: hsl(147, 43%, 92%);
+        border: 1px solid hsla(147, 57%, 25%, 0.4);
+        color: hsl(147, 57%, 25%);
+
+        .compose_banner_close_button {
+            color: hsla(147, 57%, 25%, 0.5);
+
+            &:hover {
+                color: hsl(147, 57%, 25%);
+            }
+
+            &:active {
+                color: hsla(147, 57%, 25%, 0.75);
+            }
+        }
+    }
+
     &.warning {
         background-color: hsl(50, 75%, 92%);
         border-color: hsla(38, 44%, 27%, 0.4);
@@ -414,31 +432,6 @@ div[id^="message-edit-send-status"],
     opacity: 0.4;
 }
 
-#out-of-view-notification {
-    position: relative;
-    margin-bottom: 6px;
-
-    background-color: hsla(152, 51%, 63%, 0.25);
-    border: 1px solid hsla(0, 0%, 0%, 0.1);
-    border-radius: 4px;
-
-    .close {
-        position: absolute;
-        right: 8px;
-        top: 4px;
-        font-size: 17px;
-        font-weight: bold;
-        color: hsl(0, 0%, 0%);
-        text-shadow: 0 1px 0 hsl(0, 0%, 100%);
-        opacity: 0.2;
-    }
-}
-
-.compose-notifications-content {
-    padding: 4px 22px;
-    text-align: center;
-}
-
 .composition-area {
     position: relative;
     flex: 1;

static/styles/dark_theme.css

@@ -172,6 +172,24 @@
     }
 
     .compose_banner {
+        &.success {
+            background-color: hsl(147, 100%, 8%);
+            border-color: hsla(149, 48%, 52%, 0.4);
+            color: hsl(147, 51%, 55%);
+
+            .compose_banner_close_button {
+                color: hsl(147, 51%, 55%, 0.5);
+
+                &:hover {
+                    color: hsl(147, 51%, 55%);
+                }
+
+                &:active {
+                    color: hsl(147, 51%, 55%, 0.75);
+                }
+            }
+        }
+
         &.warning {
             background-color: hsl(53, 100%, 11%);
             border-color: hsla(38, 44%, 60%, 0.4);
@@ -1289,10 +1307,6 @@
         color: hsla(126, 66%, 72%, 0.75);
     }
 
-    #out-of-view-notification {
-        border: 1px solid hsl(144, 45%, 62%);
-    }
-
     #bots_lists_navbar .active a {
         color: hsl(0, 0%, 87%);
         background-color: hsl(212, 28%, 18%);

static/templates/compose.hbs

@@ -51,7 +51,6 @@
             <span class="compose-send-status-close">&times;</span>
             <span id="compose-error-msg"></span>
         </div>
-        <div id="out-of-view-notification" class="notification-alert"></div>
         <div class="composition-area">
             <form id="send_message_form" action="/json/messages" method="post">
                 {{ csrf_input }}

static/templates/compose_banner/message_sent_banner.hbs

@@ -1,4 +1,7 @@
-<div class="compose-notifications-content">
+<div class="above_compose_banner compose_banner success {{classname}}">
-    {{banner_text}} {{#if link_text}}<a {{#if above_composebox_narrow_url}}href="{{above_composebox_narrow_url}}"{{/if}} class="{{classname}}" data-message-id="{{link_msg_id}}">{{link_text}}</a>{{/if}}
+    <p>
-    <button type="button" class="out-of-view-notification-close close">&times;</button>
+        {{banner_text}}
+        {{#if link_text}} <a class="above_compose_banner_action_link" {{#if above_composebox_narrow_url}}href="{{above_composebox_narrow_url}}"{{/if}} data-message-id="{{link_msg_id}}">{{link_text}}</a>{{/if}}
+    </p>
+    <a role="button" class="zulip-icon zulip-icon-close compose_banner_close_button"></a>
 </div>