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

buddy_list: Rotate the header triangle when collapsing a section.

This commit is contained in:
evykassirer 2024-09-30 14:40:59 -07:00 committed by Tim Abbott
parent 4adf6e6c1e
commit 0c29e067b4
3 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/buddy_list.ts
View File

@ -484,11 +484,11 @@ export class BuddyList extends BuddyListConf {
this.participants_is_collapsed,
);
$("#buddy-list-participants-container .toggle-participants").toggleClass(
"fa-caret-down",
"rotate-icon-down",
!this.participants_is_collapsed,
);
$("#buddy-list-participants-container .toggle-participants").toggleClass(
"fa-caret-right",
"rotate-icon-right",
this.participants_is_collapsed,
);
@ -504,11 +504,11 @@ export class BuddyList extends BuddyListConf {
this.users_matching_view_is_collapsed,
);
$("#buddy-list-users-matching-view-container .toggle-users-matching-view").toggleClass(
"fa-caret-down",
"rotate-icon-down",
!this.users_matching_view_is_collapsed,
);
$("#buddy-list-users-matching-view-container .toggle-users-matching-view").toggleClass(
"fa-caret-right",
"rotate-icon-right",
this.users_matching_view_is_collapsed,
);
@ -524,11 +524,11 @@ export class BuddyList extends BuddyListConf {
this.other_users_is_collapsed,
);
$("#buddy-list-other-users-container .toggle-other-users").toggleClass(
"fa-caret-down",
"rotate-icon-down",
!this.other_users_is_collapsed,
);
$("#buddy-list-other-users-container .toggle-other-users").toggleClass(
"fa-caret-right",
"rotate-icon-right",
this.other_users_is_collapsed,
);

15
web/styles/right_sidebar.css
View File

@ -26,8 +26,21 @@ $user_status_emoji_width: 24px;
overflow: auto;
}
.buddy-list-section-toggle {
.buddy-list-section-toggle.fa-caret-right {
width: 7px;
transition: rotate 140ms linear;
/* The triangle icon has asymmetrical padding on it, so
when it rotates down it would be too high without
this padding. */
padding-left: 2px;
&.rotate-icon-down {
rotate: 90deg;
}
&.rotate-icon-right {
rotate: 0deg;
}
}
.buddy-list-section-container {

2
web/templates/buddy_list/section_header.hbs
View File

@ -1,4 +1,4 @@
<h5 id="{{id}}" data-user-count="{{user_count}}" class="buddy-list-heading no-style hidden-for-spectators">
{{header_text}} (<span class="buddy-list-heading-user-count">{{user_count}}</span>)
</h5>
<i class="buddy-list-section-toggle {{toggle_class}} fa fa-sm {{#if is_collapsed}}fa-caret-right{{else}}fa-caret-down{{/if}}" aria-hidden="true"></i>
<i class="buddy-list-section-toggle {{toggle_class}} fa fa-sm fa-caret-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" aria-hidden="true"></i>