Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

stream_privacy: Use new lock and hashtag icons. 

This commit doesn't modify the lock and hashtag icon in settings.
This commit is contained in:
Aman Agrawal 2023-04-08 00:49:01 +00:00 committed by Tim Abbott
parent bc8d136d5c
commit 8c744752ed
15 changed files with 109 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
help/stream-permissions.md
View File

@ -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

4
tools/tests/test_pretty_print.py
View File

@ -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>
"""

BIN
web/shared/icons/hashtag.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 947 B

BIN
web/shared/icons/lock.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 896 B

35
web/src/filter.js
View File

@ -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;
}
}

8
web/src/message_view_header.js
View File

@ -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";

16
web/styles/left_sidebar.css
View File

@ -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;
}
}

10
web/styles/recent_topics.css
View File

@ -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;
}
}
}

19
web/styles/subscriptions.css
View File

@ -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 {
font-size: 15px;
.zulip-icon {
font-size: 18px;
position: relative;
top: 1px;
}
}

39
web/styles/zulip.css
View File

@ -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;
}

4
web/templates/navbar_icon_and_title.hbs
View File

@ -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}}

4
web/templates/stream_privacy.hbs
View File

@ -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}}

8
web/templates/stream_settings/stream_privacy_icon.hbs
View File

@ -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}}

4
web/templates/stream_settings/subscription_setting_icon.hbs
View File

@ -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>

19
web/tests/filter.test.js
View File

@ -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: "#",
},