Commit 089ca2df authored by Fatih Acet's avatar Fatih Acet

Merge branch '18546-update-wiki-page-design' into 'master'

Resolve "missing design for wiki page"

### To Do:

- [x] Move page navigation from sub-menu to sidebar menu
- [x] Update wiki page header
- [x] Update wiki edit page actions and header
- [x] Update `Git access` page design
- [ ] ~~Add search to sidebar navigation~~

### Screen Shots:

#### `@media (min-width: $screen-lg)`

![Screen_Shot_2016-11-16_at_12.25.47_PM](/uploads/2efc59639ac53d69808e78a8ba65fcbf/Screen_Shot_2016-11-16_at_12.25.47_PM.png)  
![Screen_Shot_2016-11-16_at_12.25.36_PM](/uploads/bb7e93558335edf4216082cc1ac3f8f5/Screen_Shot_2016-11-16_at_12.25.36_PM.png)  
![Screen_Shot_2016-11-16_at_12.26.43_PM](/uploads/c2dce7cff05680b9a03438ec7d9967b4/Screen_Shot_2016-11-16_at_12.26.43_PM.png)  
![Screen_Shot_2016-11-16_at_12.26.05_PM](/uploads/7dbae25bfc93fb2f01cd231db0cb47d3/Screen_Shot_2016-11-16_at_12.26.05_PM.png) 

#### `@media (min-width: $screen-md)`

![Screen_Shot_2016-11-16_at_12.28.18_PM](/uploads/4fdcc8c88c38093ea5a4fe0b22b79acf/Screen_Shot_2016-11-16_at_12.28.18_PM.png)  
![Screen_Shot_2016-11-16_at_12.28.21_PM](/uploads/ce84a51fdc0623b2b192d8334c2c2f6d/Screen_Shot_2016-11-16_at_12.28.21_PM.png)  

#### `@media (min-width: $screen-sm)`

![Screen_Shot_2016-11-16_at_12.28.05_PM](/uploads/cf612a36259c248ca597a0850546fe75/Screen_Shot_2016-11-16_at_12.28.05_PM.png)  
![Screen_Shot_2016-11-16_at_12.28.08_PM](/uploads/ae4374f9968c1cc064242fde3ad0e214/Screen_Shot_2016-11-16_at_12.28.08_PM.png)  

## Does this MR meet the acceptance criteria?

