Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

user_circles: Introduce icons to Inbox, Recent conversations views.

This commit is contained in:
Karl Stolley 2024-11-07 13:11:25 -06:00 committed by Tim Abbott
parent 28830c9371
commit 45cf03bf08
5 changed files with 11 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/styles/app_variables.css
View File

@ -504,9 +504,6 @@
/* User circles. */
/* 8px at 14px/1em */
--length-user-status-circle: 0.5714em;
/* Shrink the user activity circle for the Recent Conversations context. */
/* 7px at 14px/1em */
--length-user-status-circle-recent-conversations: 0.5em;
/* Overlay heights for streams modal */
--overlay-container-height: 95vh;
@ -1429,7 +1426,7 @@
);
--color-tab-picker-icon: hsl(0deg 0% 80%);
--color-user-circle-active: hsl(137deg 47% 50%);
--color-user-circle-idle: hsl(55deg 41% 32%);
--color-user-circle-idle: hsl(28deg 41% 42%);
--color-user-circle-empty: hsl(228deg 10% 70% / 22%);
--color-user-circle-empty-no-alpha: color-mix(
in srgb,

12
web/styles/inbox.css
View File

@ -257,12 +257,14 @@
}
.user_circle {
/* size of the user activity circle */
/* 6px at 15px/1em */
min-width: 0.4em;
height: 0.4em;
/* 8px at 16px/1em */
font-size: 0.5em;
/* TODO: Fix up inbox row layout so that
this min-width value doesn't maintain
lefthand alignment up and down the view. */
/* ~8.4px at 8px/1em */
min-width: 1.05em;
margin-right: 5px;
top: 0;
}
.zulip-icon-bot,

9
web/styles/recent_view.css
View File

@ -514,15 +514,6 @@
.zulip-icon.zulip-icon-bot {
opacity: 0.6;
}
.user_circle {
min-width: var(
--length-user-status-circle-recent-conversations
);
height: var(--length-user-status-circle-recent-conversations);
float: left;
position: unset;
}
}
.user_status_icon_wrapper {

4
web/templates/inbox_view/inbox_row.hbs
View File

@ -14,7 +14,7 @@
{{else if is_group}}
<span class="zulip-icon zulip-icon-triple-users" aria-hidden="true"></span>
{{else}}
<span class="{{user_circle_class}} user_circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
<span class="zulip-icon zulip-icon-user-status-tight {{user_circle_class}} user_circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
{{/if}}
<span class="recipients_name">{{{rendered_dm_with}}}</span>
</span>
@ -26,7 +26,7 @@
</div>
{{else if is_topic}}
{{!-- Invisible user circle element for alignment of topic text with DM user name --}}
<span class="user_circle_green user_circle invisible"></span>
<span class="zulip-icon zulip-icon-user-status user_circle_green user_circle invisible"></span>
<div class="inbox-topic-name">
<a tabindex="-1" href="{{topic_url}}">{{topic_name}}</a>
</div>

2
web/templates/recent_view_row.hbs
View File

@ -21,7 +21,7 @@
{{else if is_bot}}
<span class="zulip-icon zulip-icon-bot" aria-hidden="true"></span>
{{else}}
<span class="{{user_circle_class}} user_circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
<span class="zulip-icon zulip-icon-user-status {{user_circle_class}} user_circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
{{/if}}
</span>
</div>