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
b2f8ebbb
Commit
b2f8ebbb
authored
Sep 02, 2016
by
Mike Greiling
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
refactor sidebar logic into singleton class
parent
6690fc70
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
104 additions
and
83 deletions
+104
-83
CHANGELOG
CHANGELOG
+1
-0
app/assets/javascripts/application.js
app/assets/javascripts/application.js
+4
-39
app/assets/javascripts/sidebar.js
app/assets/javascripts/sidebar.js
+0
-41
app/assets/javascripts/sidebar.js.es6
app/assets/javascripts/sidebar.js.es6
+98
-0
app/assets/stylesheets/framework/sidebar.scss
app/assets/stylesheets/framework/sidebar.scss
+1
-3
No files found.
CHANGELOG
View file @
b2f8ebbb
...
@@ -13,6 +13,7 @@ v 8.12.0 (unreleased)
...
@@ -13,6 +13,7 @@ v 8.12.0 (unreleased)
- Instructions for enabling Git packfile bitmaps !6104
- Instructions for enabling Git packfile bitmaps !6104
- Fix pagination on user snippets page
- Fix pagination on user snippets page
- Escape search term before passing it to Regexp.new !6241 (winniehell)
- Escape search term before passing it to Regexp.new !6241 (winniehell)
- Fix pinned sidebar behavior in smaller viewports !6169
- Change merge_error column from string to text type
- Change merge_error column from string to text type
- Reduce contributions calendar data payload (ClemMakesApps)
- Reduce contributions calendar data payload (ClemMakesApps)
- Add `web_url` field to issue, merge request, and snippet API objects (Ben Boeckel)
- Add `web_url` field to issue, merge request, and snippet API objects (Ben Boeckel)
...
...
app/assets/javascripts/application.js
View file @
b2f8ebbb
...
@@ -174,9 +174,7 @@
...
@@ -174,9 +174,7 @@
$body
.
tooltip
({
$body
.
tooltip
({
selector
:
'
.has-tooltip, [data-toggle="tooltip"]
'
,
selector
:
'
.has-tooltip, [data-toggle="tooltip"]
'
,
placement
:
function
(
_
,
el
)
{
placement
:
function
(
_
,
el
)
{
var
$el
;
return
$
(
el
).
data
(
'
placement
'
)
||
'
bottom
'
;
$el
=
$
(
el
);
return
$el
.
data
(
'
placement
'
)
||
'
bottom
'
;
}
}
});
});
$
(
'
.trigger-submit
'
).
on
(
'
change
'
,
function
()
{
$
(
'
.trigger-submit
'
).
on
(
'
change
'
,
function
()
{
...
@@ -286,42 +284,9 @@
...
@@ -286,42 +284,9 @@
gl
.
awardsHandler
=
new
AwardsHandler
();
gl
.
awardsHandler
=
new
AwardsHandler
();
checkInitialSidebarSize
();
checkInitialSidebarSize
();
new
Aside
();
new
Aside
();
if
(
$window
.
width
()
<
1024
&&
$
.
cookie
(
'
pin_nav
'
)
===
'
true
'
)
{
$
.
cookie
(
'
pin_nav
'
,
'
false
'
,
{
// bind sidebar events
path
:
gon
.
relative_url_root
||
'
/
'
,
new
gl
.
Sidebar
();
expires
:
365
*
10
});
$
(
'
.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
'
,
function
(
e
)
{
var
$page
,
$pinBtn
,
$tooltip
,
$topNav
,
doPinNav
,
tooltipText
;
e
.
preventDefault
();
$pinBtn
=
$
(
e
.
currentTarget
);
$page
=
$
(
'
.page-with-sidebar
'
);
$topNav
=
$
(
'
.navbar-fixed-top
'
);
$tooltip
=
$
(
"
#
"
+
(
$pinBtn
.
attr
(
'
aria-describedby
'
)));
doPinNav
=
!
$page
.
is
(
'
.page-sidebar-pinned
'
);
tooltipText
=
'
Pin navigation
'
;
$
(
this
).
toggleClass
(
'
is-active
'
);
if
(
doPinNav
)
{
$page
.
addClass
(
'
page-sidebar-pinned
'
);
$topNav
.
addClass
(
'
header-pinned-nav
'
);
}
else
{
$tooltip
.
remove
();
$page
.
removeClass
(
'
page-sidebar-pinned
'
).
toggleClass
(
'
page-sidebar-collapsed page-sidebar-expanded
'
);
$topNav
.
removeClass
(
'
header-pinned-nav
'
).
toggleClass
(
'
header-collapsed header-expanded
'
);
}
$
.
cookie
(
'
pin_nav
'
,
doPinNav
,
{
path
:
gon
.
relative_url_root
||
'
/
'
,
expires
:
365
*
10
});
if
(
$
.
cookie
(
'
pin_nav
'
)
===
'
true
'
||
doPinNav
)
{
tooltipText
=
'
Unpin navigation
'
;
}
$tooltip
.
find
(
'
.tooltip-inner
'
).
text
(
tooltipText
);
return
$pinBtn
.
attr
(
'
title
'
,
tooltipText
).
tooltip
(
'
fixTitle
'
);
});
// Custom time ago
// Custom time ago
gl
.
utils
.
shortTimeAgo
(
$
(
'
.js-short-timeago
'
));
gl
.
utils
.
shortTimeAgo
(
$
(
'
.js-short-timeago
'
));
...
...
app/assets/javascripts/sidebar.js
deleted
100644 → 0
View file @
6690fc70
(
function
()
{
var
collapsed
,
expanded
,
toggleSidebar
;
collapsed
=
'
page-sidebar-collapsed
'
;
expanded
=
'
page-sidebar-expanded
'
;
toggleSidebar
=
function
()
{
$
(
'
.page-with-sidebar
'
).
toggleClass
(
collapsed
+
"
"
+
expanded
);
$
(
'
.navbar-fixed-top
'
).
toggleClass
(
"
header-collapsed header-expanded
"
);
if
(
$
.
cookie
(
'
pin_nav
'
)
===
'
true
'
)
{
$
(
'
.navbar-fixed-top
'
).
toggleClass
(
'
header-pinned-nav
'
);
$
(
'
.page-with-sidebar
'
).
toggleClass
(
'
page-sidebar-pinned
'
);
}
return
setTimeout
((
function
()
{
var
niceScrollBars
;
niceScrollBars
=
$
(
'
.nav-sidebar
'
).
niceScroll
();
return
niceScrollBars
.
updateScrollBar
();
}),
300
);
};
$
(
document
).
off
(
'
click
'
,
'
body
'
).
on
(
'
click
'
,
'
body
'
,
function
(
e
)
{
var
$nav
,
$target
,
$toggle
,
pageExpanded
;
if
(
$
.
cookie
(
'
pin_nav
'
)
!==
'
true
'
)
{
$target
=
$
(
e
.
target
);
$nav
=
$target
.
closest
(
'
.sidebar-wrapper
'
);
pageExpanded
=
$
(
'
.page-with-sidebar
'
).
hasClass
(
'
page-sidebar-expanded
'
);
$toggle
=
$target
.
closest
(
'
.toggle-nav-collapse, .side-nav-toggle
'
);
if
(
$nav
.
length
===
0
&&
pageExpanded
&&
$toggle
.
length
===
0
)
{
$
(
'
.page-with-sidebar
'
).
toggleClass
(
'
page-sidebar-collapsed page-sidebar-expanded
'
);
return
$
(
'
.navbar-fixed-top
'
).
toggleClass
(
'
header-collapsed header-expanded
'
);
}
}
});
$
(
document
).
on
(
"
click
"
,
'
.toggle-nav-collapse, .side-nav-toggle
'
,
function
(
e
)
{
e
.
preventDefault
();
return
toggleSidebar
();
});
}).
call
(
this
);
app/assets/javascripts/sidebar.js.es6
0 → 100644
View file @
b2f8ebbb
((global) => {
let singleton;
const pinnedStateCookie = 'pin_nav';
const sidebarBreakpoint = 1024;
const pageSelector = '.page-with-sidebar';
const navbarSelector = '.navbar-fixed-top';
const sidebarWrapperSelector = '.sidebar-wrapper';
const sidebarContentSelector = '.nav-sidebar';
const pinnedToggleSelector = '.js-nav-pin';
const sidebarToggleSelector = '.toggle-nav-collapse, .side-nav-toggle';
const pinnedPageClass = 'page-sidebar-pinned';
const expandedPageClass = 'page-sidebar-expanded';
const collapsedPageClass = 'page-sidebar-collapsed';
const pinnedNavbarClass = 'header-pinned-nav';
const expandedNavbarClass = 'header-expanded';
const collapsedNavbarClass = 'header-collapsed';
class Sidebar {
constructor() {
if (!singleton) {
singleton = this;
singleton.init();
} else {
singleton.renderState();
}
return singleton;
}
init() {
this.isPinned = $.cookie(pinnedStateCookie) === 'true';
this.isExpanded = (
window.innerWidth >= sidebarBreakpoint &&
$(pageSelector).hasClass(expandedPageClass)
);
$(document)
.on('click', sidebarToggleSelector, () => this.toggleSidebar())
.on('click', pinnedToggleSelector, () => this.togglePinnedState())
.on('click', 'html, body', (e) => this.handleClickEvent(e));
this.renderState();
}
handleClickEvent(e) {
if (this.isExpanded && (!this.isPinned || window.innerWidth < sidebarBreakpoint)) {
const $target = $(e.target);
const targetIsToggle = $target.closest(sidebarToggleSelector).length > 0;
const targetIsSidebar = $target.closest(sidebarWrapperSelector).length > 0;
if (!targetIsToggle && (!targetIsSidebar || $target.closest('a'))) {
this.toggleSidebar();
}
}
}
toggleSidebar() {
this.isExpanded = !this.isExpanded;
this.renderState();
}
togglePinnedState() {
this.isPinned = !this.isPinned;
if (!this.isPinned) {
this.isExpanded = false;
}
$.cookie(pinnedStateCookie, this.isPinned ? 'true' : 'false', {
path: gon.relative_url_root || '/',
expires: 3650
});
this.renderState();
}
renderState() {
$(pageSelector)
.toggleClass(pinnedPageClass, this.isPinned && this.isExpanded)
.toggleClass(expandedPageClass, this.isExpanded)
.toggleClass(collapsedPageClass, !this.isExpanded);
$(navbarSelector)
.toggleClass(pinnedNavbarClass, this.isPinned && this.isExpanded)
.toggleClass(expandedNavbarClass, this.isExpanded)
.toggleClass(collapsedNavbarClass, !this.isExpanded);
const $pinnedToggle = $(pinnedToggleSelector);
const tooltipText = this.isPinned ? 'Unpin navigation' : 'Pin navigation';
const tooltipState = $pinnedToggle.attr('aria-describedby') && this.isExpanded ? 'show' : 'hide';
$pinnedToggle.attr('title', tooltipText).tooltip('fixTitle').tooltip(tooltipState);
if (this.isExpanded) {
setTimeout(() => $(sidebarContentSelector).niceScroll().updateScrollBar(), 200);
}
}
}
global.Sidebar = Sidebar;
})(window.gl || (window.gl = {}));
app/assets/stylesheets/framework/sidebar.scss
View file @
b2f8ebbb
...
@@ -128,10 +128,8 @@
...
@@ -128,10 +128,8 @@
.fa
{
.fa
{
transition
:
transform
.15s
;
transition
:
transform
.15s
;
}
&
.is-active
{
.page-sidebar-pinned
&
{
.fa
{
transform
:
rotate
(
90deg
);
transform
:
rotate
(
90deg
);
}
}
}
}
...
...
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