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

inbox: Add button to open topic menu popover.

This commit is contained in:
Aman Agrawal 2023-09-19 16:48:02 +00:00 committed by Tim Abbott
parent a904de2d6e
commit 97a1b91b40
4 changed files with 197 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/inbox_ui.js
View File

@ -899,7 +899,7 @@ export function initialize() {
}
});
$("body").on("click", "#inbox-list .inbox-row, #inbox-list .inbox-header", (e) => {
$("body").on("click", "#inbox-list .inbox-left-part-wrapper", (e) => {
const $elt = $(e.currentTarget);
col_focus = COLUMNS.RECIPIENT;
focus_clicked_element($elt);

267
web/src/popover_menus.js
View File

@ -38,6 +38,7 @@ import * as message_lists from "./message_lists";
import * as message_viewport from "./message_viewport";
import * as narrow_state from "./narrow_state";
import * as overlays from "./overlays";
import {page_params} from "./page_params";
import * as popover_menus_data from "./popover_menus_data";
import * as popovers from "./popovers";
import * as read_receipts from "./read_receipts";
@ -537,139 +538,155 @@ export function initialize() {
},
});
register_popover_menu("#stream_filters .topic-sidebar-menu-icon", {
...left_sidebar_tippy_options,
onShow(instance) {
popover_instances.topics_menu = instance;
on_show_prep(instance);
const elt = $(instance.reference).closest(".topic-sidebar-menu-icon").expectOne()[0];
const $stream_li = $(elt).closest(".narrow-filter").expectOne();
const topic_name = $(elt).closest("li").expectOne().attr("data-topic-name");
const url = $(elt).closest("li").find(".topic-name").expectOne().prop("href");
const stream_id = stream_popover.elem_to_stream_id($stream_li);
register_popover_menu(
"#stream_filters .topic-sidebar-menu-icon, .inbox-row .inbox-topic-menu",
{
...left_sidebar_tippy_options,
onShow(instance) {
popover_instances.topics_menu = instance;
on_show_prep(instance);
let stream_id;
let topic_name;
let url;
instance.context = popover_menus_data.get_topic_popover_content_context({
stream_id,
topic_name,
url,
});
instance.setContent(parse_html(render_topic_sidebar_actions(instance.context)));
},
onMount(instance) {
const $popper = $(instance.popper);
const {stream_id, topic_name} = instance.context;
if (instance.reference.classList.contains("inbox-topic-menu")) {
const $elt = $(instance.reference);
stream_id = Number.parseInt($elt.attr("data-stream-id"), 10);
topic_name = $elt.attr("data-topic-name");
url = new URL($elt.attr("data-topic-url"), page_params.realm_uri);
} else {
const $elt = $(instance.reference)
.closest(".topic-sidebar-menu-icon")
.expectOne();
const $stream_li = $elt.closest(".narrow-filter").expectOne();
topic_name = $elt.closest("li").expectOne().attr("data-topic-name");
url = $elt.closest("li").find(".topic-name").expectOne().prop("href");
stream_id = stream_popover.elem_to_stream_id($stream_li);
}
if (!stream_id) {
instance.hide();
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(
instance.context = popover_menus_data.get_topic_popover_content_context({
stream_id,
topic_name,
visibility_policy,
);
});
$popper.one("click", ".sidebar-popover-unmute-topic", () => {
user_topics.set_user_topic_visibility_policy(
stream_id,
topic_name,
user_topics.all_visibility_policies.UNMUTED,
);
instance.hide();
});
$popper.one("click", ".sidebar-popover-remove-unmute", () => {
user_topics.set_user_topic_visibility_policy(
stream_id,
topic_name,
user_topics.all_visibility_policies.INHERIT,
);
instance.hide();
});
$popper.one("click", ".sidebar-popover-mute-topic", () => {
user_topics.set_user_topic_visibility_policy(
stream_id,
topic_name,
user_topics.all_visibility_policies.MUTED,
);
instance.hide();
});
$popper.one("click", ".sidebar-popover-remove-mute", () => {
user_topics.set_user_topic_visibility_policy(
stream_id,
topic_name,
user_topics.all_visibility_policies.INHERIT,
);
instance.hide();
});
$popper.one("click", ".sidebar-popover-unstar-all-in-topic", () => {
starred_messages_ui.confirm_unstar_all_messages_in_topic(
Number.parseInt(stream_id, 10),
topic_name,
);
instance.hide();
});
$popper.one("click", ".sidebar-popover-mark-topic-read", () => {
unread_ops.mark_topic_as_read(stream_id, topic_name);
instance.hide();
});
$popper.one("click", ".sidebar-popover-delete-topic-messages", () => {
const html_body = render_delete_topic_modal({topic_name});
confirm_dialog.launch({
html_heading: $t_html({defaultMessage: "Delete topic"}),
help_link: "/help/delete-a-topic",
html_body,
on_click() {
message_edit.delete_topic(stream_id, topic_name);
},
url,
});
instance.setContent(parse_html(render_topic_sidebar_actions(instance.context)));
},
onMount(instance) {
const $popper = $(instance.popper);
const {stream_id, topic_name} = instance.context;
instance.hide();
});
$popper.one("click", ".sidebar-popover-toggle-resolved", () => {
message_edit.with_first_message_id(stream_id, topic_name, (message_id) => {
message_edit.toggle_resolve_topic(message_id, topic_name, true);
});
instance.hide();
});
$popper.one("click", ".sidebar-popover-move-topic-messages", () => {
stream_popover.build_move_topic_to_stream_popover(stream_id, topic_name, false);
instance.hide();
});
$popper.one("click", ".sidebar-popover-rename-topic-messages", () => {
stream_popover.build_move_topic_to_stream_popover(stream_id, topic_name, true);
instance.hide();
});
new ClipboardJS($popper.find(".sidebar-popover-copy-link-to-topic")[0]).on(
"success",
() => {
if (!stream_id) {
instance.hide();
},
);
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,
topic_name,
user_topics.all_visibility_policies.UNMUTED,
);
instance.hide();
});
$popper.one("click", ".sidebar-popover-remove-unmute", () => {
user_topics.set_user_topic_visibility_policy(
stream_id,
topic_name,
user_topics.all_visibility_policies.INHERIT,
);
instance.hide();
});
$popper.one("click", ".sidebar-popover-mute-topic", () => {
user_topics.set_user_topic_visibility_policy(
stream_id,
topic_name,
user_topics.all_visibility_policies.MUTED,
);
instance.hide();
});
$popper.one("click", ".sidebar-popover-remove-mute", () => {
user_topics.set_user_topic_visibility_policy(
stream_id,
topic_name,
user_topics.all_visibility_policies.INHERIT,
);
instance.hide();
});
$popper.one("click", ".sidebar-popover-unstar-all-in-topic", () => {
starred_messages_ui.confirm_unstar_all_messages_in_topic(
Number.parseInt(stream_id, 10),
topic_name,
);
instance.hide();
});
$popper.one("click", ".sidebar-popover-mark-topic-read", () => {
unread_ops.mark_topic_as_read(stream_id, topic_name);
instance.hide();
});
$popper.one("click", ".sidebar-popover-delete-topic-messages", () => {
const html_body = render_delete_topic_modal({topic_name});
confirm_dialog.launch({
html_heading: $t_html({defaultMessage: "Delete topic"}),
help_link: "/help/delete-a-topic",
html_body,
on_click() {
message_edit.delete_topic(stream_id, topic_name);
},
});
instance.hide();
});
$popper.one("click", ".sidebar-popover-toggle-resolved", () => {
message_edit.with_first_message_id(stream_id, topic_name, (message_id) => {
message_edit.toggle_resolve_topic(message_id, topic_name, true);
});
instance.hide();
});
$popper.one("click", ".sidebar-popover-move-topic-messages", () => {
stream_popover.build_move_topic_to_stream_popover(stream_id, topic_name, false);
instance.hide();
});
$popper.one("click", ".sidebar-popover-rename-topic-messages", () => {
stream_popover.build_move_topic_to_stream_popover(stream_id, topic_name, true);
instance.hide();
});
new ClipboardJS($popper.find(".sidebar-popover-copy-link-to-topic")[0]).on(
"success",
() => {
instance.hide();
},
);
},
onHidden(instance) {
instance.destroy();
popover_instances.topics_menu = undefined;
},
},
onHidden(instance) {
instance.destroy();
popover_instances.topics_menu = undefined;
},
});
);
register_popover_menu(".open_enter_sends_dialog", {
placement: "top",

43
web/styles/inbox.css
View File

@ -102,6 +102,7 @@
border: 2px solid transparent;
border-radius: 3px;
box-sizing: border-box;
justify-content: space-between;
}
.inbox-empty-text {
@ -330,6 +331,11 @@
}
}
.inbox-right-part-wrapper {
display: flex;
align-items: center;
}
#inbox_filter_mute_toggle {
font-size: 16px;
width: 16px;
@ -337,6 +343,43 @@
position: relative;
top: 1px;
}
.inbox-row {
&:focus,
&:focus-within,
&:hover {
.inbox-action-button {
opacity: 1;
}
}
}
.inbox-action-button {
display: flex;
border-radius: 3px;
outline: none;
opacity: 0;
&.hide {
display: none;
}
&:focus {
box-shadow: 0 0 0 2px var(--color-outline-focus);
}
& i {
padding: 5px;
font-size: 16px;
opacity: 0.3;
color: var(--color-vdots-hover);
&:hover {
opacity: 1;
cursor: pointer;
}
}
}
}
}

11
web/templates/inbox_view/inbox_row.hbs
View File

@ -37,6 +37,17 @@
{{/if}}
</div>
</div>
{{#unless is_direct}}
<div class="inbox-right-part-wrapper">
<div class="inbox-right-part">
<div class="inbox-action-button inbox-topic-menu"
{{#if is_topic}}data-stream-id="{{stream_id}}" data-topic-name="{{topic_name}}"
data-topic-url="{{topic_url}}"{{/if}}>
<i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
</div>
</div>
</div>
{{/unless}}
</div>
</div>
{{/if}}