- [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [x] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- Tests
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?

Closes #18546

See merge request !7429
parents ab54a183 3833a28c
......@@ -262,7 +262,7 @@
new NotificationsDropdown();
break;
case 'wikis':
new Wikis();
new gl.Wikis();
shortcut_handler = new ShortcutsNavigation();
new ZenMode();
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 */
/*= require jquery.nicescroll */
((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;
$(this.sidebarEl).niceScroll();
const sidebarToggles = document.querySelectorAll('.js-sidebar-wiki-toggle');
for (let i = 0; i < sidebarToggles.length; i += 1) {
sidebarToggles[i].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(e) {
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}`;
e.preventDefault();
}
}
handleToggleSidebar(e) {
e.preventDefault();
this.sidebarExpanded = !this.sidebarExpanded;
this.renderSidebar();
}
sidebarCanCollapse() {
const bootstrapBreakpoint = this.bp.getBreakpointSize();
return bootstrapBreakpoint === 'xs' || bootstrapBreakpoint === 'sm';
}
renderSidebar() {
if (!this.sidebarEl) return;
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 = {}));
......@@ -123,7 +123,7 @@
line-height: 28px;
/* Small devices (phones, tablets, 768px and lower) */
@media (max-width: $screen-sm-min) {
@media (max-width: $screen-xs-max) {
width: 100%;
}
}
......
......@@ -220,7 +220,7 @@ header.header-sidebar-pinned {
padding-right: 0;
@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;
}
}
......
......@@ -4,3 +4,128 @@
margin-right: auto;
padding-right: 7px;
}
.wiki-page-header {
@extend .top-area;
position: relative;
.wiki-page-title {
margin: 0;
font-size: 22px;
}
.wiki-last-edit-by {
color: $gl-gray-light;
strong {
color: $gl-text-color;
}
}
.light {
font-weight: normal;
color: $gl-gray-light;
}
.git-access-header {
padding: 16px 40px 11px 0;
line-height: 28px;
font-size: 18px;
}
.git-clone-holder {
width: 100%;
padding-bottom: 40px;
}
button.sidebar-toggle {
position: absolute;
right: 0;
top: 11px;
display: block;
}
@media (min-width: $screen-sm-min) {
&.has-sidebar-toggle {
padding-right: 40px;
}
.git-clone-holder {
width: 480px;
}
.nav-controls {
width: auto;
min-width: 50%;
white-space: nowrap;
}
}
@media (min-width: $screen-md-min) {
&.has-sidebar-toggle {
padding-right: 0;
}
button.sidebar-toggle {
display: none;
}
}
}
.wiki-git-access {
margin: $gl-padding 0;
h3 {
font-size: 22px;
font-weight: normal;
margin-top: 1.4em;
}
}
.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;
}
}
.active > a {
color: $black;
}
ul.wiki-pages,
ul.wiki-pages li {
list-style: none;
padding: 0;
margin: 0;
}
ul.wiki-pages li {
margin: 5px 0 10px;
}
.wiki-sidebar-header {
padding: 0 $gl-padding $gl-padding;
.gutter-toggle {
margin-top: 0;
}
}
}
......@@ -115,6 +115,8 @@ class Projects::WikisController < Projects::ApplicationController
# Call #wiki to make sure the Wiki Repo is initialized
@project_wiki.wiki
@sidebar_wiki_pages = @project_wiki.pages.first(15)
rescue ProjectWiki::CouldNotCreateWikiError
flash[:notice] = "Could not create Wiki Repository at this time. Please try again later."
redirect_to project_path(@project)
......
......@@ -20,6 +20,11 @@ module NavHelper
end
elsif current_path?('builds#show')
"page-gutter build-sidebar right-sidebar-expanded"
elsif current_path?('wikis#show') ||
current_path?('wikis#edit') ||
current_path?('wikis#history') ||
current_path?('wikis#git_access')
"page-gutter wiki-sidebar right-sidebar-expanded"
end
end
......
......@@ -34,9 +34,6 @@
- if @page && @page.persisted?
= f.submit 'Save changes', class: "btn-save btn"
.pull-right
- if can?(current_user, :admin_wiki, @project)
= link_to namespace_project_wiki_path(@project.namespace, @project, @page), data: { confirm: "Are you sure you want to delete this page?"}, method: :delete, class: "btn btn-danger btn-grouped" do
Delete
= link_to "Cancel", namespace_project_wiki_path(@project.namespace, @project, @page), class: "btn btn-cancel btn-grouped"
- else
= f.submit 'Create page', class: "btn-create btn"
......
= 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')
- git_access_url = namespace_project_wikis_git_access_path(@project.namespace, @project)
= link_to git_access_url, class: active_nav_link?(path: 'wikis#git_access') ? 'active' : '' do
= succeed '&nbsp;' do
= icon('cloud-download')
Clone repository
.blocks-container
.block.block-first
%ul.wiki-pages
- @sidebar_wiki_pages.each do |wiki_page|
%li{ class: params[:id] == wiki_page.slug ? 'active' : '' }
= link_to namespace_project_wiki_path(@project.namespace, @project, wiki_page) do
= wiki_page.title.capitalize
.block
= link_to namespace_project_wikis_pages_path(@project.namespace, @project), class: 'btn btn-block' do
More Pages
= render 'projects/wikis/new'
- @no_container = true
- page_title "Edit", @page.title.capitalize, "Wiki"
= render 'nav'
%div{ class: container_class }
.top-area
.wiki-page-header.has-sidebar-toggle
%button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
= icon('angle-double-left')
.nav-text
%strong
%h2.wiki-page-title
- if @page.persisted?
= link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
- else
= @page.title.capitalize
%span.light
&middot;
Edit Page
%span.light
&middot;
- if @page.persisted?
Edit Page
- else
Create Page
.nav-controls
- if !(@page && @page.persisted?)
- if can?(current_user, :create_wiki, @project)
= link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
New Page
- if can?(current_user, :create_wiki, @project)
= link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
New Page
- if @page.persisted?
= link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
Page History
- if can?(current_user, :admin_wiki, @project)
= link_to namespace_project_wiki_path(@project.namespace, @project, @page), data: { confirm: "Are you sure you want to delete this page?"}, method: :delete, class: "btn btn-danger" do
Delete
= render 'form'
= render 'sidebar'
- @no_container = true
- page_title "Git Access", "Wiki"
= render 'nav'
%div{ class: container_class }
.sub-header-block
%span.oneline
Git access for
.wiki-page-header.has-sidebar-toggle
%button.btn.btn-default.visible-xs.visible-sm.pull-right.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
= icon('angle-double-left')
.git-access-header
Clone repository
%strong= @project_wiki.path_with_namespace
.pull-right
= render "shared/clone_panel", project: @project_wiki
= render "shared/clone_panel", project: @project_wiki
.wiki-git-access
%h3 Install Gollum
%pre.dark
:preserve
gem install gollum
.prepend-top-default
%fieldset
%legend Install Gollum:
%pre.dark
:preserve
gem install gollum
%h3 Clone your wiki
%pre.dark
:preserve
git clone #{ content_tag(:span, default_url_to_repo(@project_wiki), class: 'clone')}
cd #{h @project_wiki.path}
%legend Clone Your Wiki:
%pre.dark
:preserve
git clone #{ content_tag(:span, default_url_to_repo(@project_wiki), class: 'clone')}
cd #{h @project_wiki.path}
%h3 Start Gollum and edit locally
%pre.dark
:preserve
gollum
== Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
>> Thin web server (v1.5.0 codename Knife)
>> Maximum connections set to 1024
>> Listening on 0.0.0.0:4567, CTRL+C to stop
%legend Start Gollum And Edit Locally:
%pre.dark
:preserve
gollum
== Sinatra/1.3.5 has taken the stage on 4567 for development with backup from Thin
>> Thin web server (v1.5.0 codename Knife)
>> Maximum connections set to 1024
>> Listening on 0.0.0.0:4567, CTRL+C to stop
= render 'sidebar'
- page_title "History", @page.title.capitalize, "Wiki"
= render 'nav'
%div{ class: container_class }
.top-area
.wiki-page-header.has-sidebar-toggle
%button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
= icon('angle-double-left')
.nav-text
%strong
%h2.wiki-page-title
= link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
%span.light
&middot;
History
%span.light
&middot;
History
.table-holder
%table.table
......@@ -35,3 +38,5 @@
%td
%strong
= @page.page.wiki.page(@page.page.name, commit.id).try(:format)
= render 'sidebar'
- @no_container = true
- page_title "Pages", "Wiki"
= render 'nav'
%div{ class: container_class }
.wiki-page-header
.nav-text
%h2.wiki-page-title
Wiki Pages
.nav-controls
= link_to namespace_project_wikis_git_access_path(@project.namespace, @project), class: 'btn' do
= icon('cloud-download')
Clone repository
%ul.content-list
- @wiki_pages.each do |wiki_page|
%li
......
- @no_container = true
- page_title @page.title.capitalize, "Wiki"
= render 'nav'
%div{ class: container_class }
.top-area
.wiki-page-header.has-sidebar-toggle
%button.btn.btn-default.sidebar-toggle.js-sidebar-wiki-toggle{ role: "button", type: "button" }
= icon('angle-double-left')
.nav-text
%strong= @page.title.capitalize
%h2.wiki-page-title= @page.title.capitalize
%span.wiki-last-edit-by
&middot;
last edited by #{@page.commit.author.name} #{time_ago_with_tooltip(@page.commit.authored_date)}
Last edited by
%strong
#{@page.commit.author.name}
#{time_ago_with_tooltip(@page.commit.authored_date)}
.nav-controls
= render 'main_links'
......@@ -19,8 +23,9 @@
This is an old version of this page.
You can view the #{link_to "most recent version", namespace_project_wiki_path(@project.namespace, @project, @page)} or browse the #{link_to "history", namespace_project_wiki_history_path(@project.namespace, @project, @page)}.
.wiki-holder.prepend-top-default.append-bottom-default
.wiki
= preserve do
= render_wiki_content(@page)
= render 'sidebar'
---
title: Update wiki page design
merge_request: 7429
author:
......@@ -49,7 +49,6 @@ Feature: Project Wiki
Scenario: View all pages
Given I have an existing wiki page
And I browse to that Wiki page
And I click on the "Pages" button
Then I should see the existing page in the pages list
Scenario: File exists in wiki repo
......@@ -72,13 +71,11 @@ Feature: Project Wiki
@javascript
Scenario: New Wiki page that has a path
Given I create a New page with paths
And I click on the "Pages" button
Then I should see non-escaped link in the pages list
@javascript
Scenario: Edit Wiki page that has a path
Given I create a New page with paths
And I click on the "Pages" button
And I edit the Wiki page with a path
Then I should see a non-escaped path
And I should see the Editing page
......@@ -88,7 +85,6 @@ Feature: Project Wiki
@javascript
Scenario: View the page history of a Wiki page that has a path
Given I create a New page with paths
And I click on the "Pages" button
And I view the page history of a Wiki page that has a path
Then I should see a non-escaped path
And I should see the page history
......@@ -96,7 +92,6 @@ Feature: Project Wiki
@javascript
Scenario: View an old page version of a Wiki page
Given I create a New page with paths
And I click on the "Pages" button
And I edit the Wiki page with a path
Then I should see a non-escaped path
And I should see the Editing page
......
......@@ -241,7 +241,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
page.within(:css, ".nav-text") do
expect(page).to have_content "Test"
expect(page).to have_content "Edit Page"
expect(page).to have_content "Create Page"
end
end
......@@ -258,7 +258,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
expect(current_path).to eq namespace_project_wiki_path(@project.namespace, @project, "api")
page.within(:css, ".nav-text") do
expect(page).to have_content "Edit"
expect(page).to have_content "Create"
expect(page).to have_content "Api"
end
end
......@@ -271,7 +271,7 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
expect(current_path).to eq namespace_project_wiki_path(@project.namespace, @project, "raketasks")
page.within(:css, ".nav-text") do
expect(page).to have_content "Edit"
expect(page).to have_content "Create"
expect(page).to have_content "Rake"
end
end
......
......@@ -29,7 +29,7 @@ class Spinach::Features::ProjectWiki < Spinach::FeatureSteps
expect(page).to have_content "link test"
click_link "link test"
expect(page).to have_content "Edit Page"
expect(page).to have_content "Create Page"
end
step 'I have an existing Wiki page' do
......@@ -80,13 +80,9 @@ class Spinach::Features::ProjectWiki < Spinach::FeatureSteps
expect(page).to have_content "Page was successfully deleted"
end
step 'I click on the "Pages" button' do
click_on "Pages"
end
step 'I should see the existing page in the pages list' do
expect(page).to have_content current_user.name
expect(page).to have_content @page.title
expect(find('.wiki-pages')).to have_content @page.title.capitalize
end
step 'I have an existing Wiki page with images linked on page' do
......@@ -125,7 +121,7 @@ class Spinach::Features::ProjectWiki < Spinach::FeatureSteps
step 'I should see the new wiki page form' do
expect(current_path).to match('wikis/image.jpg')
expect(page).to have_content('New Wiki Page')
expect(page).to have_content('Edit Page')
expect(page).to have_content('Create Page')
end
step 'I create a New page with paths' do
......@@ -142,8 +138,8 @@ class Spinach::Features::ProjectWiki < Spinach::FeatureSteps
end
step 'I edit the Wiki page with a path' do
expect(page).to have_content('three')
click_on 'three'
expect(find('.wiki-pages')).to have_content('Three')
click_on 'Three'
expect(find('.nav-text')).to have_content('Three')
click_on 'Edit'
end
......@@ -157,7 +153,7 @@ class Spinach::Features::ProjectWiki < Spinach::FeatureSteps
end
step 'I view the page history of a Wiki page that has a path' do
click_on 'three'
click_on 'Three'
click_on 'Page History'
end
......
......@@ -20,7 +20,7 @@ feature 'Projects > Wiki > User creates wiki page', feature: true do
click_button 'Create page'
expect(page).to have_content('Home')
expect(page).to have_content("last edited by #{user.name}")
expect(page).to have_content("Last edited by #{user.name}")
expect(page).to have_content('My awesome wiki!')
end
end
......@@ -41,7 +41,7 @@ feature 'Projects > Wiki > User creates wiki page', feature: true do
click_button 'Create page'
expect(page).to have_content('Foo')
expect(page).to have_content("last edited by #{user.name}")
expect(page).to have_content("Last edited by #{user.name}")
expect(page).to have_content('My awesome wiki!')
end
......@@ -55,7 +55,7 @@ feature 'Projects > Wiki > User creates wiki page', feature: true do
click_button 'Create page'
expect(page).to have_content('Spaces in the name')
expect(page).to have_content("last edited by #{user.name}")
expect(page).to have_content("Last edited by #{user.name}")
expect(page).to have_content('My awesome wiki!')
end
......@@ -69,7 +69,7 @@ feature 'Projects > Wiki > User creates wiki page', feature: true do
click_button 'Create page'
expect(page).to have_content('Hyphens in the name')
expect(page).to have_content("last edited by #{user.name}")
expect(page).to have_content("Last edited by #{user.name}")
expect(page).to have_content('My awesome wiki!')
end
end
......@@ -85,7 +85,7 @@ feature 'Projects > Wiki > User creates wiki page', feature: true do
click_button 'Create page'
expect(page).to have_content('Home')
expect(page).to have_content("last edited by #{user.name}")
expect(page).to have_content("Last edited by #{user.name}")
expect(page).to have_content('My awesome wiki!')
end
end
......@@ -105,7 +105,7 @@ feature 'Projects > Wiki > User creates wiki page', feature: true do
click_button 'Create page'
expect(page).to have_content('Foo')
expect(page).to have_content("last edited by #{user.name}")
expect(page).to have_content("Last edited by #{user.name}")
expect(page).to have_content('My awesome wiki!')
end
end
......
......@@ -22,7 +22,7 @@ feature 'Projects > Wiki > User updates wiki page', feature: true do
click_button 'Save changes'
expect(page).to have_content('Home')
expect(page).to have_content("last edited by #{user.name}")
expect(page).to have_content("Last edited by #{user.name}")
expect(page).to have_content('My awesome wiki!')
end
end
......@@ -37,7 +37,7 @@ feature 'Projects > Wiki > User updates wiki page', feature: true do
click_button 'Save changes'
expect(page).to have_content('Home')
expect(page).to have_content("last edited by #{user.name}")
expect(page).to have_content("Last edited by #{user.name}")
expect(page).to have_content('My awesome wiki!')
end
end
......
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