From 237f9f4799c7e44b42552f63fe095fca50942cd7 Mon Sep 17 00:00:00 2001 From: Prakhar Pratyush Date: Wed, 14 Jun 2023 15:11:48 +0530 Subject: [PATCH] topic_popover: Add support to follow a topic from the topic_popover. This commit adds support for following a topic from the topic three-dot menu in the left sidebar. Three options, i.e., 'Mute topic', 'Unmute topic', and 'Follow topic', are shown at the top of the menu (in the mentioned order), regardless of whether the stream is muted or unmuted. We can no longer set the topic's visibility_policy to INHERIT (the default value) from this menu. The changes are visible in the development environment only. Fixes #25917. Co-authored-by: Prakhar Pratyush Co-authored-by: Hardik Dharmani --- web/shared/icons/follow.svg | Bin 0 -> 628 bytes web/shared/icons/mute-new.svg | Bin 0 -> 582 bytes web/shared/icons/unmute-new.svg | Bin 0 -> 499 bytes web/src/popover_menus.js | 12 ++++ web/src/popover_menus_data.js | 5 ++ web/styles/app_components.css | 41 ++++++++++++++ web/styles/dark_theme.css | 20 +++++++ web/templates/topic_sidebar_actions.hbs | 70 +++++++++++++++--------- 8 files changed, 122 insertions(+), 26 deletions(-) create mode 100644 web/shared/icons/follow.svg create mode 100644 web/shared/icons/mute-new.svg create mode 100644 web/shared/icons/unmute-new.svg diff --git a/web/shared/icons/follow.svg b/web/shared/icons/follow.svg new file mode 100644 index 0000000000000000000000000000000000000000..208151efcb6cf96995b7535d8053a3aa162b8f48 GIT binary patch literal 628 zcmZ8f%Wi`}4E&YV_Kev#PyteV%B9yFa*GHBqzyy~g?xTzp(shUme-iEXKcuCQ^W3O z-`@(}j^pJ$j^}x%S<`TBVkLx#f#7WJPGehe={Rfau4%_L{_ealct7+tXH!?tpToW2 zf(a%ajF)-CR>&JV@gcuR42J)Tm7Qbq9hgd`?bJhe?V+~{7$BukwG8_6=cMbpPD&gnJbwKlR+qVj z>oE+Ml6BK`dd;$BS#Z%fp4&_bAu=KuEPXw7C6kUp*Ys^S-Tco!gpv*8&@h<$W_cg4 zB@-Y(I$CVKYT<^wkP=-_hp9_1{QMP~k~MQPjCIYRF4>1ir$C|C6)KHVqRvsr_h*i4_1_uqjYFI z9R-pV`ToeUupqH0D1nMz{#*naMcFrMR!Om<3l)bNg-xGKxX0}bdbMXzh5q!f`Rr#d zaR$<&G!V;pB$7bY7bfmNZCg!sSe?9Nh@_@`noA-H+|u~GhMc-b1qJa>dO%2&`xQ!( a$vmk=F6P}zjSlh$zh_i+*3zcmWBm;)zlll! literal 0 HcmV?d00001 diff --git a/web/shared/icons/unmute-new.svg b/web/shared/icons/unmute-new.svg new file mode 100644 index 0000000000000000000000000000000000000000..1a739a0dab41936fd0a624aa2453bf048297aa6c GIT binary patch literal 499 zcmZ8e%Wi`(5d4*ud-meDp$d`OQ!c&ckXr;aAUO~v6!Q5Uh$5wxSL?NzncXp)+jOG) zIrX`QIVf8Fb&7$*hVM4j7ItE5Ckn>B-wWj^=Q-Y|z(31#`rQ72?97 ua#*W1WX}Qd;ua9h;_y6Rt!aT`!G2sUA)f37co0;j?(*-Mv+ZX2m)l=HF?IO> literal 0 HcmV?d00001 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}}