CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-07-12 21:04:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

inbox: Add popover menu to toggle channel folder option.

Browse Source 
Fixes #35951.
This commit is contained in:
Evy Kassirer 2025-10-08 15:09:23 -07:00 committed by Tim Abbott
parent 7245723558
commit 06828fa42b
6 changed files with 71 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/channel_folders_popover.ts
View File

@ -9,7 +9,7 @@ import * as popover_menus from "./popover_menus.ts";
import {parse_html} from "./ui_util.ts";
import {user_settings} from "./user_settings.ts";
function do_change_show_channel_folders(instance: tippy.Instance): void {
function do_change_show_channel_folders_left_sidebar(instance: tippy.Instance): void {
const show_channel_folders = user_settings.web_left_sidebar_show_channel_folders;
const data = {
web_left_sidebar_show_channel_folders: JSON.stringify(!show_channel_folders),
@ -21,6 +21,18 @@ function do_change_show_channel_folders(instance: tippy.Instance): void {
popover_menus.hide_current_popover_if_visible(instance);
}
function do_change_show_channel_folders_inbox(instance: tippy.Instance): void {
const show_channel_folders = user_settings.web_inbox_show_channel_folders;
const data = {
web_inbox_show_channel_folders: JSON.stringify(!show_channel_folders),
};
void channel.patch({
url: "/json/settings",
data,
});
popover_menus.hide_current_popover_if_visible(instance);
}
export function initialize(): void {
popover_menus.register_popover_menu("#left-sidebar-search .channel-folders-sidebar-menu-icon", {
...popover_menus.left_sidebar_tippy_options,
@ -29,7 +41,7 @@ export function initialize(): void {
const $popper = $(instance.popper);
assert(instance.reference instanceof HTMLElement);
$popper.one("click", "#left_sidebar_channel_folders", () => {
do_change_show_channel_folders(instance);
do_change_show_channel_folders_left_sidebar(instance);
});
},
onShow(instance) {
@ -49,4 +61,32 @@ export function initialize(): void {
popover_menus.popover_instances.show_folders_sidebar = null;
},
});
popover_menus.register_popover_menu("#inbox-view .channel-folders-inbox-menu-icon", {
...popover_menus.left_sidebar_tippy_options,
theme: "popover-menu",
onMount(instance) {
const $popper = $(instance.popper);
assert(instance.reference instanceof HTMLElement);
$popper.one("click", "#left_sidebar_channel_folders", () => {
do_change_show_channel_folders_inbox(instance);
});
},
onShow(instance) {
const show_channel_folders = user_settings.web_inbox_show_channel_folders;
// Assuming that the instance can be shown, track and
// prep the instance for showing
popover_menus.popover_instances.show_folders_inbox = instance;
instance.setContent(
parse_html(render_channel_folder_setting_popover({show_channel_folders})),
);
popover_menus.on_show_prep(instance);
return undefined;
},
onHidden(instance) {
instance.destroy();
popover_menus.popover_instances.show_folders_inbox = null;
},
});
}

3
web/src/inbox_ui.ts
View File

@ -1194,6 +1194,7 @@ function render_channel_view(channel_id: number): void {
normal_view: false,
search_val: search_keyword,
INBOX_SEARCH_ID,
show_channel_folder_toggle: channel_folders.user_has_folders(),
}),
);
// Hide any empty inbox text by default.
@ -1234,6 +1235,7 @@ export function complete_rerender(coming_from_other_views = false): void {
$("#inbox-pane").html(
render_inbox_view({
unknown_channel: true,
show_channel_folder_toggle: channel_folders.user_has_folders(),
}),
);
return;
@ -1255,6 +1257,7 @@ export function complete_rerender(coming_from_other_views = false): void {
topics_dict,
streams_dict,
channel_folders_dict,
show_channel_folder_toggle: channel_folders.user_has_folders(),
...additional_context,
}),
);

2
web/src/popover_menus.ts
View File

@ -34,6 +34,7 @@ type PopoverName =
| "stream_actions_popover"
| "color_picker_popover"
| "show_folders_sidebar"
| "show_folders_inbox"
| "send_later_options";
export const popover_instances: Record<PopoverName, tippy.Instance | null> = {
@ -57,6 +58,7 @@ export const popover_instances: Record<PopoverName, tippy.Instance | null> = {
stream_actions_popover: null,
color_picker_popover: null,
show_folders_sidebar: null,
show_folders_inbox: null,
send_later_options: null,
};

2
web/styles/app_variables.css
View File

@ -2017,7 +2017,7 @@
);
/* Inbox view constants - Values from Figma design */
--width-inbox-search: 29.0625em; /* 465px / 16px em */
--width-inbox-search: calc(27.4375em); /* 439px / 16px em */
--width-inbox-filters-dropdown: 10.7142em; /* 150px / 14px em */
--color-background-inbox-no-unreads-illustration: light-dark(
hsl(147deg 57% 25%),

20
web/styles/inbox.css
View File

@ -451,6 +451,26 @@
.hidden_by_filters {
display: none !important;
}
.channel-folders-inbox-menu-icon {
display: grid;
/* width excluding left & right margin */
width: calc(var(--left-sidebar-vdots-width) - 3px);
cursor: pointer;
place-items: center center;
border-radius: 3px;
margin: 2px 2px 2px 1px;
color: var(--color-vdots-visible);
i.zulip-icon {
font-size: 1.0625em;
}
&:hover {
color: var(--color-vdots-hover);
background-color: var(--color-background-sidebar-action-hover);
}
}
}
.inbox-container #inbox-pane #inbox-empty-without-search {

3
web/templates/inbox_view/inbox_view.hbs
View File

@ -9,6 +9,9 @@
{{#> input_wrapper . input_type="filter-input" custom_classes="inbox-search-wrapper" icon="search" input_button_icon="close"}}
<input type="text" id="{{INBOX_SEARCH_ID}}" class="input-element" value="{{search_val}}" autocomplete="off" placeholder="{{t 'Filter' }}" />
{{/input_wrapper}}
{{#if show_channel_folder_toggle}}
<span class="sidebar-menu-icon channel-folders-inbox-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-more-vertical" aria-label="{{t 'Show channel folders'}}"></i></span>
{{/if}}
</div>
<div id="inbox-empty-with-search" class="inbox-empty-text empty-list-message">
{{t "No conversations match your filters."}}