Merge branch 'ui-improvements' into 'master'

Ui improvements

* update bootstrap
* move milestones and labels to the left
* make open/closed/all filter as tab
* make issues page more compact

For  #1871

See merge request !1549

Gemfile.lock

@@ -47,6 +47,9 @@ GEM
     astrolabe (1.3.0)
       parser (>= 2.2.0.pre.3, < 3.0)
     attr_required (1.0.0)
+    autoprefixer-rails (5.1.6)
+      execjs
+      json
     awesome_print (1.2.0)
     axiom-types (0.0.5)
       descendants_tracker (~> 0.0.1)
@@ -57,8 +60,9 @@ GEM
       erubis (>= 2.6.6)
     binding_of_caller (0.7.2)
       debug_inspector (>= 0.0.1)
-    bootstrap-sass (3.0.3.0)
-      sass (~> 3.2)
+    bootstrap-sass (3.3.3)
+      autoprefixer-rails (>= 5.0.0.1)
+      sass (>= 3.2.19)
     browser (0.7.2)
     builder (3.2.2)
     cal-heatmap-rails (0.0.1)

app/assets/javascripts/issues.js.coffee

@@ -15,7 +15,7 @@
           $(this).html totalIssues + 1
         else
           $(this).html totalIssues - 1
-    $("body").on "click", ".issues-filters .dropdown-menu a", ->
+    $("body").on "click", ".issues-other-filters .dropdown-menu a", ->
       $('.issues-list').block(
         message: null,
         overlayCSS:
@@ -77,9 +77,9 @@
         ids.push $(value).attr("data-id")
 
       $("#update_issues_ids").val ids
-      $(".issues-filters").hide()
+      $(".issues-other-filters").hide()
       $(".issues_bulk_update").show()
     else
       $("#update_issues_ids").val []
       $(".issues_bulk_update").hide()
-      $(".issues-filters").show()
+      $(".issues-other-filters").show()

app/assets/stylesheets/sections/merge_requests.scss

@@ -24,6 +24,7 @@
 
     .accept-control {
       display: inline-block;
+      margin: 0;
       margin-left: 20px;
       padding: 10px 0;
       line-height: 20px;
@@ -31,6 +32,7 @@
 
       .remove_source_checkbox {
         margin: 0;
+        font-weight: bold;
       }
     }
   }

app/assets/stylesheets/sections/nav_sidebar.scss

