buddy_list: Redesign view user links.

As discussed here:
https://chat.zulip.org/#narrow/channel/101-design/topic/.22View.20all.22.20links.20in.20right.20sidebar/near/1976275
This commit is contained in:
evykassirer 2024-11-19 14:44:59 -08:00 committed by Tim Abbott
parent d43e3c31ea
commit 17de265116
3 changed files with 27 additions and 18 deletions

View File

@ -52,13 +52,6 @@ $user_status_emoji_width: 24px;
&.no-display {
display: none;
}
.buddy-list-user-link {
margin-left: calc(
var(--right-sidebar-toggle-width-offset) +
var(--right-sidebar-left-spacing)
);
}
}
.buddy-list-section-container.collapsed {
@ -524,14 +517,9 @@ $user_status_emoji_width: 24px;
}
}
.buddy-list-user-link,
.invite-user-shortcut {
/* The margin top is calculated from a legacy 25px height,
from a 20px line of text and 5px of margin top. We calculate
a scaling margin-top by subtracting the em-unit line height
from the legacy value. */
margin-top: calc(25px - (var(--legacy-body-line-height-unitless) * 1em));
margin-right: var(--width-simplebar-scroll-hover);
margin-bottom: var(--sidebar-bottom-spacing);
padding-left: var(--right-sidebar-left-spacing);
border-radius: 4px;
@ -541,11 +529,11 @@ $user_status_emoji_width: 24px;
color: var(--color-text-sidebar-action-heading-hover);
}
.buddy-list-user-link-text,
.invite-user-link {
display: grid;
grid-template:
"user-icon row-text" var(--line-height-sidebar-row-prominent)
/ auto 1fr;
grid-template-rows: var(--line-height-sidebar-row-prominent);
text-decoration: none;
align-items: center;
color: var(--color-text-sidebar-action-heading);
@ -553,6 +541,23 @@ $user_status_emoji_width: 24px;
transition: transform 80ms;
transform: scale(0.96);
}
}
}
.buddy-list-user-link {
margin-left: var(--right-sidebar-toggle-width-offset);
}
.invite-user-shortcut {
/* The margin top is calculated from a legacy 25px height,
from a 20px line of text and 5px of margin top. We calculate
a scaling margin-top by subtracting the em-unit line height
from the legacy value. */
margin-top: calc(25px - (var(--legacy-body-line-height-unitless) * 1em));
margin-bottom: var(--sidebar-bottom-spacing);
.invite-user-link {
grid-template-columns: auto minmax(0, 1fr);
.zulip-icon-user-plus {
padding-right: 5px;

View File

@ -1 +1,3 @@
<a class="buddy-list-user-link view-all-subscribers-link" href="{{stream_edit_hash}}">{{t "View all subscribers" }}</a>
<div class="buddy-list-user-link view-all-subscribers-link">
<a class="buddy-list-user-link-text" href="{{stream_edit_hash}}">{{t "View all subscribers" }}</a>
</div>

View File

@ -1 +1,3 @@
<a class="buddy-list-user-link view-all-users-link" href="#organization/users">{{t "View all users" }}</a>
<div class="buddy-list-user-link view-all-users-link">
<a class="buddy-list-user-link-text" href="#organization/users">{{t "View all users" }}</a>
</div>