Merge branch 'dz-small-ui-fixes' into 'master'

Set of UI fixes

* Improve wiki pages
* Improve profile pages

cc @skyruler

See merge request !2758

CHANGELOG

@@ -8,6 +8,7 @@ v 8.5.1
     possible with MRs
   - Fix an issue where MRs weren't sortable
   - Restrict permissions on public/uploads
+  - Set of small UI fixes to project, profile, and wiki pages
 
 v 8.5.0
   - Fix duplicate "me" in tooltip of the "thumbsup" awards Emoji (Stan Hu)

app/assets/javascripts/wikis.js.coffee

@@ -2,7 +2,7 @@
 
 class @Wikis
   constructor: ->
-    $('.build-new-wiki').bind 'click', (e) =>
+    $('.new-wiki-page').on 'submit', (e) =>
       $('[data-error~=slug]').addClass('hidden')
       field = $('#new_wiki_path')
       slug = @slugify(field.val())
@@ -10,6 +10,7 @@ class @Wikis
       if (slug.length > 0)
         path = field.attr('data-wikis-path')
         location.href = path + '/' + slug
+        e.preventDefault()
 
   dasherize: (value) ->
     value.replace(/[_\s]+/g, '-')

app/assets/stylesheets/framework/nav.scss

@@ -77,12 +77,21 @@
     margin-bottom: 0px;
 
     > .dropdown {
-      margin-right: 10px;
+      margin-right: $gl-padding-top;
       display: inline-block;
     }
 
     > .btn {
+      margin-right: $gl-padding-top;
       display: inline-block;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+
+    > .btn-grouped {
+      float: none;
     }
 
     > form {
@@ -94,7 +103,7 @@
       display: inline-block;
       position: relative;
       top: 1px;
-      margin-right: 10px;
+      margin-right: $gl-padding-top;
 
       /* Medium devices (desktops, 992px and up) */
       @media (min-width: $screen-md-min) { width: 200px; }

app/assets/stylesheets/pages/wiki.scss

@@ -4,8 +4,3 @@
   margin-right: auto;
   padding-right: 7px;
 }
-
-.wiki-last-edit-by {
-  font-size: 80%;
-  font-weight: normal;
-}

app/views/profiles/applications.html.haml

 - page_title "Applications"
 - header_title page_title, applications_profile_path
 
-.gray-content-block.top-block
+.alert.alert-help.prepend-top-default
   - if user_oauth_applications?
     Manage applications that can use GitLab as an OAuth provider,
     and applications that you've authorized to use your account.

app/views/profiles/audit_log.html.haml

 - page_title "Audit Log"
 - header_title page_title, audit_log_profile_path
 
-.gray-content-block.top-block
+.alert.alert-help.prepend-top-default
   History of authentications
 
 .prepend-top-default

app/views/profiles/emails/index.html.haml

 - page_title "Emails"
 - header_title page_title, profile_emails_path
 
-.gray-content-block.top-block
-  Control emails linked to your account
-
-%ul.prepend-top-default
-  %li
-    Your
-    %b Primary Email
-    will be used for avatar detection and web based operations, such as edits and merges.
-  %li
-    Your
-    %b Notification Email
-    will be used for account notifications.
-  %li
-    Your
-    %b Public Email
-    will be displayed on your public profile.
-  %li
-    All email addresses will be used to identify your commits.
+.alert.alert-help.prepend-top-default
+  %ul
+    %li
+      Your
+      %b Primary Email
+      will be used for avatar detection and web based operations, such as edits and merges.
+    %li
+      Your
+      %b Notification Email
+      will be used for account notifications.
+    %li
+      Your
+      %b Public Email
+      will be displayed on your public profile.
+    %li
+      All email addresses will be used to identify your commits.
 
 .panel.panel-default
   .panel-heading

app/views/profiles/keys/index.html.haml

 - page_title "SSH Keys"
 - header_title page_title, profile_keys_path
 
-.gray-content-block.top-block
-  .pull-right
+.top-area
+  .nav-text
+    Before you can add an SSH key you need to
+    = link_to "generate it.", help_page_path("ssh", "README")
+  .nav-controls
     = link_to new_profile_key_path, class: "btn btn-new" do
       = icon('plus')
       Add SSH Key
-  .oneline
-    Before you can add an SSH key you need to
-    = link_to "generate it.", help_page_path("ssh", "README")
 
 .prepend-top-default
 = render 'key_table'

app/views/profiles/notifications/show.html.haml

 - page_title "Notifications"
 - header_title page_title, profile_notifications_path
 
-.gray-content-block.top-block
-  These are your global notification settings.
-
 .prepend-top-default
 = form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications form-horizontal global-notifications-form' } do |f|
   -if @user.errors.any?

app/views/profiles/passwords/edit.html.haml

 - page_title "Password"
 - header_title page_title, edit_profile_password_path
 
-.gray-content-block.top-block
+.alert.alert-help.prepend-top-default
   - if @user.password_automatically_set?
     Set your password.
   - else

app/views/profiles/preferences/show.html.haml

 - page_title 'Preferences'
 - header_title page_title, profile_preferences_path
-- @blank_container = true
 
-.alert.alert-help
+.alert.alert-help.prepend-top-default
   These settings allow you to customize the appearance and behavior of the site.
   They are saved with your account and will persist to any device you use to
   access the site.

app/views/profiles/show.html.haml

-.gray-content-block.top-block
+.alert.alert-help.prepend-top-default
   This information will appear on your profile.
   - if current_user.ldap_user?
     Some options are unavailable for LDAP accounts

app/views/projects/edit.html.haml

-- @blank_container = true
-
 .project-edit-container.prepend-top-default
   .project-edit-errors
   .project-edit-content

app/views/projects/wikis/_main_links.html.haml

-%span.pull-right
-  - if (@page && @page.persisted?)
-    = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn btn-grouped" do
-      Page History
-    - if can?(current_user, :create_wiki, @project)
-      = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn btn-grouped" do
-        %i.fa.fa-pencil-square-o
-        Edit
-    - 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-remove" do
-        = icon('trash')
-        Delete
+- if (@page && @page.persisted?)
+  = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn btn-grouped" do
+    Page History
+  - if can?(current_user, :create_wiki, @project)
+    = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn btn-grouped" do
+      %i.fa.fa-pencil-square-o
+      Edit
+  - 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-remove" do
+      = icon('trash')
+      Delete

app/views/projects/wikis/_nav.html.haml

@@ -16,4 +16,4 @@
         = icon('plus')
         New Page
 
-      = render 'projects/wikis/new'
+= render 'projects/wikis/new'

app/views/projects/wikis/_new.html.haml

@@ -5,9 +5,10 @@
         %a.close{href: "#", "data-dismiss" => "modal"} ×
         %h3.page-title New Wiki Page
       .modal-body
-        .form-group
-          = label_tag :new_wiki_path do
-            %span Page slug
-          = text_field_tag :new_wiki_path, nil, placeholder: 'how-to-setup', class: 'form-control', required: true, :'data-wikis-path' => namespace_project_wikis_path(@project.namespace, @project)
-        .form-actions
-          = link_to 'Create Page', '#', class: 'build-new-wiki btn btn-create'
+        %form.new-wiki-page
+          .form-group
+            = label_tag :new_wiki_path do
+              %span Page slug
+            = text_field_tag :new_wiki_path, nil, placeholder: 'how-to-setup', class: 'form-control', required: true, :'data-wikis-path' => namespace_project_wikis_path(@project.namespace, @project), autofocus: true
+          .form-actions
+            = button_tag 'Create Page', class: 'build-new-wiki btn btn-create'

app/views/projects/wikis/edit.html.haml

 - page_title "Edit", @page.title.capitalize, "Wiki"
 = render "header_title"
-
 = render 'nav'
-.gray-content-block
-  .pull-right
+
+.top-area
+  .nav-text
+    %strong
+      - if @page.persisted?
+        = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
+      - else
+        = @page.title.capitalize
+    %span.light
+      ·
+      Edit Page
+
+  .nav-controls
     = render 'main_links'
 
-  %h3.page-title.oneline
-    %span.light Edit Page
-    - if @page.persisted?
-      = link_to @page.title, namespace_project_wiki_path(@project.namespace, @project, @page)
-    - else
-      = @page.title
 
 = render 'form'

app/views/projects/wikis/history.html.haml

 - page_title "History", @page.title.capitalize, "Wiki"
 = render "header_title"
-
 = render 'nav'
-.gray-content-block
-  %h3.page-title
-    %span.light History for
-    = link_to @page.title, namespace_project_wiki_path(@project.namespace, @project, @page)
+
+.top-area
+  .nav-text
+    %strong
+      = link_to @page.title.capitalize, namespace_project_wiki_path(@project.namespace, @project, @page)
+    %span.light
+      ·
+      History
 
 .table-holder
   %table.table

app/views/projects/wikis/pages.html.haml

@@ -2,15 +2,12 @@
 = render "header_title"
 
 = render 'nav'
-.gray-content-block
-  All pages in this wiki are listed below.
-  
+
 %ul.content-list
   - @wiki_pages.each do |wiki_page|
     %li
-      %h4
-        = link_to wiki_page.title, namespace_project_wiki_path(@project.namespace, @project, wiki_page)
-        %small (#{wiki_page.format})
-        .pull-right
-          %small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)}
+      = link_to wiki_page.title, namespace_project_wiki_path(@project.namespace, @project, wiki_page)
+      %small (#{wiki_page.format})
+      .pull-right
+        %small Last edited #{time_ago_with_tooltip(wiki_page.commit.authored_date)}
 = paginate @wiki_pages, theme: 'gitlab'

app/views/projects/wikis/show.html.haml

 - page_title @page.title.capitalize, "Wiki"
 = render "header_title"
-
 = render 'nav'
 
-.gray-content-block
-  = render 'main_links'
-  %h3.page-title.oneline
-    = @page.title.capitalize
+.top-area
+  .nav-text
+    %strong= @page.title.capitalize
 
     %span.wiki-last-edit-by
       ·
       last edited by #{@page.commit.author.name} #{time_ago_with_tooltip(@page.commit.authored_date)}
 
+  .nav-controls
+    = render 'main_links'
+
 - if @page.historical?
   .warning_message
     This is an old version of this page.

features/steps/profile/profile.rb

@@ -97,7 +97,7 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
   end
 
   step "I should see a password error message" do
-    page.within '.alert' do
+    page.within '.alert-danger' do
       expect(page).to have_content "Password confirmation doesn't match"
     end
   end

features/steps/project/source/markdown_render.rb

@@ -238,7 +238,11 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I see new wiki page named test' do
     expect(current_path).to eq  namespace_project_wiki_path(@project.namespace, @project, "test")
-    expect(page).to have_content "Edit Page test"
+
+    page.within(:css, ".nav-text") do
+      expect(page).to have_content "Test"
+      expect(page).to have_content "Edit Page"
+    end
   end
 
   When 'I go back to wiki page home' do
@@ -252,7 +256,11 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I see Gitlab API document' do
     expect(current_path).to eq namespace_project_wiki_path(@project.namespace, @project, "api")
-    expect(page).to have_content "Edit Page api"
+
+    page.within(:css, ".nav-text") do
+      expect(page).to have_content "Edit"
+      expect(page).to have_content "Api"
+    end
   end
 
   step 'I click on Rake tasks link' do
@@ -261,7 +269,11 @@ class Spinach::Features::ProjectSourceMarkdownRender < Spinach::FeatureSteps
 
   step 'I see Rake tasks directory' do
     expect(current_path).to eq namespace_project_wiki_path(@project.namespace, @project, "raketasks")
-    expect(page).to have_content "Edit Page raketasks"
+
+    page.within(:css, ".nav-text") do
+      expect(page).to have_content "Edit"
+      expect(page).to have_content "Rake"
+    end
   end
 
   step 'I go directory which contains README file' do

features/steps/project/wiki.rb

@@ -120,7 +120,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 image.jpg')
+    expect(page).to have_content('Edit Page')
   end
 
   step 'I create a New page with paths' do
@@ -159,7 +159,9 @@ class Spinach::Features::ProjectWiki < Spinach::FeatureSteps
   end
 
   step 'I should see the page history' do
-    expect(page).to have_content('History for')
+    page.within(:css, ".nav-text") do
+      expect(page).to have_content('History')
+    end
   end
 
   step 'I search for Wiki content' do