Merge branch 'ui-improvements' into 'master'

UI improvements

Improve filtering UI for next pages:

* dashboard projects page
* group milestones page
* project milestones page

See merge request !1370

app/controllers/projects/milestones_controller.rb

@@ -11,7 +11,7 @@ class Projects::MilestonesController < Projects::ApplicationController
   respond_to :html
 
   def index
-    @milestones = case params[:f]
+    @milestones = case params[:state]
                   when 'all'; @project.milestones.order("state, due_date DESC")
                   when 'closed'; @project.milestones.closed.order("due_date DESC")
                   else @project.milestones.active.order("due_date ASC")

app/helpers/dashboard_helper.rb

@@ -4,6 +4,8 @@ module DashboardHelper
       sort: params[:sort],
       scope: params[:scope],
       group: params[:group],
+      tag: params[:tag],
+      visibility_level: params[:visibility_level],
     }
 
     options = exist_opts.merge(options)

app/helpers/groups_helper.rb

@@ -33,18 +33,6 @@ module GroupsHelper
     title
   end
 
-  def group_filter_path(entity, options={})
-    exist_opts = {
-      status: params[:status]
-    }
-
-    options = exist_opts.merge(options)
-
-    path = request.path
-    path << "?#{options.to_param}"
-    path
-  end
-
   def group_settings_page?
     if current_controller?('groups')
       current_action?('edit') || current_action?('projects')

app/helpers/milestones_helper.rb

+module MilestonesHelper
+  def milestones_filter_path(opts = {})
+    if @project
+      project_milestones_path(@project, opts)
+    elsif @group
+      group_milestones_path(@group, opts)
+    end
+  end
+end

app/views/dashboard/_projects_filter.html.haml

-%fieldset
-  %ul.nav.nav-pills.nav-stacked
-    = nav_tab :scope, nil do
-      = link_to projects_dashboard_filter_path(scope: nil) do
-        All
-        %span.pull-right
-          = current_user.authorized_projects.count
-    = nav_tab :scope, 'personal' do
-      = link_to projects_dashboard_filter_path(scope: 'personal') do
-        Personal
-        %span.pull-right
-          = current_user.personal_projects.count
-    = nav_tab :scope, 'joined' do
-      = link_to projects_dashboard_filter_path(scope: 'joined') do
-        Joined
-        %span.pull-right
-          = current_user.authorized_projects.joined(current_user).count
-    = nav_tab :scope, 'owned' do
-      = link_to projects_dashboard_filter_path(scope: 'owned') do
-        Owned
-        %span.pull-right
-          = current_user.owned_projects.count
+.dash-projects-filters.append-bottom-20
+  .pull-left.append-right-20
+    %ul.nav.nav-pills.nav-compact
+      = nav_tab :scope, nil do
+        = link_to projects_dashboard_filter_path(scope: nil) do
+          All
+      = nav_tab :scope, 'personal' do
+        = link_to projects_dashboard_filter_path(scope: 'personal') do
+          Personal
+      = nav_tab :scope, 'joined' do
+        = link_to projects_dashboard_filter_path(scope: 'joined') do
+          Joined
+      = nav_tab :scope, 'owned' do
+        = link_to projects_dashboard_filter_path(scope: 'owned') do
+          Owned
 
-%fieldset
-  %legend Visibility
-  %ul.nav.nav-pills.nav-stacked.nav-small.visibility-filter
-    - Gitlab::VisibilityLevel.values.each do |level|
-      %li{ class: (level.to_s == params[:visibility_level]) ? 'active' : 'light' }
-        = link_to projects_dashboard_filter_path(visibility_level: level) do
-          = visibility_level_icon(level)
-          = visibility_level_label(level)
+  .dropdown.inline.append-right-10
+    %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+      %i.fa.fa-globe
+      %span.light Visibility:
+      - if params[:visibility_level].present?
+        = visibility_level_label(params[:visibility_level].to_i)
+      - else
+        Any
+      %b.caret
+    %ul.dropdown-menu
+      %li
+        = link_to projects_dashboard_filter_path(visibility_level: nil) do
+          Any
+      - Gitlab::VisibilityLevel.values.each do |level|
+        %li{ class: (level.to_s == params[:visibility_level]) ? 'active' : 'light' }
+          = link_to projects_dashboard_filter_path(visibility_level: level) do
+            = visibility_level_icon(level)
+            = visibility_level_label(level)
 
-- if @groups.present?
-  %fieldset
-    %legend Groups
-    %ul.nav.nav-pills.nav-stacked.nav-small
-      - @groups.each do |group|
-        %li{ class: (group.name == params[:group]) ? 'active' : 'light' }
-          = link_to projects_dashboard_filter_path(group: group.name) do
-            %i.fa.fa-folder-o
-            = group.name
-            %small.pull-right
-              = group.projects.count
+  - if @groups.present?
+    .dropdown.inline.append-right-10
+      %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+        %i.fa.fa-group
+        %span.light Group:
+        - if params[:group].present?
+          = Group.find_by(name: params[:group]).name
+        - else
+          Any
+        %b.caret
+      %ul.dropdown-menu
+        %li
+          = link_to projects_dashboard_filter_path(group: nil) do
+            Any
+        - @groups.each do |group|
+          %li{ class: (group.name == params[:group]) ? 'active' : 'light' }
+            = link_to projects_dashboard_filter_path(group: group.name) do
+              = group.name
+              %small.pull-right
+                = group.projects.count
 
 
 
-- if @tags.present?
-  %fieldset
-    %legend Tags
-    %ul.nav.nav-pills.nav-stacked.nav-small
-      - @tags.each do |tag|
-        %li{ class: (tag.name == params[:tag]) ? 'active' : 'light' }
-          = link_to projects_dashboard_filter_path(scope: params[:scope], tag: tag.name) do
-            %i.fa.fa-tag
-            = tag.name
+  - if @tags.present?
+    .dropdown.inline.append-right-10
+      %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+        %i.fa.fa-tags
+        %span.light Tags:
+        - if params[:tag].present?
+          = params[:tag]
+        - else
+          Any
+        %b.caret
+      %ul.dropdown-menu
+        %li
+          = link_to projects_dashboard_filter_path(tag: nil) do
+            Any
+
+        - @tags.each do |tag|
+          %li{ class: (tag.name == params[:tag]) ? 'active' : 'light' }
+            = link_to projects_dashboard_filter_path(tag: tag.name) do
+              %i.fa.fa-tag
+              = tag.name
+
+  .pull-right
+    .dropdown.inline
+      %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+        %span.light sort:
+        - if @sort.present?
+          = @sort.humanize
+        - else
+          Name
+        %b.caret
+      %ul.dropdown-menu
+        %li
+          = link_to projects_dashboard_filter_path(sort: nil) do
+            Name
+          = link_to projects_dashboard_filter_path(sort: 'newest') do
+            = sort_title_recently_created
+          = link_to projects_dashboard_filter_path(sort: 'oldest') do
+            = sort_title_oldest_created
+          = link_to projects_dashboard_filter_path(sort: 'recently_updated') do
+            = sort_title_recently_updated
+          = link_to projects_dashboard_filter_path(sort: 'last_updated') do
+            = sort_title_oldest_updated

app/views/dashboard/projects.html.haml

 %h3.page-title
   My Projects
-.pull-right
-  .dropdown.inline
-    %a.dropdown-toggle.btn.btn-small{href: '#', "data-toggle" => "dropdown"}
-      %span.light sort:
-      - if @sort.present?
-        = @sort.humanize
-      - else
-        Name
-      %b.caret
-    %ul.dropdown-menu
-      %li
-        = link_to projects_dashboard_filter_path(sort: nil) do
-          Name
-        = link_to projects_dashboard_filter_path(sort: 'newest') do
-          = sort_title_recently_created
-        = link_to projects_dashboard_filter_path(sort: 'oldest') do
-          = sort_title_oldest_created
-        = link_to projects_dashboard_filter_path(sort: 'recently_updated') do
-          = sort_title_recently_updated
-        = link_to projects_dashboard_filter_path(sort: 'last_updated') do
-          = sort_title_oldest_updated
 
 %p.light
   All projects you have access to are listed here. Public projects are not included here unless you are a member
 %hr
-.row
-  .col-md-3.hidden-sm.hidden-xs.side-filters
-    = render "projects_filter"
-  .col-md-9
-    %ul.bordered-list.my-projects.top-list
-      - @projects.each do |project|
-        %li.my-project-row
-          %h4.project-title
-            .project-access-icon
-              = visibility_level_icon(project.visibility_level)
-            = link_to project_path(project), class: dom_class(project) do
-              = project.name_with_namespace
+.side-filters
+  = render "projects_filter"
+.dash-projects
+  %ul.bordered-list.my-projects.top-list
+    - @projects.each do |project|
+      %li.my-project-row
+        %h4.project-title
+          .project-access-icon
+            = visibility_level_icon(project.visibility_level)
+          = link_to project_path(project), class: dom_class(project) do
+            = project.name_with_namespace
 
