Skip to content

G
gitlab-ce
Commit ed9637b2 authored by Andrew Fontaine's avatar Andrew Fontaine
Browse files
Options

Merge branch '322680-contextual-header-styling' into 'master' 

Styled the contextual header in left sidepanel

See merge request gitlab-org/gitlab!62905
parents 70a513db 9ca558b7
Show whitespace changes
Inline Side-by-side
Showing with 98 additions and 40 deletions
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
View file @ ed9637b2
//
// VARIABLES
//
$top-level-item-color: $purple-900;
//
// TEMPORARY OVERRIDES
// Needed while we serve both *_base and *_variant stylesheets
// TODO: These have to be removed during the feature flag rollout
// TODO: These have to be removed during the ':sidebar_refactor' flag rollout
//
&.gl-dark .nav-sidebar li.active {
box-shadow: none;
}
&.gl-dark .nav-sidebar li a,
.toggle-sidebar-button .collapse-text,
.toggle-sidebar-button .icon-chevron-double-lg-left,
.toggle-sidebar-button .icon-chevron-double-lg-right {
&.gl-dark .toggle-sidebar-button .collapse-text,
&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-left,
&.gl-dark .toggle-sidebar-button .icon-chevron-double-lg-right,
&.gl-dark .sidebar-top-level-items .context-header a .sidebar-context-title,
&.gl-dark .nav-sidebar-inner-scroll > div.context-header a .sidebar-context-title {
color: $gray-darkest;
}
&.ui-indigo .nav-sidebar li.active > a {
color: $top-level-item-color;
}
&.ui-indigo .nav-sidebar li.active .nav-icon-container svg {
fill: $top-level-item-color;
}
.nav-sidebar {
box-shadow: none;
li.active {
background-color: transparent;
box-shadow: none;
box-shadow: none !important; // TODO: This should be updated in `theme_helper.scss` together with ':sidebar_refactor' rollout
}
}
......@@ -137,6 +153,48 @@
}
}
@mixin context-header {
$avatar-box-shadow: inset 0 0 0 1px $t-gray-a-08;
@include gl-p-2;
@include gl-mb-2;
.avatar-container {
@include gl-font-weight-normal;
flex: none;
box-shadow: $avatar-box-shadow;
&.rect-avatar {
@include gl-border-none;
.avatar.s32 {
@extend .rect-avatar.s32;
color: $gray-900;
box-shadow: $avatar-box-shadow;
}
}
}
.sidebar-context-title {
color: $top-level-item-color;
}
}
@mixin top-level-item {
@include gl-px-4;
@include gl-py-3;
@include gl-display-flex;
@include gl-align-items-center;
@include gl-rounded-base;
@include gl-w-auto;
transition: padding $sidebar-transition-duration;
margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
&:hover {
background-color: $indigo-900-alpha-008;
}
}
//
// PAGE-LAYOUT
//
......@@ -195,7 +253,7 @@
a {
@include gl-text-decoration-none;
@include gl-line-height-normal;
color: $purple-900;
color: $top-level-item-color;
}
li {
......@@ -206,19 +264,7 @@
}
> a {
@include gl-mx-2;
@include gl-px-4;
@include gl-py-3;
@include gl-display-flex;
@include gl-align-items-center;
@include gl-rounded-base;
@include gl-w-auto;
transition: padding $sidebar-transition-duration;
margin-bottom: 1px;
&:hover {
background-color: $indigo-900-alpha-008;
}
@include top-level-item;
}
&.active {
......@@ -250,11 +296,6 @@
display: none;
}
svg {
height: 16px;
width: 16px;
}
@media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
&:not(.sidebar-expanded-mobile) {
@include collapse-contextual-sidebar;
......@@ -264,14 +305,28 @@
}
.nav-sidebar-inner-scroll {
height: 100%;
width: 100%;
overflow: auto;
@include gl-h-full;
@include gl-w-full;
@include gl-overflow-auto;
> div.context-header {
@include gl-mt-2;
a {
@include top-level-item;
@include context-header;
}
}
}
.sidebar-top-level-items {
@include gl-mt-2;
margin-bottom: 60px;
.context-header a {
@include context-header;
}
> li {
.badge.badge-pill {
@include gl-rounded-lg;
......@@ -287,8 +342,8 @@
}
.badge.badge-pill {
@include gl-font-weight-normal; // TODO: update in `theme_indigo.scss`
color: $blue-700; // TODO: update in `theme_indigo.scss`
@include gl-font-weight-normal; // TODO: update in `theme_helper.scss`
color: $blue-700; // TODO: update in `theme_helper.scss`
}
}
}
......@@ -325,7 +380,7 @@
.close-nav-button {
@include side-panel-toggle;
background-color: $gray-50;
color: $purple-900;
color: $top-level-item-color;
.collapse-text,
.icon-chevron-double-lg-left,
......
app/assets/stylesheets/framework/variables.scss
View file @ ed9637b2
......@@ -573,6 +573,9 @@ $inactive-badge-background: rgba($black, 0.08);
$sidebar-toggle-height: 60px;
$sidebar-toggle-width: 40px;
$sidebar-milestone-toggle-bottom-margin: 10px;
$sidebar-avatar-size: 32px;
$sidebar-top-item-lr-margin: 4px;
$sidebar-top-item-tb-margin: 1px;
/*
* Buttons
......
app/assets/stylesheets/performance_bar.scss
View file @ ed9637b2
......@@ -128,6 +128,6 @@
color: $black;
}
.with-performance-bar .nav-sidebar {
html.with-performance-bar .nav-sidebar {
top: $header-height + $performance-bar-height;
}
app/views/layouts/nav/sidebar/_admin.html.haml
View file @ ed9637b2
......@@ -2,8 +2,8 @@
.nav-sidebar-inner-scroll
.context-header
= link_to admin_root_path, title: _('Admin Overview') do
%span.avatar-container.s40.settings-avatar
= sprite_icon('admin', size: 24)
%span.avatar-container.rect-avatar.s32.settings-avatar
= sprite_icon('admin', size: 18)
%span.sidebar-context-title
= _('Admin Area')
%ul.sidebar-top-level-items{ data: { qa_selector: 'admin_sidebar_overview_submenu_content' } }
......
app/views/layouts/nav/sidebar/_context_menu_body.html.haml
View file @ ed9637b2
= link_to group_path(@group), title: @group.name do
%span.avatar-container.rect-avatar.s40.group-avatar
= group_icon(@group, class: "avatar s40 avatar-tile")
%span.avatar-container.rect-avatar.s32.group-avatar
= group_icon(@group, class: "avatar s32 avatar-tile")
%span.sidebar-context-title
= @group.name
app/views/layouts/nav/sidebar/_profile.html.haml
View file @ ed9637b2
......@@ -2,8 +2,8 @@
.nav-sidebar-inner-scroll
.context-header
= link_to profile_path, title: _('Profile Settings') do
%span.avatar-container.s40.settings-avatar
= image_tag avatar_icon_for_user(current_user, 40), class: "avatar s40 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
%span.avatar-container.s32.settings-avatar
= image_tag avatar_icon_for_user(current_user, 32), class: "avatar s32 avatar-tile js-sidebar-user-avatar", alt: current_user.name, data: { testid: 'sidebar-user-avatar' }
%span.sidebar-context-title= _('User Settings')
%ul.sidebar-top-level-items
= nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
......
app/views/shared/nav/_scope_menu_body.html.haml
View file @ ed9637b2
= link_to scope_menu.link, **scope_menu.container_html_options do
%span.avatar-container.rect-avatar.s40.project-avatar
= source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s40 avatar-tile', width: 40, height: 40)
%span.avatar-container.rect-avatar.s32.project-avatar
= source_icon(scope_menu.container, alt: scope_menu.title, class: 'avatar s32 avatar-tile', width: 32, height: 32)
%span.sidebar-context-title
= scope_menu.title
ee/app/views/layouts/nav/sidebar/_security.html.haml
View file @ ed9637b2
......@@ -2,7 +2,7 @@
.nav-sidebar-inner-scroll
.context-header
= link_to security_dashboard_path, title: _('Security Dashboard'), id: 'logo' do
%span.avatar-container.s40.settings-avatar.rect-avatar
%span.avatar-container.s32.settings-avatar.rect-avatar
= brand_header_logo
%span.sidebar-context-title
= _('Security')
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7