paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-01 12:33:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

help_center: Update presentation of user circles.

Browse Source
This commit is contained in:
Karl Stolley
2025-02-25 16:14:45 -06:00
committed by Tim Abbott
parent 606d1e9691
commit f212f78331
3 changed files with 52 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
help/deactivate-or-reactivate-a-user.md
View File

@@ -19,7 +19,10 @@ When you deactivate a user:
user will be disabled.
* Other users will be able to see that the user has been deactivated (e.g., on
their [user card](/help/user-cards)).
their [user card](/help/user-cards)). In sidebars and elsewhere, a user's
[availability](/help/status-and-availability) will be replaced with a
deactivated icon
(<span class="user-circle user-circle-deactivated zulip-icon zulip-icon-user-circle-deactivated"></span>).
* Even if your organization [allows users to join without an
invitation](/help/restrict-account-creation#set-whether-invitations-are-required-to-join),

9
help/status-and-availability.md
View File

@@ -8,8 +8,7 @@ status might be "📅 In a meeting" or "🏠 Working remotely". To make it easy
notice, the status emoji is shown next to your name in the sidebars, message
feed, and compose box.
Your **availability** is a colored dot (like <span class="indicator green
solid"></span>) that indicates if you're currently active on Zulip, idle,
Your **availability** is a colored dot (like <span class="user-circle user-circle-active zulip-icon zulip-icon-user-circle-active"></span>) that indicates if you're currently active on Zulip, idle,
or offline. You can also [go invisible](#invisible-mode) to appear offline
to other users.
@@ -132,14 +131,14 @@ With the compact option, only status emoji are shown.
There are three availability states:
* **Active** (<span class="indicator green solid"></span>): Zulip is
* **Active** (<span class="user-circle user-circle-active zulip-icon zulip-icon-user-circle-active"></span>): Zulip is
open and in focus on web, desktop or mobile, or was in the last 140
seconds.
* **Idle** (<span class="indicator orange"></span>): Zulip is open on
* **Idle** (<span class="user-circle user-circle-idle zulip-icon zulip-icon-user-circle-idle"></span>): Zulip is open on
your computer (either desktop or web), but you are not active.
* **Offline** (<span class="indicator grey"></span>): Zulip is not open
* **Offline** (<span class="user-circle user-circle-offline zulip-icon zulip-icon-user-circle-offline"></span>): Zulip is not open
on your computer, or you have turned on invisible mode.
You can see when someone offline was last active by hovering over their

80
web/styles/portico/markdown.css
View File

@@ -12,6 +12,27 @@
transparent
);
--color-copy-button-success: hsl(146deg 90% 27%);
/* User circles */
/* stylelint-disable color-no-hex */
--color-user-circle-active: light-dark(#43a35e, #4cdc75);
--color-user-circle-idle: light-dark(#f5b266, #ae640a);
--color-user-circle-offline: light-dark(#c1c6d7, #454854);
--color-user-circle-deactivated: hsl(0deg 0% 50%);
--gradient-user-circle-idle: linear-gradient(
to right,
var(--color-user-circle-idle) 5%,
light-dark(
color-mix(
in srgb,
var(--color-user-circle-idle) 78.9%,
transparent
),
var(--color-user-circle-idle)
)
25%,
transparent 100%
);
/* stylelint-enable color-no-hex */
font-weight: 400;
font-size: 1rem;
@@ -309,48 +330,35 @@
font-weight: 600;
}
.indicator {
position: relative;
.user-circle {
/* We make the circles slightly larger than in the
sidebar UI, so they look good next to the copy. */
font-size: 0.7em;
display: inline-block;
top: 1px;
padding: 5px;
border-radius: 6px;
/* 1.5px at 11.2px/1em */
vertical-align: 0.1339em;
}
&.grey {
border: 1px solid hsl(0deg 0% 80%);
}
.user-circle-active {
color: var(--color-user-circle-active);
}
&.grey-line {
border: 1px solid hsl(0deg 0% 80%);
top: 2px;
.user-circle-idle {
background: var(--gradient-user-circle-idle);
background-clip: text;
-webkit-text-fill-color: transparent;
}
&::after {
content: "";
background: hsl(0deg 0% 80%);
height: 1.5px;
width: 6px;
display: block;
margin: 0.5px -2px;
}
}
.with_avatar .user-circle-idle {
background: var(--gradient-user-circle-idle-avatar);
}
&.orange {
border: 1px solid hsl(29deg 84% 51%);
background: linear-gradient(
to bottom,
hsl(0deg 0% 100% / 0%) 50%,
hsl(29deg 84% 51%) 50%
);
}
.user-circle-offline {
color: var(--color-user-circle-offline);
}
&.green {
border: 1px solid hsl(106deg 74% 44%);
background-color: hsl(106deg 74% 44% / 30%);
}
&.green.solid {
background-color: hsl(106deg 74% 44%);
}
.user-circle-deactivated {
color: var(--color-user-circle-deactivated);
}
& kbd {