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
Hide 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 { SIDEBAR_COLLAPSED_CLASS } from './contextual_sidebar';
const isRefactoring = document.body.classList.contains('sidebar-refactoring');
const HIDE_INTERVAL_TIMEOUT = 300;
const COLLAPSED_PANEL_WIDTH = isRefactoring ? 48 : 50;
const IS_OVER_CLASS = 'is-over';
const IS_ABOVE_CLASS = 'is-above';
const IS_SHOWING_FLY_OUT_CLASS = 'is-showing-fly-out';
......@@ -22,12 +24,7 @@ export const setOpenMenu = (menu = null) => {
export const slope = (a, b) => (b.y - a.y) / (b.x - a.x);
let headerHeight = 50;
export const getHeaderHeight = () => headerHeight;
const setHeaderHeight = () => {
headerHeight = sidebar.offsetTop;
};
export const getHeaderHeight = () => sidebar?.offsetTop || 0;
export const isSidebarCollapsed = () =>
sidebar && sidebar.classList.contains(SIDEBAR_COLLAPSED_CLASS);
......@@ -87,14 +84,20 @@ export const hideMenu = (el) => {
};
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 top = calculateTop(boundingRect, subItems.offsetHeight);
const left = sidebar ? sidebar.offsetWidth : 50;
const left = sidebar ? sidebar.offsetWidth : COLLAPSED_PANEL_WIDTH;
let top = calculateTop(boundingRect, subItems.offsetHeight);
if (isRefactoring && hasSubItems) {
top -= header.offsetHeight;
} else if (isRefactoring) {
top = boundingRect.top;
}
const isAbove = top < boundingRect.top;
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();
menuCornerLocs = [
......@@ -188,8 +191,6 @@ export default () => {
});
}
requestIdleCallback(setHeaderHeight);
items.forEach((el) => {
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;
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;
}
......@@ -99,15 +99,15 @@ $top-level-item-color: $purple-900;
min-height: unset;
}
.fly-out-top-item {
display: block;
.fly-out-top-item:not(.divider) {
display: block !important;
}
.avatar-container {
margin: 0 auto;
}
li.active > a {
li.active:not(.fly-out-top-item) > a {
background-color: $indigo-900-alpha-008;
}
}
......@@ -115,38 +115,39 @@ $top-level-item-color: $purple-900;
@mixin sub-level-items-flyout {
.sidebar-sub-level-items {
@include media-breakpoint-up(sm) {
position: fixed;
top: 0;
left: 0;
@include gl-fixed;
@include gl-top-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;
margin-top: -1px;
padding: 4px 1px;
background-color: $white;
box-shadow: 2px 1px 3px $dropdown-shadow-color;
border: 1px solid $gray-darker;
border-left: 0;
border-radius: 0 3px 3px 0;
background-color: $gray-10;
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;
border-style: none;
border-radius: $border-radius-default;
&::before {
content: '';
position: absolute;
top: -30px;
bottom: -30px;
left: -10px;
right: -30px;
z-index: -1;
.divider {
@include gl-display-none;
}
&.is-above {
margin-top: 1px;
.divider + li > a {
@include gl-mt-2;
}
.divider {
height: 1px;
margin: 4px -1px;
padding: 0;
background-color: $dropdown-divider-bg;
li:last-of-type a {
@include gl-mb-0;
}
&.is-above {
@include gl-mt-0;
}
}
a {
@include gl-px-4;
}
.fly-out-top-item {
......@@ -200,6 +201,8 @@ $top-level-item-color: $purple-900;
@include gl-align-items-center;
@include gl-rounded-base;
@include gl-w-auto;
@include gl-line-height-normal;
transition: none;
margin: $sidebar-top-item-tb-margin $sidebar-top-item-lr-margin;
&:hover {
......@@ -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
//
......@@ -258,7 +307,6 @@ $top-level-item-color: $purple-900;
a {
@include gl-text-decoration-none;
@include gl-line-height-normal;
color: $top-level-item-color;
}
......@@ -269,7 +317,8 @@ $top-level-item-color: $purple-900;
flex: 1;
}
> a {
> a,
> .fly-out-top-item-container {
@include top-level-item;
}
......@@ -278,8 +327,10 @@ $top-level-item-color: $purple-900;
font-weight: $gl-font-weight-bold;
}
> a:not(.has-sub-items) {
background-color: $indigo-900-alpha-008;
&:not(.fly-out-top-item) {
> a:not(.has-sub-items) {
background-color: $indigo-900-alpha-008;
}
}
}
}
......@@ -298,8 +349,16 @@ $top-level-item-color: $purple-900;
margin-right: 8px;
}
.fly-out-top-item {
display: none;
a:not(.has-sub-items) + .sidebar-sub-level-items {
.fly-out-top-item {
@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) {
......@@ -356,8 +415,8 @@ $top-level-item-color: $purple-900;
}
.sidebar-sub-level-items {
@include gl-pb-0;
display: none;
@include gl-py-0;
@include gl-display-none;
&:not(.fly-out-list) {
li > a {
......
app/assets/stylesheets/startup/startup-dark.scss
View file @ 323f980c
......@@ -1251,7 +1251,10 @@ body.sidebar-refactoring.gl-dark
.sidebar-context-title {
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;
}
body.sidebar-refactoring.ui-indigo
......@@ -1325,20 +1328,22 @@ body.sidebar-refactoring
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item {
display: block;
.fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.avatar-container {
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);
}
body.sidebar-refactoring .nav-sidebar a {
text-decoration: none;
line-height: 1rem;
color: #2f2a6b;
}
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 {
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-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1356,12 +1362,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
align-items: center;
border-radius: 0.25rem;
width: auto;
line-height: 1rem;
margin: 1px 4px;
}
body.sidebar-refactoring .nav-sidebar li.active > a {
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);
}
body.sidebar-refactoring .nav-sidebar ul {
......@@ -1377,9 +1387,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
display: flex;
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;
}
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) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
......@@ -1417,8 +1555,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item {
display: block;
.fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
......@@ -1427,7 +1565,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
li.active
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08);
}
......@@ -1516,6 +1654,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
align-items: center;
border-radius: 0.25rem;
width: auto;
line-height: 1rem;
margin: 1px 4px;
padding: 0.25rem;
margin-bottom: 0.25rem;
......@@ -1617,6 +1756,7 @@ body.sidebar-refactoring
color: #9dc7f1;
}
body.sidebar-refactoring .sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0;
display: none;
}
......
app/assets/stylesheets/startup/startup-general.scss
View file @ 323f980c
......@@ -1213,7 +1213,10 @@ input {
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;
}
body.sidebar-refactoring.ui-indigo
......@@ -1287,20 +1290,22 @@ body.sidebar-refactoring
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item {
display: block;
.fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.avatar-container {
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);
}
body.sidebar-refactoring .nav-sidebar a {
text-decoration: none;
line-height: 1rem;
color: #2f2a6b;
}
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 {
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-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1318,12 +1324,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
align-items: center;
border-radius: 0.25rem;
width: auto;
line-height: 1rem;
margin: 1px 4px;
}
body.sidebar-refactoring .nav-sidebar li.active > a {
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);
}
body.sidebar-refactoring .nav-sidebar ul {
......@@ -1339,9 +1349,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
display: flex;
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;
}
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) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
......@@ -1379,8 +1517,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item {
display: block;
.fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
......@@ -1389,7 +1527,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
li.active
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08);
}
......@@ -1478,6 +1616,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
align-items: center;
border-radius: 0.25rem;
width: auto;
line-height: 1rem;
margin: 1px 4px;
padding: 0.25rem;
margin-bottom: 0.25rem;
......@@ -1579,6 +1718,7 @@ body.sidebar-refactoring
color: #0b5cad;
}
body.sidebar-refactoring .sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0;
display: none;
}
......
app/views/groups/sidebar/_packages.html.haml
View file @ 323f980c
......@@ -2,7 +2,7 @@
- if group_packages_nav?
= 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
= sprite_icon('package')
%span.nav-item-name
......
app/views/layouts/nav/sidebar/_admin.html.haml
View file @ 323f980c
......@@ -11,7 +11,7 @@
= _('Admin Area')
%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
= link_to admin_root_path do
= link_to admin_root_path, class: 'has-sub-items' do
.nav-icon-container
= sprite_icon('overview')
%span.nav-item-name
......@@ -52,7 +52,7 @@
= _('Gitaly Servers')
= 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
= sprite_icon('chart')
%span.nav-item-name
......@@ -74,7 +74,7 @@
= _('Usage Trends')
= 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
= sprite_icon('monitor')
%span.nav-item-name
......@@ -247,7 +247,7 @@
= _('Appearance')
= 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
= sprite_icon('settings')
%span.nav-item-name.qa-admin-settings-item
......
app/views/layouts/nav/sidebar/_analytics_links.html.haml
View file @ 323f980c
......@@ -4,7 +4,7 @@
- if navbar_links.any?
= 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
= sprite_icon('chart')
%span.nav-item-name{ data: { qa_selector: 'analytics_link' } }
......
app/views/layouts/nav/sidebar/_group.html.haml
View file @ 323f980c
......@@ -19,7 +19,7 @@
- paths = group_overview_nav_link_paths
= 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)
= link_to information_link do
= link_to information_link, class: 'has-sub-items' do
.nav-icon-container
- sprite = sidebar_refactor_enabled? ? 'group' : 'home'
= sprite_icon(sprite)
......@@ -62,7 +62,7 @@
- if group_sidebar_link?(:issues)
= 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
= sprite_icon('issues')
%span.nav-item-name
......@@ -157,7 +157,7 @@
- if group_sidebar_link?(:settings)
= 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
= sprite_icon('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 @@
%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
- 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
- else
= render 'shared/nav/sidebar_menu_collapsed', sidebar_menu: sidebar_menu
%span.fly-out-top-item-container
= 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
= 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
.sidebar-context-title {
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;
}
body.sidebar-refactoring.ui-indigo
......@@ -1325,20 +1328,22 @@ body.sidebar-refactoring
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item {
display: block;
.fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.avatar-container {
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);
}
body.sidebar-refactoring .nav-sidebar a {
text-decoration: none;
line-height: 1rem;
color: #2f2a6b;
}
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 {
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-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1356,12 +1362,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
align-items: center;
border-radius: 0.25rem;
width: auto;
line-height: 1rem;
margin: 1px 4px;
}
body.sidebar-refactoring .nav-sidebar li.active > a {
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);
}
body.sidebar-refactoring .nav-sidebar ul {
......@@ -1377,9 +1387,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
display: flex;
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;
}
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) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
......@@ -1417,8 +1555,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item {
display: block;
.fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
......@@ -1427,7 +1565,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
li.active
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08);
}
......@@ -1516,6 +1654,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
align-items: center;
border-radius: 0.25rem;
width: auto;
line-height: 1rem;
margin: 1px 4px;
padding: 0.25rem;
margin-bottom: 0.25rem;
......@@ -1617,6 +1756,7 @@ body.sidebar-refactoring
color: #9dc7f1;
}
body.sidebar-refactoring .sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0;
display: none;
}
......
ee/app/assets/stylesheets/startup/startup-general.scss
View file @ 323f980c
......@@ -1213,7 +1213,10 @@ input {
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;
}
body.sidebar-refactoring.ui-indigo
......@@ -1287,20 +1290,22 @@ body.sidebar-refactoring
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.fly-out-top-item {
display: block;
.fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar.sidebar-collapsed-desktop
.avatar-container {
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);
}
body.sidebar-refactoring .nav-sidebar a {
text-decoration: none;
line-height: 1rem;
color: #2f2a6b;
}
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 {
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-right: 0.75rem;
padding-top: 0.5rem;
......@@ -1318,12 +1324,16 @@ body.sidebar-refactoring .nav-sidebar li > a {
align-items: center;
border-radius: 0.25rem;
width: auto;
line-height: 1rem;
margin: 1px 4px;
}
body.sidebar-refactoring .nav-sidebar li.active > a {
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);
}
body.sidebar-refactoring .nav-sidebar ul {
......@@ -1339,9 +1349,137 @@ body.sidebar-refactoring .nav-sidebar .nav-icon-container {
display: flex;
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;
}
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) {
body.sidebar-refactoring .nav-sidebar:not(.sidebar-expanded-mobile) {
width: 48px;
......@@ -1379,8 +1517,8 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
.fly-out-top-item {
display: block;
.fly-out-top-item:not(.divider) {
display: block !important;
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
......@@ -1389,7 +1527,7 @@ body.sidebar-refactoring .nav-sidebar .fly-out-top-item {
}
body.sidebar-refactoring
.nav-sidebar:not(.sidebar-expanded-mobile)
li.active
li.active:not(.fly-out-top-item)
> a {
background-color: rgba(41, 41, 97, 0.08);
}
......@@ -1478,6 +1616,7 @@ body.sidebar-refactoring .nav-sidebar-inner-scroll > div.context-header a {
align-items: center;
border-radius: 0.25rem;
width: auto;
line-height: 1rem;
margin: 1px 4px;
padding: 0.25rem;
margin-bottom: 0.25rem;
......@@ -1579,6 +1718,7 @@ body.sidebar-refactoring
color: #0b5cad;
}
body.sidebar-refactoring .sidebar-sub-level-items {
padding-top: 0;
padding-bottom: 0;
display: none;
}
......
ee/app/views/groups/sidebar/_packages.html.haml
View file @ 323f980c
......@@ -2,7 +2,7 @@
- if group_packages_nav?
= 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
= sprite_icon('package')
%span.nav-item-name
......
ee/app/views/layouts/nav/ee/_epic_link.html.haml
View file @ 323f980c
......@@ -4,7 +4,7 @@
- epics_items = ['epics#show', 'epics#index', 'epic_boards#index', 'epic_boards#show', 'roadmap#show']
= 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
= sprite_icon('epic')
%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)
- if main_path.present?
= 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
= sprite_icon('shield')
%span.nav-item-name
= _('Security & Compliance')
%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)
= nav_link(path: 'dashboard#show') 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
= 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
= sprite_icon('location-dot')
%span.nav-item-name
......@@ -9,6 +9,7 @@
= link_to admin_geo_nodes_path do
%strong.fly-out-top-item-name
#{ _('Geo') }
%li.divider.fly-out-top-item
= nav_link(path: 'admin/geo/nodes#index') do
= link_to admin_geo_nodes_path, title: _('Nodes') do
%span
......
ee/app/views/layouts/nav/sidebar/_security.html.haml
View file @ 323f980c
......@@ -17,17 +17,49 @@
= sprite_icon('dashboard')
%span.nav-item-name
= _('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
= link_to security_vulnerabilities_path, class: 'shortcuts-project rspec-project-link' do
.nav-icon-container
= sprite_icon('list-bulleted')
%span.nav-item-name
= _('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
= link_to settings_security_dashboard_path, class: 'shortcuts-project rspec-project-link' do
.nav-icon-container
= sprite_icon('settings')
%span.nav-item-name
= _('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'
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