Restyle and refactor milestones filter

4 files changed, 60 insertions, 72 deletions

diff --git a/app/views/groups/_filter.html.haml b/app/views/groups/_filter.html.haml
deleted file mode 100644
index 393be3f1d12..00000000000
--- a/app/views/groups/_filter.html.haml
+++ /dev/null
@@ -1,12 +0,0 @@
-= 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
diff --git a/app/views/groups/milestones/index.html.haml b/app/views/groups/milestones/index.html.haml
index 2727525f070..7f0b2832cac 100644
--- a/app/views/groups/milestones/index.html.haml
+++ b/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"
diff --git a/app/views/projects/milestones/index.html.haml b/app/views/projects/milestones/index.html.haml
index 0db0b114d63..04a1b9243d5 100644
--- a/app/views/projects/milestones/index.html.haml
+++ b/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"
diff --git a/app/views/shared/_milestones_filter.html.haml b/app/views/shared/_milestones_filter.html.haml
new file mode 100644
index 00000000000..8c2fd166922
--- /dev/null
+++ b/app/views/shared/_milestones_filter.html.haml
@@ -0,0 +1,16 @@
+.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