Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
e3529d54
Commit
e3529d54
authored
Jun 15, 2016
by
Phil Hughes
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Pinned sidebar navigation option
Closes #18542
parent
8bfbafbb
Changes
9
Show whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
123 additions
and
75 deletions
+123
-75
app/assets/javascripts/application.js.coffee
app/assets/javascripts/application.js.coffee
+25
-1
app/assets/javascripts/sidebar.js.coffee
app/assets/javascripts/sidebar.js.coffee
+6
-2
app/assets/stylesheets/framework/gitlab-theme.scss
app/assets/stylesheets/framework/gitlab-theme.scss
+1
-6
app/assets/stylesheets/framework/header.scss
app/assets/stylesheets/framework/header.scss
+0
-5
app/assets/stylesheets/framework/sidebar.scss
app/assets/stylesheets/framework/sidebar.scss
+67
-52
app/helpers/nav_helper.rb
app/helpers/nav_helper.rb
+14
-3
app/views/layouts/_collapse_button.html.haml
app/views/layouts/_collapse_button.html.haml
+6
-1
app/views/layouts/_page.html.haml
app/views/layouts/_page.html.haml
+3
-4
app/views/layouts/header/_default.html.haml
app/views/layouts/header/_default.html.haml
+1
-1
No files found.
app/assets/javascripts/application.js.coffee
View file @
e3529d54
...
...
@@ -127,7 +127,7 @@ window.onload = ->
$
->
bootstrapBreakpoint
=
bp
.
getBreakpointSize
()
$
(
".n
icescroll
"
).
niceScroll
(
cursoropacitymax
:
'0.4'
,
cursorcolor
:
'#FFF'
,
cursorborder
:
"1px solid #FFF"
)
$
(
".n
av-sidebar
"
).
niceScroll
(
cursoropacitymax
:
'0.4'
,
cursorcolor
:
'#FFF'
,
cursorborder
:
"1px solid #FFF"
)
# Click a .js-select-on-focus field, select the contents
$
(
".js-select-on-focus"
).
on
"focusin"
,
->
...
...
@@ -257,3 +257,27 @@ $ ->
gl
.
awardsHandler
=
new
AwardsHandler
()
checkInitialSidebarSize
()
new
Aside
()
# Sidenav pinning
if
bootstrapBreakpoint
isnt
'lg'
and
$
.
cookie
(
'pin_nav'
)
is
'true'
$
.
cookie
(
'pin_nav'
,
'false'
)
$
(
'.page-with-sidebar'
)
.
toggleClass
(
'page-sidebar-collapsed page-sidebar-expanded'
)
.
removeClass
(
'page-sidebar-pinned'
)
$
(
'.navbar-fixed-top'
).
removeClass
(
'header-pinned-nav'
)
$
(
document
)
.
off
'click'
,
'.js-nav-pin'
.
on
'click'
,
'.js-nav-pin'
,
(
e
)
->
e
.
preventDefault
()
$
(
this
).
toggleClass
'is-active'
if
$
.
cookie
(
'pin_nav'
)
is
'true'
$
.
cookie
'pin_nav'
,
'false'
$
(
'.page-with-sidebar'
).
removeClass
(
'page-sidebar-pinned'
)
$
(
'.navbar-fixed-top'
).
removeClass
(
'header-pinned-nav'
)
else
$
.
cookie
'pin_nav'
,
'true'
$
(
'.page-with-sidebar'
).
addClass
(
'page-sidebar-pinned'
)
$
(
'.navbar-fixed-top'
).
addClass
(
'header-pinned-nav'
)
app/assets/javascripts/sidebar.js.coffee
View file @
e3529d54
...
...
@@ -3,10 +3,14 @@ expanded = 'page-sidebar-expanded'
toggleSidebar
=
->
$
(
'.page-with-sidebar'
).
toggleClass
(
"
#{
collapsed
}
#{
expanded
}
"
)
$
(
'header'
).
toggleClass
(
"header-collapsed header-expanded"
)
$
(
'.navbar-fixed-top'
).
toggleClass
(
"header-collapsed header-expanded"
)
if
$
.
cookie
(
'pin_nav'
)
is
'true'
$
(
'.navbar-fixed-top'
).
toggleClass
(
'header-pinned-nav'
)
$
(
'.page-with-sidebar'
).
toggleClass
(
'page-sidebar-pinned'
)
setTimeout
(
->
niceScrollBars
=
$
(
'.n
icescroll
'
).
niceScroll
();
niceScrollBars
=
$
(
'.n
av-sidebar
'
).
niceScroll
();
niceScrollBars
.
updateScrollBar
();
),
300
...
...
app/assets/stylesheets/framework/gitlab-theme.scss
View file @
e3529d54
...
...
@@ -8,14 +8,9 @@
*/
@mixin
gitlab-theme
(
$color-light
,
$color
,
$color-darker
,
$color-dark
)
{
.page-with-sidebar
{
.collapse-nav
a
{
.collapse-nav
{
color
:
$color-light
;
background
:
$color
;
&
:hover
{
color
:
$white-light
;
}
}
.sidebar-wrapper
{
...
...
app/assets/stylesheets/framework/header.scss
View file @
e3529d54
...
...
@@ -79,14 +79,9 @@ header {
&
.header-collapsed
{
padding
:
0
16px
;
.side-nav-toggle
{
display
:
block
;
}
}
.side-nav-toggle
{
display
:
none
;
position
:
absolute
;
left
:
-10px
;
margin
:
6px
0
;
...
...
app/assets/stylesheets/framework/sidebar.scss
View file @
e3529d54
...
...
@@ -6,8 +6,6 @@
position
:
fixed
;
top
:
0
;
bottom
:
0
;
overflow-y
:
auto
;
overflow-x
:
hidden
;
left
:
0
;
height
:
100%
;
transition-duration
:
.3s
;
...
...
@@ -17,6 +15,11 @@
.sidebar-wrapper
{
z-index
:
1000
;
background
:
$background-color
;
.nicescroll-rails-hr
{
// TODO: Figure out why nicescroll doesn't hide horizontal bar
display
:
none
!
important
;
}
}
.content-wrapper
{
...
...
@@ -34,11 +37,10 @@
}
}
.sidebar-wrapper
{
.sidebar-user
{
padding
:
15px
22px
;
position
:
fixed
;
.sidebar-user
{
padding
:
15px
;
position
:
absolute
;
left
:
0
;
bottom
:
0
;
width
:
$sidebar_width
;
overflow
:
hidden
;
...
...
@@ -46,10 +48,8 @@
.username
{
margin-left
:
10px
;
width
:
$sidebar_width
-
2
*
10px
;
font-size
:
16px
;
line-height
:
34px
;
}
line-height
:
36px
;
}
}
...
...
@@ -65,19 +65,19 @@
.nav-sidebar
{
margin-top
:
22
+
$header-height
;
margin-bottom
:
116px
;
position
:
absolute
;
top
:
50px
;
bottom
:
65px
;
width
:
100%
;
transition-duration
:
.3s
;
list-style
:
none
;
overflow
:
hidden
;
overflow-y
:
auto
;
overflow
-x
:
hidden
;
&
.navbar-collapse
{
padding
:
0
!
important
;
}
li
{
width
:
$sidebar_width
;
&
.separate-item
{
padding-top
:
10px
;
margin-top
:
10px
;
...
...
@@ -90,14 +90,14 @@
}
a
{
width
:
$sidebar_width
;
padding
:
7px
15px
7px
23px
;
padding
:
7px
15px
7px
12px
;
font-size
:
$gl-font-size
;
line-height
:
24px
;
display
:
block
;
text-decoration
:
none
;
font-weight
:
normal
;
outline
:
none
;
white-space
:
nowrap
;
&
:hover
{
text-decoration
:
none
;
...
...
@@ -138,28 +138,47 @@
}
}
.collapse-nav
a
{
width
:
$sidebar_width
;
position
:
fixed
;
.collapse-nav
{
width
:
100%
;
position
:
absolute
;
;
top
:
0
;
left
:
0
;
padding
:
5px
0
;
font-size
:
18px
;
background
:
transparent
;
height
:
50px
;
text-align
:
center
;
line-height
:
40px
;
}
.nav-header-btn
{
padding
:
10px
5px
;
color
:
inherit
;
transition-duration
:
.3s
;
outline
:
none
;
&
:hover
{
&
:hover
,
&
:focus
{
color
:
$white-light
;
text-decoration
:
none
;
}
}
.sidebar-wrapper
{
&
.hidden-nav
{
width
:
0
;
.toggle-nav-collapse
{
position
:
relative
;
left
:
10px
;
line-height
:
40px
;
}
.pin-nav-btn
{
position
:
absolute
;
right
:
10px
;
top
:
2px
;
.fa
{
transition
:
transform
.15s
;
}
&
.is-active
{
.fa
{
transform
:
rotate
(
90deg
);
}
}
}
...
...
@@ -204,27 +223,23 @@
}
.page-sidebar-expanded
{
@media
(
max-width
:
$screen-sm-max
)
{
padding-left
:
0
;
}
.sidebar-wrapper
{
width
:
$sidebar_width
;
.nav-sidebar
{
width
:
$sidebar_width
;
}
}
.nav-sidebar
li
a
{
width
:
$sidebar_width
;
&
.back-link
{
i
{
opacity
:
0
;
}
.page-sidebar-pinned
{
.content-wrapper
,
.layout-nav
{
@media
(
min-width
:
$screen-lg-min
)
{
padding-left
:
$sidebar_width
;
}
}
}
header
.header-pinned-nav
{
@media
(
min-width
:
$screen-lg-min
)
{
padding-left
:
(
$sidebar_width
+
$gl-padding
);
}
}
...
...
app/helpers/nav_helper.rb
View file @
e3529d54
...
...
@@ -12,10 +12,10 @@ module NavHelper
end
def
page_sidebar_class
if
nav_menu_collapsed
?
"page-sidebar-
collaps
ed"
if
pinned_nav
?
"page-sidebar-
expanded page-sidebar-pinn
ed"
else
"page-sidebar-
expand
ed"
"page-sidebar-
collaps
ed"
end
end
...
...
@@ -37,6 +37,13 @@ module NavHelper
def
nav_header_class
class_name
=
" with-horizontal-nav"
if
defined?
(
nav
)
&&
nav
if
pinned_nav?
class_name
<<
" header-expanded header-pinned-nav"
else
class_name
<<
" header-collapsed"
end
class_name
end
...
...
@@ -47,4 +54,8 @@ module NavHelper
def
nav_control_class
"nav-control"
if
current_user
end
def
pinned_nav?
cookies
[
:pin_nav
]
==
'true'
end
end
app/views/layouts/_collapse_button.html.haml
View file @
e3529d54
=
link_to
icon
(
'bars'
),
'#'
,
class:
'toggle-nav-collapse'
,
title:
"Open/Close"
=
link_to
'#'
,
class:
'nav-header-btn toggle-nav-collapse'
,
title:
"Open/Close"
do
%span
.sr-only
Toggle navigation
=
icon
(
'bars'
)
=
link_to
'#'
,
class:
"nav-header-btn pin-nav-btn
#{
'is-active'
if
pinned_nav?
}
visible-lg-block js-nav-pin"
,
title:
'Pin/Unpin navigation'
do
%span
.sr-only
Toggle navigation pinning
=
icon
(
'thumb-tack'
)
app/views/layouts/_page.html.haml
View file @
e3529d54
.page-with-sidebar
.page-sidebar-collapsed
{
class:
"
#{page_gutter_class}"
}
.page-with-sidebar
{
class:
"#{page_sidebar_class}
#{page_gutter_class}"
}
.sidebar-wrapper.nicescroll
{
class:
nav_sidebar_class
}
%header
.collapse-nav
=
render
partial:
'layouts/collapse_button'
-
if
defined?
(
sidebar
)
&&
sidebar
=
render
"layouts/nav/
#{
sidebar
}
"
-
elsif
current_user
...
...
@@ -8,8 +9,6 @@
-
else
=
render
'layouts/nav/explore'
.collapse-nav
=
render
partial:
'layouts/collapse_button'
-
if
current_user
=
link_to
current_user
,
class:
'sidebar-user'
,
title:
"Profile"
,
data:
{
user:
current_user
.
username
}
do
=
image_tag
avatar_icon
(
current_user
,
60
),
alt:
'Profile'
,
class:
'avatar avatar s36'
...
...
app/views/layouts/header/_default.html.haml
View file @
e3529d54
%header
.navbar.navbar-fixed-top.navbar-gitlab
.header-collapsed
{
class:
nav_header_class
}
%header
.navbar.navbar-fixed-top.navbar-gitlab
{
class:
nav_header_class
}
%div
{
class:
fluid_layout
?
"container-fluid"
:
"container-fluid"
}
.header-content
%button
.side-nav-toggle
{
type:
'button'
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment