mirror of https://github.com/zulip/zulip.git
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>
This commit is contained in:
m-e-l-u-h-a-n
Tim Abbott
parent
4491756845
commit
2585fe5c41
|
|
@ -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 = $(
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}}">
|
||||
<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>
|
||||
{{#if subscribed}}
|
||||
<div class="check checked sub_unsub_button tippy-zulip-tooltip" data-tooltip-template-id="unsubscribe-from-{{name}}-stream-tooltip-template">
|
||||
|
||||
<template id="unsubscribe-from-{{name}}-stream-tooltip-template">
|
||||
<span>
|
||||
{{#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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue