diff --git a/web/shared/icons/follow.svg b/web/shared/icons/follow.svg new file mode 100644 index 0000000000..208151efcb Binary files /dev/null and b/web/shared/icons/follow.svg differ diff --git a/web/shared/icons/mute-new.svg b/web/shared/icons/mute-new.svg new file mode 100644 index 0000000000..91b0dcbfc6 Binary files /dev/null and b/web/shared/icons/mute-new.svg differ diff --git a/web/shared/icons/unmute-new.svg b/web/shared/icons/unmute-new.svg new file mode 100644 index 0000000000..1a739a0dab Binary files /dev/null and b/web/shared/icons/unmute-new.svg differ diff --git a/web/src/popover_menus.js b/web/src/popover_menus.js index 6de87c3394..274a9e6415 100644 --- a/web/src/popover_menus.js +++ b/web/src/popover_menus.js @@ -483,6 +483,18 @@ export function initialize() { 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, diff --git a/web/src/popover_menus_data.js b/web/src/popover_menus_data.js index 39482f759e..04c644f396 100644 --- a/web/src/popover_menus_data.js +++ b/web/src/popover_menus_data.js @@ -130,6 +130,8 @@ export function get_topic_popover_content_context({stream_id, topic_name, url}) const has_starred_messages = starred_messages.get_count_in_topic(sub.stream_id, topic_name) > 0; const can_move_topic = settings_data.user_can_move_messages_between_streams(); const can_rename_topic = settings_data.user_can_move_messages_to_another_topic(); + const visibility_policy = user_topics.get_topic_visibility_policy(sub.stream_id, topic_name); + const all_visibility_policies = user_topics.all_visibility_policies; return { stream_name: sub.name, stream_id: sub.stream_id, @@ -144,5 +146,8 @@ export function get_topic_popover_content_context({stream_id, topic_name, url}) color: sub.color, has_starred_messages, url, + visibility_policy, + all_visibility_policies, + development: page_params.development_environment, }; } diff --git a/web/styles/app_components.css b/web/styles/app_components.css index e6d96e583a..d7c177c7f2 100644 --- a/web/styles/app_components.css +++ b/web/styles/app_components.css @@ -1044,3 +1044,44 @@ div.overlay { 0 0 8px hsl(206deg 80% 62% / 60%); } } + +/* Icon-based tab picker used for topics popover. */ +.tabs-container { + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + width: 100%; + height: 27px; + background-color: hsl(0deg 0% 0% / 7%); + position: relative; + border-radius: 5px; + + & i { + z-index: 2; + color: hsl(200deg 100% 40%); + font-size: 17px; + } + + .selected-tab { + background-color: hsl(0deg 0% 100%); + border: 1px solid hsl(0deg 0% 0% / 30%); + z-index: 1; + } + + .tab-option { + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + width: 100%; + height: 100%; + cursor: pointer; + border-radius: 5px; + + &:hover:not(.selected-tab) { + background-color: hsl(0deg 0% 100%); + border: 1px solid hsl(0deg 0% 0% / 30%); + } + } +} diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index b736c80df6..cbf035bb37 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -1543,6 +1543,26 @@ } } } + + .tabs-container { + background-color: hsl(0deg 0% 0% / 30%); + + & i { + color: hsl(0deg 0% 80%); + } + + .selected-tab { + background-color: hsl(0deg 0% 17% / 50%); + border: 1px solid hsl(0deg 0% 100% / 12%); + } + + .tab-option { + &:hover:not(.selected-tab) { + background-color: hsl(0deg 0% 17% / 50%); + border: 1px solid hsl(0deg 0% 100% / 12%); + } + } + } } @supports (-moz-appearance: none) { diff --git a/web/templates/topic_sidebar_actions.hbs b/web/templates/topic_sidebar_actions.hbs index efae0329b7..a2184adb43 100644 --- a/web/templates/topic_sidebar_actions.hbs +++ b/web/templates/topic_sidebar_actions.hbs @@ -8,38 +8,56 @@
- {{#if stream_muted}} - {{#unless topic_unmuted}} -
  • - - - {{t "Unmute topic"}} - -
    • + {{#if development}} +
  • +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    • + +
    + {{else}} + {{#if stream_muted}} + {{#unless topic_unmuted}} +
  • + + + {{t "Unmute topic"}} + +
    • + {{else}} +
  • + + + {{t "Mute topic"}} + +
    • + {{/unless}} {{else}} + {{#unless topic_muted}}
  • - + {{t "Mute topic"}}
    • - {{/unless}} - {{else}} - {{#unless topic_muted}} -
  • - - - {{t "Mute topic"}} - -
    • - {{else}} -
  • - - - {{t "Unmute topic"}} - -
    • - {{/unless}} + {{else}} +
  • + + + {{t "Unmute topic"}} + +
    • + {{/unless}} + {{/if}} {{/if}} {{#if has_starred_messages}}