Commit a167897b authored by Mike Greiling's avatar Mike Greiling

move wiki navbar content to right sidebar

parent 24e5a1e8
...@@ -262,7 +262,7 @@ ...@@ -262,7 +262,7 @@
new NotificationsDropdown(); new NotificationsDropdown();
break; break;
case 'wikis': case 'wikis':
new Wikis(); new gl.Wikis();
shortcut_handler = new ShortcutsNavigation(); shortcut_handler = new ShortcutsNavigation();
new ZenMode(); new ZenMode();
new GLForm($('.wiki-form')); new GLForm($('.wiki-form'));
......
/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, consistent-return, one-var, one-var-declaration-per-line, no-undef, prefer-template, padded-blocks, max-len */
/*= require latinise */
(function() {
var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
this.Wikis = (function() {
function Wikis() {
this.slugify = bind(this.slugify, this);
$('.new-wiki-page').on('submit', (function(_this) {
return function(e) {
var field, path, slug;
$('[data-error~=slug]').addClass('hidden');
field = $('#new_wiki_path');
slug = _this.slugify(field.val());
if (slug.length > 0) {
path = field.attr('data-wikis-path');
location.href = path + '/' + slug;
return e.preventDefault();
}
};
})(this));
}
Wikis.prototype.dasherize = function(value) {
return value.replace(/[_\s]+/g, '-');
};
Wikis.prototype.slugify = function(value) {
return this.dasherize(value.trim().toLowerCase().latinise());
};
return Wikis;
})();
}).call(this);
/* eslint-disable no-param-reassign */
/* global Breakpoints */
/*= require latinise */
/*= require breakpoints */
((global) => {
const dasherize = str => str.replace(/[_\s]+/g, '-');
const slugify = str => dasherize(str.trim().toLowerCase().latinise());
class Wikis {
constructor() {
this.bp = Breakpoints.get();
this.sidebarEl = document.querySelector('.js-wiki-sidebar');
this.sidebarExpanded = false;
const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle');
for (const toggle of sidebarToggles) {
toggle.addEventListener('click', e => this.handleToggleSidebar(e));
}
this.newWikiForm = document.querySelector('form.new-wiki-page');
if (this.newWikiForm) {
this.newWikiForm.addEventListener('submit', e => this.handleNewWikiSubmit(e));
}
window.addEventListener('resize', () => this.renderSidebar());
this.renderSidebar();
}
handleNewWikiSubmit(event) {
if (!this.newWikiForm) return;
const slugInput = this.newWikiForm.querySelector('#new_wiki_path');
const slug = slugify(slugInput.value);
if (slug.length > 0) {
const wikisPath = slugInput.getAttribute('data-wikis-path');
window.location.href = `${wikisPath}/${slug}`;
event.preventDefault();
}
}
handleToggleSidebar(event) {
event.preventDefault();
this.sidebarExpanded = !this.sidebarExpanded;
this.renderSidebar();
}
sidebarCanCollapse() {
const bootstrapBreakpoint = this.bp.getBreakpointSize();
return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
}
renderSidebar() {
const { classList } = this.sidebarEl;
if (this.sidebarExpanded || !this.sidebarCanCollapse()) {
if (!classList.contains('right-sidebar-expanded')) {
classList.remove('right-sidebar-collapsed');
classList.add('right-sidebar-expanded');
}
} else if (classList.contains('right-sidebar-expanded')) {
classList.add('right-sidebar-collapsed');
classList.remove('right-sidebar-expanded');
}
}
}
global.Wikis = Wikis;
})(window.gl || (window.gl = {}));
...@@ -220,7 +220,7 @@ header.header-sidebar-pinned { ...@@ -220,7 +220,7 @@ header.header-sidebar-pinned {
padding-right: 0; padding-right: 0;
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
&:not(.build-sidebar) { &:not(.build-sidebar):not(.wiki-sidebar) {
padding-right: $sidebar_collapsed_width; padding-right: $sidebar_collapsed_width;
} }
} }
......
...@@ -4,3 +4,74 @@ ...@@ -4,3 +4,74 @@
margin-right: auto; margin-right: auto;
padding-right: 7px; padding-right: 7px;
} }
.top-area {
position: relative;
&.sub-header-block {
padding-right: 40px;
}
button.sidebar-toggle {
position: absolute;
right: 0;
top: 11px;
display: block;
}
@media (min-width: $screen-sm-min) {
padding-right: 40px;
}
@media (min-width: $screen-md-min) {
&,
&.sub-header-block {
padding-right: 0;
}
button.sidebar-toggle {
display: none;
}
}
}
.right-sidebar.wiki-sidebar {
padding: $gl-padding 0;
&.right-sidebar-collapsed {
display: none;
}
.blocks-container {
padding: 0 $gl-padding;
}
.block {
width: 100%;
}
a {
color: $layout-link-gray;
&:hover,
&.active {
color: $black;
}
}
ul.wiki-pages,
ul.wiki-pages li {
list-style: none;
display: block;
padding: 0;
margin: 0;
}
.wiki-sidebar-header {
padding: 0 $gl-padding $gl-padding;
.gutter-toggle {
margin-top: 0;
}
}
}
...@@ -20,6 +20,12 @@ module NavHelper ...@@ -20,6 +20,12 @@ module NavHelper
end end
elsif current_path?('builds#show') elsif current_path?('builds#show')
"page-gutter build-sidebar right-sidebar-expanded" "page-gutter build-sidebar right-sidebar-expanded"
elsif current_path?('wikis#show') ||
current_path?('wikis#edit') ||
current_path?('wikis#history') ||
current_path?('wikis#pages') ||
current_path?('wikis#git_access')
"page-gutter wiki-sidebar right-sidebar-expanded"
end end
end end
......
= content_for :sub_nav do
.scrolling-tabs-container.sub-nav-scroll
= render 'shared/nav_scroll'
.nav-links.sub-nav.scrolling-tabs
%ul{ class: (container_class) }
= nav_link(html_options: {class: params[:id] == 'home' ? 'active' : '' }) do
= link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
= nav_link(path: 'wikis#pages') do
= link_to 'Pages', namespace_project_wikis_pages_path(@project.namespace, @project)
= nav_link(path: 'wikis#git_access') do
= link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
Git Access
= render 'projects/wikis/new'
%aside.right-sidebar.right-sidebar-expanded.wiki-sidebar.js-wiki-sidebar
.block.wiki-sidebar-header.append-bottom-default
%a.gutter-toggle.pull-right.visible-xs-block.visible-sm-block.js-sidebar-wiki-toggle{ href: "#" }
= icon('angle-double-right')
= link_to namespace_project_wikis_git_access_path(@project.namespace, @project) do
= succeed ' ' do
= icon('cloud-download')
Clone repository
.blocks-container
.block.block-first
%ul.wiki-pages
%li
= link_to 'Home', namespace_project_wiki_path(@project.namespace, @project, :home)
%li
= link_to 'Pages', namespace_project_wikis_pages_path(@project.namespace, @project)
= render 'projects/wikis/new'
- @no_container = true - @no_container = true
- page_title "Edit", @page.title.capitalize, "Wiki" - page_title "Edit", @page.title.capitalize, "Wiki"
= render 'nav'
%div{ class: container_class } %div{ class: container_class }
.top-area .top-area
%button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
= icon('angle-double-left')
.nav-text .nav-text
%strong %strong
- if @page.persisted? - if @page.persisted?
...@@ -21,3 +23,5 @@ ...@@ -21,3 +23,5 @@
New Page New Page
= render 'form' = render 'form'
= render 'sidebar'
- @no_container = true - @no_container = true
- page_title "Git Access", "Wiki" - page_title "Git Access", "Wiki"
= render 'nav'
%div{ class: container_class } %div{ class: container_class }
.sub-header-block .top-area.sub-header-block
%button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
= icon('angle-double-left')
%span.oneline %span.oneline
Git access for Git access for
%strong= @project_wiki.path_with_namespace %strong= @project_wiki.path_with_namespace
...@@ -32,3 +34,5 @@ ...@@ -32,3 +34,5 @@
>> Thin web server (v1.5.0 codename Knife) >> Thin web server (v1.5.0 codename Knife)
>> Maximum connections set to 1024 >> Maximum connections set to 1024
>> Listening on 0.0.0.0:4567, CTRL+C to stop >> Listening on 0.0.0.0:4567, CTRL+C to stop
= render 'sidebar'
- page_title "History", @page.title.capitalize, "Wiki" - page_title "History", @page.title.capitalize, "Wiki"
= render 'nav'
%div{ class: container_class } %div{ class: container_class }
.top-area .top-area
%button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
= icon('angle-double-left')
.nav-text .nav-text
%strong %strong
= link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page) = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
...@@ -35,3 +37,5 @@ ...@@ -35,3 +37,5 @@
%td %td
%strong %strong
= @page.page.wiki.page(@page.page.name, commit.id).try(:format) = @page.page.wiki.page(@page.page.name, commit.id).try(:format)
= render 'sidebar'
- @no_container = true - @no_container = true
- page_title "Pages", "Wiki" - page_title "Pages", "Wiki"
= render 'nav'
%div{ class: container_class } %div{ class: container_class }
.top-area
%button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
= icon('angle-double-left')
.nav-text
%strong
Wiki Pages
%ul.content-list %ul.content-list
- @wiki_pages.each do |wiki_page| - @wiki_pages.each do |wiki_page|
%li %li
...@@ -12,3 +18,5 @@ ...@@ -12,3 +18,5 @@
.pull-right .pull-right
%small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)} %small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)}
= paginate @wiki_pages, theme: 'gitlab' = paginate @wiki_pages, theme: 'gitlab'
= render 'sidebar'
- @no_container = true - @no_container = true
- page_title @page.title.capitalize, "Wiki" - page_title @page.title.capitalize, "Wiki"
= render 'nav'
%div{ class: container_class } %div{ class: container_class }
.top-area .top-area
%button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
= icon('angle-double-left')
.nav-text .nav-text
%strong= @page.title.capitalize %strong= @page.title.capitalize
...@@ -24,3 +26,5 @@ ...@@ -24,3 +26,5 @@
.wiki .wiki
= preserve do = preserve do
= render_wiki_content(@page) = render_wiki_content(@page)
= render 'sidebar'
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