Skip to content

G
gitlab-ce
Commit 323f980c authored by Denys Mishunov's avatar Denys Mishunov Committed by David O'Regan
Browse files
Options

Style flyout menu 

Style the new flyout
menu which encapsulates
the sidebar re-design
effort.
parent 982a234e
Show whitespace changes
Inline Side-by-side
Showing with 769 additions and 109 deletions
app/assets/javascripts/fly_out_nav.js
View file @ 323f980c
import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar'; import { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar';
const isRefactoring = document.body.classList.contains('sidebar-refactoring');
const HIDE_INTERVAL_TIMEOUT = 300; const HIDE_INTERVAL_TIMEOUT = 300;
const COLLAPSED_PANEL_WIDTH = isRefactoring ? 48 : 50;
const IS_OVER_CLASS = 'is-over'; const IS_OVER_CLASS = 'is-over';
const IS_ABOVE_CLASS = 'is-above'; const IS_ABOVE_CLASS = 'is-above';
const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out'; const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
...@@ -22,12 +24,7 @@ export const setOpenMenu = (menu = null) => { ...@@ -22,12 +24,7 @@ export const setOpenMenu = (menu = null) => {
export const slope = (a, b) => (b.y - a.y) / (b.x - a.x); export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
let headerHeight = 50; export const getHeaderHeight = () => sidebar?.offsetTop || 0;
export const getHeaderHeight = () => headerHeight;
const setHeaderHeight = () => {
headerHeight = sidebar.offsetTop;
};
export const isSidebarCollapsed = () => export const isSidebarCollapsed = () =>
sidebar && sidebar.classList.contains(SIDEBAR_COLLAPSED_CLASS); sidebar && sidebar.classList.contains(SIDEBAR_COLLAPSED_CLASS);
...@@ -87,14 +84,20 @@ export const hideMenu = (el) => { ...@@ -87,14 +84,20 @@ export const hideMenu = (el) => {
}; };
export const moveSubItemsToPosition = (el, subItems) => { export const moveSubItemsToPosition = (el, subItems) => {
const hasSubItems = subItems.parentNode.querySelector('.has-sub-items');
const header = subItems.querySelector('.fly-out-top-item');
const boundingRect = el.getBoundingClientRect(); const boundingRect = el.getBoundingClientRect();
const top = calculateTop(boundingRect, subItems.offsetHeight); const left = sidebar ? sidebar.offsetWidth : COLLAPSED_PANEL_WIDTH;
const left = sidebar ? sidebar.offsetWidth : 50; let top = calculateTop(boundingRect, subItems.offsetHeight);
if (isRefactoring && hasSubItems) {
top -= header.offsetHeight;
} else if (isRefactoring) {
top = boundingRect.top;
}
const isAbove = top < boundingRect.top; const isAbove = top < boundingRect.top;
subItems.classList.add('fly-out-list'); subItems.classList.add('fly-out-list');
subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - headerHeight}px, 0)`; // eslint-disable-line no-param-reassign subItems.style.transform = `translate3d(${left}px, ${Math.floor(top) - getHeaderHeight()}px, 0)`; // eslint-disable-line no-param-reassign
const subItemsRect = subItems.getBoundingClientRect(); const subItemsRect = subItems.getBoundingClientRect();
menuCornerLocs = [ menuCornerLocs = [
...@@ -188,8 +191,6 @@ export default () => { ...@@ -188,8 +191,6 @@ export default () => {
}); });
} }
requestIdleCallback(setHeaderHeight);
items.forEach((el) => { items.forEach((el) => {
const subItems = el.querySelector('.sidebar-sub-level-items'); const subItems = el.querySelector('.sidebar-sub-level-items');
......
app/assets/stylesheets/framework/contextual_sidebar_refactoring/contextual_sidebar_variant.scss
View file @ 323f980c
...@@ -22,7 +22,7 @@ $top-level-item-color: $purple-900; ...@@ -22,7 +22,7 @@ $top-level-item-color: $purple-900;
color: $gray-darkest; color: $gray-darkest;
} }
&.ui-indigo .nav-sidebar li.active > a { &.ui-indigo .nav-sidebar li.active:not(.fly-out-top-item) > a {
color: $top-level-item-color; color: $top-level-item-color;
} }
...@@ -99,15 +99,15 @@ $top-level-item-color: $purple-900; ...@@ -99,15 +99,15 @@ $top-level-item-color: $purple-900;
min-height: unset; min-height: unset;
} }
.fly-out-top-item { .fly-out-top-item:not(.divider) {
display: block; display: block !important;
} }
.avatar-container { .avatar-container {
margin: 0 auto; margin: 0 auto;
} }
li.active > a { li.active:not(.fly-out-top-item) > a {
background-color: $indigo-900-alpha-008; background-color: $indigo-900-alpha-008;
} }
} }
...@@ -115,40 +115,41 @@ $top-level-item-color: $purple-900; ...@@ -115,40 +115,41 @@ $top-level-item-color: $purple-900;
@mixin sub-level-items-flyout { @mixin sub-level-items-flyout {
.sidebar-sub-level-items { .sidebar-sub-level-items {
@include media-breakpoint-up(sm) { @include media-breakpoint-up(sm) {
position: fixed; @include gl-fixed;
top: 0; @include gl-top-0;
left: 0; @include gl-left-0;
@include gl-ml-3;
@include gl-mt-0;
@include gl-px-0;
@include gl-pb-2;
@include gl-pt-0;
min-width: 150px; min-width: 150px;
margin-top: -1px; background-color: $gray-10;
padding: 4px 1px; box-shadow: 0 $gl-spacing-scale-2 $gl-spacing-scale-5 $t-gray-a-24, 0 0 $gl-spacing-scale-1 $t-gray-a-24;
background-color: $white; border-style: none;
box-shadow: 2px 1px 3px $dropdown-shadow-color; border-radius: $border-radius-default;
border: 1px solid $gray-darker;
border-left: 0;
border-radius: 0 3px 3px 0;
&::before { .divider {
content: ''; @include gl-display-none;
position: absolute;
top: -30px;
bottom: -30px;
left: -10px;
right: -30px;
z-index: -1;
} }
&.is-above { .divider + li > a {
margin-top: 1px; @include gl-mt-2;
} }
.divider { li:last-of-type a {
height: 1px; @include gl-mb-0;
margin: 4px -1px; }
padding: 0;
background-color: $dropdown-divider-bg; &.is-above {
@include gl-mt-0;
} }
} }
a {
@include gl-px-4;
}
.fly-out-top-item { .fly-out-top-item {
> a { > a {
display: flex; display: flex;
...@@ -200,6 +201,8 @@ $top-level-item-color: $purple-900; ...@@ -200,6 +201,8 @@ $top-level-item-color: $purple-900;
@include gl-align-items-center; @include gl-align-items-center;
@include gl-rounded-base; @include gl-rounded-base;
@include gl-w-auto; @include gl-w-auto;
@include gl-line-height-normal;
transition: none;
margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin; margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
&:hover { &:hover {
...@@ -207,6 +210,52 @@ $top-level-item-color: $purple-900; ...@@ -207,6 +210,52 @@ $top-level-item-color: $purple-900;
} }
} }
@mixin fly-out-top-item($has-sub-items: false) {
@include gl-display-none;
a,
a:hover,
&.active a,
.fly-out-top-item-container {
@include gl-mx-0;
@include gl-px-5;
@include gl-cursor-default;
@include gl-pointer-events-none;
@include gl-font-sm;
background-color: $purple-900;
color: $white;
@if $has-sub-items {
@include gl-mt-n2;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
} @else {
@include gl-my-n2;
@include gl-mt-0;
@include gl-relative;
background-color: $black;
strong {
@include gl-font-weight-normal;
}
&::before {
@include gl-absolute;
content: '';
display: block;
top: 50%;
left: $gl-spacing-scale-3/-2;
margin-top: -$gl-spacing-scale-3;
width: 0;
height: 0;
border-top: $gl-spacing-scale-3 solid transparent;
border-bottom: $gl-spacing-scale-3 solid transparent;
border-right: $gl-spacing-scale-3 solid $black;
}
}
}
}
// //
// PAGE-LAYOUT // PAGE-LAYOUT
// //
...@@ -258,7 +307,6 @@ $top-level-item-color: $purple-900; ...@@ -258,7 +307,6 @@ $top-level-item-color: $purple-900;
a { a {
@include gl-text-decoration-none; @include gl-text-decoration-none;
@include gl-line-height-normal;
color: $top-level-item-color; color: $top-level-item-color;
} }
...@@ -269,7 +317,8 @@ $top-level-item-color: $purple-900; ...@@ -269,7 +317,8 @@ $top-level-item-color: $purple-900;
flex: 1; flex: 1;
} }
> a { > a,
> .fly-out-top-item-container {
@include top-level-item; @include top-level-item;
} }
...@@ -278,11 +327,13 @@ $top-level-item-color: $purple-900; ...@@ -278,11 +327,13 @@ $top-level-item-color: $purple-900;
font-weight: $gl-font-weight-bold; font-weight: $gl-font-weight-bold;
} }
&:not(.fly-out-top-item) {
> a:not(.has-sub-items) { > a:not(.has-sub-items) {
background-color: $indigo-900-alpha-008; background-color: $indigo-900-alpha-008;
} }
} }
} }
}
ul { ul {
padding-left: 0; padding-left: 0;
...@@ -298,8 +349,16 @@ $top-level-item-color: $purple-900; ...@@ -298,8 +349,16 @@ $top-level-item-color: $purple-900;
margin-right: 8px; margin-right: 8px;
} }
a:not(.has-sub-items) + .sidebar-sub-level-items {
.fly-out-top-item { .fly-out-top-item {
display: none; @include fly-out-top-item($has-sub-items: false);
}
}
a.has-sub-items + .sidebar-sub-level-items {
.fly-out-top-item {
@include fly-out-top-item($has-sub-items: true);
}
} }
@media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) { @media (min-width: map-get($grid-breakpoints, md)) and (max-width: map-get($grid-breakpoints, xl) - 1px) {
...@@ -356,8 +415,8 @@ $top-level-item-color: $purple-900; ...@@ -356,8 +415,8 @@ $top-level-item-color: $purple-900;
} }
.sidebar-sub-level-items { .sidebar-sub-level-items {
@include gl-pb-0; @include gl-py-0;
display: none; @include gl-display-none;
&:not(.fly-out-list) { &:not(.fly-out-list) {
li > a { li > a {
......
app/assets/stylesheets/startup/startup-dark.scss
View file @ 323f980c
...@@ -1251,7 +1251,10 @@ body.sidebar-refactoring.gl-dark ...@@ -1251,7 +1251,10 @@ body.sidebar-refactoring.gl-dark
.sidebar-context-title { .sidebar-context-title {
color: #c4c4c4; color: #c4c4c4;
} }
body.sidebar-refactoring.ui-indigo .nav-sidebar li.active > a { body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
> a {
color: #2f2a6b; color: #2f2a6b;
} }
body.sidebar-refactoring.ui-indigo body.sidebar-refactoring.ui-indigo
...@@ -1325,20 +1328,22 @@ body.sidebar-refactoring ...@@ -1325,20 +1328,22 @@ body.sidebar-refactoring
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item { .fly-out-top-item:not(.divider) {
display: block; display: block !important;
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar.sidebar-collapsed-desktop
.avatar-container { .avatar-container {
margin: 0 auto; margin: 0 auto;
} }
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop li.active > a { body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
body.sidebar-refactoring .nav-sidebar a { body.sidebar-refactoring .nav-sidebar a {
text-decoration: none; text-decoration: none;
line-height: 1rem;
color: #2f2a6b; color: #2f2a6b;
} }
body.sidebar-refactoring .nav-sidebar li { body.sidebar-refactoring .nav-sidebar li {
...@@ -1347,7 +1352,8 @@ body.sidebar-refactoring .nav-sidebar li { ...@@ -1347,7 +1352,8 @@ body.sidebar-refactoring .nav-sidebar li {
body.sidebar-refactoring .nav-sidebar li .nav-item-name { body.sidebar-refactoring .nav-sidebar li .nav-item-name {
flex: 1; flex: 1;
} }
body.sidebar-refactoring .nav-sidebar li > a { body.sidebar-refactoring .nav-sidebar li > a,
body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
padding-top: 0.5rem; padding-top: 0.5rem;
...@@ -1356,12 +1362,16 @@ body.sidebar-refactoring .nav-sidebar li > a { ...@@ -1356,12 +1362,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
align-items: center; align-items: center;
border-radius: 0.25rem; border-radius: 0.25rem;
width: auto; width: auto;
line-height: 1rem;
margin: 1px 4px; margin: 1px 4px;
} }
body.sidebar-refactoring .nav-sidebar li.active > a { body.sidebar-refactoring .nav-sidebar li.active > a {
font-weight: 600; font-weight: 600;
} }
body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) { body.sidebar-refactoring
.nav-sidebar
li.active:not(.fly-out-top-item)
> a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
body.sidebar-refactoring .nav-sidebar ul { body.sidebar-refactoring .nav-sidebar ul {
...@@ -1377,9 +1387,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container { ...@@ -1377,9 +1387,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
display: flex; display: flex;
margin-right: 8px; margin-right: 8px;
} }
body.sidebar-refactoring .nav-sidebar .fly-out-top-item { body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-left: 0;
margin-right: 0;
padding-left: 1rem;
padding-right: 1rem;
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
margin-top: -0.25rem;
margin-bottom: -0.25rem;
margin-top: 0;
position: relative;
background-color: #fff;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a
strong,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a
strong,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container
strong {
font-weight: 400;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container::before {
position: absolute;
content: "";
display: block;
top: 50%;
left: -0.25rem;
margin-top: -0.5rem;
width: 0;
height: 0;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.5rem solid #fff;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none; display: none;
} }
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-left: 0;
margin-right: 0;
padding-left: 1rem;
padding-right: 1rem;
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
margin-top: -0.25rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 768px) and (max-width: 1199px) { @media (min-width: 768px) and (max-width: 1199px) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px; width: 48px;
...@@ -1417,8 +1555,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item { ...@@ -1417,8 +1555,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item { .fly-out-top-item:not(.divider) {
display: block; display: block !important;
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
...@@ -1427,7 +1565,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item { ...@@ -1427,7 +1565,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
li.active li.active:not(.fly-out-top-item)
> a { > a {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
...@@ -1516,6 +1654,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { ...@@ -1516,6 +1654,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
align-items: center; align-items: center;
border-radius: 0.25rem; border-radius: 0.25rem;
width: auto; width: auto;
line-height: 1rem;
margin: 1px 4px; margin: 1px 4px;
padding: 0.25rem; padding: 0.25rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
...@@ -1617,6 +1756,7 @@ body.sidebar-refactoring ...@@ -1617,6 +1756,7 @@ body.sidebar-refactoring
color: #9dc7f1; color: #9dc7f1;
} }
body.sidebar-refactoring .sidebar-sub-level-items { body.sidebar-refactoring .sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
display: none; display: none;
} }
......
app/assets/stylesheets/startup/startup-general.scss
View file @ 323f980c
...@@ -1213,7 +1213,10 @@ input { ...@@ -1213,7 +1213,10 @@ input {
display: none; display: none;
} }
} }
body.sidebar-refactoring.ui-indigo .nav-sidebar li.active > a { body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
> a {
color: #2f2a6b; color: #2f2a6b;
} }
body.sidebar-refactoring.ui-indigo body.sidebar-refactoring.ui-indigo
...@@ -1287,20 +1290,22 @@ body.sidebar-refactoring ...@@ -1287,20 +1290,22 @@ body.sidebar-refactoring
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item { .fly-out-top-item:not(.divider) {
display: block; display: block !important;
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar.sidebar-collapsed-desktop
.avatar-container { .avatar-container {
margin: 0 auto; margin: 0 auto;
} }
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop li.active > a { body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
body.sidebar-refactoring .nav-sidebar a { body.sidebar-refactoring .nav-sidebar a {
text-decoration: none; text-decoration: none;
line-height: 1rem;
color: #2f2a6b; color: #2f2a6b;
} }
body.sidebar-refactoring .nav-sidebar li { body.sidebar-refactoring .nav-sidebar li {
...@@ -1309,7 +1314,8 @@ body.sidebar-refactoring .nav-sidebar li { ...@@ -1309,7 +1314,8 @@ body.sidebar-refactoring .nav-sidebar li {
body.sidebar-refactoring .nav-sidebar li .nav-item-name { body.sidebar-refactoring .nav-sidebar li .nav-item-name {
flex: 1; flex: 1;
} }
body.sidebar-refactoring .nav-sidebar li > a { body.sidebar-refactoring .nav-sidebar li > a,
body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
padding-top: 0.5rem; padding-top: 0.5rem;
...@@ -1318,12 +1324,16 @@ body.sidebar-refactoring .nav-sidebar li > a { ...@@ -1318,12 +1324,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
align-items: center; align-items: center;
border-radius: 0.25rem; border-radius: 0.25rem;
width: auto; width: auto;
line-height: 1rem;
margin: 1px 4px; margin: 1px 4px;
} }
body.sidebar-refactoring .nav-sidebar li.active > a { body.sidebar-refactoring .nav-sidebar li.active > a {
font-weight: 600; font-weight: 600;
} }
body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) { body.sidebar-refactoring
.nav-sidebar
li.active:not(.fly-out-top-item)
> a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
body.sidebar-refactoring .nav-sidebar ul { body.sidebar-refactoring .nav-sidebar ul {
...@@ -1339,9 +1349,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container { ...@@ -1339,9 +1349,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
display: flex; display: flex;
margin-right: 8px; margin-right: 8px;
} }
body.sidebar-refactoring .nav-sidebar .fly-out-top-item { body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-left: 0;
margin-right: 0;
padding-left: 1rem;
padding-right: 1rem;
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
margin-top: -0.25rem;
margin-bottom: -0.25rem;
margin-top: 0;
position: relative;
background-color: #000;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a
strong,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a
strong,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container
strong {
font-weight: 400;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container::before {
position: absolute;
content: "";
display: block;
top: 50%;
left: -0.25rem;
margin-top: -0.5rem;
width: 0;
height: 0;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.5rem solid #000;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none; display: none;
} }
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-left: 0;
margin-right: 0;
padding-left: 1rem;
padding-right: 1rem;
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
margin-top: -0.25rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 768px) and (max-width: 1199px) { @media (min-width: 768px) and (max-width: 1199px) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px; width: 48px;
...@@ -1379,8 +1517,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item { ...@@ -1379,8 +1517,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item { .fly-out-top-item:not(.divider) {
display: block; display: block !important;
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
...@@ -1389,7 +1527,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item { ...@@ -1389,7 +1527,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
li.active li.active:not(.fly-out-top-item)
> a { > a {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
...@@ -1478,6 +1616,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { ...@@ -1478,6 +1616,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
align-items: center; align-items: center;
border-radius: 0.25rem; border-radius: 0.25rem;
width: auto; width: auto;
line-height: 1rem;
margin: 1px 4px; margin: 1px 4px;
padding: 0.25rem; padding: 0.25rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
...@@ -1579,6 +1718,7 @@ body.sidebar-refactoring ...@@ -1579,6 +1718,7 @@ body.sidebar-refactoring
color: #0b5cad; color: #0b5cad;
} }
body.sidebar-refactoring .sidebar-sub-level-items { body.sidebar-refactoring .sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
display: none; display: none;
} }
......
app/views/groups/sidebar/_packages.html.haml
View file @ 323f980c
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
- if group_packages_nav? - if group_packages_nav?
= nav_link(controller: ['groups/packages', 'groups/registry/repositories', 'groups/dependency_proxies']) do = nav_link(controller: ['groups/packages', 'groups/registry/repositories', 'groups/dependency_proxies']) do
= link_to packages_link, title: _('Packages') do = link_to packages_link, title: _('Packages'), class: 'has-sub-items' do
.nav-icon-container .nav-icon-container
= sprite_icon('package') = sprite_icon('package')
%span.nav-item-name %span.nav-item-name
......
app/views/layouts/nav/sidebar/_admin.html.haml
View file @ 323f980c
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
= _('Admin Area') = _('Admin Area')
%ul.sidebar-top-level-items{ data: { qa_selector: 'admin_sidebar_overview_submenu_content' } } %ul.sidebar-top-level-items{ data: { qa_selector: 'admin_sidebar_overview_submenu_content' } }
= nav_link(controller: %w(dashboard admin admin/projects users groups jobs runners gitaly_servers), html_options: {class: 'home'}) do = nav_link(controller: %w(dashboard admin admin/projects users groups jobs runners gitaly_servers), html_options: {class: 'home'}) do
= link_to admin_root_path do = link_to admin_root_path, class: 'has-sub-items' do
.nav-icon-container .nav-icon-container
= sprite_icon('overview') = sprite_icon('overview')
%span.nav-item-name %span.nav-item-name
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
= _('Gitaly Servers') = _('Gitaly Servers')
= nav_link(controller: admin_analytics_nav_links) do = nav_link(controller: admin_analytics_nav_links) do
= link_to admin_dev_ops_report_path, data: { qa_selector: 'admin_analytics_link' } do = link_to admin_dev_ops_report_path, data: { qa_selector: 'admin_analytics_link' }, class: 'has-sub-items' do
.nav-icon-container .nav-icon-container
= sprite_icon('chart') = sprite_icon('chart')
%span.nav-item-name %span.nav-item-name
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
= _('Usage Trends') = _('Usage Trends')
= nav_link(controller: admin_monitoring_nav_links) do = nav_link(controller: admin_monitoring_nav_links) do
= link_to admin_system_info_path, data: { qa_selector: 'admin_monitoring_link' } do = link_to admin_system_info_path, data: { qa_selector: 'admin_monitoring_link' }, class: 'has-sub-items' do
.nav-icon-container .nav-icon-container
= sprite_icon('monitor') = sprite_icon('monitor')
%span.nav-item-name %span.nav-item-name
...@@ -247,7 +247,7 @@ ...@@ -247,7 +247,7 @@
= _('Appearance') = _('Appearance')
= nav_link(controller: [:application_settings, :integrations]) do = nav_link(controller: [:application_settings, :integrations]) do
= link_to general_admin_application_settings_path do = link_to general_admin_application_settings_path, class: 'has-sub-items' do
.nav-icon-container .nav-icon-container
= sprite_icon('settings') = sprite_icon('settings')
%span.nav-item-name.qa-admin-settings-item %span.nav-item-name.qa-admin-settings-item
......
app/views/layouts/nav/sidebar/_analytics_links.html.haml
View file @ 323f980c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
- if navbar_links.any? - if navbar_links.any?
= nav_link(path: all_paths) do = nav_link(path: all_paths) do
= link_to analytics_link.link, {class: 'shortcuts-analytics', data: { qa_selector: 'analytics_anchor' } } do = link_to analytics_link.link, {class: 'shortcuts-analytics has-sub-items', data: { qa_selector: 'analytics_anchor' } } do
.nav-icon-container .nav-icon-container
= sprite_icon('chart') = sprite_icon('chart')
%span.nav-item-name{ data: { qa_selector: 'analytics_link' } } %span.nav-item-name{ data: { qa_selector: 'analytics_link' } }
......
app/views/layouts/nav/sidebar/_group.html.haml
View file @ 323f980c
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
- paths = group_overview_nav_link_paths - paths = group_overview_nav_link_paths
= nav_link(path: paths, unless: -> { current_path?('groups/contribution_analytics#show') }, html_options: { class: 'home' }) do = nav_link(path: paths, unless: -> { current_path?('groups/contribution_analytics#show') }, html_options: { class: 'home' }) do
- information_link = sidebar_refactor_enabled? ? activity_group_path(@group) : group_path(@group) - information_link = sidebar_refactor_enabled? ? activity_group_path(@group) : group_path(@group)
= link_to information_link do = link_to information_link, class: 'has-sub-items' do
.nav-icon-container .nav-icon-container
- sprite = sidebar_refactor_enabled? ? 'group' : 'home' - sprite = sidebar_refactor_enabled? ? 'group' : 'home'
= sprite_icon(sprite) = sprite_icon(sprite)
...@@ -62,7 +62,7 @@ ...@@ -62,7 +62,7 @@
- if group_sidebar_link?(:issues) - if group_sidebar_link?(:issues)
= nav_link(path: group_issues_sub_menu_items, unless: -> { current_path?('issues_analytics#show') }) do = nav_link(path: group_issues_sub_menu_items, unless: -> { current_path?('issues_analytics#show') }) do
= link_to issues_group_path(@group), data: { qa_selector: 'group_issues_item' } do = link_to issues_group_path(@group), data: { qa_selector: 'group_issues_item' }, class: 'has-sub-items' do
.nav-icon-container .nav-icon-container
= sprite_icon('issues') = sprite_icon('issues')
%span.nav-item-name %span.nav-item-name
...@@ -157,7 +157,7 @@ ...@@ -157,7 +157,7 @@
- if group_sidebar_link?(:settings) - if group_sidebar_link?(:settings)
= nav_link(path: group_settings_nav_link_paths) do = nav_link(path: group_settings_nav_link_paths) do
= link_to edit_group_path(@group) do = link_to edit_group_path(@group), class: 'has-sub-items' do
.nav-icon-container .nav-icon-container
= sprite_icon('settings') = sprite_icon('settings')
%span.nav-item-name{ data: { qa_selector: 'group_settings' } } %span.nav-item-name{ data: { qa_selector: 'group_settings' } }
......
app/views/shared/nav/_sidebar_menu.html.haml
View file @ 323f980c
...@@ -16,11 +16,12 @@ ...@@ -16,11 +16,12 @@
%ul.sidebar-sub-level-items{ class: ('is-fly-out-only' unless sidebar_menu.has_renderable_items?) } %ul.sidebar-sub-level-items{ class: ('is-fly-out-only' unless sidebar_menu.has_renderable_items?) }
= nav_link(**sidebar_menu.all_active_routes, html_options: { class: 'fly-out-top-item' } ) do = nav_link(**sidebar_menu.all_active_routes, html_options: { class: 'fly-out-top-item' } ) do
- if sidebar_refactor_disabled? - if sidebar_refactor_disabled?
= link_to sidebar_menu.link, **sidebar_menu.collapsed_container_html_options do = link_to sidebar_menu.link, class: "'has-sub-items' if sidebar_menu.has_renderable_items?", **sidebar_menu.collapsed_container_html_options do
= render 'shared/nav/sidebar_menu_collapsed', sidebar_menu: sidebar_menu = render 'shared/nav/sidebar_menu_collapsed', sidebar_menu: sidebar_menu
- else - else
%span.fly-out-top-item-container
= render 'shared/nav/sidebar_menu_collapsed', sidebar_menu: sidebar_menu = render 'shared/nav/sidebar_menu_collapsed', sidebar_menu: sidebar_menu
- if sidebar_menu.has_items? - if sidebar_menu.has_renderable_items?
%li.divider.fly-out-top-item %li.divider.fly-out-top-item
= render partial: 'shared/nav/sidebar_menu_item', collection: sidebar_menu.renderable_items = render partial: 'shared/nav/sidebar_menu_item', collection: sidebar_menu.renderable_items
ee/app/assets/stylesheets/startup/startup-dark.scss
View file @ 323f980c
...@@ -1251,7 +1251,10 @@ body.sidebar-refactoring.gl-dark ...@@ -1251,7 +1251,10 @@ body.sidebar-refactoring.gl-dark
.sidebar-context-title { .sidebar-context-title {
color: #c4c4c4; color: #c4c4c4;
} }
body.sidebar-refactoring.ui-indigo .nav-sidebar li.active > a { body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
> a {
color: #2f2a6b; color: #2f2a6b;
} }
body.sidebar-refactoring.ui-indigo body.sidebar-refactoring.ui-indigo
...@@ -1325,20 +1328,22 @@ body.sidebar-refactoring ...@@ -1325,20 +1328,22 @@ body.sidebar-refactoring
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item { .fly-out-top-item:not(.divider) {
display: block; display: block !important;
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar.sidebar-collapsed-desktop
.avatar-container { .avatar-container {
margin: 0 auto; margin: 0 auto;
} }
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop li.active > a { body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
body.sidebar-refactoring .nav-sidebar a { body.sidebar-refactoring .nav-sidebar a {
text-decoration: none; text-decoration: none;
line-height: 1rem;
color: #2f2a6b; color: #2f2a6b;
} }
body.sidebar-refactoring .nav-sidebar li { body.sidebar-refactoring .nav-sidebar li {
...@@ -1347,7 +1352,8 @@ body.sidebar-refactoring .nav-sidebar li { ...@@ -1347,7 +1352,8 @@ body.sidebar-refactoring .nav-sidebar li {
body.sidebar-refactoring .nav-sidebar li .nav-item-name { body.sidebar-refactoring .nav-sidebar li .nav-item-name {
flex: 1; flex: 1;
} }
body.sidebar-refactoring .nav-sidebar li > a { body.sidebar-refactoring .nav-sidebar li > a,
body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
padding-top: 0.5rem; padding-top: 0.5rem;
...@@ -1356,12 +1362,16 @@ body.sidebar-refactoring .nav-sidebar li > a { ...@@ -1356,12 +1362,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
align-items: center; align-items: center;
border-radius: 0.25rem; border-radius: 0.25rem;
width: auto; width: auto;
line-height: 1rem;
margin: 1px 4px; margin: 1px 4px;
} }
body.sidebar-refactoring .nav-sidebar li.active > a { body.sidebar-refactoring .nav-sidebar li.active > a {
font-weight: 600; font-weight: 600;
} }
body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) { body.sidebar-refactoring
.nav-sidebar
li.active:not(.fly-out-top-item)
> a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
body.sidebar-refactoring .nav-sidebar ul { body.sidebar-refactoring .nav-sidebar ul {
...@@ -1377,9 +1387,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container { ...@@ -1377,9 +1387,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
display: flex; display: flex;
margin-right: 8px; margin-right: 8px;
} }
body.sidebar-refactoring .nav-sidebar .fly-out-top-item { body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-left: 0;
margin-right: 0;
padding-left: 1rem;
padding-right: 1rem;
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
margin-top: -0.25rem;
margin-bottom: -0.25rem;
margin-top: 0;
position: relative;
background-color: #fff;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a
strong,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a
strong,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container
strong {
font-weight: 400;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container::before {
position: absolute;
content: "";
display: block;
top: 50%;
left: -0.25rem;
margin-top: -0.5rem;
width: 0;
height: 0;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.5rem solid #fff;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none; display: none;
} }
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-left: 0;
margin-right: 0;
padding-left: 1rem;
padding-right: 1rem;
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #333;
margin-top: -0.25rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 768px) and (max-width: 1199px) { @media (min-width: 768px) and (max-width: 1199px) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px; width: 48px;
...@@ -1417,8 +1555,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item { ...@@ -1417,8 +1555,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item { .fly-out-top-item:not(.divider) {
display: block; display: block !important;
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
...@@ -1427,7 +1565,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item { ...@@ -1427,7 +1565,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
li.active li.active:not(.fly-out-top-item)
> a { > a {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
...@@ -1516,6 +1654,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { ...@@ -1516,6 +1654,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
align-items: center; align-items: center;
border-radius: 0.25rem; border-radius: 0.25rem;
width: auto; width: auto;
line-height: 1rem;
margin: 1px 4px; margin: 1px 4px;
padding: 0.25rem; padding: 0.25rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
...@@ -1617,6 +1756,7 @@ body.sidebar-refactoring ...@@ -1617,6 +1756,7 @@ body.sidebar-refactoring
color: #9dc7f1; color: #9dc7f1;
} }
body.sidebar-refactoring .sidebar-sub-level-items { body.sidebar-refactoring .sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
display: none; display: none;
} }
......
ee/app/assets/stylesheets/startup/startup-general.scss
View file @ 323f980c
...@@ -1213,7 +1213,10 @@ input { ...@@ -1213,7 +1213,10 @@ input {
display: none; display: none;
} }
} }
body.sidebar-refactoring.ui-indigo .nav-sidebar li.active > a { body.sidebar-refactoring.ui-indigo
.nav-sidebar
li.active:not(.fly-out-top-item)
> a {
color: #2f2a6b; color: #2f2a6b;
} }
body.sidebar-refactoring.ui-indigo body.sidebar-refactoring.ui-indigo
...@@ -1287,20 +1290,22 @@ body.sidebar-refactoring ...@@ -1287,20 +1290,22 @@ body.sidebar-refactoring
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item { .fly-out-top-item:not(.divider) {
display: block; display: block !important;
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop .nav-sidebar.sidebar-collapsed-desktop
.avatar-container { .avatar-container {
margin: 0 auto; margin: 0 auto;
} }
body.sidebar-refactoring .nav-sidebar.sidebar-collapsed-desktop li.active > a { body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
body.sidebar-refactoring .nav-sidebar a { body.sidebar-refactoring .nav-sidebar a {
text-decoration: none; text-decoration: none;
line-height: 1rem;
color: #2f2a6b; color: #2f2a6b;
} }
body.sidebar-refactoring .nav-sidebar li { body.sidebar-refactoring .nav-sidebar li {
...@@ -1309,7 +1314,8 @@ body.sidebar-refactoring .nav-sidebar li { ...@@ -1309,7 +1314,8 @@ body.sidebar-refactoring .nav-sidebar li {
body.sidebar-refactoring .nav-sidebar li .nav-item-name { body.sidebar-refactoring .nav-sidebar li .nav-item-name {
flex: 1; flex: 1;
} }
body.sidebar-refactoring .nav-sidebar li > a { body.sidebar-refactoring .nav-sidebar li > a,
body.sidebar-refactoring .nav-sidebar li > .fly-out-top-item-container {
padding-left: 0.75rem; padding-left: 0.75rem;
padding-right: 0.75rem; padding-right: 0.75rem;
padding-top: 0.5rem; padding-top: 0.5rem;
...@@ -1318,12 +1324,16 @@ body.sidebar-refactoring .nav-sidebar li > a { ...@@ -1318,12 +1324,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
align-items: center; align-items: center;
border-radius: 0.25rem; border-radius: 0.25rem;
width: auto; width: auto;
line-height: 1rem;
margin: 1px 4px; margin: 1px 4px;
} }
body.sidebar-refactoring .nav-sidebar li.active > a { body.sidebar-refactoring .nav-sidebar li.active > a {
font-weight: 600; font-weight: 600;
} }
body.sidebar-refactoring .nav-sidebar li.active > a:not(.has-sub-items) { body.sidebar-refactoring
.nav-sidebar
li.active:not(.fly-out-top-item)
> a:not(.has-sub-items) {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
body.sidebar-refactoring .nav-sidebar ul { body.sidebar-refactoring .nav-sidebar ul {
...@@ -1339,9 +1349,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container { ...@@ -1339,9 +1349,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
display: flex; display: flex;
margin-right: 8px; margin-right: 8px;
} }
body.sidebar-refactoring .nav-sidebar .fly-out-top-item { body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-left: 0;
margin-right: 0;
padding-left: 1rem;
padding-right: 1rem;
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
margin-top: -0.25rem;
margin-bottom: -0.25rem;
margin-top: 0;
position: relative;
background-color: #000;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a
strong,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a
strong,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container
strong {
font-weight: 400;
}
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
a::before,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item.active
a::before,
body.sidebar-refactoring
.nav-sidebar
a:not(.has-sub-items)
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container::before {
position: absolute;
content: "";
display: block;
top: 50%;
left: -0.25rem;
margin-top: -0.5rem;
width: 0;
height: 0;
border-top: 0.5rem solid transparent;
border-bottom: 0.5rem solid transparent;
border-right: 0.5rem solid #000;
}
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item {
display: none; display: none;
} }
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
a,
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item.active
a,
body.sidebar-refactoring
.nav-sidebar
a.has-sub-items
+ .sidebar-sub-level-items
.fly-out-top-item
.fly-out-top-item-container {
margin-left: 0;
margin-right: 0;
padding-left: 1rem;
padding-right: 1rem;
cursor: default;
pointer-events: none;
font-size: 0.75rem;
background-color: #2f2a6b;
color: #fff;
margin-top: -0.25rem;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
@media (min-width: 768px) and (max-width: 1199px) { @media (min-width: 768px) and (max-width: 1199px) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) { body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px; width: 48px;
...@@ -1379,8 +1517,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item { ...@@ -1379,8 +1517,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item { .fly-out-top-item:not(.divider) {
display: block; display: block !important;
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
...@@ -1389,7 +1527,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item { ...@@ -1389,7 +1527,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
} }
body.sidebar-refactoring body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile) .nav-sidebar:not(.sidebar-expanded-mobile)
li.active li.active:not(.fly-out-top-item)
> a { > a {
background-color: rgba(41, 41, 97, 0.08); background-color: rgba(41, 41, 97, 0.08);
} }
...@@ -1478,6 +1616,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a { ...@@ -1478,6 +1616,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
align-items: center; align-items: center;
border-radius: 0.25rem; border-radius: 0.25rem;
width: auto; width: auto;
line-height: 1rem;
margin: 1px 4px; margin: 1px 4px;
padding: 0.25rem; padding: 0.25rem;
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
...@@ -1579,6 +1718,7 @@ body.sidebar-refactoring ...@@ -1579,6 +1718,7 @@ body.sidebar-refactoring
color: #0b5cad; color: #0b5cad;
} }
body.sidebar-refactoring .sidebar-sub-level-items { body.sidebar-refactoring .sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
display: none; display: none;
} }
......
ee/app/views/groups/sidebar/_packages.html.haml
View file @ 323f980c
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
- if group_packages_nav? - if group_packages_nav?
= nav_link(controller: ['groups/packages', 'groups/registry/repositories', 'groups/dependency_proxies']) do = nav_link(controller: ['groups/packages', 'groups/registry/repositories', 'groups/dependency_proxies']) do
= link_to packages_link, title: _('Packages'), data: { qa_selector: 'group_packages_item' } do = link_to packages_link, title: _('Packages'), data: { qa_selector: 'group_packages_item' }, class: 'has-sub-items' do
.nav-icon-container .nav-icon-container
= sprite_icon('package') = sprite_icon('package')
%span.nav-item-name %span.nav-item-name
......
ee/app/views/layouts/nav/ee/_epic_link.html.haml
View file @ 323f980c
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
- epics_items = ['epics#show', 'epics#index', 'epic_boards#index', 'epic_boards#show', 'roadmap#show'] - epics_items = ['epics#show', 'epics#index', 'epic_boards#index', 'epic_boards#show', 'roadmap#show']
= nav_link(path: epics_items) do = nav_link(path: epics_items) do
= link_to group_epics_path(group), class: 'qa-group-epics-link' do = link_to group_epics_path(group), class: 'qa-group-epics-link has-sub-items' do
.nav-icon-container .nav-icon-container
= sprite_icon('epic') = sprite_icon('epic')
%span.nav-item-name %span.nav-item-name
......
ee/app/views/layouts/nav/ee/_security_link.html.haml
View file @ 323f980c
- main_path = primary_group_level_security_feature_path(@group) - main_path = primary_group_level_security_feature_path(@group)
- if main_path.present? - if main_path.present?
= nav_link(path: %w[dashboard#show vulnerabilities#index compliance_dashboards#show credentials#index audit_events#index]) do = nav_link(path: %w[dashboard#show vulnerabilities#index compliance_dashboards#show credentials#index audit_events#index]) do
= link_to main_path, data: { qa_selector: 'security_compliance_link' } do = link_to main_path, data: { qa_selector: 'security_compliance_link' }, class: 'has-sub-items' do
.nav-icon-container .nav-icon-container
= sprite_icon('shield') = sprite_icon('shield')
%span.nav-item-name %span.nav-item-name
= _('Security & Compliance') = _('Security & Compliance')
%ul.sidebar-sub-level-items{ data: { qa_selector: 'group_secure_submenu' } } %ul.sidebar-sub-level-items{ data: { qa_selector: 'group_secure_submenu' } }
= nav_link(path: %w[dashboard#show vulnerabilities#index compliance_dashboards#show credentials#index audit_events#index], html_options: { class: "fly-out-top-item" } ) do
%span.fly-out-top-item-container
%strong.fly-out-top-item-name
= _('Security & Compliance')
%li.divider.fly-out-top-item
- if group_level_security_dashboard_available?(@group) - if group_level_security_dashboard_available?(@group)
= nav_link(path: 'dashboard#show') do = nav_link(path: 'dashboard#show') do
= link_to group_security_dashboard_path(@group), title: _('Security Dashboard'), data: { qa_selector: 'security_dashboard_link' } do = link_to group_security_dashboard_path(@group), title: _('Security Dashboard'), data: { qa_selector: 'security_dashboard_link' } do
......
ee/app/views/layouts/nav/ee/admin/_geo_sidebar.html.haml
View file @ 323f980c
= nav_link(controller: %w(admin/geo/nodes admin/geo/projects admin/geo/uploads admin/geo/settings admin/geo/designs admin/geo/replicables)) do = nav_link(controller: %w(admin/geo/nodes admin/geo/projects admin/geo/uploads admin/geo/settings admin/geo/designs admin/geo/replicables)) do
= link_to admin_geo_nodes_path, class: "qa-link-geo-menu" do = link_to admin_geo_nodes_path, class: "qa-link-geo-menu has-sub-items" do
.nav-icon-container .nav-icon-container
= sprite_icon('location-dot') = sprite_icon('location-dot')
%span.nav-item-name %span.nav-item-name
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
= link_to admin_geo_nodes_path do = link_to admin_geo_nodes_path do
%strong.fly-out-top-item-name %strong.fly-out-top-item-name
#{ _('Geo') } #{ _('Geo') }
%li.divider.fly-out-top-item
= nav_link(path: 'admin/geo/nodes#index') do = nav_link(path: 'admin/geo/nodes#index') do
= link_to admin_geo_nodes_path, title: _('Nodes') do = link_to admin_geo_nodes_path, title: _('Nodes') do
%span %span
......
ee/app/views/layouts/nav/sidebar/_security.html.haml
View file @ 323f980c
...@@ -17,17 +17,49 @@ ...@@ -17,17 +17,49 @@
= sprite_icon('dashboard') = sprite_icon('dashboard')
%span.nav-item-name %span.nav-item-name
= _('Security Dashboard') = _('Security Dashboard')
%ul.sidebar-sub-level-items.is-fly-out-only
= nav_link(path: %w[dashboard#show], html_options: { class: "fly-out-top-item" } ) do
- if sidebar_refactor_disabled?
= link_to security_dashboard_path do
%strong.fly-out-top-item-name
= _('Security Dashboard')
- else
%span.fly-out-top-item-container
%strong.fly-out-top-item-name
= _('Security Dashboard')
= nav_link(path: %w[vulnerabilities#index]) do = nav_link(path: %w[vulnerabilities#index]) do
= link_to security_vulnerabilities_path, class: 'shortcuts-project rspec-project-link' do = link_to security_vulnerabilities_path, class: 'shortcuts-project rspec-project-link' do
.nav-icon-container .nav-icon-container
= sprite_icon('list-bulleted') = sprite_icon('list-bulleted')
%span.nav-item-name %span.nav-item-name
= _('Vulnerability Report') = _('Vulnerability Report')
%ul.sidebar-sub-level-items.is-fly-out-only
= nav_link(path: %w[vulnerabilities#index], html_options: { class: "fly-out-top-item" } ) do
- if sidebar_refactor_disabled?
= link_to security_vulnerabilities_path do
%strong.fly-out-top-item-name
= _('Vulnerability Report')
- else
%span.fly-out-top-item-container
%strong.fly-out-top-item-name
= _('Vulnerability Report')
= nav_link(path: %w[dashboard#settings]) do = nav_link(path: %w[dashboard#settings]) do
= link_to settings_security_dashboard_path, class: 'shortcuts-project rspec-project-link' do = link_to settings_security_dashboard_path, class: 'shortcuts-project rspec-project-link' do
.nav-icon-container .nav-icon-container
= sprite_icon('settings') = sprite_icon('settings')
%span.nav-item-name %span.nav-item-name
= _('Settings') = _('Settings')
%ul.sidebar-sub-level-items.is-fly-out-only
= nav_link(path: %w[dashboard#settings], html_options: { class: "fly-out-top-item" } ) do
- if sidebar_refactor_disabled?
= link_to settings_security_dashboard_path do
%strong.fly-out-top-item-name
= _('Settings')
- else
%span.fly-out-top-item-container
%strong.fly-out-top-item-name
= _('Settings')
= render 'shared/sidebar_toggle_button' = render 'shared/sidebar_toggle_button'
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