From b3ed4e0cf9dc66b49fba933455212d9c89b80d90 Mon Sep 17 00:00:00 2001
From: David Wagner <david@marvid.fr>
Date: Fri, 18 Nov 2016 21:19:44 +0100
Subject: [PATCH 1/5] Homogenize dropdowns on Issue page

Make sort and filter dropdowns look the same and tweak their icon and
colors according to #24150.

Signed-off-by: David Wagner <david@marvid.fr>
---
 app/assets/stylesheets/framework/buttons.scss |  2 +-
 .../stylesheets/framework/dropdowns.scss      | 87 ++++++++++++-------
 .../stylesheets/framework/variables.scss      | 12 +--
 app/helpers/dropdowns_helper.rb               |  2 +-
 app/views/shared/_sort_dropdown.html.haml     |  4 +-
 .../shared/issuable/_label_dropdown.html.haml |  2 +-
 features/steps/shared/issuable.rb             |  6 +-
 7 files changed, 72 insertions(+), 43 deletions(-)

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 4a9aa0f8717..ffebef559c2 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -199,7 +199,7 @@
   }
 
   .fa-caret-down,
-  .fa-caret-up {
+  .fa-chevron-down {
     margin-left: 5px;
   }
 
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index 583c17e4a83..d7df1d91afc 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -21,51 +21,23 @@
 
   .dropdown-menu-toggle {
     border-color: $dropdown-toggle-hover-border-color;
-
-    .fa {
-      color: $dropdown-toggle-hover-icon-color;
-    }
   }
 }
 
