From 8c744752ed55dd527fcd99af9526fad61c8cb4a6 Mon Sep 17 00:00:00 2001 From: Aman Agrawal Date: Sat, 8 Apr 2023 00:49:01 +0000 Subject: [PATCH] stream_privacy: Use new lock and hashtag icons. This commit doesn't modify the lock and hashtag icon in settings. --- help/stream-permissions.md | 11 +++--- tools/tests/test_pretty_print.py | 4 +- web/shared/icons/hashtag.svg | 6 +++ web/shared/icons/lock.svg | 6 +++ web/src/filter.js | 35 +++++++++++------ web/src/message_view_header.js | 8 +--- web/styles/left_sidebar.css | 16 ++++++-- web/styles/recent_topics.css | 12 +++--- web/styles/subscriptions.css | 21 +++++----- web/styles/zulip.css | 39 +++++++++++++------ web/templates/navbar_icon_and_title.hbs | 4 +- web/templates/stream_privacy.hbs | 4 +- .../stream_settings/stream_privacy_icon.hbs | 8 ++-- .../subscription_setting_icon.hbs | 4 +- web/tests/filter.test.js | 19 +++++---- 15 files changed, 121 insertions(+), 76 deletions(-) create mode 100644 web/shared/icons/hashtag.svg create mode 100644 web/shared/icons/lock.svg diff --git a/help/stream-permissions.md b/help/stream-permissions.md index 25b21094a2..4a13c2fcfc 100644 --- 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** (): + 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** (): 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** (): + 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 index b6cd95dc09..1766e66620 100644 --- a/tools/tests/test_pretty_print.py +++ b/tools/tests/test_pretty_print.py @@ -163,7 +163,7 @@ BAD_HTML7 = """
{{dyn_name}} -{{#if invite_only}}{{/if}} +{{#if invite_only}}{{/if}}
""" @@ -171,7 +171,7 @@ GOOD_HTML7 = """
{{dyn_name}} - {{#if invite_only}}{{/if}} + {{#if invite_only}}{{/if}}
""" diff --git a/web/shared/icons/hashtag.svg b/web/shared/icons/hashtag.svg new file mode 100644 index 0000000000..7a50562cfc --- /dev/null +++ b/web/shared/icons/hashtag.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/web/shared/icons/lock.svg b/web/shared/icons/lock.svg new file mode 100644 index 0000000000..87776ac056 --- /dev/null +++ b/web/shared/icons/lock.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/web/src/filter.js b/web/src/filter.js index ec6dbc2dcc..bfdd4cdf03 100644 --- 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 index bba5bb414e..c1b323981c 100644 --- 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 index 33d49828ad..011acc93a2 100644 --- 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 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 index 0a3880159b..1dbf127548 100644 --- 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 index 3111930ff4..e08ec022f4 100644 --- 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,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 { - font-size: 15px; + .zulip-icon { + font-size: 18px; + position: relative; + top: 1px; } } diff --git a/web/styles/zulip.css b/web/styles/zulip.css index b4ec6d3aa4..8d427dee1b 100644 --- a/web/styles/zulip.css +++ b/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; } diff --git a/web/templates/navbar_icon_and_title.hbs b/web/templates/navbar_icon_and_title.hbs index 79e7662566..d31603b4a9 100644 --- a/web/templates/navbar_icon_and_title.hbs +++ b/web/templates/navbar_icon_and_title.hbs @@ -1,5 +1,5 @@ -{{#if web_public_stream}} - +{{#if zulip_icon}} + {{else if icon}} {{/if}} diff --git a/web/templates/stream_privacy.hbs b/web/templates/stream_privacy.hbs index 1f49a3a7fa..bebdac58ab 100644 --- 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}} - + {{else if is_web_public}} {{else}} - + {{/if}} diff --git a/web/templates/stream_settings/stream_privacy_icon.hbs b/web/templates/stream_settings/stream_privacy_icon.hbs index 83b45cd8e7..1e9f4d8b59 100644 --- 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}} -
- +
+
{{else if is_web_public}}
{{else}} -
+
+ +
{{/if}} diff --git a/web/templates/stream_settings/subscription_setting_icon.hbs b/web/templates/stream_settings/subscription_setting_icon.hbs index 8077d4df8d..8a3cb123cc 100644 --- a/web/templates/stream_settings/subscription_setting_icon.hbs +++ b/web/templates/stream_settings/subscription_setting_icon.hbs @@ -1,11 +1,11 @@
{{#if invite_only}} - + {{else if is_web_public}} {{else}} - # + {{/if}}
diff --git a/web/tests/filter.test.js b/web/tests/filter.test.js index 4417a566d8..a9568be37d 100644 --- a/web/tests/filter.test.js +++ b/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: "#", },