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

buddy_list: Move arrow toggle to the left of the header text.

This commit is contained in:
evykassirer 2024-11-16 12:31:14 -08:00 committed by Tim Abbott
parent 89379c2ca0
commit dc0e82deef
5 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/buddy_list.ts
View File

@ -453,6 +453,7 @@ export class BuddyList extends BuddyListConf {
$("#buddy-list-users-matching-view-container").toggleClass("no-display", true);
}
$(".buddy-list-subsection-header").toggleClass("no-display", hide_headers);
if (hide_headers) {
return;
}

4
web/styles/app_variables.css
View File

@ -233,6 +233,10 @@
--left-sidebar-toggle-width-offset: var(
--left-sidebar-header-icon-toggle-width
);
--right-sidebar-header-icon-toggle-width: 20px;
--right-sidebar-toggle-width-offset: calc(
var(--right-sidebar-header-icon-toggle-width) - 4px
);
/* This represents the space in the sidebar reserved for symbols like
the #; labels like the stream name go to the right of this. */
--left-sidebar-icon-column-width: 16px;

23
web/styles/right_sidebar.css
View File

@ -41,6 +41,7 @@ $user_status_emoji_width: 24px;
}
.buddy-list-section-toggle {
grid-area: arrow;
color: var(--color-text-sidebar-heading);
opacity: var(--opacity-sidebar-heading-icon);
}
@ -53,7 +54,10 @@ $user_status_emoji_width: 24px;
}
.buddy-list-user-link {
margin-left: var(--right-sidebar-left-spacing);
margin-left: calc(
var(--right-sidebar-toggle-width-offset) +
var(--right-sidebar-left-spacing)
);
}
}
@ -195,7 +199,10 @@ $user_status_emoji_width: 24px;
font-size: 14px;
/* Override .empty-list-message !important styling */
padding: 0 !important;
margin-left: var(--right-sidebar-left-spacing);
margin-left: calc(
var(--right-sidebar-toggle-width-offset) +
var(--right-sidebar-left-spacing)
);
text-align: left;
&:hover {
@ -223,17 +230,20 @@ $user_status_emoji_width: 24px;
}
.buddy-list-subsection-header {
display: flex;
display: grid;
align-items: center;
grid-template:
"arrow row-content scroll-buffer" var(
--line-height-sidebar-row-prominent
)
/ var(--right-sidebar-header-icon-toggle-width) minmax(0, 1fr);
cursor: pointer;
background-color: var(--color-background);
line-height: 1;
position: sticky;
top: 0;
z-index: 1;
color: var(--color-text-default);
border-radius: 4px;
padding-left: 4px;
margin-right: var(--width-simplebar-scroll-hover);
&:hover {
@ -257,6 +267,7 @@ $user_status_emoji_width: 24px;
letter-spacing: var(--letter-spacing-sidebar-heading);
opacity: var(--opacity-sidebar-heading);
transition: opacity 140ms linear;
grid-area: row-content;
}
.buddy-list-subsection-header.no-display {
@ -385,6 +396,7 @@ $user_status_emoji_width: 24px;
"row-content ." auto / minmax(0, 1fr) 26px;
align-content: baseline;
margin-right: var(--width-simplebar-scroll-hover);
margin-left: var(--right-sidebar-toggle-width-offset);
.user-name-and-status-emoji {
display: flex;
@ -449,6 +461,7 @@ $user_status_emoji_width: 24px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
margin-bottom: 10px;
margin-left: 5px;
#userlist-header-search {
display: grid;

2
web/styles/zulip.css
View File

@ -550,7 +550,7 @@ body.has-overlay-scrollbar {
}
.column-right .right-sidebar {
padding-left: 10px;
padding-left: 5px;
width: 240px;
}

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

@ -1,4 +1,4 @@
<i class="buddy-list-section-toggle zulip-icon zulip-icon-heading-triangle-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" aria-hidden="true"></i>
<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 zulip-icon zulip-icon-heading-triangle-right {{#if is_collapsed}}rotate-icon-right{{else}}rotate-icon-down{{/if}}" aria-hidden="true"></i>