BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 652b2d0d by Phil Hughes
Options

Merge branch '34036-sidebar-mobile' into 'master'

Resolve "Navigation - Add contextual navigation on mobile" Closes #34036 See merge request !12944
parents 445cd22c b711e100
Showing with 164 additions and 43 deletions
app/assets/javascripts/layout_nav.js
/* eslint-disable func-names, space-before-function-paren, no-var, prefer-arrow-callback, no-unused-vars, one-var, one-var-declaration-per-line, vars-on-top, max-len */
import _ from 'underscore';
import Cookies from 'js-cookie';
import NewNavSidebar from './new_sidebar';
(function() {
var hideEndFade;
......@@ -53,6 +55,11 @@ import _ from 'underscore';
}
$(() => {
if (Cookies.get('new_nav') === 'true') {
const newNavSidebar = new NewNavSidebar();
newNavSidebar.bindEvents();
}
$(window).on('scroll', _.throttle(applyScrollNavClass, 100));
});
}).call(window);
app/assets/javascripts/new_sidebar.js 0 → 100644
export default class NewNavSidebar {
constructor() {
this.initDomElements();
}
initDomElements() {
this.$sidebar = $('.nav-sidebar');
this.$overlay = $('.mobile-overlay');
this.$openSidebar = $('.toggle-mobile-nav');
this.$closeSidebar = $('.close-nav-button');
}
bindEvents() {
this.$openSidebar.on('click', () => this.toggleSidebarNav(true));
this.$closeSidebar.on('click', () => this.toggleSidebarNav(false));
this.$overlay.on('click', () => this.toggleSidebarNav(false));
}
toggleSidebarNav(show) {
this.$sidebar.toggleClass('nav-sidebar-expanded', show);
this.$overlay.toggleClass('mobile-nav-open', show);
}
}
app/assets/stylesheets/new_nav.scss
......@@ -275,8 +275,6 @@ header.navbar-gitlab-new {
.breadcrumbs {
display: flex;
min-height: 60px;
padding-top: $gl-padding-top;
padding-bottom: $gl-padding-top;
color: $gl-text-color;
border-bottom: 1px solid $border-color;
......@@ -300,6 +298,7 @@ header.navbar-gitlab-new {
display: flex;
width: 100%;
position: relative;
align-items: center;
.dropdown-menu-projects {
margin-top: -$gl-padding;
......
app/assets/stylesheets/new_sidebar.scss
......@@ -26,41 +26,75 @@ $new-sidebar-width: 220px;
}
.context-header {
border-bottom: 1px solid $border-color;
font-weight: 600;
display: flex;
align-items: center;
padding: 10px 16px 10px 10px;
color: $gl-text-color;
position: relative;
.avatar-container {
flex: 0 0 40px;
background-color: $white-light;
}
&:hover {
background-color: $hover-background;
color: $hover-color;
border-color: $hover-background;
a {
border-bottom: 1px solid $border-color;
font-weight: 600;
display: flex;
align-items: center;
padding: 10px 16px 10px 10px;
color: $gl-text-color;
.avatar-container {
border-color: transparent;
@media (max-width: $screen-xs-max) {
padding-right: 30px;
}
.settings-avatar {
background-color: $indigo-500;
&:hover {
background-color: $hover-background;
color: $hover-color;
border-color: $hover-background;
i {
color: $hover-color;
.avatar-container {
border-color: transparent;
}
.settings-avatar {
background-color: $indigo-500;
i {
color: $hover-color;
}
}
}
}
.avatar-container {
flex: 0 0 40px;
background-color: $white-light;
}
.project-title,
.group-title {
overflow: hidden;
text-overflow: ellipsis;
}
&:hover {
.close-nav-button {
color: $white-light;
}
}
.close-nav-button {
display: none;
position: absolute;
top: 0;
right: 0;
height: 100%;
background-color: transparent;
border: 0;
padding: 0 10px;
@media (max-width: $screen-xs-max) {
display: block;
}
&:hover {
color: $gl-text-color;
}
}
}
.settings-avatar {
......@@ -79,7 +113,7 @@ $new-sidebar-width: 220px;
position: fixed;
z-index: 400;
width: $new-sidebar-width;
transition: width $sidebar-transition-duration;
transition: left $sidebar-transition-duration;
top: 50px;
bottom: 0;
left: 0;
......@@ -87,6 +121,10 @@ $new-sidebar-width: 220px;
background-color: $gray-normal;
box-shadow: inset -2px 0 0 $border-color;
&.nav-sidebar-expanded {
left: 0;
}
a {
transition: none;
text-decoration: none;
......@@ -117,7 +155,7 @@ $new-sidebar-width: 220px;
}
@media (max-width: $screen-xs-max) {
width: 0;
left: (-$new-sidebar-width);
}
}
......@@ -183,6 +221,38 @@ $new-sidebar-width: 220px;
}
}
.toggle-mobile-nav {
display: none;
background-color: transparent;
border: 0;
padding: 6px 16px;
margin: 0 16px 0 -15px;
height: 46px;
border-right: 1px solid $gl-text-color-quaternary;
i {
font-size: 20px;
color: $gl-text-color-secondary;
}
@media (max-width: $screen-xs-max) {
display: inline-block;
}
}
.mobile-overlay {
display: none;
&.mobile-nav-open {
display: block;
position: fixed;
background-color: $black-transparent;
height: 100%;
width: 100%;
z-index: 300;
}
}
// Make issue boards full-height now that sub-nav is gone
......
app/views/layouts/_page.html.haml
......@@ -10,6 +10,8 @@
- if content_for?(:sub_nav)
= yield :sub_nav
.content-wrapper{ class: "#{(layout_nav_class unless show_new_nav?)}" }
- if show_new_nav?
.mobile-overlay
.alert-wrapper
= render "layouts/broadcast"
- if show_new_nav?
......
app/views/layouts/nav/_breadcrumbs.html.haml
......@@ -3,6 +3,10 @@
%nav.breadcrumbs{ role: "navigation" }
.breadcrumbs-container{ class: [container_class, @content_class] }
- if defined?(@new_sidebar)
= button_tag class: 'toggle-mobile-nav', type: 'button' do
%span.sr-only Open sidebar
= icon ('bars')
.breadcrumbs-links.js-title-container
- unless hide_top_links
.title
......
app/views/layouts/nav/_new_admin_sidebar.html.haml
.nav-sidebar
= link_to admin_root_path, title: 'Admin Overview', class: 'context-header' do
.avatar-container.s40.settings-avatar
= icon('wrench')
.project-title Admin Area
.context-header
= link_to admin_root_path, title: 'Admin Overview' do
.avatar-container.s40.settings-avatar
= icon('wrench')
.project-title Admin Area
= button_tag class: 'close-nav-button', type: 'button' do
%span.sr-only Close sidebar
= icon ('times')
%ul.sidebar-top-level-items
= nav_link(controller: %w(dashboard admin projects users groups jobs runners cohorts), html_options: {class: 'home'}) do
= link_to admin_root_path, title: 'Overview', class: 'shortcuts-tree' do
......
app/views/layouts/nav/_new_group_sidebar.html.haml
.nav-sidebar
= link_to group_path(@group), title: @group.name, class: 'context-header' do
.avatar-container.s40.group-avatar
= image_tag group_icon(@group), class: "avatar s40 avatar-tile"
.group-title
= @group.name
.context-header
= link_to group_path(@group), title: @group.name do
.avatar-container.s40.group-avatar
= image_tag group_icon(@group), class: "avatar s40 avatar-tile"
.group-title
= @group.name
= button_tag class: 'close-nav-button', type: 'button' do
%span.sr-only Close sidebar
= icon ('times')
%ul.sidebar-top-level-items
= nav_link(path: ['groups#show', 'groups#activity', 'groups#subgroups'], html_options: { class: 'home' }) do
= link_to group_path(@group), title: 'About group' do
......
app/views/layouts/nav/_new_profile_sidebar.html.haml
.nav-sidebar
= link_to profile_path, title: 'Profile Settings', class: 'context-header' do
.avatar-container.s40.settings-avatar
= icon('user')
.project-title User Settings
.context-header
= link_to profile_path, title: 'Profile Settings' do
.avatar-container.s40.settings-avatar
= icon('user')
.project-title User Settings
= button_tag class: 'close-nav-button', type: 'button' do
%span.sr-only Close sidebar
= icon ('times')
%ul.sidebar-top-level-items
= nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
= link_to profile_path, title: 'Profile Settings' do
......
app/views/layouts/nav/_new_project_sidebar.html.haml
.nav-sidebar
- can_edit = can?(current_user, :admin_project, @project)
= link_to project_path(@project), title: @project.name, class: 'context-header' do
.avatar-container.s40.project-avatar
= project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile')
.project-title
= @project.name
.context-header
= link_to project_path(@project), title: @project.name do
.avatar-container.s40.project-avatar
= project_icon(@project, alt: @project.name, class: 'avatar s40 avatar-tile')
.project-title
= @project.name
= button_tag class: 'close-nav-button', type: 'button' do
%span.sr-only Close sidebar
= icon ('times')
%ul.sidebar-top-level-items
= nav_link(path: ['projects#show', 'projects#activity', 'cycle_analytics#show'], html_options: { class: 'home' }) do
= link_to project_path(@project), title: 'About project', class: 'shortcuts-project' do
......
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