-            - if project.forked_from_project
-               
-              %small
-                %i.fa.fa-code-fork
-                Forked from:
-                = link_to project.forked_from_project.name_with_namespace, project_path(project.forked_from_project)
+          - if project.forked_from_project
+             
+            %small
+              %i.fa.fa-code-fork
+              Forked from:
+              = link_to project.forked_from_project.name_with_namespace, project_path(project.forked_from_project)
 
-            - if current_user.can_leave_project?(project)
-              .pull-right
-                = link_to leave_project_team_members_path(project), data: { confirm: "Leave project?"}, method: :delete, remote: true, class: "btn-tiny btn remove-row", title: 'Leave project' do
-                  %i.fa.fa-sign-out
-                  Leave
-
-          .project-info
+          - if current_user.can_leave_project?(project)
             .pull-right
-              - if project.archived?
-                %span.label
-                  %i.fa.fa-archive
-                  Archived
-              - project.tags.each do |tag|
-                %span.label.label-info
-                  %i.fa.fa-tag
-                  = tag.name
-            - if project.description.present?
-              %p= truncate project.description, length: 100
-            .last-activity
-              %span.light Last activity:
-              %span.date= project_last_activity(project)
+              = link_to leave_project_team_members_path(project), data: { confirm: "Leave project?"}, method: :delete, remote: true, class: "btn-tiny btn remove-row", title: 'Leave project' do
+                %i.fa.fa-sign-out
+                Leave
+
+        .project-info
+          .pull-right
+            - if project.archived?
+              %span.label
+                %i.fa.fa-archive
+                Archived
+            - project.tags.each do |tag|
+              %span.label.label-info
+                %i.fa.fa-tag
+                = tag.name
+          - if project.description.present?
+            %p= truncate project.description, length: 100
+          .last-activity
+            %span.light Last activity:
+            %span.date= project_last_activity(project)
 
 
-        - if @projects.blank?
-          %li
-            .nothing-here-block There are no projects here.
-    .bottom
-      = paginate @projects, theme: "gitlab"
+      - if @projects.blank?
+        %li
+          .nothing-here-block There are no projects here.
+  .bottom
+    = paginate @projects, theme: "gitlab"
 

app/views/groups/_filter.html.haml

-= form_tag group_filter_path(entity), method: 'get' do
-  %fieldset
-    %ul.nav.nav-pills.nav-stacked
-      %li{class: ("active" if (params[:status] == 'active' || !params[:status]))}
-        = link_to group_filter_path(entity, status: 'active') do
-          Active
-      %li{class: ("active" if params[:status] == 'closed')}
-        = link_to group_filter_path(entity, status: 'closed') do
-          Closed
-      %li{class: ("active" if params[:status] == 'all')}
-        = link_to group_filter_path(entity, status: 'all') do
-          All

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

@@ -9,42 +9,38 @@
 
 %hr
 
-.row
-  .fixed.sidebar-expand-button.hidden-lg.hidden-md
-    %i.fa.fa-list.fa-2x
-  .col-md-3.responsive-side
-    = render 'groups/filter', entity: 'milestone'
-  .col-md-9
-    .panel.panel-default
-      %ul.well-list
-        - if @group_milestones.blank?
-          %li
-            .nothing-here-block No milestones to show
-        - else
-          - @group_milestones.each do |milestone|
-            %li{class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: dom_id(milestone.milestones.first) }
-              .pull-right
-                - if can?(current_user, :manage_group, @group)
-                  - if milestone.closed?
-                    = link_to 'Reopen Milestone', group_milestone_path(@group, milestone.safe_title, title: milestone.title, milestone: {state_event: :activate }), method: :put, class: "btn btn-small btn-grouped btn-reopen"
-                  - else
-                    = link_to 'Close Milestone', group_milestone_path(@group, milestone.safe_title, title: milestone.title, milestone: {state_event: :close }), method: :put, class: "btn btn-small btn-close"
-              %h4
-                = link_to_gfm truncate(milestone.title, length: 100), group_milestone_path(@group, milestone.safe_title, title: milestone.title)
+= render 'shared/milestones_filter'
+.milestones
+  .panel.panel-default
+    %ul.well-list
+      - if @group_milestones.blank?
+        %li
+          .nothing-here-block No milestones to show
+      - else
+        - @group_milestones.each do |milestone|
+          %li{class: "milestone milestone-#{milestone.closed? ? 'closed' : 'open'}", id: dom_id(milestone.milestones.first) }
+            .pull-right
+              - if can?(current_user, :manage_group, @group)
+                - if milestone.closed?
+                  = link_to 'Reopen Milestone', group_milestone_path(@group, milestone.safe_title, title: milestone.title, milestone: {state_event: :activate }), method: :put, class: "btn btn-small btn-grouped btn-reopen"
+                - else
+                  = link_to 'Close Milestone', group_milestone_path(@group, milestone.safe_title, title: milestone.title, milestone: {state_event: :close }), method: :put, class: "btn btn-small btn-close"
+            %h4
+              = link_to_gfm truncate(milestone.title, length: 100), group_milestone_path(@group, milestone.safe_title, title: milestone.title)
+            %div
               %div
-                %div
-                  = link_to group_milestone_path(@group, milestone.safe_title, title: milestone.title) do
-                    = pluralize milestone.issue_count, 'Issue'
-                   
-                  = link_to group_milestone_path(@group, milestone.safe_title, title: milestone.title) do
-                    = pluralize milestone.merge_requests_count, 'Merge Request'
-                   
-                  %span.light #{milestone.percent_complete}% complete
-                .progress.progress-info
-                  .progress-bar{style: "width: #{milestone.percent_complete}%;"}
-                %div
-                  %br
-                  - milestone.projects.each do |project|
-                    %span.label.label-default
-                      = project.name
-    = paginate @group_milestones, theme: "gitlab"
+                = link_to group_milestone_path(@group, milestone.safe_title, title: milestone.title) do
+                  = pluralize milestone.issue_count, 'Issue'
+                 
+                = link_to group_milestone_path(@group, milestone.safe_title, title: milestone.title) do
+                  = pluralize milestone.merge_requests_count, 'Merge Request'
+                 
+                %span.light #{milestone.percent_complete}% complete
+              .progress.progress-info
+                .progress-bar{style: "width: #{milestone.percent_complete}%;"}
+              %div
+                %br
+                - milestone.projects.each do |project|
+                  %span.label.label-default
+                    = project.name
+  = paginate @group_milestones, theme: "gitlab"

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

@@ -7,27 +7,15 @@
         %i.fa.fa-plus
         New Milestone
 
-  .row
-    .fixed.sidebar-expand-button.hidden-lg.hidden-md.hidden-xs
-      %i.fa.fa-list.fa-2x
-    .col-md-3.responsive-side
-      %ul.nav.nav-pills.nav-stacked
-        %li{class: ("active" if (params[:f] == "active" || !params[:f]))}
-          = link_to project_milestones_path(@project, f: "active") do
-            Active
-        %li{class: ("active" if params[:f] == "closed")}
-          = link_to project_milestones_path(@project, f: "closed") do
-            Closed
-        %li{class: ("active" if params[:f] == "all")}
-          = link_to project_milestones_path(@project, f: "all") do
-            All
-    .col-md-9
-      .panel.panel-default
-        %ul.well-list
-          = render @milestones
+= render 'shared/milestones_filter'
 
-          - if @milestones.blank?
-            %li
-              .nothing-here-block No milestones to show
+.milestones
+  .panel.panel-default
+    %ul.well-list
+      = render @milestones
 
-      = paginate @milestones, theme: "gitlab"
+      - if @milestones.blank?
+        %li
+          .nothing-here-block No milestones to show
+
+  = paginate @milestones, theme: "gitlab"

app/views/shared/_milestones_filter.html.haml

+.fixed.sidebar-expand-button.hidden-lg.hidden-md
+  %i.fa.fa-list.fa-2x
+.responsive-side.milestones-filters.append-bottom-10
+  %ul.nav.nav-pills.nav-compact
+    %li{class: ("active" if params[:state].blank? || params[:state] == 'opened')}
+      = link_to milestones_filter_path(state: 'opened') do
+        %i.fa.fa-exclamation-circle
+        Open
+    %li{class: ("active" if params[:state] == 'closed')}
+      = link_to milestones_filter_path(state: 'closed') do
+        %i.fa.fa-check-circle
+        Closed
+    %li{class: ("active" if params[:state] == 'all')}
+      = link_to milestones_filter_path(state: 'all') do
+        %i.fa.fa-compass
+        All