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

topic_popover: Add support to follow a topic from the topic_popover. 

This commit adds support for following a topic from the topic
three-dot menu in the left sidebar.

Three options, i.e., 'Mute topic', 'Unmute topic', and 'Follow topic',
are shown at the top of the menu (in the mentioned order), regardless
of whether the stream is muted or unmuted.

We can no longer set the topic's visibility_policy to INHERIT
(the default value) from this menu.

The changes are visible in the development environment only.

Fixes #25917.

Co-authored-by: Prakhar Pratyush <prakhar841301@gmail.com>
Co-authored-by: Hardik Dharmani <Ddharmani99@gmail.com>
This commit is contained in:
Prakhar Pratyush 2023-06-14 15:11:48 +05:30 committed by Tim Abbott
parent 93a18b999a
commit 237f9f4799
8 changed files with 122 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 628 B

BIN
web/shared/icons/mute-new.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 582 B

BIN
web/shared/icons/unmute-new.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 499 B

12
web/src/popover_menus.js
View File

@ -483,6 +483,18 @@ export function initialize() {
return;
}
$popper.on("click", ".tab-option", (e) => {
$(".tab-option").removeClass("selected-tab");
$(e.currentTarget).addClass("selected-tab");
const visibility_policy = $(e.currentTarget).attr("data-visibility-policy");
user_topics.set_user_topic_visibility_policy(
stream_id,
topic_name,
visibility_policy,
);
});
$popper.one("click", ".sidebar-popover-unmute-topic", () => {
user_topics.set_user_topic_visibility_policy(
stream_id,

5
web/src/popover_menus_data.js
View File

@ -130,6 +130,8 @@ export function get_topic_popover_content_context({stream_id, topic_name, url})
const has_starred_messages = starred_messages.get_count_in_topic(sub.stream_id, topic_name) > 0;
const can_move_topic = settings_data.user_can_move_messages_between_streams();
const can_rename_topic = settings_data.user_can_move_messages_to_another_topic();
const visibility_policy = user_topics.get_topic_visibility_policy(sub.stream_id, topic_name);
const all_visibility_policies = user_topics.all_visibility_policies;
return {
stream_name: sub.name,
stream_id: sub.stream_id,
@ -144,5 +146,8 @@ export function get_topic_popover_content_context({stream_id, topic_name, url})
color: sub.color,
has_starred_messages,
url,
visibility_policy,
all_visibility_policies,
development: page_params.development_environment,
};
}

41
web/styles/app_components.css
View File

@ -1044,3 +1044,44 @@ div.overlay {
0 0 8px hsl(206deg 80% 62% / 60%);
}
}
/* Icon-based tab picker used for topics popover. */
.tabs-container {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 27px;
background-color: hsl(0deg 0% 0% / 7%);
position: relative;
border-radius: 5px;
& i {
z-index: 2;
color: hsl(200deg 100% 40%);
font-size: 17px;
}
.selected-tab {
background-color: hsl(0deg 0% 100%);
border: 1px solid hsl(0deg 0% 0% / 30%);
z-index: 1;
}
.tab-option {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 100%;
cursor: pointer;
border-radius: 5px;
&:hover:not(.selected-tab) {
background-color: hsl(0deg 0% 100%);
border: 1px solid hsl(0deg 0% 0% / 30%);
}
}
}

20
web/styles/dark_theme.css
View File

@ -1543,6 +1543,26 @@
}
}
}
.tabs-container {
background-color: hsl(0deg 0% 0% / 30%);
& i {
color: hsl(0deg 0% 80%);
}
.selected-tab {
background-color: hsl(0deg 0% 17% / 50%);
border: 1px solid hsl(0deg 0% 100% / 12%);
}
.tab-option {
&:hover:not(.selected-tab) {
background-color: hsl(0deg 0% 17% / 50%);
border: 1px solid hsl(0deg 0% 100% / 12%);
}
}
}
}
@supports (-moz-appearance: none) {

70
web/templates/topic_sidebar_actions.hbs
View File

@ -8,38 +8,56 @@
<hr />
{{#if stream_muted}}
{{#unless topic_unmuted}}
<li class="hidden-for-spectators">
<a tabindex="0" class="sidebar-popover-unmute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="zulip-icon zulip-icon-unmute" aria-hidden="true"></i>
{{t "Unmute topic"}}
</a>
</li>
{{#if development}}
<li class="hidden-for-spectators">
<div class="tabs-container">
<div class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.MUTED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.MUTED}}" data-tippy-content="{{t 'Mute topic' }}" aria-label="{{t 'Mute topic' }}">
<i class="zulip-icon zulip-icon-mute-new"></i>
</div>
<div class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.UNMUTED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.UNMUTED}}" data-tippy-content="{{t 'Unmute topic' }}" aria-label="{{t 'Unmute topic' }}">
<i class="zulip-icon zulip-icon-unmute-new"></i>
</div>
<div class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.FOLLOWED)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.FOLLOWED}}" data-tippy-content="{{t 'Follow topic' }}" aria-label="{{t 'Follow topic' }}">
<i class="zulip-icon zulip-icon-follow"></i>
</div>
</div>
</li>
<hr/>
{{else}}
{{#if stream_muted}}
{{#unless topic_unmuted}}
<li class="hidden-for-spectators">
<a tabindex="0" class="sidebar-popover-unmute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="zulip-icon zulip-icon-unmute" aria-hidden="true"></i>
{{t "Unmute topic"}}
</a>
</li>
{{else}}
<li class="hidden-for-spectators">
<a tabindex="0" class="sidebar-popover-remove-unmute" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="zulip-icon zulip-icon-mute" aria-hidden="true"></i>
{{t "Mute topic"}}
</a>
</li>
{{/unless}}
{{else}}
{{#unless topic_muted}}
<li class="hidden-for-spectators">
<a tabindex="0" class="sidebar-popover-remove-unmute" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<a tabindex="0" class="sidebar-popover-mute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="zulip-icon zulip-icon-mute" aria-hidden="true"></i>
{{t "Mute topic"}}
</a>
</li>
{{/unless}}
{{else}}
{{#unless topic_muted}}
<li class="hidden-for-spectators">
<a tabindex="0" class="sidebar-popover-mute-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="zulip-icon zulip-icon-mute" aria-hidden="true"></i>
{{t "Mute topic"}}
</a>
</li>
{{else}}
<li class="hidden-for-spectators">
<a tabindex="0" class="sidebar-popover-remove-mute" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="zulip-icon zulip-icon-unmute" aria-hidden="true"></i>
{{t "Unmute topic"}}
</a>
</li>
{{/unless}}
{{else}}
<li class="hidden-for-spectators">
<a tabindex="0" class="sidebar-popover-remove-mute" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="zulip-icon zulip-icon-unmute" aria-hidden="true"></i>
{{t "Unmute topic"}}
</a>
</li>
{{/unless}}
{{/if}}
{{/if}}
{{#if has_starred_messages}}