New design for PM and stream recipient bars.

help/stream-permissions.md

@@ -3,14 +3,15 @@
 Streams are similar to chat rooms, IRC channels, or email lists in that they
 determine who receives a message. Zulip supports a few types of streams:
 
-* **Public** (**#**): Members can join and view the complete message history.
+* **Public** (<i class="zulip-icon zulip-icon-hashtag"></i>):
+  Members can join and view the complete message history.
   Public streams are visible to guest users only if they are
   subscribed (exactly like private streams with shared history).
 
-* **Private** (<i class="fa fa-lock"></i>): New subscribers must be
-  added by an existing subscriber. Only subscribers and organization
-  administrators can see the stream's name and description, and only
-  subscribers can view topics and messages with the stream:
+* **Private** (<i class="zulip-icon zulip-icon-lock"></i>):
+  New subscribers must be added by an existing subscriber. Only subscribers
+  and organization administrators can see the stream's name and description,
+  and only subscribers can view topics and messages with the stream:
     * In **private streams with shared history**, new subscribers can
     access the stream's full message history.
     * In **private streams with protected history**, new subscribers

tools/tests/test_pretty_print.py

@@ -163,15 +163,15 @@
 <div class="foobar">
 <input type="foobar" name="temp" value="{{dyn_name}}"
        {{#unless invite_only}}checked="checked"{{/unless}} /> {{dyn_name}}
-{{#if invite_only}}<i class="fa fa-lock"></i>{{/if}}
+{{#if invite_only}}<i class="zulip-icon zulip-icon-lock"></i>{{/if}}
 </div>
 """
 
 GOOD_HTML7 = """
 <div class="foobar">
     <input type="foobar" name="temp" value="{{dyn_name}}"
       {{#unless invite_only}}checked="checked"{{/unless}} /> {{dyn_name}}
-    {{#if invite_only}}<i class="fa fa-lock"></i>{{/if}}
+    {{#if invite_only}}<i class="zulip-icon zulip-icon-lock"></i>{{/if}}
 </div>
 """
 

web/src/click_handlers.js

@@ -809,16 +809,22 @@ export function initialize() {
         settings_display.launch_default_language_setting_modal();
     });
 
+    // We cannot update recipient bar color using dark_theme.enable/disable due to
+    // it being called before message lists are initialized and the order cannot be changed.
+    // Also, since these buttons are only visible for spectators which doesn't have events,
+    // if theme is changed in a different tab, the theme of this tab remains the same.
     $("body").on("click", "#gear-menu .dark-theme", (e) => {
         // Allow propagation to close gear menu.
         e.preventDefault();
         dark_theme.enable();
+        message_lists.update_recipient_bar_background_color();
     });
 
     $("body").on("click", "#gear-menu .light-theme", (e) => {
         // Allow propagation to close gear menu.
         e.preventDefault();
         dark_theme.disable();
+        message_lists.update_recipient_bar_background_color();
     });
 
     // MAIN CLICK HANDLER

web/src/drafts.js

@@ -9,7 +9,6 @@ import render_draft_table_body from "../templates/draft_table_body.hbs";
 
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
-import * as color_class from "./color_class";
 import * as compose from "./compose";
 import * as compose_actions from "./compose_actions";
 import * as compose_fade from "./compose_fade";
@@ -25,6 +24,7 @@ import * as narrow_state from "./narrow_state";
 import * as overlays from "./overlays";
 import * as people from "./people";
 import * as rendered_markdown from "./rendered_markdown";
+import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
 import * as sub_store from "./sub_store";
 import * as timerender from "./timerender";
@@ -339,6 +339,8 @@ export function format_draft(draft) {
     const id = draft.id;
     let formatted;
     const time = new Date(draft.updatedAt);
+    let invite_only = false;
+    let is_web_public = false;
     let time_stamp = timerender.render_now(time).time_str;
     if (time_stamp === $t({defaultMessage: "Today"})) {
         time_stamp = timerender.stringify_time(time);
@@ -350,10 +352,15 @@ export function format_draft(draft) {
         let stream_name = draft.stream.length > 0 ? draft.stream : space_string;
         if (draft.stream_id) {
             const sub = sub_store.get(draft.stream_id);
-            if (sub && sub.name !== stream_name) {
-                stream_name = sub.name;
-                draft.stream = stream_name;
-                draft_model.editDraft(id, draft);
+            if (sub) {
+                invite_only = sub.invite_only;
+                is_web_public = sub.is_web_public;
+
+                if (sub.name !== stream_name) {
+                    stream_name = sub.name;
+                    draft.stream = stream_name;
+                    draft_model.editDraft(id, draft);
+                }
             }
         }
         const draft_topic = draft.topic || compose.empty_topic_placeholder();
@@ -363,11 +370,15 @@ export function format_draft(draft) {
             draft_id: draft.id,
             is_stream: true,
             stream_name,
-            stream_color: draft_stream_color,
-            dark_background: color_class.get_css_class(draft_stream_color),
+            recipient_bar_color: stream_color.get_recipient_bar_color(draft_stream_color),
+            stream_privacy_icon_color:
+                stream_color.get_stream_privacy_icon_color(draft_stream_color),
             topic: draft_topic,
             raw_content: draft.content,
+            stream_id: draft.stream_id,
             time_stamp,
+            invite_only,
+            is_web_public,
         };
     } else {
         const emails = util.extract_pm_recipients(draft.private_message_recipient);

web/src/filter.js

@@ -626,36 +626,47 @@ export class Filter {
         return "#"; // redirect to All
     }
 
-    get_icon() {
+    add_icon_data(context) {
         // We have special icons for the simple narrows available for the via sidebars.
         const term_types = this.sorted_term_types();
         switch (term_types[0]) {
             case "in-home":
             case "in-all":
-                return "home";
+                context.icon = "home";
+                break;
             case "stream":
                 if (!this._sub) {
-                    return "question-circle-o";
+                    context.icon = "question-circle-o";
+                    break;
                 }
                 if (this._sub.invite_only) {
-                    return "lock";
+                    context.zulip_icon = "lock";
+                    break;
                 }
                 if (this._sub.is_web_public) {
-                    return "globe";
+                    context.zulip_icon = "globe";
+                    break;
                 }
-                return "hashtag";
+                context.zulip_icon = "hashtag";
+                break;
             case "is-private":
-                return "envelope";
+                context.icon = "envelope";
+                break;
             case "is-starred":
-                return "star";
+                context.icon = "star";
+                break;
             case "is-mentioned":
-                return "at";
+                context.icon = "at";
+                break;
             case "pm-with":
-                return "envelope";
+                context.icon = "envelope";
+                break;
             case "is-resolved":
-                return "check";
+                context.icon = "check";
+                break;
             default:
-                return undefined;
+                context.icon = undefined;
+                break;
         }
     }
 

web/src/message_list_view.js

@@ -11,7 +11,6 @@ import render_single_message from "../templates/single_message.hbs";
 
 import * as activity from "./activity";
 import * as blueslip from "./blueslip";
-import * as color_class from "./color_class";
 import * as compose from "./compose";
 import * as compose_fade from "./compose_fade";
 import * as condense from "./condense";
@@ -29,6 +28,7 @@ import * as popovers from "./popovers";
 import * as reactions from "./reactions";
 import * as rendered_markdown from "./rendered_markdown";
 import * as rows from "./rows";
+import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
 import * as sub_store from "./sub_store";
 import * as submessage from "./submessage";
@@ -173,8 +173,9 @@ function populate_group_from_message_container(group, message_container) {
     group.is_private = message_container.msg.is_private;
 
     if (group.is_stream) {
-        group.background_color = stream_data.get_color(message_container.msg.stream);
-        group.color_class = color_class.get_css_class(group.background_color);
+        const color = stream_data.get_color(message_container.msg.stream);
+        group.recipient_bar_color = stream_color.get_recipient_bar_color(color);
+        group.stream_privacy_icon_color = stream_color.get_stream_privacy_icon_color(color);
         group.invite_only = stream_data.is_invite_only_by_stream_name(message_container.msg.stream);
         group.is_web_public = stream_data.is_web_public(message_container.msg.stream_id);
         group.topic = message_container.msg.topic;
@@ -1555,4 +1556,13 @@ export class MessageListView {
             }
         }
     }
+
+    update_recipient_bar_background_color() {
+        const $table = rows.get_table(this.table_name);
+        const $stream_headers = $table.find(".message_header_stream");
+        for (const stream_header of $stream_headers) {
+            const $stream_header = $(stream_header);
+            stream_color.update_stream_recipient_color($stream_header);
+        }
+    }
 }

web/src/message_lists.js

@@ -1,6 +1,7 @@
 import {Filter} from "./filter";
 import * as message_list from "./message_list";
 import * as recent_topics_util from "./recent_topics_util";
+import * as ui_util from "./ui_util";
 
 export let home;
 export let current;
@@ -17,11 +18,21 @@ export function all_rendered_message_lists() {
     return rendered_message_lists;
 }
 
+export function update_recipient_bar_background_color() {
+    for (const msg_list of all_rendered_message_lists()) {
+        msg_list.view.update_recipient_bar_background_color();
+    }
+}
+
 export function initialize() {
     home = new message_list.MessageList({
         table_name: "zhome",
         filter: new Filter([{operator: "in", operand: "home"}]),
         excludes_muted_topics: true,
     });
     current = home;
+
+    // For users with automatic color scheme, we need to detect change
+    // in `prefers-color-scheme`as it changes based on time.
+    ui_util.listener_for_preferred_color_scheme_change(update_recipient_bar_background_color);
 }

web/src/message_view_header.js

@@ -33,13 +33,7 @@ function make_message_view_header(filter) {
         };
     }
     message_view_header.title = filter.get_title();
-    message_view_header.icon = filter.get_icon();
-    if (message_view_header.icon === "globe") {
-        // This is a bit hacky, but it works as a way to communicate
-        // to the HTML template that we need to use the different HTML
-        // required for the globe icon.
-        message_view_header.web_public_stream = true;
-    }
+    filter.add_icon_data(message_view_header);
     if (filter.has_operator("stream") && !filter._sub) {
         message_view_header.sub_count = "0";
         message_view_header.formatted_sub_count = "0";

web/src/realm_logo.js

@@ -3,6 +3,7 @@ import $ from "jquery";
 import * as channel from "./channel";
 import {page_params} from "./page_params";
 import * as settings_data from "./settings_data";
+import * as ui_util from "./ui_util";
 import * as upload_widget from "./upload_widget";
 
 export function build_realm_logo_widget(upload_function, is_night) {
@@ -105,16 +106,5 @@ export function initialize() {
     render();
 
     // Rerender the realm-logo when the browser detects color scheme changes.
-    const media_query_list = window.matchMedia("(prefers-color-scheme: dark)");
-    // MediaQueryList.addEventListener is missing in Safari < 14
-    const listener = () => {
-        if ($(":root").hasClass("color-scheme-automatic")) {
-            render();
-        }
-    };
-    if ("addEventListener" in media_query_list) {
-        media_query_list.addEventListener("change", listener);
-    } else {
-        media_query_list.addListener(listener);
-    }
+    ui_util.listener_for_preferred_color_scheme_change(render);
 }