mirror of https://github.com/zulip/zulip.git
navbar: Add user avatar icon for personal_menu dropdown.
This commit adds user avatar icon in navbar. This new avatar icon will be used as dropdown toggle button. Made `.column-right` a flex, every element in right-side navbar is in this div now rather than all elements positioned absolutely with hardcoded values like before. Fixed some CSS as per new flex layout if `.column-right`. Fixes part of #22802
This commit is contained in:
Hardik Dharmani
Tim Abbott
parent
a4680f3681
commit
5fd8b95454
|
|
@ -203,6 +203,7 @@ function initialize_right_sidebar() {
|
|||
function initialize_navbar() {
|
||||
const rendered_navbar = render_navbar({
|
||||
embedded: page_params.narrow_stream !== undefined,
|
||||
user_avatar: page_params.avatar_url_medium,
|
||||
});
|
||||
|
||||
$("#header-container").html(rendered_navbar);
|
||||
|
|
|
|||
|
|
@ -205,7 +205,6 @@
|
|||
}
|
||||
|
||||
#navbar-middle .column-middle-inner,
|
||||
#userlist-toggle-button,
|
||||
.header,
|
||||
#message_view_header {
|
||||
background-color: var(--color-background-navbar);
|
||||
|
|
|
|||
|
|
@ -205,9 +205,6 @@ $user_status_emoji_width: 24px;
|
|||
|
||||
#userlist-toggle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -215,11 +212,6 @@ $user_status_emoji_width: 24px;
|
|||
#userlist-toggle-button {
|
||||
text-decoration: none;
|
||||
color: hsl(0deg 0% 60%);
|
||||
display: block;
|
||||
width: 45px;
|
||||
height: 19px;
|
||||
padding-top: 12px;
|
||||
padding-bottom: 9px;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
|
|
|
|||
|
|
@ -196,6 +196,7 @@ body {
|
|||
--color-search-shadow-wide: hsl(0deg 0% 0% / 25%);
|
||||
--color-search-shadow-tight: hsl(0deg 0% 0% / 10%);
|
||||
--color-search-dropdown-top-border: hsla(0deg 0% 0% / 10%);
|
||||
--color-background-image-loader: hsl(0deg 0% 0% / 10%);
|
||||
--color-background-unread-counter: hsl(105deg 2% 50%);
|
||||
--color-background-unread-counter-popover-menu: hsl(200deg 100% 40%);
|
||||
|
||||
|
|
@ -310,6 +311,7 @@ body {
|
|||
--color-background-search-option-hover: hsl(0deg 0% 30%);
|
||||
--color-search-box-hover-shadow: hsl(0deg 0% 0% / 30%);
|
||||
--color-search-dropdown-top-border: hsla(0deg 0% 0% / 35%);
|
||||
--color-background-image-loader: hsl(0deg 0% 100% / 10%);
|
||||
--color-background-unread-counter: hsl(105deg 2% 50% / 50%);
|
||||
--color-background-unread-counter-popover-menu: hsl(105deg 2% 50% / 50%);
|
||||
|
||||
|
|
@ -643,7 +645,6 @@ p.n-margin {
|
|||
}
|
||||
|
||||
#navbar-middle .column-middle-inner,
|
||||
#userlist-toggle-button,
|
||||
.header,
|
||||
#message_view_header {
|
||||
background-color: var(--color-background-navbar);
|
||||
|
|
@ -804,8 +805,9 @@ body.has-overlay-scrollbar {
|
|||
justify-content: space-evenly;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
/* width of right column - width of gear icon(250px - 45px) */
|
||||
width: 205px;
|
||||
right: 40px;
|
||||
/* width of right column - width of gear icon - right margin of column-right (250px - 40px -7px) */
|
||||
width: 203px;
|
||||
|
||||
& a {
|
||||
font-size: calc(16em / 14);
|
||||
|
|
@ -833,10 +835,8 @@ body.has-overlay-scrollbar {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
/* Height of navbar in tablet sizes */
|
||||
height: 40px;
|
||||
/* Width of userlist-toggle button. */
|
||||
width: 45px;
|
||||
height: var(--header-height);
|
||||
width: var(--header-height);
|
||||
border-left: 1px solid hsl(0deg 0% 88%);
|
||||
|
||||
.login_button {
|
||||
|
|
@ -1224,10 +1224,6 @@ li.actual-dropdown-menu i {
|
|||
}
|
||||
}
|
||||
|
||||
.settings-dropdown-cog {
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
td.pointer {
|
||||
vertical-align: top;
|
||||
padding-top: 10px;
|
||||
|
|
@ -2262,8 +2258,6 @@ div.focused-message-list {
|
|||
|
||||
#navbar-buttons {
|
||||
white-space: nowrap;
|
||||
margin-left: 15px;
|
||||
margin-top: 7px;
|
||||
display: inline-block;
|
||||
float: right;
|
||||
|
||||
|
|
@ -2351,8 +2345,8 @@ div.focused-message-list {
|
|||
|
||||
.nav .dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
top: 30px;
|
||||
right: -7px;
|
||||
top: 35px;
|
||||
/* Match the width of the right sidebar so that we don't have
|
||||
the presence dots distracting you when looking at this. */
|
||||
min-width: 240px;
|
||||
|
|
@ -3013,6 +3007,17 @@ select.invite-as {
|
|||
min-width: 750px;
|
||||
}
|
||||
|
||||
.spectator-view {
|
||||
#navbar-middle {
|
||||
margin-right: 85px;
|
||||
}
|
||||
|
||||
#navbar-buttons {
|
||||
position: absolute;
|
||||
right: 45px;
|
||||
}
|
||||
}
|
||||
|
||||
.column-right {
|
||||
display: none;
|
||||
|
||||
|
|
@ -3039,15 +3044,6 @@ select.invite-as {
|
|||
}
|
||||
}
|
||||
|
||||
.header-main .column-right {
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
}
|
||||
|
||||
#top_navbar #navbar-buttons {
|
||||
margin-right: 41px;
|
||||
}
|
||||
|
||||
.nav .dropdown-menu {
|
||||
min-width: 180px;
|
||||
box-shadow: 0 0 5px hsl(0deg 0% 0% / 20%);
|
||||
|
|
@ -3062,7 +3058,7 @@ select.invite-as {
|
|||
}
|
||||
|
||||
#navbar-middle {
|
||||
margin-right: 87px;
|
||||
margin-right: 127px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3164,6 +3160,31 @@ select.invite-as {
|
|||
}
|
||||
}
|
||||
|
||||
.spectator-view {
|
||||
#navbar-middle {
|
||||
margin-right: 65px;
|
||||
}
|
||||
|
||||
#navbar-buttons {
|
||||
position: absolute;
|
||||
right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
#navbar-middle {
|
||||
margin-right: 97px;
|
||||
}
|
||||
|
||||
.nav .dropdown-menu {
|
||||
right: -13px;
|
||||
}
|
||||
|
||||
/* Usually the styling is applied directly to the icon, but here
|
||||
the icon is `position: static`, so we can't. */
|
||||
.search_closed {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
#streamlist-toggle,
|
||||
#navbar-buttons,
|
||||
#message_view_header,
|
||||
|
|
@ -3191,6 +3212,11 @@ select.invite-as {
|
|||
#navbar-buttons ul.nav li.active .dropdown-toggle {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.column-right #personal-menu .header-button-avatar {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < $mm_min) {
|
||||
|
|
@ -3392,3 +3418,38 @@ select.invite-as {
|
|||
margin-right: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.header-main .column-right {
|
||||
display: flex;
|
||||
width: auto;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: 7px;
|
||||
|
||||
& a:focus {
|
||||
filter: none;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header-button,
|
||||
#navbar-buttons #settings-dropdown {
|
||||
width: var(--header-height);
|
||||
height: var(--header-height);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#personal-menu {
|
||||
.header-button-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background-size: cover;
|
||||
border-radius: 4px;
|
||||
background-color: var(--color-background-image-loader);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,17 +40,22 @@
|
|||
</a>
|
||||
</div>
|
||||
<div class="spectator_narrow_login_button hide show-xl" data-tippy-content="{{t 'Log in' }}" data-tippy-placement="bottom">
|
||||
<a class="login_button">
|
||||
<a class="header-button login_button">
|
||||
<i class="fa fa-sign-in"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="userlist-toggle" class="hidden-for-spectators tippy-zulip-delayed-tooltip" data-tooltip-template-id="userlist-tooltip-template">
|
||||
<a id="userlist-toggle-button" role="button" tabindex="0"><i class="fa fa-group" aria-hidden="true"></i>
|
||||
<a id="userlist-toggle-button" role="button" class="header-button" tabindex="0"><i class="fa fa-group" aria-hidden="true"></i>
|
||||
<span id="userlist-toggle-unreadcount">0</span>
|
||||
</a>
|
||||
</div>
|
||||
<div id="navbar-buttons" class="no-auto-hide-sidebar-overlays" {{#if embedded}}class="hide-navbar-buttons-visibility"{{/if}}>
|
||||
<div id="navbar-buttons" class="no-auto-hide-sidebar-overlays header-button" {{#if embedded}}class="hide-navbar-buttons-visibility"{{/if}}>
|
||||
</div>
|
||||
<div id="personal-menu" class="hidden-for-spectators">
|
||||
<a class="header-button tippy-zulip-delayed-tooltip" tabindex="0" role="button" data-tippy-content="{{t 'Personal menu' }}">
|
||||
<img class="header-button-avatar" src="{{user_avatar}}"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in New Issue