-.dropdown-menu-toggle {
-  position: relative;
-  width: 160px;
-  padding: 6px 20px 6px 10px;
+.dropdown-toggle {
+  padding: 6px 8px 6px 10px;
   background-color: $dropdown-toggle-bg;
   color: $dropdown-toggle-color;
   font-size: 15px;
   text-align: left;
   border: 1px solid $border-color;
   border-radius: $border-radius-base;
-  text-overflow: ellipsis;
   white-space: nowrap;
-  overflow: hidden;
-
-  .fa {
-    position: absolute;
-    top: 10px;
-    right: 8px;
-    color: $dropdown-toggle-icon-color;
-
-    &.fa-spinner {
-      font-size: 16px;
-      margin-top: -8px;
-    }
-  }
 
   &.no-outline {
     outline: 0;
   }
 
-  &:hover, {
-    border-color: $dropdown-toggle-hover-border-color;
-
-    .fa {
-      color: $dropdown-toggle-hover-icon-color;
-    }
-  }
-
   &.large {
     width: 200px;
   }
@@ -86,6 +58,61 @@
     max-width: 100%;
     padding-right: 25px;
   }
+
+  .fa {
+    color: $dropdown-toggle-icon-color;
+  }
+
+  .fa-chevron-down {
+    font-size: $dropdown-chevron-size;
+    position: relative;
+    top: -3px;
+    margin-left: 5px;
+  }
+
+  @mixin chevron-hover {
+    .fa-chevron-down {
+      color: $dropdown-toggle-hover-icon-color;
+    }
+  }
+
+  &:hover {
+    @include chevron-hover;
+
+    border-color: $dropdown-toggle-hover-border-color;
+  }
+
+  &:focus:active {
+    @include chevron-hover;
+
+    border-color: $dropdown-toggle-active-border-color;
+  }
+}
+
+.dropdown-menu-toggle {
+  @extend .dropdown-toggle;
+
+  padding-right: 20px;
+
+  position: relative;
+  width: 160px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+
+  .fa {
+    position: absolute;
+
+    &.fa-spinner {
+      font-size: 16px;
+      margin-top: -8px;
+    }
+  }
+
+  .fa-chevron-down {
+    position: absolute;
+    top: 11px;
+    right: 8px;
+  }
 }
 
 .dropdown-menu,
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 750d99ebabe..88d6c3570c5 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -216,7 +216,7 @@ $dropdown-bg: #fff;
 $dropdown-link-color: #555;
 $dropdown-link-hover-bg: $row-hover;
 $dropdown-empty-row-bg: rgba(#000, .04);
-$dropdown-border-color: rgba(#000, .1);
+$dropdown-border-color: $border-color;
 $dropdown-shadow-color: rgba(#000, .1);
 $dropdown-divider-color: rgba(#000, .1);
 $dropdown-header-color: #959494;
@@ -225,13 +225,15 @@ $dropdown-input-color: #555;
 $dropdown-input-focus-border: $focus-border-color;
 $dropdown-input-focus-shadow: rgba($dropdown-input-focus-border, .4);
 $dropdown-loading-bg: rgba(#fff, .6);
+$dropdown-chevron-size: 10px;
 
 $dropdown-toggle-bg: #fff;
-$dropdown-toggle-color: #626262;
-$dropdown-toggle-border-color: #eaeaea;
-$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 15%);
+$dropdown-toggle-color: #5c5c5c;
+$dropdown-toggle-border-color: #e5e5e5;
+$dropdown-toggle-hover-border-color: darken($dropdown-toggle-border-color, 13%);
+$dropdown-toggle-active-border-color: darken($dropdown-toggle-border-color, 14%);
 $dropdown-toggle-icon-color: #c4c4c4;
-$dropdown-toggle-hover-icon-color: $dropdown-toggle-hover-border-color;
+$dropdown-toggle-hover-icon-color: darken($dropdown-toggle-icon-color, 7%);
 
 /*
 * Buttons
diff --git a/app/helpers/dropdowns_helper.rb b/app/helpers/dropdowns_helper.rb
index cbab1fd5967..81e0b6bb5ae 100644
--- a/app/helpers/dropdowns_helper.rb
+++ b/app/helpers/dropdowns_helper.rb
@@ -43,7 +43,7 @@ module DropdownsHelper
     default_label = data_attr[:default_label]
     content_tag(:button, class: "dropdown-menu-toggle #{options[:toggle_class] if options.has_key?(:toggle_class)}", id: (options[:id] if options.has_key?(:id)), type: "button", data: data_attr) do
       output = content_tag(:span, toggle_text, class: "dropdown-toggle-text #{'is-default' if toggle_text == default_label}")
-      output << icon('caret-down')
+      output << icon('chevron-down')
       output.html_safe
     end
   end
diff --git a/app/views/shared/_sort_dropdown.html.haml b/app/views/shared/_sort_dropdown.html.haml
index 68e05cb72e1..ede3c7090d7 100644
--- a/app/views/shared/_sort_dropdown.html.haml
+++ b/app/views/shared/_sort_dropdown.html.haml
@@ -1,11 +1,11 @@
 .dropdown.inline.prepend-left-10
-  %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
+  %button.dropdown-toggle{type: 'button', data: {toggle: 'dropdown'}}
     %span.light
     - if @sort.present?
       = sort_options_hash[@sort]
     - else
       = sort_title_recently_created
-    = icon('caret-down')
+    = icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort
     %li
       = link_to page_filter_path(sort: sort_value_priority, label: true) do
diff --git a/app/views/shared/issuable/_label_dropdown.html.haml b/app/views/shared/issuable/_label_dropdown.html.haml
index 1d778bc88de..22b5a6aa11b 100644
--- a/app/views/shared/issuable/_label_dropdown.html.haml
+++ b/app/views/shared/issuable/_label_dropdown.html.haml
@@ -22,7 +22,7 @@
   %button.dropdown-menu-toggle.js-label-select.js-multiselect{class: classes.join(' '), type: "button", data: dropdown_data}
     %span.dropdown-toggle-text{ class: ("is-default" if selected.nil? || selected.empty?) }
       = multi_label_name(selected, "Labels")
-    = icon('caret-down')
+    = icon('chevron-down')
   .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
     = render partial: "shared/issuable/label_page_default", locals: { title: dropdown_title, show_footer: show_footer, show_create: show_create }
     - if show_create && project && can?(current_user, :admin_label, project)
diff --git a/features/steps/shared/issuable.rb b/features/steps/shared/issuable.rb
index aa666a954bc..79dde620265 100644
--- a/features/steps/shared/issuable.rb
+++ b/features/steps/shared/issuable.rb
@@ -110,14 +110,14 @@ module SharedIssuable
   end
 
   step 'I sort the list by "Oldest updated"' do
-    find('button.dropdown-toggle.btn').click
+    find('button.dropdown-toggle').click
     page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
       click_link "Oldest updated"
     end
   end
 
   step 'I sort the list by "Least popular"' do
-    find('button.dropdown-toggle.btn').click
+    find('button.dropdown-toggle').click
 
     page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
       click_link 'Least popular'
@@ -125,7 +125,7 @@ module SharedIssuable
   end
 
   step 'I sort the list by "Most popular"' do
-    find('button.dropdown-toggle.btn').click
+    find('button.dropdown-toggle').click
 
     page.within('.content ul.dropdown-menu.dropdown-menu-align-right li') do
       click_link 'Most popular'

From 4c6468aa1077eec8e953734f410ecff680f17caf Mon Sep 17 00:00:00 2001
From: David Wagner <david@marvid.fr>
Date: Tue, 22 Nov 2016 20:33:52 +0100
Subject: [PATCH 2/5] Make open and hovered dropdown toggles look the same

The chevron now has the same darker shade when the dropdown is opened it
had when hovered on.

Signed-off-by: David Wagner <david@marvid.fr>
---
 .../stylesheets/framework/dropdowns.scss      | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index d7df1d91afc..de6e154dfe6 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -8,6 +8,12 @@
   }
 }
 
+@mixin chevron-active {
+  .fa-chevron-down {
+    color: $dropdown-toggle-hover-icon-color;
+  }
+}
+
 .open {
   .dropdown-menu,
   .dropdown-menu-nav {
@@ -19,7 +25,10 @@
     }
   }
 
+  .dropdown-toggle,
   .dropdown-menu-toggle {
+    @include chevron-active;
+
     border-color: $dropdown-toggle-hover-border-color;
   }
 }
@@ -70,20 +79,14 @@
     margin-left: 5px;
   }
 
-  @mixin chevron-hover {
-    .fa-chevron-down {
-      color: $dropdown-toggle-hover-icon-color;
-    }
-  }
-
   &:hover {
-    @include chevron-hover;
+    @include chevron-active;
 
     border-color: $dropdown-toggle-hover-border-color;
   }
 
   &:focus:active {
-    @include chevron-hover;
+    @include chevron-active;
 
     border-color: $dropdown-toggle-active-border-color;
   }

From a3a85c07aa87148f4baead1ac8d2f2679136c69a Mon Sep 17 00:00:00 2001
From: David Wagner <david@marvid.fr>
Date: Tue, 22 Nov 2016 20:56:21 +0100
Subject: [PATCH 3/5] Update the Changelog

[ci skip]

Signed-off-by: David Wagner <david@marvid.fr>
---
 changelogs/unreleased/24150-consistent-dropdown-styles.yml | 4 ++++
 1 file changed, 4 insertions(+)
 create mode 100644 changelogs/unreleased/24150-consistent-dropdown-styles.yml

diff --git a/changelogs/unreleased/24150-consistent-dropdown-styles.yml b/changelogs/unreleased/24150-consistent-dropdown-styles.yml
new file mode 100644
index 00000000000..a328d796c43
--- /dev/null
+++ b/changelogs/unreleased/24150-consistent-dropdown-styles.yml
@@ -0,0 +1,4 @@
+---
+title: Homogenize filter and sort dropdown look'n'feel
+merge_request: 7583
+author: David Wagner

From be0fb391d32bb549d57841009e2dd2bb92de8a78 Mon Sep 17 00:00:00 2001
From: David Wagner <david@marvid.fr>
Date: Tue, 22 Nov 2016 22:28:07 +0100
Subject: [PATCH 4/5] Update some more sort/filter dropdowns

Apart from Issues and Merge Requests pages, there are other sort/filter
dropdowns that needed updating.

Signed-off-by: David Wagner <david@marvid.fr>
---
 app/views/dashboard/todos/index.html.haml    | 4 ++--
 app/views/explore/groups/index.html.haml     | 4 ++--
 app/views/explore/projects/_filter.html.haml | 8 ++++----
 app/views/projects/branches/index.html.haml  | 4 ++--
 app/views/projects/builds/_sidebar.html.haml | 2 +-
 app/views/projects/forks/index.html.haml     | 4 ++--
 app/views/projects/tags/index.html.haml      | 4 ++--
 app/views/search/_filter.html.haml           | 4 ++--
 8 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/views/dashboard/todos/index.html.haml b/app/views/dashboard/todos/index.html.haml
index 472d698486b..62f52086be4 100644
--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -50,13 +50,13 @@
             data: { data: todo_actions_options }})
         .pull-right
           .dropdown.inline.prepend-left-10
-            %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
+            %button.dropdown-toggle{type: 'button', 'data-toggle' => 'dropdown'}
               %span.light
               - if @sort.present?
                 = sort_options_hash[@sort]
               - else
                 = sort_title_recently_created
-              = icon('caret-down')
+              = icon('chevron-down')
             %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort
               %li
                 = link_to todos_filter_path(sort: sort_value_priority) do
diff --git a/app/views/explore/groups/index.html.haml b/app/views/explore/groups/index.html.haml
index a1b39d9e1a0..4e5d965ccbe 100644
--- a/app/views/explore/groups/index.html.haml
+++ b/app/views/explore/groups/index.html.haml
@@ -17,13 +17,13 @@
 
   .pull-right
     .dropdown.inline
-      %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
+      %button.dropdown-toggle{type: 'button', 'data-toggle' => 'dropdown'}
         %span.light
         - if @sort.present?
           = sort_options_hash[@sort]
         - else
           = sort_title_recently_created
-        = icon('caret-down')
+        = icon('chevron-down')
       %ul.dropdown-menu.dropdown-menu-align-right
         %li
           = link_to explore_groups_path(sort: sort_value_recently_created) do
diff --git a/app/views/explore/projects/_filter.html.haml b/app/views/explore/projects/_filter.html.haml
index 4cff14b096b..5ea154c36b4 100644
--- a/app/views/explore/projects/_filter.html.haml
+++ b/app/views/explore/projects/_filter.html.haml
@@ -1,13 +1,13 @@
 - if current_user
   .dropdown
-    %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+    %button.dropdown-toggle{href: '#', "data-toggle" => "dropdown"}
       = icon('globe')
       %span.light Visibility:
       - if params[:visibility_level].present?
         = visibility_level_label(params[:visibility_level].to_i)
       - else
         Any
-      = icon('caret-down')
+      = icon('chevron-down')
     %ul.dropdown-menu.dropdown-menu-align-right
       %li
         = link_to filter_projects_path(visibility_level: nil) do
@@ -20,14 +20,14 @@
 
 - if @tags.present?
   .dropdown
-    %a.dropdown-toggle.btn{href: '#', "data-toggle" => "dropdown"}
+    %button.dropdown-toggle{href: '#', "data-toggle" => "dropdown"}
       = icon('tags')
       %span.light Tags:
       - if params[:tag].present?
         = params[:tag]
       - else
         Any
-      = icon('caret-down')
+      = icon('chevron-down')
     %ul.dropdown-menu.dropdown-menu-align-right
       %li
         = link_to filter_projects_path(tag: nil) do
diff --git a/app/views/projects/branches/index.html.haml b/app/views/projects/branches/index.html.haml
index 2246316b540..5fd664c7a93 100644
--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -12,10 +12,10 @@
         = search_field_tag :search, params[:search], { placeholder: 'Filter by branch name', id: 'branch-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
       .dropdown.inline
-        %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
+        %button.dropdown-toggle{type: 'button', 'data-toggle' => 'dropdown'}
           %span.light
             = projects_sort_options_hash[@sort]
-          = icon('caret-down')
+          = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-align-right
           %li
             = link_to filter_branches_path(sort: sort_value_name) do
diff --git a/app/views/projects/builds/_sidebar.html.haml b/app/views/projects/builds/_sidebar.html.haml
index f5562046953..d5004f6a066 100644
--- a/app/views/projects/builds/_sidebar.html.haml
+++ b/app/views/projects/builds/_sidebar.html.haml
@@ -116,7 +116,7 @@
         .title Stage
         %button.dropdown-menu-toggle{type: 'button', 'data-toggle' => 'dropdown'}
           %span.stage-selection More
-          = icon('caret-down')
+          = icon('chevron-down')
         %ul.dropdown-menu
           - @build.pipeline.stages.each do |stage|
             %li
diff --git a/app/views/projects/forks/index.html.haml b/app/views/projects/forks/index.html.haml
index abf4f697f86..5ee3979c7e7 100644
--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -9,13 +9,13 @@
         spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
 
     .dropdown
-      %button.dropdown-toggle.btn.sort-forks{type: 'button', 'data-toggle' => 'dropdown'}
+      %button.dropdown-toggle{type: 'button', 'data-toggle' => 'dropdown'}
         %span.light sort:
         - if @sort.present?
           = sort_options_hash[@sort]
         - else
           = sort_title_recently_created
-        = icon('caret-down')
+        = icon('chevron-down')
       %ul.dropdown-menu.dropdown-menu-align-right
         %li
           - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
diff --git a/app/views/projects/tags/index.html.haml b/app/views/projects/tags/index.html.haml
index b43b13de4ca..1d39f3a7534 100644
--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -12,10 +12,10 @@
         = search_field_tag :search, params[:search], { placeholder: 'Filter by tag name', id: 'tag-search', class: 'form-control search-text-input input-short', spellcheck: false }
 
       .dropdown.inline
-        %button.dropdown-toggle.btn{ type: 'button', data: { toggle: 'dropdown'} }
+        %button.dropdown-toggle{ type: 'button', data: { toggle: 'dropdown'} }
           %span.light
             = projects_sort_options_hash[@sort]
-          = icon('caret-down')
+          = icon('chevron-down')
         %ul.dropdown-menu.dropdown-menu-align-right
           %li
             = link_to filter_tags_path(sort: sort_value_name) do
diff --git a/app/views/search/_filter.html.haml b/app/views/search/_filter.html.haml
index ef1c0296d49..938be20c7cf 100644
--- a/app/views/search/_filter.html.haml
+++ b/app/views/search/_filter.html.haml
@@ -3,7 +3,7 @@
 - if params[:project_id].present?
   = hidden_field_tag :project_id, params[:project_id]
 .dropdown
-  %button.dropdown-menu-toggle.btn.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Group:" } }
+  %button.dropdown-menu-toggle.js-search-group-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Group:" } }
     %span.dropdown-toggle-text
       Group:
       - if @group.present?
@@ -18,7 +18,7 @@
     = dropdown_loading
 
 .dropdown.project-filter
-  %button.dropdown-menu-toggle.btn.js-search-project-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Project:" } }
+  %button.dropdown-menu-toggle.js-search-project-dropdown{ type: "button", data: { toggle: "dropdown", default_label: "Project:" } }
     %span.dropdown-toggle-text
       Project:
       - if @project.present?

From 927042985fbfeeb1a348c8772e5a00084146bc87 Mon Sep 17 00:00:00 2001
From: David Wagner <david@marvid.fr>
Date: Wed, 23 Nov 2016 18:52:38 +0100
Subject: [PATCH 5/5] dropdowns.scss: Fix style issues after review

Signed-off-by: David Wagner <david@marvid.fr>
---
 app/assets/stylesheets/framework/dropdowns.scss | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index de6e154dfe6..6d77aadd753 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -28,7 +28,6 @@
   .dropdown-toggle,
   .dropdown-menu-toggle {
     @include chevron-active;
-
     border-color: $dropdown-toggle-hover-border-color;
   }
 }
@@ -81,22 +80,18 @@
 
   &:hover {
     @include chevron-active;
-
     border-color: $dropdown-toggle-hover-border-color;
   }
 
   &:focus:active {
     @include chevron-active;
-
     border-color: $dropdown-toggle-active-border-color;
   }
 }
 
 .dropdown-menu-toggle {
   @extend .dropdown-toggle;
-
   padding-right: 20px;
-
   position: relative;
   width: 160px;
   text-overflow: ellipsis;