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 { &.no-display {
display: none; 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 { .buddy-list-section-container.collapsed {
@ -517,14 +510,9 @@ $user_status_emoji_width: 24px;
} }
} }
.buddy-list-user-link,
.invite-user-shortcut { .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-right: var(--width-simplebar-scroll-hover);
margin-bottom: var(--sidebar-bottom-spacing);
padding-left: var(--right-sidebar-left-spacing); padding-left: var(--right-sidebar-left-spacing);
border-radius: 4px; border-radius: 4px;
@ -534,11 +522,11 @@ $user_status_emoji_width: 24px;
color: var(--color-text-sidebar-action-heading-hover); color: var(--color-text-sidebar-action-heading-hover);
} }
.buddy-list-user-link-text,
.invite-user-link { .invite-user-link {
display: grid; display: grid;
grid-template: grid-template-rows: var(--line-height-sidebar-row-prominent);
"user-icon row-text" var(--line-height-sidebar-row-prominent) text-decoration: none;
/ auto 1fr;
align-items: center; align-items: center;
color: var(--color-text-sidebar-action-heading); color: var(--color-text-sidebar-action-heading);
@ -546,6 +534,23 @@ $user_status_emoji_width: 24px;
transition: transform 80ms; transition: transform 80ms;
transform: scale(0.96); 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 { .zulip-icon-user-plus {
padding-right: 5px; 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>