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

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
parent 2c71e7f36c
commit 1e68c0381c
3 changed files with 27 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/styles/right_sidebar.css
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 {
@ -517,14 +510,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;
@ -534,11 +522,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);
@ -546,6 +534,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;

4
web/templates/buddy_list/view_all_subscribers.hbs
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>

4
web/templates/buddy_list/view_all_users.hbs
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>