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

right_sidebar: Redesign invite users link. 

Fixes #32266 (second half).
This commit is contained in:
evykassirer 2024-11-12 12:19:37 -08:00
parent 25c80c20c0
commit 2c71e7f36c
2 changed files with 34 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/styles/right_sidebar.css
View File

@ -517,13 +517,38 @@ $user_status_emoji_width: 24px;
}
}
.right-sidebar-shortcuts {
display: flex;
flex-direction: row;
justify-content: space-between;
.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;
&:hover {
background: var(--color-background-sidebar-action-heading-hover);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
color: var(--color-text-sidebar-action-heading-hover);
}
.invite-user-link {
display: grid;
grid-template:
"user-icon row-text" var(--line-height-sidebar-row-prominent)
/ auto 1fr;
align-items: center;
color: var(--color-text-sidebar-action-heading);
&:active {
transition: transform 80ms;
transform: scale(0.96);
}
.zulip-icon-user-plus {
padding-right: 5px;
}
}
}

7
web/templates/right_sidebar.hbs
View File

@ -26,8 +26,11 @@
<ul id="buddy-list-other-users" class="buddy-list-section"></ul>
</div>
<div id="buddy_list_wrapper_padding"></div>
<div class="right-sidebar-shortcuts">
<a class="invite-user-link" role="button"><i class="fa fa-user-plus" aria-hidden="true"></i>{{t 'Invite users to organization' }}</a>
<div class="invite-user-shortcut">
<a class="invite-user-link" role="button">
<i class="zulip-icon zulip-icon-user-plus" aria-hidden="true"></i>
{{t 'Invite users to organization' }}
</a>
</div>
</div>
</div>