@@ -40,12 +40,16 @@
 
 .nav-sidebar li {
   &.active a {
-    color: #111;
-    background: #EEE;
+    color: #333;
+    background: #FFF;
     font-weight: bold;
+    border: 1px solid #EEE;
+    border-right: 1px solid transparent;
+    border-left: 3px solid $style_color;
 
     &.no-highlight {
       background: none;
+      border: none;
     }
 
     i {
@@ -65,7 +69,7 @@
     color: #555;
     display: block;
     text-decoration: none;
-    padding: 6px 15px;
+    padding: 8px 15px;
     font-size: 13px;
     line-height: 20px;
     text-shadow: 0 1px 2px #FFF;
@@ -133,7 +137,7 @@
       li a {
         padding-left: 18px;
         font-size: 14px;
-        padding: 10px 15px;
+        padding: 8px 15px;
         text-align: center;
 
         & > span {

app/views/admin/projects/index.html.haml

@@ -13,15 +13,13 @@
         .form-group
           %strong Activity
           .checkbox
-            = label_tag :with_push, 'Not empty'
-            = check_box_tag :with_push, 1, params[:with_push]
-             
-            %span.light Projects with push events
+            = label_tag :with_push do
+              = check_box_tag :with_push, 1, params[:with_push]
+              %span Projects with push events
           .checkbox
-            = label_tag :abandoned, 'Abandoned'
-            = check_box_tag :abandoned, 1, params[:abandoned]
-             
-            %span.light No activity over 6 month
+            = label_tag :abandoned do
+              = check_box_tag :abandoned, 1, params[:abandoned]
+              %span No activity over 6 month
 
         %fieldset
           %strong Visibility level:

app/views/devise/sessions/_new_base.html.haml

@@ -2,11 +2,11 @@
   = f.text_field :login, class: "form-control top", placeholder: "Username or Email", autofocus: "autofocus"
   = f.password_field :password, class: "form-control bottom", placeholder: "Password"
   - if devise_mapping.rememberable?
-    .remember-me
-      %label.checkbox.remember_me{for: "user_remember_me"}
+    .remember-me.checkbox
+      %label{for: "user_remember_me"}
         = f.check_box :remember_me
         %span Remember me
-        .pull-right
-          = link_to "Forgot your password?", new_password_path(resource_name)
+      .pull-right
+        = link_to "Forgot your password?", new_password_path(resource_name)
   %div
     = f.submit "Sign in", class: "btn btn-save"

app/views/layouts/nav/_project.html.haml

@@ -49,8 +49,14 @@
           %span
             Graphs
 
+    = nav_link(controller: :milestones) do
+      = link_to project_milestones_path(@project), title: 'Milestones' do
+        %i.fa.fa-clock-o
+        %span
+          Milestones
+
     - if project_nav_tab? :issues
-      = nav_link(controller: %w(issues milestones labels)) do
+      = nav_link(controller: :issues) do
         = link_to url_for_project_issues, title: 'Issues', class: 'shortcuts-issues' do
           %i.fa.fa-exclamation-circle
           %span
@@ -66,6 +72,12 @@
             Merge Requests
             %span.count.merge_counter= @project.merge_requests.opened.count
 
+    = nav_link(controller: :labels) do
+      = link_to project_labels_path(@project), title: 'Labels' do
+        %i.fa.fa-tags
+        %span
+          Labels
+
     - if project_nav_tab? :wiki
       = nav_link(controller: :wikis) do
         = link_to project_wiki_path(@project, :home), title: 'Wiki', class: 'shortcuts-wiki' do

app/views/projects/_issues_nav.html.haml

-%ul.nav.nav-tabs
-  - if project_nav_tab? :issues
-    = nav_link(controller: :issues) do
-      = link_to project_issues_path(@project), class: "tab" do
-        %i.fa.fa-exclamation-circle
-        Issues
-  - if project_nav_tab? :merge_requests
-    = nav_link(controller: :merge_requests) do
-      = link_to project_merge_requests_path(@project), class: "tab" do
-        %i.fa.fa-tasks
-        Merge Requests
-  = nav_link(controller: :milestones) do
-    = link_to project_milestones_path(@project), class: "tab" do
-      %i.fa.fa-clock-o
-      Milestones
-  = nav_link(controller: :labels) do
-    = link_to project_labels_path(@project), class: "tab" do
-      %i.fa.fa-tags
-      Labels
-
-
-  - if current_controller?(:issues)
-    - if current_user
-      %li.hidden-xs
-        = link_to project_issues_path(@project, :atom, { private_token: current_user.private_token }) do
-          %i.fa.fa-rss
-
-    %li.pull-right
-      .pull-right
-        .pull-left
-          = form_tag project_issues_path(@project), method: :get, id: "issue_search_form", class: 'pull-left issue-search-form'  do
-            .append-right-10.hidden-xs.hidden-sm
-              = search_field_tag :issue_search, params[:issue_search], { placeholder: 'Filter by title or description', class: 'form-control issue_search search-text-input input-mn-300' }
-              = hidden_field_tag :state, params['state']
-              = hidden_field_tag :scope, params['scope']
-              = hidden_field_tag :assignee_id, params['assignee_id']
-              = hidden_field_tag :milestone_id, params['milestone_id']
-              = hidden_field_tag :label_id, params['label_id']
-
-        - if can? current_user, :write_issue, @project
-          = link_to new_project_issue_path(@project, issue: { assignee_id: params[:assignee_id], milestone_id: params[:milestone_id]}), class: "btn btn-new pull-left", title: "New Issue", id: "new_issue_link" do
-            %i.fa.fa-plus
-            New Issue
-
-  - if current_controller?(:merge_requests)
-    %li.pull-right
-      .pull-right
-        - if can? current_user, :write_merge_request, @project
-          = link_to new_project_merge_request_path(@project), class: "btn btn-new pull-left", title: "New Merge Request" do
-            %i.fa.fa-plus
-            New Merge Request

app/views/projects/_visibility_level.html.haml

@@ -7,8 +7,8 @@
       - Gitlab::VisibilityLevel.values.each do |level|
         .radio
           - restricted = restricted_visibility_levels.include?(level)
-          = f.radio_button :visibility_level, level, checked: (visibility_level == level), disabled: restricted
           = label :project_visibility_level, level do
+            = f.radio_button :visibility_level, level, checked: (visibility_level == level), disabled: restricted
             = visibility_level_icon(level)
             .option-title
               = visibility_level_label(level)

app/views/projects/issues/_issues.html.haml

-.append-bottom-10
-  .check-all-holder
-    = check_box_tag "check_all_issues", nil, false, class: "check_all_issues left", disabled: !can?(current_user, :modify_issue, @project)
-  = render 'shared/issuable_filter'
-
-  .clearfix
-    .issues_bulk_update.hide
-      = form_tag bulk_update_project_issues_path(@project), method: :post  do
-        = select_tag('update[status]', options_for_select([['Open', 'open'], ['Closed', 'closed']]), prompt: "Status")
-        = project_users_select_tag('update[assignee_id]', placeholder: 'Assignee')
-        = select_tag('update[milestone_id]', bulk_update_milestone_options, prompt: "Milestone")
-        = hidden_field_tag 'update[issues_ids]', []
-        = hidden_field_tag :status, params[:status]
-        = button_tag "Update issues", class: "btn update_selected_issues btn-save"
-
 .panel.panel-default
   %ul.well-list.issues-list
     = render @issues

app/views/projects/issues/index.html.haml

-= render "projects/issues_nav"
+.append-bottom-10
+  .pull-right
+    .pull-left
+      - if current_user
+        .hidden-xs.pull-left
+          = link_to project_issues_path(@project, :atom, { private_token: current_user.private_token }), class: 'btn append-right-10' do
+            %i.fa.fa-rss
+
+      = form_tag project_issues_path(@project), method: :get, id: "issue_search_form", class: 'pull-left issue-search-form'  do
+        .append-right-10.hidden-xs.hidden-sm
+          = search_field_tag :issue_search, params[:issue_search], { placeholder: 'Filter by title or description', class: 'form-control issue_search search-text-input input-mn-300' }
+          = hidden_field_tag :state, params['state']
+          = hidden_field_tag :scope, params['scope']
+          = hidden_field_tag :assignee_id, params['assignee_id']
+          = hidden_field_tag :milestone_id, params['milestone_id']
+          = hidden_field_tag :label_id, params['label_id']
+
+    - if can? current_user, :write_issue, @project
+      = link_to new_project_issue_path(@project, issue: { assignee_id: params[:assignee_id], milestone_id: params[:milestone_id]}), class: "btn btn-new pull-left", title: "New Issue", id: "new_issue_link" do
+        %i.fa.fa-plus
+        New Issue
+
+  = render 'shared/issuable_filter'
+
+  .clearfix
+    .issues_bulk_update.hide
+      = form_tag bulk_update_project_issues_path(@project), method: :post  do
+        = select_tag('update[status]', options_for_select([['Open', 'open'], ['Closed', 'closed']]), prompt: "Status")
+        = project_users_select_tag('update[assignee_id]', placeholder: 'Assignee')
+        = select_tag('update[milestone_id]', bulk_update_milestone_options, prompt: "Milestone")
+        = hidden_field_tag 'update[issues_ids]', []
+        = hidden_field_tag :status, params[:status]
+        = button_tag "Update issues", class: "btn update_selected_issues btn-save"
 
 .issues-holder
   = render "issues"

app/views/projects/labels/index.html.haml

-= render "projects/issues_nav"
-
 - if can? current_user, :admin_label, @project
   = link_to new_project_label_path(@project), class: "pull-right btn btn-new" do
     New label

app/views/projects/merge_requests/index.html.haml

-= render "projects/issues_nav"
-
 .merge-requests-holder
   .append-bottom-10
+    .pull-right
+      - if can? current_user, :write_merge_request, @project
+        = link_to new_project_merge_request_path(@project), class: "btn btn-new pull-left", title: "New Merge Request" do
+          %i.fa.fa-plus
+          New Merge Request
     = render 'shared/issuable_filter'
   .panel.panel-default
     %ul.well-list.mr-list

app/views/projects/merge_requests/show/_mr_accept.html.haml

@@ -17,7 +17,7 @@
           .accept-action
             = f.submit "Accept Merge Request", class: "btn btn-create accept_merge_request"
           - if can_remove_branch?(@merge_request.source_project, @merge_request.source_branch) && !@merge_request.for_fork?
-            .accept-control
+            .accept-control.checkbox
               = label_tag :should_remove_source_branch, class: "remove_source_checkbox" do
                 = check_box_tag :should_remove_source_branch
                 Remove source-branch

app/views/projects/milestones/index.html.haml

-= render "projects/issues_nav"
-.milestones_content
-  %h3.page-title
-    Milestones
-    - if can? current_user, :admin_milestone, @project
-      = link_to new_project_milestone_path(@project), class: "pull-right btn btn-new", title: "New Milestone" do
-        %i.fa.fa-plus
-        New Milestone
-
+.pull-right
+  - if can? current_user, :admin_milestone, @project
+    = link_to new_project_milestone_path(@project), class: "pull-right btn btn-new", title: "New Milestone" do
+      %i.fa.fa-plus
+      New Milestone
 = render 'shared/milestones_filter'
 
 .milestones

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

-= render "projects/issues_nav"
 %h4.page-title
   .issue-box{ class: issue_box_class(@milestone) }
     - if @milestone.closed?

app/views/shared/_issuable_filter.html.haml

 .issues-filters
-  .pull-left.append-right-20
-    %ul.nav.nav-pills.nav-compact
+  .issues-state-filters
+    %ul.nav.nav-tabs
       %li{class: ("active" if params[:state] == 'opened')}
         = link_to page_filter_path(state: 'opened') do
           %i.fa.fa-exclamation-circle
@@ -14,99 +14,106 @@
           %i.fa.fa-compass
           All
 
-  .dropdown.inline.assignee-filter
-    %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
-      %i.fa.fa-user
-      %span.light assignee:
-      - if @assignee.present?
-        %strong= @assignee.name
-      - elsif params[:assignee_id] == "0"
-        Unassigned
-      - else
-        Any
-      %b.caret
-    %ul.dropdown-menu
-      %li
-        = link_to page_filter_path(assignee_id: nil) do
-          Any
-        = link_to page_filter_path(assignee_id: 0) do
-          Unassigned
-      - @assignees.sort_by(&:name).each do |user|
-        %li
-          = link_to page_filter_path(assignee_id: user.id) do
-            = image_tag avatar_icon(user.email), class: "avatar s16", alt: ''
-            = user.name
-
-  .dropdown.inline.prepend-left-10.author-filter
-    %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
-      %i.fa.fa-user
-      %span.light author:
-      - if @author.present?
-        %strong= @author.name
-      - elsif params[:author_id] == "0"
-        Unassigned
-      - else
-        Any
-      %b.caret
-    %ul.dropdown-menu
-      %li
-        = link_to page_filter_path(author_id: nil) do
-          Any
-        = link_to page_filter_path(author_id: 0) do
-          Unassigned
-      - @authors.sort_by(&:name).each do |user|
-        %li
-          = link_to page_filter_path(author_id: user.id) do
-            = image_tag avatar_icon(user.email), class: "avatar s16", alt: ''
-            = user.name
-
-  .dropdown.inline.prepend-left-10.milestone-filter
-    %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
-      %i.fa.fa-clock-o
-      %span.light milestone:
-      - if @milestone.present?
-        %strong= @milestone.title
-      - elsif params[:milestone_id] == "0"
-        None (backlog)
-      - else
-        Any
-      %b.caret
-    %ul.dropdown-menu
-      %li
-        = link_to page_filter_path(milestone_id: nil) do
-          Any
-        = link_to page_filter_path(milestone_id: 0) do
-          None (backlog)
-      - @milestones.each do |milestone|
-        %li
-          = link_to page_filter_path(milestone_id: milestone.id) do
-            %strong= milestone.title
-            %small.light= milestone.expires_at
+  %div
+    - if controller.controller_name == 'issues'
+      .check-all-holder
+        = check_box_tag "check_all_issues", nil, false,
+          class: "check_all_issues left",
+          disabled: !can?(current_user, :modify_issue, @project)
+    .issues-other-filters
+      .dropdown.inline.assignee-filter
+        %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+          %i.fa.fa-user
+          %span.light assignee:
+          - if @assignee.present?
+            %strong= @assignee.name
+          - elsif params[:assignee_id] == "0"
+            Unassigned
+          - else
+            Any
+          %b.caret
+        %ul.dropdown-menu
+          %li
+            = link_to page_filter_path(assignee_id: nil) do
+              Any
+            = link_to page_filter_path(assignee_id: 0) do
+              Unassigned
+          - @assignees.sort_by(&:name).each do |user|
+            %li
+              = link_to page_filter_path(assignee_id: user.id) do
+                = image_tag avatar_icon(user.email), class: "avatar s16", alt: ''
+                = user.name
 
-  - if @project
-    .dropdown.inline.prepend-left-10.labels-filter
-      %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
-        %i.fa.fa-tags
-        %span.light label:
-        - if params[:label_name].present?
-          %strong= params[:label_name]
-        - else
-          Any
-        %b.caret
-      %ul.dropdown-menu
-        %li
-          = link_to page_filter_path(label_name: nil) do
+      .dropdown.inline.prepend-left-10.author-filter
+        %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+          %i.fa.fa-user
+          %span.light author:
+          - if @author.present?
+            %strong= @author.name
+          - elsif params[:author_id] == "0"
+            Unassigned
+          - else
             Any
-        - if @project.labels.any?
-          - @project.labels.each do |label|
+          %b.caret
+        %ul.dropdown-menu
+          %li
+            = link_to page_filter_path(author_id: nil) do
+              Any
+            = link_to page_filter_path(author_id: 0) do
+              Unassigned
+          - @authors.sort_by(&:name).each do |user|
             %li
-              = link_to page_filter_path(label_name: label.name) do
-                = render_colored_label(label)
-        - else
+              = link_to page_filter_path(author_id: user.id) do
+                = image_tag avatar_icon(user.email), class: "avatar s16", alt: ''
+                = user.name
+
+      .dropdown.inline.prepend-left-10.milestone-filter
+        %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+          %i.fa.fa-clock-o
+          %span.light milestone:
+          - if @milestone.present?
+            %strong= @milestone.title
+          - elsif params[:milestone_id] == "0"
+            None (backlog)
+          - else
+            Any
+          %b.caret
+        %ul.dropdown-menu
           %li
-            = link_to generate_project_labels_path(@project, redirect: request.original_url), method: :post do
-              %i.fa.fa-plus-circle
-              Create default labels
+            = link_to page_filter_path(milestone_id: nil) do
+              Any
+            = link_to page_filter_path(milestone_id: 0) do
+              None (backlog)
+          - @milestones.each do |milestone|
+            %li
+              = link_to page_filter_path(milestone_id: milestone.id) do
+                %strong= milestone.title
+                %small.light= milestone.expires_at
+
+      - if @project
+        .dropdown.inline.prepend-left-10.labels-filter
+          %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+            %i.fa.fa-tags
+            %span.light label:
+            - if params[:label_name].present?
+              %strong= params[:label_name]
+            - else
+              Any
+            %b.caret
+          %ul.dropdown-menu
+            %li
+              = link_to page_filter_path(label_name: nil) do
+                Any
+            - if @project.labels.any?
+              - @project.labels.each do |label|
+                %li
+                  = link_to page_filter_path(label_name: label.name) do
+                    = render_colored_label(label)
+            - else
+              %li
+                = link_to generate_project_labels_path(@project, redirect: request.original_url), method: :post do
+                  %i.fa.fa-plus-circle
+                  Create default labels
 
-  .pull-right
-    = render 'shared/sort_dropdown'
+      .pull-right
+        = render 'shared/sort_dropdown'

app/views/shared/_milestones_filter.html.haml

 .milestones-filters.append-bottom-10
-  %ul.nav.nav-pills.nav-compact
+  %ul.nav.nav-tabs
     %li{class: ("active" if params[:state].blank? || params[:state] == 'opened')}
       = link_to milestones_filter_path(state: 'opened') do
         %i.fa.fa-exclamation-circle

features/project/active_tab.feature

@@ -106,24 +106,19 @@ Feature: Project Active Tab
     And no other sub tabs should be active
     And the active main tab should be Commits
 
-  # Sub Tabs: Issues
-
   Scenario: On Project Issues/Browse
     Given I visit my project's issues page
-    Then the active sub tab should be Issues
-    And no other sub tabs should be active
-    And the active main tab should be Issues
+    Then the active main tab should be Issues
+    And no other main tabs should be active
 
   Scenario: On Project Issues/Milestones
     Given I visit my project's issues page
     And I click the "Milestones" tab
-    Then the active sub tab should be Milestones
-    And no other sub tabs should be active
-    And the active main tab should be Issues
+    Then the active main tab should be Milestones
+    And no other main tabs should be active
 
   Scenario: On Project Issues/Labels
     Given I visit my project's issues page
     And I click the "Labels" tab
-    Then the active sub tab should be Labels
-    And no other sub tabs should be active
-    And the active main tab should be Issues
+    Then the active main tab should be Labels
+    And no other main tabs should be active

features/steps/project/active_tab.rb

@@ -93,11 +93,11 @@ class Spinach::Features::ProjectActiveTab < Spinach::FeatureSteps
     ensure_active_sub_tab('Issues')
   end
 
-  step 'the active sub tab should be Milestones' do
-    ensure_active_sub_tab('Milestones')
+  step 'the active main tab should be Milestones' do
+    ensure_active_main_tab('Milestones')
   end
 
-  step 'the active sub tab should be Labels' do
-    ensure_active_sub_tab('Labels')
+  step 'the active main tab should be Labels' do
+    ensure_active_main_tab('Labels')
   end
 end