paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-20 22:48:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

topic_popover: Redesign popover using the "popover-menu" tippy theme.

Browse Source
This commit is contained in:
Sayam Samal
2024-04-19 03:23:41 +05:30
committed by Tim Abbott
parent 79d8d00384
commit c3e43586c8
4 changed files with 116 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/topic_popover.js
View File

@@ -20,6 +20,7 @@ export function initialize() {
popover_menus.register_popover_menu( popover_menus.register_popover_menu(
"#stream_filters .topic-sidebar-menu-icon, .inbox-row .inbox-topic-menu", "#stream_filters .topic-sidebar-menu-icon, .inbox-row .inbox-topic-menu",
{ {
theme: "popover-menu",
...popover_menus.left_sidebar_tippy_options, ...popover_menus.left_sidebar_tippy_options,
onShow(instance) { onShow(instance) {
popover_menus.popover_instances.topics_menu = instance; popover_menus.popover_instances.topics_menu = instance;

1
web/styles/app_components.css
View File

@@ -1148,6 +1148,7 @@ div.overlay {
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;
padding: 1px; padding: 1px;
margin: 0 10px;
height: 33px; height: 33px;
gap: 2px; gap: 2px;
background-color: var(--color-background-tab-picker-container); background-color: var(--color-background-tab-picker-container);

21
web/styles/popovers.css
View File

@@ -284,26 +284,17 @@
} }
} }
.topics_popover { #topic-actions-menu-popover {
min-width: var(--popover-menu-min-width); .popover-topic-name {
width: min-content; font-weight: 600;
color: var(--color-text-popover-menu);
.topic-menu-item {
white-space: nowrap;
}
.topic-name {
color: var(--color-text-sidebar-popover-menu);
font-weight: 700;
line-height: 1.1; line-height: 1.1;
margin: 6px 0; margin-top: 4px;
white-space: normal;
} }
} }
ul { ul {
&.user-card-popover-actions i, &.user-card-popover-actions i {
&.topics_popover i {
display: inline-block; display: inline-block;
text-align: center; text-align: center;

208
web/templates/topic_sidebar_actions.hbs
View File

@@ -1,102 +1,110 @@
<ul class="nav nav-list topics_popover"> {{! Contents of the "topic actions" popup }}
<li class="topic-menu-item"> <div class="popover-menu" id="topic-actions-menu-popover" data-simplebar>
<div class="topic-name">{{topic_name}}</div> <ul class="popover-menu-outer-list">
</li> <li class="popover-menu-outer-list-item">
<ul class="popover-menu-inner-list">
<li class="popover-topic-header text-item popover-menu-inner-list-item">
<span class="popover-topic-name">{{topic_name}}</span>
</li>
</ul>
</li>
<li class="popover-menu-outer-list-item">
<ul class="popover-menu-inner-list">
<li class="popover-menu-inner-list-item 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' }}" aria-label="{{t 'Mute' }}">
<i class="zulip-icon zulip-icon-mute-new"></i>
</div>
<div class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.INHERIT)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.INHERIT}}" data-tippy-content="{{t 'Default' }}" aria-label="{{t 'Default' }}">
<i class="zulip-icon zulip-icon-inherit"></i>
</div>
{{#if (or stream_muted topic_unmuted)}}
<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' }}" aria-label="{{t 'Unmute' }}">
<i class="zulip-icon zulip-icon-unmute-new"></i>
</div>
{{/if}}
<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' }}" aria-label="{{t 'Follow' }}">
<i class="zulip-icon zulip-icon-follow"></i>
</div>
</div>
</li>
</ul>
</li>
<li class="popover-menu-outer-list-item">
<ul class="popover-menu-inner-list">
{{#if has_starred_messages}}
<li class="link-item popover-menu-inner-list-item hidden-for-spectators">
<a class="sidebar-popover-unstar-all-in-topic popover-menu-link" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}" tabindex="0">
<i class="popover-menu-icon zulip-icon zulip-icon-star" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Unstar all messages in topic" }}</span>
</a>
</li>
{{/if}}
<hr /> {{#if has_unread_messages}}
<li class="link-item popover-menu-inner-list-item hidden-for-spectators">
<a class="sidebar-popover-mark-topic-read popover-menu-link" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}" tabindex="0">
<i class="popover-menu-icon fa fa-book" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Mark all messages as read" }}</span>
</a>
</li>
{{else}}
<li class="link-item popover-menu-inner-list-item hidden-for-spectators">
<a class="sidebar-popover-mark-topic-unread popover-menu-link" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}" tabindex="0">
<i class="popover-menu-icon fa fa-book" aria-hidden="true"></i>
<span class="popover-menu-label">{{t "Mark all messages as unread" }}</span>
</a>
</li>
{{/if}}
<li class="topic-menu-item hidden-for-spectators"> <li class="link-item popover-menu-inner-list-item">
<div class="tabs-container"> <a class="sidebar-popover-copy-link-to-topic popover-menu-link" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}" data-clipboard-text="{{ url }}" tabindex="0">
<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' }}" aria-label="{{t 'Mute' }}"> <i class="popover-menu-icon fa fa-link" aria-hidden="true"></i>
<i class="zulip-icon zulip-icon-mute-new"></i> <span class="popover-menu-label">{{t "Copy link to topic" }}</span>
</div> </a>
<div class="tab-option tippy-zulip-tooltip {{#if (eq visibility_policy all_visibility_policies.INHERIT)}}selected-tab{{/if}}" data-visibility-policy="{{all_visibility_policies.INHERIT}}" data-tippy-content="{{t 'Default' }}" aria-label="{{t 'Default' }}"> </li>
<i class="zulip-icon zulip-icon-inherit"></i> </ul>
</div> </li>
{{#if (or stream_muted topic_unmuted)}} {{#if (or can_move_topic can_rename_topic is_realm_admin)}}
<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' }}" aria-label="{{t 'Unmute' }}"> <li class="popover-menu-outer-list-item">
<i class="zulip-icon zulip-icon-unmute-new"></i> <ul class="popover-menu-inner-list">
</div> {{#if can_move_topic}}
{{/if}} <li class="link-item popover-menu-inner-list-item">
<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' }}" aria-label="{{t 'Follow' }}"> <a class="sidebar-popover-move-topic-messages popover-menu-link" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}" tabindex="0">
<i class="zulip-icon zulip-icon-follow"></i> <i class="popover-menu-icon fa fa-arrows" aria-hidden="true"></i>
</div> <span class="popover-menu-label">{{t "Move topic" }}</span>
</div> </a>
</li> </li>
{{else if can_rename_topic}}
<hr class="hidden-for-spectators" /> <li class="link-item popover-menu-inner-list-item">
<a class="sidebar-popover-rename-topic-messages popover-menu-link" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}" tabindex="0">
{{#if has_starred_messages}} <i class="popover-menu-icon fa fa-pencil" aria-hidden="true"></i>
<li class="topic-menu-item hidden-for-spectators"> <span class="popover-menu-label">{{t "Rename topic" }}</span>
<a tabindex="0" class="sidebar-popover-unstar-all-in-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}"> </a>
<i class="zulip-icon zulip-icon-star" aria-hidden="true"></i> </li>
{{t "Unstar all messages in topic" }} {{/if}}
</a> {{#if can_rename_topic}}
</li> <li class="link-item popover-menu-inner-list-item">
{{/if}} <a class="sidebar-popover-toggle-resolved popover-menu-link" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}" tabindex="0">
<i class="popover-menu-icon fa fa-check" aria-hidden="true"></i>
{{#if has_unread_messages}} {{# if topic_is_resolved }}
<li class="topic-menu-item hidden-for-spectators"> <span class="popover-menu-label">{{t "Mark as unresolved"}}</span>
<a tabindex="0" class="sidebar-popover-mark-topic-read" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}"> {{else}}
<i class="fa fa-book" aria-hidden="true"></i> <span class="popover-menu-label">{{t "Mark as resolved"}}</span>
{{t "Mark all messages as read"}} {{/if}}
</a> </a>
</li> </li>
{{else}} {{/if}}
<li class="topic-menu-item hidden-for-spectators"> {{#if is_realm_admin}}
<a tabindex="0" class="sidebar-popover-mark-topic-unread" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}"> <li class="link-item popover-menu-inner-list-item">
<i class="fa fa-book" aria-hidden="true"></i> <a class="sidebar-popover-delete-topic-messages popover-menu-link" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}" tabindex="0">
{{t "Mark all messages as unread"}} <i class="popover-menu-icon fa fa-trash" aria-hidden="true"></i>
</a> <span class="popover-menu-label">{{t "Delete topic"}}</span>
</li> </a>
{{/if}} </li>
{{/if}}
<li class="topic-menu-item"> </ul>
<a tabindex="0" class="sidebar-popover-copy-link-to-topic" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}" data-clipboard-text="{{ url }}"> </li>
<i class="fa fa-link" aria-hidden="true"></i> {{/if}}
{{t "Copy link to topic"}} </ul>
</a> </div>
</li>
{{#if can_move_topic}}
<hr />
<li class="topic-menu-item">
<a tabindex="0" class="sidebar-popover-move-topic-messages" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="fa fa-arrows" aria-hidden="true"></i>
{{t "Move topic"}}
</a>
</li>
{{else if can_rename_topic}}
<hr />
<li class="topic-menu-item">
<a tabindex="0" class="sidebar-popover-rename-topic-messages" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="fa fa-pencil" aria-hidden="true"></i>
{{t "Rename topic"}}
</a>
</li>
{{/if}}
{{#if can_rename_topic}}
<li class="topic-menu-item">
<a tabindex="0" class="sidebar-popover-toggle-resolved" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="fa fa-check" aria-hidden="true"></i>
{{# if topic_is_resolved }}
{{t "Mark as unresolved"}}
{{else}}
{{t "Mark as resolved"}}
{{/if}}
</a>
</li>
{{/if}}
{{#if is_realm_admin}}
<li class="topic-menu-item">
<a tabindex="0" class="sidebar-popover-delete-topic-messages" data-stream-id="{{ stream_id }}" data-topic-name="{{ topic_name }}">
<i class="fa fa-trash" aria-hidden="true"></i>
{{t "Delete topic"}}
</a>
</li>
{{/if}}
</ul>