stream_privacy: Use new lock and hashtag icons.

This commit doesn't modify the lock and hashtag icon in settings.

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
+* **Private** (<i class="zulip-icon zulip-icon-lock"></i>):
-  added by an existing subscriber. Only subscribers and organization
+  New subscribers must be added by an existing subscriber. Only subscribers
-  administrators can see the stream's name and description, and only
+  and organization administrators can see the stream's name and description,
-  subscribers can view topics and messages with the stream:
+  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,7 +163,7 @@ BAD_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>
 """
 
@@ -171,7 +171,7 @@ 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/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_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();
+    filter.add_icon_data(message_view_header);
-    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;
-    }
     if (filter.has_operator("stream") && !filter._sub) {
         message_view_header.sub_count = "0";
         message_view_header.formatted_sub_count = "0";

web/styles/left_sidebar.css

@@ -37,16 +37,24 @@ $before_unread_count_padding: 3px;
         position: relative;
         top: 1px;
     }
+
+    .zulip-icon.zulip-icon-hashtag {
+        font-size: 13px;
+        position: relative;
+        top: 1.5px;
+    }
+
+    .zulip-icon.zulip-icon-lock {
+        font-size: 13px;
+    }
 }
 
-/* Ideally we'd handle hashtags using an <i> and just have a single rule here. */
-.stream-privacy span.hashtag,
 #left-sidebar .filter-icon i {
     padding-right: 3px;
 
-    &.fa-lock {
+    &.zulip-icon-lock {
         position: relative;
-        top: 1px;
+        top: 2px;
     }
 }
 

web/styles/recent_topics.css

@@ -66,10 +66,6 @@
             width: 10px;
         }
 
-        .fa-lock {
-            padding-right: 3px;
-        }
-
         .fa-envelope {
             font-size: 0.7rem;
             margin-right: 2px;
@@ -458,8 +454,12 @@
         }
     }
 
-    .stream-privacy .zulip-icon.zulip-icon-globe {
+    .stream-privacy {
+        .zulip-icon {
+            position: relative;
             left: -1px;
+            top: 1.5px;
+        }
     }
 }
 

web/styles/subscriptions.css

@@ -415,10 +415,12 @@ h4.user_group_setting_subsection_title {
 
                 .large-icon {
                     display: inline-block;
-                }
 
-                .fa-lock {
+                    .zulip-icon {
+                        font-size: 20px;
                         position: relative;
+                        top: 3px;
+                    }
                 }
 
                 .zulip-icon-globe {
@@ -583,10 +585,6 @@ h4.user_group_setting_subsection_title {
             font-size: 1.1em;
         }
 
-        .fa-lock {
-            font-size: 1.4em;
-        }
-
         .hashtag {
             font-size: 1.4em;
             font-weight: 600;
@@ -828,9 +826,8 @@ h4.user_group_setting_subsection_title {
         .large-icon {
             display: inline-block;
             vertical-align: top;
-            margin-right: 5px;
+            margin-right: 8px;
             margin-top: -5px;
-            font-size: 1.5em;
 
             &.hash::after {
                 top: -1px;
@@ -838,8 +835,10 @@ h4.user_group_setting_subsection_title {
                 font-weight: 800;
             }
 
-            .zulip-icon-globe {
+            .zulip-icon {
-                font-size: 15px;
+                font-size: 18px;
+                position: relative;
+                top: 1px;
             }
         }
 

web/styles/zulip.css

@@ -1168,6 +1168,15 @@ td.pointer {
             }
         }
 
+        .stream-privacy i {
+            font-size: 15px;
+
+            &.zulip-icon-globe,
+            &.zulip-icon-hashtag {
+                position: relative;
+                top: -0.5px;
+            }
+        }
     }
 }
 
@@ -1241,7 +1250,19 @@ td.pointer {
         text-decoration: none;
     }
 
+    .stream-privacy {
+        min-width: unset;
+        width: 16px;
+        height: 16px;
 
+        .hashtag {
+            padding-right: 0;
+
+            &::after {
+                font-size: 16px;
+            }
+        }
+    }
 }
 
 .recipient_bar_controls {
@@ -1801,12 +1822,6 @@ div.focused_table {
         display: none;
     }
 
-    .zulip-icon.zulip-icon-globe {
-        font-size: 14px;
-        position: relative;
-        top: 1px;
-    }
-
     .sub_count,
     .stream,
     & > span {
@@ -1832,11 +1847,6 @@ div.focused_table {
         }
 
         .fa {
-            &.fa-lock {
-                position: relative;
-                top: 0.5px;
-            }
-
             .fa-envelope {
                 font-size: 14px;
                 margin: 0 5px;
@@ -1856,6 +1866,12 @@ div.focused_table {
         text-decoration: none;
         /* The first ~3px of padding here overlaps with the left padding from sub_count for some reason. */
         padding-right: calc(3px + 10px);
+
+        .zulip-icon {
+            font-size: 14px;
+            position: relative;
+            top: 1px;
+        }
     }
 
     .divider {
@@ -2410,7 +2426,6 @@ select.invite-as {
 }
 
 .date_row {
-    padding-left: 2px;
     text-align: right;
 }
 

web/templates/navbar_icon_and_title.hbs

@@ -1,5 +1,5 @@
-{{#if web_public_stream}}
+{{#if zulip_icon}}
-<i class="zulip-icon zulip-icon-globe" aria-hidden="true"></i>
+<i class="zulip-icon zulip-icon-{{zulip_icon}}" aria-hidden="true"></i>
 {{else if icon}}
 <i class="fa fa-{{icon}}" aria-hidden="true"></i>
 {{/if}}

web/templates/stream_privacy.hbs

@@ -1,8 +1,8 @@
 {{! This controls whether the swatch next to streams in the left sidebar has a lock icon. }}
 {{#if invite_only}}
-<i class="fa fa-lock" aria-hidden="true"></i>
+<i class="zulip-icon zulip-icon-lock" aria-hidden="true"></i>
 {{else if is_web_public}}
 <i class="zulip-icon zulip-icon-globe" aria-hidden="true"></i>
 {{else}}
-<span class="hashtag"></span>
+<i class="zulip-icon zulip-icon-hashtag" aria-hidden="true"></i>
 {{/if}}

web/templates/stream_settings/stream_privacy_icon.hbs

@@ -1,12 +1,14 @@
 {{! This controls whether the swatch next to streams in the stream edit page has a lock icon. }}
 {{#if invite_only}}
-<div class="large-icon lock" style="color: {{color}}">
+<div class="large-icon" style="color: {{color}}">
-    <i class="fa fa-lock" aria-hidden="true"></i>
+    <i class="zulip-icon zulip-icon-lock" aria-hidden="true"></i>
 </div>
 {{else if is_web_public}}
 <div class="large-icon" style="color: {{color}}">
     <i class="zulip-icon zulip-icon-globe" aria-hidden="true"></i>
 </div>
 {{else}}
-<div class="large-icon hash" style="color: {{color}}"></div>
+<div class="large-icon" style="color: {{color}}">
+    <i class="zulip-icon zulip-icon-hashtag" aria-hidden="true"></i>
+</div>
 {{/if}}

web/templates/stream_settings/subscription_setting_icon.hbs

@@ -1,11 +1,11 @@
 <div class="icon" style="background-color: {{color}}">
     <div class="flex">
         {{#if invite_only}}
-        <i class="fa fa-lock" aria-hidden="true"></i>
+        <i class="zulip-icon zulip-icon-lock" aria-hidden="true"></i>
         {{else if is_web_public}}
         <i class="zulip-icon zulip-icon-globe fa-lg" aria-hidden="true"></i>
         {{else}}
-        <span class="hashtag">#</span>
+        <span class="zulip-icon zulip-icon-hashtag"></span>
         {{/if}}
     </div>
 </div>

web/tests/filter.test.js

@@ -1437,9 +1437,12 @@ test("navbar_helpers", () => {
         assert.equal(filter.is_common_narrow(), test_case.is_common_narrow);
     }
 
-    function test_get_icon(test_case) {
+    function test_add_icon_data(test_case) {
         const filter = new Filter(test_case.operator);
-        assert.equal(filter.get_icon(), test_case.icon);
+        const context = {};
+        filter.add_icon_data(context);
+        assert.equal(context.icon, test_case.icon);
+        assert.equal(context.zulip_icon, test_case.zulip_icon);
     }
 
     function test_get_title(test_case) {
@@ -1450,7 +1453,7 @@ test("navbar_helpers", () => {
     function test_helpers(test_case) {
         // debugging tip: add a `console.log(test_case)` here
         test_common_narrow(test_case);
-        test_get_icon(test_case);
+        test_add_icon_data(test_case);
         test_get_title(test_case);
         test_redirect_url_with_search(test_case);
     }
@@ -1541,7 +1544,7 @@ test("navbar_helpers", () => {
         {
             operator: stream_topic_operators,
             is_common_narrow: true,
-            icon: "hashtag",
+            zulip_icon: "hashtag",
             title: "Foo",
             redirect_url_with_search: "/#narrow/stream/43-Foo/topic/bar",
         },
@@ -1555,7 +1558,7 @@ test("navbar_helpers", () => {
         {
             operator: stream_operator,
             is_common_narrow: true,
-            icon: "hashtag",
+            zulip_icon: "hashtag",
             title: "Foo",
             redirect_url_with_search: "/#narrow/stream/43-Foo",
         },
@@ -1576,14 +1579,14 @@ test("navbar_helpers", () => {
         {
             operator: private_stream_operator,
             is_common_narrow: true,
-            icon: "lock",
+            zulip_icon: "lock",
             title: "psub",
             redirect_url_with_search: "/#narrow/stream/22-psub",
         },
         {
             operator: web_public_stream_operator,
             is_common_narrow: true,
-            icon: "globe",
+            zulip_icon: "globe",
             title: "webPublicSub",
             redirect_url_with_search: "/#narrow/stream/12-webPublicSub",
         },
@@ -1631,7 +1634,7 @@ test("navbar_helpers", () => {
         {
             operator: stream_topic_near,
             is_common_narrow: false,
-            icon: "hashtag",
+            zulip_icon: "hashtag",
             title: "Foo",
             redirect_url_with_search: "#",
         },