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 <rluthra2002@gmail.com>

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 = $(

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;

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 {
+        &.disabled svg {
-            pointer-events: none;
+            fill: hsl(0deg 0% 87%);
-            visibility: hidden;
+            cursor: not-allowed;
         }
 
         .sub_unsub_status {
@@ -641,14 +641,9 @@ h4.user_group_setting_subsection_title {
         vertical-align: top;
     }
 
-    &:hover .check:not(.checked) svg,
+    .check:not(.checked, .disabled):hover svg,
-    &.active:hover .check:not(.checked) svg {
+    &.active .check:not(.checked, .disabled):hover svg {
-        fill: hsl(0deg 0% 87%);
+        fill: hsl(0deg 0% 27%);
-    }
-
-    .check:not(.checked):hover svg,
-    &.active .check:not(.checked):hover svg {
-        fill: hsl(0deg 0% 72%);
     }
 
     &::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);

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

web/templates/stream_settings/browse_streams_list_item.hbs

@@ -2,12 +2,51 @@
 {{#with this}}
 <div class="stream-row" data-stream-id="{{stream_id}}" data-stream-name="{{name}}">
 
-    <div class="check {{#if subscribed }}checked{{/if}} sub_unsub_button {{#unless should_display_subscription_button}}disabled{{/unless}}">
+    {{#if subscribed}}
-        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+        <div class="check checked sub_unsub_button tippy-zulip-tooltip" data-tooltip-template-id="unsubscribe-from-{{name}}-stream-tooltip-template">
-            <path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
+
-        </svg>
+            <template id="unsubscribe-from-{{name}}-stream-tooltip-template">
-        <div class='sub_unsub_status'></div>
+                <span>
-    </div>
+                    {{#tr}}
+                        Unsubscribe from <z-stream></z-stream>
+                        {{#*inline "z-stream"}}{{> ../inline_decorated_stream_name stream=this}}{{/inline}}
+                    {{/tr}}
+                </span>
+            </template>
+
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                <path d="M448,71.9c-17.3-13.4-41.5-9.3-54.1,9.1L214,344.2l-99.1-107.3c-14.6-16.6-39.1-17.4-54.7-1.8 c-15.6,15.5-16.4,41.6-1.7,58.1c0,0,120.4,133.6,137.7,147c17.3,13.4,41.5,9.3,54.1-9.1l206.3-301.7 C469.2,110.9,465.3,85.2,448,71.9z"/>
+            </svg>
+            <div class='sub_unsub_status'></div>
+        </div>
+    {{else}}
+        <div class="check sub_unsub_button {{#unless should_display_subscription_button}}disabled{{/unless}} tippy-zulip-tooltip"
+          data-tooltip-template-id="{{#if should_display_subscription_button}}subscribe-to-{{name}}-stream-tooltip-template{{else}}cannot-subscribe-to-{{name}}-stream-tooltip-template{{/if}}">
+
+            <template id="subscribe-to-{{name}}-stream-tooltip-template">
+                <span>
+                    {{#tr}}
+                        Subscribe to <z-stream></z-stream>
+                        {{#*inline "z-stream"}}{{> ../inline_decorated_stream_name stream=this}}{{/inline}}
+                    {{/tr}}
+                </span>
+            </template>
+
+            <template id="cannot-subscribe-to-{{name}}-stream-tooltip-template">
+                <span>
+                    {{#tr}}
+                        Cannot subscribe to <z-stream></z-stream>
+                        {{#*inline "z-stream"}}{{> ../inline_decorated_stream_name stream=this}}{{/inline}}
+                    {{/tr}}
+                </span>
+            </template>
+
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="100%" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+                <path d="M459.319,229.668c0,22.201-17.992,40.193-40.205,40.193H269.85v149.271c0,22.207-17.998,40.199-40.196,40.193   c-11.101,0-21.149-4.492-28.416-11.763c-7.276-7.281-11.774-17.324-11.769-28.419l-0.006-149.288H40.181   c-11.094,0-21.134-4.492-28.416-11.774c-7.264-7.264-11.759-17.312-11.759-28.413C0,207.471,17.992,189.475,40.202,189.475h149.267   V40.202C189.469,17.998,207.471,0,229.671,0c22.192,0.006,40.178,17.986,40.19,40.187v149.288h149.282   C441.339,189.487,459.308,207.471,459.319,229.668z"/>
+            </svg>
+            <div class='sub_unsub_status'></div>
+        </div>
+    {{/if}}
     {{> subscription_setting_icon }}
     <div class="sub-info-box">
         <div class="top-bar">