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

buddy_list: Add background color placeholder to loading avatar.

This commit is contained in:
evykassirer 2024-11-05 15:01:56 -08:00 committed by Tim Abbott
parent 420849ff6a
commit 424e5d6ad0
4 changed files with 19 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/buddy_list.ts
View File

@ -313,6 +313,18 @@ export class BuddyList extends BuddyListConf {
this.update_empty_list_placeholders(); this.update_empty_list_placeholders();
this.fill_screen_with_content(); this.fill_screen_with_content();
// `populate` always rerenders all user rows, so we need new load handlers.
// This logic only does something is a user has enabled the setting to
// view avatars in the buddy list, and otherwise the jQuery selector will
// always be the empty set.
$("#user-list .user-profile-picture img")
.off("load")
.on("load", function (this: HTMLElement) {
$(this)
.closest(".user-profile-picture")
.toggleClass("avatar-preload-background", false);
});
} }
update_empty_list_placeholders(): void { update_empty_list_placeholders(): void {

2
web/styles/app_variables.css
View File

@ -650,6 +650,7 @@
--color-buddy-list-highlighted-user: var( --color-buddy-list-highlighted-user: var(
--color-background-hover-narrow-filter --color-background-hover-narrow-filter
); );
--color-buddy-list-avatar-loading: hsl(0deg 0% 0% / 10%);
--color-border-sidebar: hsl(0deg 0% 87%); --color-border-sidebar: hsl(0deg 0% 87%);
--color-text-sidebar-base: hsl(0deg 0% 0%); --color-text-sidebar-base: hsl(0deg 0% 0%);
--color-border-sidebar-subheader: hsl(0deg 0% 0% / 15%); --color-border-sidebar-subheader: hsl(0deg 0% 0% / 15%);
@ -1196,6 +1197,7 @@
--color-buddy-list-highlighted-user: var( --color-buddy-list-highlighted-user: var(
--color-background-hover-narrow-filter --color-background-hover-narrow-filter
); );
--color-buddy-list-avatar-loading: hsl(0deg 0% 100% / 10%);
--color-border-sidebar: hsl(0deg 0% 0% / 20%); --color-border-sidebar: hsl(0deg 0% 0% / 20%);
--color-text-sidebar-base: hsl(0deg 0% 100%); --color-text-sidebar-base: hsl(0deg 0% 100%);
--color-border-sidebar-subheader: hsl(0deg 0% 100% / 15%); --color-border-sidebar-subheader: hsl(0deg 0% 100% / 15%);

4
web/styles/right_sidebar.css
View File

@ -276,6 +276,10 @@ $user_status_emoji_width: 24px;
margin: 4px; margin: 4px;
} }
.avatar-preload-background {
background-color: var(--color-buddy-list-avatar-loading);
}
.unread_count:not(.hide) { .unread_count:not(.hide) {
margin-right: 2px; margin-right: 2px;
} }

2
web/templates/presence_row.hbs
View File

@ -12,7 +12,7 @@
</div> </div>
</a> </a>
{{else if user_list_style.WITH_AVATAR}} {{else if user_list_style.WITH_AVATAR}}
<div class="user-profile-picture"> <div class="user-profile-picture avatar-preload-background">
<img loading="lazy" src="{{profile_picture}}"/> <img loading="lazy" src="{{profile_picture}}"/>
<span class="{{user_circle_class}} user_circle"></span> <span class="{{user_circle_class}} user_circle"></span>
</div> </div>