From 2585fe5c41a3da88e3aa0558272b129502141fba Mon Sep 17 00:00:00 2001 From: m-e-l-u-h-a-n Date: Sat, 13 May 2023 19:24:58 +0530 Subject: [PATCH] streams: Improve subscription toggle buttons on stream rows. This commit changes the UI for subscribing to streams on stream rows to be more like the mobile version (zulip/zulip-mobile#5333). The current design made it hard to discover how to subscribe to streams via left panel and is not very clear on the fact that its not possible to subscribe to private streams. To address this the following changes have been made: - For unsubscribed streams, the on hover-checkmark is replaced by a "+" which is always displayed and has on-hover highlighting. - For unsubscribed private streams, the "+" is disabled. - Tooltips with appropriate messages are added on the "+" sign for the above 2 cases. - A tooltip has also been for the on-hover checkmark for subscribed streams. Fixes: #22217. Co-authored-by: Raghav Luthra --- web/src/stream_edit.js | 5 ++ web/styles/dark_theme.css | 19 +++++++ web/styles/subscriptions.css | 31 ++++++----- web/styles/tooltips.css | 6 +++ .../browse_streams_list_item.hbs | 51 ++++++++++++++++--- 5 files changed, 94 insertions(+), 18 deletions(-) diff --git a/web/src/stream_edit.js b/web/src/stream_edit.js index 88f36c5d6b..b4d9ca001c 100644 --- a/web/src/stream_edit.js +++ b/web/src/stream_edit.js @@ -535,6 +535,11 @@ export function initialize() { // This handler isn't part of the normal edit interface; it's the convenient // checkmark in the subscriber list. $("#streams_overlay_container").on("click", ".sub_unsub_button", (e) => { + if ($(e.currentTarget).hasClass("disabled")) { + // We do not allow users to subscribe themselves to private streams. + return; + } + const sub = get_sub_for_target(e.target); // Makes sure we take the correct stream_row. const $stream_row = $( diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index e494c3f0f0..23ec6633d0 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -788,6 +788,25 @@ background-color: hsl(0deg 0% 0% / 20%); } + .stream-row, + .group-row { + /* This is for coluring the plus sign SVGs in stream-list UI */ + /* public */ + .check:not(.checked) svg { + fill: hsl(218deg 14% 33%); + } + + /* private */ + .disabled svg { + opacity: 0.5; + } + + /* public :hover */ + .check:not(.checked, .disabled):hover svg { + fill: hsl(230deg 11% 67%); + } + } + .recent_view_participant_overflow { color: hsl(0deg 0% 100%) !important; background-color: hsl(211deg 18% 25%) !important; diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index 0e2d0b3e0a..294dae7b22 100644 --- a/web/styles/subscriptions.css +++ b/web/styles/subscriptions.css @@ -524,7 +524,7 @@ h4.user_group_setting_subsection_title { background-position: center center; & svg { - fill: transparent; + fill: hsl(0deg 0% 72%); width: 70%; margin: 0% 15%; } @@ -533,9 +533,9 @@ h4.user_group_setting_subsection_title { opacity: 0.5; } - &.disabled { - pointer-events: none; - visibility: hidden; + &.disabled svg { + fill: hsl(0deg 0% 87%); + cursor: not-allowed; } .sub_unsub_status { @@ -641,14 +641,9 @@ h4.user_group_setting_subsection_title { vertical-align: top; } - &:hover .check:not(.checked) svg, - &.active:hover .check:not(.checked) svg { - fill: hsl(0deg 0% 87%); - } - - .check:not(.checked):hover svg, - &.active .check:not(.checked):hover svg { - fill: hsl(0deg 0% 72%); + .check:not(.checked, .disabled):hover svg, + &.active .check:not(.checked, .disabled):hover svg { + fill: hsl(0deg 0% 27%); } &::selection, @@ -657,6 +652,18 @@ h4.user_group_setting_subsection_title { } } +.group-row { + /* + These are temporary rules and would get removed with + the completion of https://github.com/zulip/zulip/issues/25538 + as these check buttons become functional for user groups. + */ + .check.disabled { + pointer-events: none !important; + visibility: hidden !important; + } +} + .stream-row .sub-info-box .description:empty::after, .group-row .group-info-box .description:empty::after { content: attr(data-no-description); diff --git a/web/styles/tooltips.css b/web/styles/tooltips.css index 27c5d6f19a..2e9b3d6b90 100644 --- a/web/styles/tooltips.css +++ b/web/styles/tooltips.css @@ -85,6 +85,12 @@ text-align: center; } + .stream-privacy-type-icon { + width: 9px; + padding-left: 2px; + top: 0.5px; + } + /* If the reference of the tooltip is went offscreen while scrolling, the tooltip will be visible until the scrolling stops. Popper adds `data-reference-hidden` attribute to those tooltips whole reference is diff --git a/web/templates/stream_settings/browse_streams_list_item.hbs b/web/templates/stream_settings/browse_streams_list_item.hbs index f879dfaedf..df6c2ac3c8 100644 --- a/web/templates/stream_settings/browse_streams_list_item.hbs +++ b/web/templates/stream_settings/browse_streams_list_item.hbs @@ -2,12 +2,51 @@ {{#with this}}
-
- - - -
-
+ {{#if subscribed}} +
+ + + + + + +
+
+ {{else}} +
+ + + + + + + + +
+
+ {{/if}} {{> subscription_setting_icon }}