stream_privacy: Use new lock and hashtag icons.

This commit doesn't modify the lock and hashtag icon in settings.
zulip · Apr 8, 2023 · c4e16e7 · c4e16e7
1 parent 3f830fe
commit c4e16e7
Show file tree

Hide file tree

Showing 15 changed files with 121 additions and 76 deletions.
diff --git a/help/stream-permissions.md b/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

diff --git a/tools/tests/test_pretty_print.py b/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>
 """
 

diff --git a/web/shared/icons/hashtag.svg b/web/shared/icons/hashtag.svg
diff --git a/web/shared/icons/lock.svg b/web/shared/icons/lock.svg
diff --git a/web/src/filter.js b/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;
         }
     }
 

diff --git a/web/src/message_view_header.js b/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";

diff --git a/web/styles/left_sidebar.css b/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;
     }
 }
 

diff --git a/web/styles/recent_topics.css b/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 {
-        left: -1px;
+    .stream-privacy {
+        .zulip-icon {
+            position: relative;
+            left: -1px;
+            top: 1.5px;
+        }
     }
 }
 

diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
@@ -415,10 +415,12 @@ h4.user_group_setting_subsection_title {
 
                 .large-icon {
                     display: inline-block;
-                }
 
-                .fa-lock {
-                    position: relative;
+                    .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,18 +826,19 @@ 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;
                 font-size: 1.09em;
                 font-weight: 800;
             }
 
-            .zulip-icon-globe {
-                font-size: 15px;
+            .zulip-icon {
+                font-size: 18px;
+                position: relative;
+                top: 1px;
             }
         }
 

diff --git a/web/styles/zulip.css b/web/styles/zulip.css
@@ -1159,6 +1159,15 @@ td.pointer {
             }
         }
 
+        .stream-privacy i {
+            font-size: 15px;
+
+            &.zulip-icon-globe,
+            &.zulip-icon-hashtag {
+                position: relative;
+                top: -0.5px;
+            }
+        }
     }
 }
 
@@ -1232,7 +1241,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 {
@@ -1789,12 +1810,6 @@ div.focused_table {
         display: none;
     }
 
-    .zulip-icon.zulip-icon-globe {
-        font-size: 14px;
-        position: relative;
-        top: 1px;
-    }
-
     .sub_count,
     .stream,
     & > span {
@@ -1820,11 +1835,6 @@ div.focused_table {
         }
 
         .fa {
-            &.fa-lock {
-                position: relative;
-                top: 0.5px;
-            }
-
             .fa-envelope {
                 font-size: 14px;
                 margin: 0 5px;
@@ -1844,6 +1854,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 {
@@ -2398,7 +2414,6 @@ select.invite-as {
 }
 
 .date_row {
-    padding-left: 2px;
     text-align: right;
 }
 

diff --git a/web/templates/navbar_icon_and_title.hbs b/web/templates/navbar_icon_and_title.hbs
@@ -1,5 +1,5 @@
-{{#if web_public_stream}}
-<i class="zulip-icon zulip-icon-globe" aria-hidden="true"></i>
+{{#if zulip_icon}}
+<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}}

diff --git a/web/templates/stream_privacy.hbs b/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}}
diff --git a/web/templates/stream_settings/stream_privacy_icon.hbs b/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}}">
-    <i class="fa fa-lock" aria-hidden="true"></i>
+<div class="large-icon" style="color: {{color}}">
+    <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}}
diff --git a/web/templates/stream_settings/subscription_setting_icon.hbs b/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>