diff --git a/web/src/inbox_ui.js b/web/src/inbox_ui.js index c71ccdea39..0a35a7380f 100644 --- a/web/src/inbox_ui.js +++ b/web/src/inbox_ui.js @@ -829,6 +829,9 @@ function get_focus_class_for_header() { focus_class = ".unread_count"; break; } + case COLUMNS.ACTION_MENU: { + focus_class = ".inbox-stream-menu"; + } } return focus_class; diff --git a/web/src/stream_popover.js b/web/src/stream_popover.js index d45be624e6..6950a73aea 100644 --- a/web/src/stream_popover.js +++ b/web/src/stream_popover.js @@ -120,6 +120,10 @@ function build_stream_popover(opts) { }); popover_menus.toggle_popover_menu(elt, { + // Add a delay to separate `hideOnClick` and `onShow` so that + // `onShow` is called after `hideOnClick`. + // See https://github.com/atomiks/tippyjs/issues/230 for more details. + delay: [100, 0], ...left_sidebar_tippy_options, onCreate(instance) { stream_popover_instance = instance; @@ -498,4 +502,16 @@ export function register_click_handlers() { e.stopPropagation(); }); + + $("body").on("click", ".inbox-stream-menu", (e) => { + const elt = e.currentTarget; + const stream_id = Number.parseInt($(elt).attr("data-stream-id"), 10); + + build_stream_popover({ + elt, + stream_id, + }); + + e.stopPropagation(); + }); } diff --git a/web/styles/inbox.css b/web/styles/inbox.css index 46b742ef63..e316c45aa1 100644 --- a/web/styles/inbox.css +++ b/web/styles/inbox.css @@ -344,7 +344,8 @@ top: 1px; } - .inbox-row { + .inbox-row, + .inbox-header { &:focus, &:focus-within, &:hover { diff --git a/web/templates/inbox_view/inbox_stream_header_row.hbs b/web/templates/inbox_view/inbox_stream_header_row.hbs index 87a631195b..045f3d06f5 100644 --- a/web/templates/inbox_view/inbox_stream_header_row.hbs +++ b/web/templates/inbox_view/inbox_stream_header_row.hbs @@ -15,5 +15,12 @@ {{unread_count}} +
+
+
+ +
+
+