mirror of
https://github.com/zulip/zulip.git
synced 2025-11-03 13:33:24 +00:00
2585fe5c41
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>
110 lines
3.5 KiB
CSS
110 lines
3.5 KiB
CSS
[data-tippy-root] {
|
|
/* Since tooltip elements are sometimes inside elements
|
|
* which have different font-family, we force font-family
|
|
* for tooltips here.
|
|
*/
|
|
font-family: "Source Sans 3 VF", sans-serif !important;
|
|
overflow-wrap: anywhere;
|
|
/* Contains stylistic variant of upper-case character "I" in Source Sans 3 */
|
|
font-feature-settings: "ss01" on;
|
|
|
|
/* Affects all tippy tooltips not using any theme. */
|
|
.tippy-box:not([data-theme]) {
|
|
background: hsl(0deg 0% 20%);
|
|
border-radius: 5px;
|
|
min-height: 25px;
|
|
box-sizing: border-box;
|
|
|
|
.tippy-content {
|
|
box-sizing: inherit;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 5px 10px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.tippy-arrow::before {
|
|
/* This affects the arrow for tooltips and doesn't have any impact on arrows for popovers.
|
|
* The transform property scales down the size of the arrow, giving it a thinner appearance.
|
|
* https://atomiks.github.io/tippyjs/v6/themes/#changing-the-arrow-size
|
|
*/
|
|
transform: scale(0.75);
|
|
}
|
|
|
|
.tooltip-inner-content {
|
|
line-height: 17px;
|
|
}
|
|
|
|
&[data-placement^="top"] > .tippy-arrow::before {
|
|
border-top-color: hsl(0deg 0% 20%);
|
|
}
|
|
|
|
&[data-placement^="bottom"] > .tippy-arrow::before {
|
|
border-bottom-color: hsl(0deg 0% 20%);
|
|
}
|
|
|
|
&[data-placement^="left"] > .tippy-arrow::before {
|
|
border-left-color: hsl(0deg 0% 20%);
|
|
}
|
|
|
|
&[data-placement^="right"] > .tippy-arrow::before {
|
|
border-right-color: hsl(0deg 0% 20%);
|
|
}
|
|
}
|
|
|
|
.tippy-arrow::before {
|
|
/* `.tippy-arrow:before` element sometimes
|
|
* inherits the height of the parent, we
|
|
* don't want any height here since we
|
|
* want it to remain an triangle.
|
|
* The bug was only found in Firefox.
|
|
*/
|
|
height: 0 !important;
|
|
}
|
|
/* If the text in the tooltips stretches to multiple lines,
|
|
* we want the lines to be left-indented and not right-indented
|
|
* by default.
|
|
*/
|
|
text-align: left;
|
|
|
|
.tooltip-hotkey-hints {
|
|
box-sizing: inherit;
|
|
display: flex;
|
|
align-self: flex-start;
|
|
margin: 0 -5px 0 10px;
|
|
gap: 4px;
|
|
}
|
|
|
|
& span.tooltip-hotkey-hint {
|
|
border: 1px solid hsl(225deg 100% 84%);
|
|
border-radius: 3px;
|
|
color: hsl(225deg 100% 84%);
|
|
padding: 0 5px;
|
|
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
|
|
hidden. Since tooltips have `absolute` position, they can occupy scroll
|
|
space offscreen and cause document to have the wrong scroll height.
|
|
Setting `display: none` makes sure it doesn't occupy any offscreen space.
|
|
|
|
NOTE: This data attribute has changed each time in the past 3 releases and
|
|
if we upgrade tippy from v6, we should check if this attribute is still valid.
|
|
|
|
See https://github.com/atomiks/tippyjs/issues/555 for some discussion on this.
|
|
*/
|
|
[data-reference-hidden]:not(.show-when-reference-hidden) {
|
|
display: none;
|
|
}
|
|
}
|