mirror of https://github.com/zulip/zulip.git
actions_popover: Use the new "popover-menu" theme.
Fixes part of #28699.
This commit is contained in:
Sayam Samal
Tim Abbott
parent
422230e82d
commit
4b0e6ae3d8
|
|
@ -24,7 +24,7 @@ import * as unread_ops from "./unread_ops";
|
|||
let message_actions_popover_keyboard_toggle = false;
|
||||
|
||||
function get_action_menu_menu_items() {
|
||||
const $current_actions_popover_elem = $("[data-tippy-root] .actions_popover");
|
||||
const $current_actions_popover_elem = $("[data-tippy-root] #message-actions-menu-dropdown");
|
||||
if (!$current_actions_popover_elem) {
|
||||
blueslip.error("Trying to get menu items when action popover is closed.");
|
||||
return undefined;
|
||||
|
|
@ -71,6 +71,7 @@ export function toggle_message_actions_menu(message) {
|
|||
|
||||
export function initialize() {
|
||||
popover_menus.register_popover_menu(".actions_hover .message-actions-menu-button", {
|
||||
theme: "popover-menu",
|
||||
// 320px is our minimum supported width for mobile. We will allow the value to flex
|
||||
// to a max of 350px but we shouldn't make the popover wider than this.
|
||||
maxWidth: "min(max(320px, 100vw), 350px)",
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@
|
|||
--color-background-unread-counter-dot: var(
|
||||
--color-background-unread-counter
|
||||
);
|
||||
--color-background-unread-counter-popover-menu: hsl(200deg 100% 40%);
|
||||
--color-background-unread-counter-popover-menu: var(--color-icon-purple);
|
||||
--color-border-unread-counter: var(--color-background-unread-counter);
|
||||
--color-border-unread-counter-popover-menu: inherit;
|
||||
--color-background-tab-picker-container: hsl(0deg 0% 0% / 7%);
|
||||
|
|
|
|||
|
|
@ -314,7 +314,6 @@
|
|||
|
||||
ul {
|
||||
&.user-card-popover-actions i,
|
||||
&.actions_popover i,
|
||||
&.streams_popover i,
|
||||
&.topics_popover i {
|
||||
display: inline-block;
|
||||
|
|
@ -351,18 +350,23 @@ ul {
|
|||
}
|
||||
}
|
||||
|
||||
.actions_popover {
|
||||
#message-actions-menu-dropdown {
|
||||
.mark_as_unread {
|
||||
.unread_count {
|
||||
/* The icon for this menu item is in the form of an unread count from
|
||||
the left sidebar. We reuse much of the shared styling,
|
||||
but need to override some of the defaults set in app_components.css. */
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
float: unset;
|
||||
line-height: 14px;
|
||||
font-size: 11px;
|
||||
padding: 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
margin-right: 2px;
|
||||
border-radius: 4px;
|
||||
color: hsl(0deg 0% 100%);
|
||||
text-align: center;
|
||||
background-color: var(
|
||||
--color-background-unread-counter-popover-menu
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,118 +1,132 @@
|
|||
{{! Contents of the "message actions" popup }}
|
||||
<ul class="nav nav-list actions_popover">
|
||||
{{#if should_display_quote_and_reply}}
|
||||
<li>
|
||||
<a class="respond_button" data-message-id="{{message_id}}" tabindex="0">
|
||||
<i class="fa fa-reply" aria-hidden="true"></i> {{t "Quote and reply" }}
|
||||
<span class="hotkey-hint">(>)</span>
|
||||
</a>
|
||||
</li>
|
||||
<hr />
|
||||
{{/if}}
|
||||
|
||||
{{#if editability_menu_item}}
|
||||
<li>
|
||||
<a class="popover_edit_message" data-message-id="{{message_id}}" tabindex="0">
|
||||
<i class="zulip-icon zulip-icon-edit" aria-hidden="true"></i> {{editability_menu_item}}
|
||||
<span class="hotkey-hint">(e)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if move_message_menu_item}}
|
||||
<li>
|
||||
<a class="popover_move_message" data-message-id="{{message_id}}" tabindex="0">
|
||||
<i class="zulip-icon zulip-icon-move-alt" aria-hidden="true"></i> {{move_message_menu_item}}
|
||||
<span class="hotkey-hint">(m)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if should_display_delete_option}}
|
||||
<li>
|
||||
<a class="delete_message" data-message-id="{{message_id}}" tabindex="0">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
{{t "Delete message" }}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if (or editability_menu_item move_message_menu_item should_display_delete_option)}}
|
||||
<hr />
|
||||
{{/if}}
|
||||
|
||||
{{#if should_display_add_reaction_option}}
|
||||
<li>
|
||||
<a class="reaction_button" data-message-id="{{message_id}}" tabindex="0">
|
||||
<i class="zulip-icon zulip-icon-smile" aria-hidden="true"></i>
|
||||
{{t "Add emoji reaction" }} <span class="hotkey-hint">(:)</span>
|
||||
</a>
|
||||
</li>
|
||||
<hr />
|
||||
{{/if}}
|
||||
|
||||
{{#if should_display_mark_as_unread}}
|
||||
<li>
|
||||
<a class="mark_as_unread" data-message-id="{{message_id}}" tabindex="0">
|
||||
<span class="unread_count">1</span>
|
||||
{{t "Mark as unread from here" }}
|
||||
<span class="hotkey-hint">(U)</span>
|
||||
</a>
|
||||
<div class="popover-menu" id="message-actions-menu-dropdown" data-simplebar>
|
||||
<ul class="popover-menu-outer-list">
|
||||
{{#if should_display_quote_and_reply}}
|
||||
<li class="popover-menu-outer-list-item">
|
||||
<ul class="popover-menu-inner-list">
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="respond_button popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-reply" aria-hidden="true"></i>
|
||||
{{t "Quote and reply" }}
|
||||
<span class="hotkey-hint">(>)</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if should_display_hide_option}}
|
||||
<li>
|
||||
<a class="rehide_muted_user_message" data-message-id="{{message_id}}" tabindex="0">
|
||||
<i class="fa fa-eye-slash" aria-hidden="true"></i>
|
||||
{{t "Hide muted message again" }}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if should_display_collapse}}
|
||||
<li>
|
||||
<a class="popover_toggle_collapse" data-message-id="{{message_id}}" tabindex="0">
|
||||
<i class="fa fa-minus" aria-hidden="true"></i>
|
||||
{{t "Collapse message" }} <span class="hotkey-hint">(–)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if should_display_uncollapse}}
|
||||
<li>
|
||||
<a class="popover_toggle_collapse" data-message-id="{{message_id}}" tabindex="0">
|
||||
<i class="fa fa-plus" aria-hidden="true"></i>
|
||||
{{t "Expand message" }} <span class="hotkey-hint">(–)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if (or should_display_mark_as_unread should_display_reminder_option should_display_hide_option should_display_collapse should_display_uncollapse)}}
|
||||
<hr />
|
||||
{{/if}}
|
||||
|
||||
{{#if view_source_menu_item}}
|
||||
<li>
|
||||
<a class="popover_view_source" data-message-id="{{message_id}}" tabindex="0">
|
||||
<i class="fa fa-file-code-o" aria-hidden="true"></i> {{view_source_menu_item}}
|
||||
<span class="hotkey-hint">(e)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
{{#if should_display_read_receipts_option}}
|
||||
<li>
|
||||
<a class="view_read_receipts" data-message-id="{{message_id}}" tabindex="0">
|
||||
<i class="zulip-icon zulip-icon-readreceipts" aria-label="{{t 'View read receipts' }}"></i>
|
||||
{{t "View read receipts" }} <span class="hotkey-hint">(V)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
|
||||
<li>
|
||||
<a class="copy_link navigate-link-on-enter" data-message-id="{{message_id}}" data-clipboard-text="{{ conversation_time_url }}" tabindex="0">
|
||||
<i class="fa fa-link" aria-hidden="true"></i> {{t "Copy link to message" }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{{/if}}
|
||||
{{#if (or editability_menu_item move_message_menu_item should_display_delete_option)}}
|
||||
<li class="popover-menu-outer-list-item">
|
||||
<ul class="popover-menu-inner-list">
|
||||
{{#if editability_menu_item}}
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="popover_edit_message popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon zulip-icon zulip-icon-edit" aria-hidden="true"></i>
|
||||
{{editability_menu_item}}
|
||||
<span class="hotkey-hint">(e)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if move_message_menu_item}}
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="popover_move_message popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon zulip-icon zulip-icon-move-alt" aria-hidden="true"></i>
|
||||
{{move_message_menu_item}}
|
||||
<span class="hotkey-hint">(m)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if should_display_delete_option}}
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="delete_message popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-times" aria-hidden="true"></i>
|
||||
{{t "Delete message" }}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if should_display_add_reaction_option}}
|
||||
<li class="popover-menu-outer-list-item">
|
||||
<ul class="popover-menu-inner-list">
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="reaction_button popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon zulip-icon zulip-icon-smile" aria-hidden="true"></i>
|
||||
{{t "Add emoji reaction" }}
|
||||
<span class="hotkey-hint">(:)</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if (or should_display_mark_as_unread should_display_reminder_option should_display_hide_option should_display_collapse should_display_uncollapse)}}
|
||||
<li class="popover-menu-outer-list-item">
|
||||
<ul class="popover-menu-inner-list">
|
||||
{{#if should_display_mark_as_unread}}
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="mark_as_unread popover-menu-link" tabindex="0">
|
||||
<span class="unread_count">1</span>
|
||||
{{t "Mark as unread from here" }}
|
||||
<span class="hotkey-hint">(U)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if should_display_hide_option}}
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="rehide_muted_user_message popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-eye-slash" aria-hidden="true"></i>
|
||||
{{t "Hide muted message again" }}
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if should_display_collapse}}
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="popover_toggle_collapse popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-minus" aria-hidden="true"></i>
|
||||
{{t "Collapse message" }}
|
||||
<span class="hotkey-hint">(–)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if should_display_uncollapse}}
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="popover_toggle_collapse popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-plus" aria-hidden="true"></i>
|
||||
{{t "Expand message" }}
|
||||
<span class="hotkey-hint">(–)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
</ul>
|
||||
</li>
|
||||
{{/if}}
|
||||
<li class="popover-menu-outer-list-item">
|
||||
<ul class="popover-menu-inner-list">
|
||||
{{#if view_source_menu_item}}
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="popover_view_source popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-file-code-o" aria-hidden="true"></i>
|
||||
{{view_source_menu_item}}
|
||||
<span class="hotkey-hint">(e)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
{{#if should_display_read_receipts_option}}
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a data-message-id="{{message_id}}" class="view_read_receipts popover-menu-link" tabindex="0">
|
||||
<i class="popover-menu-icon zulip-icon zulip-icon-readreceipts" aria-hidden="true"></i>
|
||||
{{t "View read receipts" }}
|
||||
<span class="hotkey-hint">(V)</span>
|
||||
</a>
|
||||
</li>
|
||||
{{/if}}
|
||||
<li class="link-item popover-menu-inner-list-item">
|
||||
<a class="copy_link navigate-link-on-enter popover-menu-link" data-message-id="{{message_id}}" data-clipboard-text="{{ conversation_time_url }}" tabindex="0">
|
||||
<i class="popover-menu-icon fa fa-link" aria-hidden="true"></i>
|
||||
{{t "Copy link to message" }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue