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

user_circles: Introduce circle icons in sidebars.

Browse Source
This commit is contained in:
Karl Stolley
2024-12-06 15:10:59 -05:00
committed by Tim Abbott
parent 67a67897f9
commit 1113bd53b6
10 changed files with 55 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/shared/icons/user-circle-active.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
<path fill="#000000" d="M 0 5.5 C 0 2.462433 2.462432 0 5.5 0 C 8.53754 0 11 2.462433 11 5.5 C 11 8.53754 8.53754 11 5.5 11 C 2.462432 11 0 8.53754 0 5.5 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 232 B

3
web/shared/icons/user-circle-idle.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
<path fill="#000000" d="m 5.5,0.825 c -2.581931,0 -4.6095887,2.3055538 -4.6095887,4.8766848 l 9.2518827,0 C 10.142294,3.1231918 8.081921,0.825 5.5,0.825 Z M 0,5.5 C 0,2.462433 2.462432,0 5.5,0 8.53754,0 11,2.462433 11,5.5 11,8.53754 8.53754,11 5.5,11 2.462432,11 0,8.53754 0,5.5 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 357 B

3
web/shared/icons/user-circle-offline.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
<path fill="#000000" d="M 5.5 0.825 C 2.918069 0.825 0.825 2.918069 0.825 5.5 C 0.825 8.081921 2.918069 10.175 5.5 10.175 C 8.081921 10.175 10.175 8.081921 10.175 5.5 C 10.175 2.918069 8.081921 0.825 5.5 0.825 Z M 0 5.5 C 0 2.462433 2.462432 0 5.5 0 C 8.53754 0 11 2.462433 11 5.5 C 11 8.53754 8.53754 11 5.5 11 C 2.462432 11 0 8.53754 0 5.5 Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 419 B

11
web/src/activity_ui.ts
View File

@@ -64,9 +64,16 @@ export let update_presence_indicators = (): void => {
const user_id = Number.parseInt($(this).attr("data-presence-indicator-user-id") ?? "", 10);
assert(!Number.isNaN(user_id));
const user_circle_class = buddy_data.get_user_circle_class(user_id);
const user_circle_class_with_icon = `${user_circle_class} zulip-icon-${user_circle_class}`;
$(this)
.removeClass("user-circle-active user-circle-idle user-circle-offline")
.addClass(user_circle_class);
.removeClass(
`
user-circle-active zulip-icon-user-circle-active
user-circle-idle zulip-icon-user-circle-idle
user-circle-offline zulip-icon-user-circle-offline
`,
)
.addClass(user_circle_class_with_icon);
});
};

1
web/styles/app_variables.css
View File

@@ -880,6 +880,7 @@
--color-tab-picker-icon: hsl(200deg 100% 40%);
--color-user-circle-active: hsl(106deg 74% 44%);
--color-user-circle-idle: hsl(29deg 84% 51%);
--color-user-circle-offline: hsl(0deg 0% 50%);
/* hsl(229deg 9% 36%) corresponds to --grey-600.
We use the hsl() equivalent directly since postcss-color-mix-function
cannot dynamically resolve var() arguments. */

18
web/styles/left_sidebar.css
View File

@@ -290,7 +290,7 @@
color: inherit;
}
.zulip-icon {
.zulip-icon:not(.user-circle) {
color: var(--color-left-sidebar-dm-partners-icon);
}
}
@@ -1492,18 +1492,10 @@ li.topic-list-item {
}
.user-circle {
width: var(--length-user-status-circle);
height: var(--length-user-status-circle);
@media screen and (resolution <= 1x) {
/* User circles appear to sag a bit on
low-resolution screens, so this fix
targets them without disrupting
line-height values that may become
important in multi-line DM groups, etc.
in the future. */
margin-top: -2.5px;
}
/* Tighten the line-height to match the icon's size... */
line-height: 1;
/* ...which is approximately 11px at 16px/1em. */
font-size: 0.6875em;
}
.unread_count {

53
web/styles/right_sidebar.css
View File

@@ -142,46 +142,39 @@ $user_status_emoji_width: 24px;
&.highlighted_user {
background-color: var(--color-buddy-list-highlighted-user);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
.user-circle {
outline: 1px solid var(--color-buddy-list-highlighted-user);
}
}
}
.user-circle {
width: var(--length-user-status-circle);
height: var(--length-user-status-circle);
grid-area: starting-anchor-element;
place-self: center center;
@media screen and (resolution <= 1x) {
/* User circles appear to sag a bit on
low-resolution screens, so this fix
targets them without disrupting
line-height values. */
margin-top: -2.5px;
}
/* Tighten the line-height to match the icon's size... */
line-height: 1;
/* ...which is approximately 11px at 16px/1em. */
font-size: 0.6875em;
}
.user_sidebar_entry.with_avatar .user-circle {
display: inline-block;
position: absolute;
width: 0.5em;
height: 0.5em;
top: 1.7em;
left: 1.7em;
&.user-circle-idle {
background: linear-gradient(
to bottom,
var(--color-background) 50%,
var(--color-user-circle-idle) 50%
);
.user_sidebar_entry.with_avatar {
.user-profile-picture {
/* Establish positioning context for user circle. */
position: relative;
}
&.user-circle-offline {
display: none;
.user-circle {
position: absolute;
/* 10px at 16px/1em */
font-size: 0.625em;
bottom: -1px;
right: -1px;
background-color: var(--color-background);
/* A 1.5px border provides better results than
a 1px border, especially at smaller font sizes. */
border: 1.5px solid var(--color-background);
border-radius: 50%;
&.user-circle-offline {
display: none;
}
}
}

24
web/styles/user_circles.css
View File

@@ -1,29 +1,11 @@
.user-circle-active,
.user-circle-idle,
.user-circle-offline {
border-radius: 50%;
border: 1px solid;
}
.user_sidebar_entry.with_avatar .user-circle {
outline: 1px solid var(--color-background);
}
.user-circle-active {
background-color: var(--color-user-circle-active);
border-color: var(--color-user-circle-active);
color: var(--color-user-circle-active);
}
.user-circle-idle {
border-color: var(--color-user-circle-idle);
background: linear-gradient(
to bottom,
hsl(0deg 0% 100% / 0%) 50%,
var(--color-user-circle-idle) 50%
);
color: var(--color-user-circle-idle);
}
.user-circle-offline {
background-color: transparent;
border-color: hsl(0deg 0% 50%);
color: var(--color-user-circle-offline);
}

2
web/templates/pm_list_item.hbs
View File

@@ -6,7 +6,7 @@
{{else if is_bot}}
<span class="conversation-partners-icon zulip-icon zulip-icon-bot" aria-hidden="true"></span>
{{else}}
<span class="conversation-partners-icon {{user_circle_class}} user-circle"></span>
<span class="conversation-partners-icon zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
{{/if}}
<a href="{{url}}" class="conversation-partners">

6
web/templates/presence_row.hbs
View File

@@ -1,7 +1,7 @@
<li data-user-id="{{user_id}}" data-name="{{name}}" class="user_sidebar_entry {{#if user_list_style.WITH_AVATAR}}with_avatar{{/if}} {{#if has_status_text}}with_status{{/if}} {{#if is_current_user}}user_sidebar_entry_me {{/if}} narrow-filter {{#if faded}} user-fade {{/if}}">
<div class="selectable_sidebar_block">
{{#if user_list_style.WITH_STATUS}}
<span class="{{user_circle_class}} user-circle"></span>
<span class="zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
<a class="user-presence-link" href="{{href}}">
<div class="user-name-and-status-wrapper">
<div class="user-name-and-status-emoji">
@@ -14,7 +14,7 @@
{{else if user_list_style.WITH_AVATAR}}
<div class="user-profile-picture avatar-preload-background">
<img loading="lazy" src="{{profile_picture}}"/>
<span class="{{user_circle_class}} user-circle"></span>
<span class="zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
</div>
<a class="user-presence-link" href="{{href}}">
<div class="user-name-and-status-wrapper">
@@ -26,7 +26,7 @@
</div>
</a>
{{else}}
<span class="{{user_circle_class}} user-circle"></span>
<span class="zulip-icon zulip-icon-{{user_circle_class}} {{user_circle_class}} user-circle"></span>
<a class="user-presence-link" href="{{href}}">
<div class="user-name-and-status-emoji">
{{> user_full_name .}}