Merge branch '24150-consistent-dropdown-styles' into 'master'

Homogenize sort and filter dropdown toggles ## What does this MR do? Homogenizes the style of *filter* and *sort* dropdown toggles (aka buttons) related to: - *issues* (index, new & edit views) - *issue boards* (index); - *merge requests* (index, new, edit); - *projects* (index and "explore"); - *projects admin* (index); - *groups* (show and "explore"); - *groups admin* (index); - *users admin* (index); - *todos* (index); - *branches* (index); - *commits* (index); - *cycle analytics*; - *network*; - *forks*; - *tags* (index); - *global search* Some other dropdowns are incidently concerned: - project admin (show); - assigne/due date/milestone/label dropdowns on the issue and board sidebars; - stage dropdown on the build sidebar; - merge request and comparison dropdowns for choosing forks and branches; - ref switcher (e.g. in the blob (show) view or in the graphs view); Dropdown toggles concerned by #24150 but not covered in this MR: - Dropdowns for selection MR versions to be compared (in the "Changes" tab of an MR); - Dropdowns that bring up a list of actions: - "Settings" dropdowns (such as the one found on the upper-right corner of all project pages); - The download/action/notifications buttons on the main project page; - Dropdowns located inside of list items (on list of pipelines, users and groups, for instance); - The "Options" button on the commit (show) view; - The "+" button on the tree explorer (for creating files, branches, tags, ...) ### TODO - [ ] Update ui.html if needed ## Are there points in the code the reviewer needs to double check? Am I changing any other dropdown toggle than listed above? ## Why was this MR needed? For #24150 ## Screenshots (if relevant) ### Issue Index **Before:** ![issue-index-before](/uploads/1aa358b0b9e79fd3a7467b57cd2b03ec/issue-index-before.png) **After:** ![issue-index-after](/uploads/7a4159e8927d456ed3f4390072174e49/issue-index-after.png) ### Issue New **Before:** ![issue-new-before](/uploads/fcfb9c39d2ff8f00827f52d60db5c114/issue-new-before.png) **After:** ![issue-new-after](/uploads/a0b151d257d8f3e8f98a2873427362ee/issue-new-after.png) ### Merge Request Branch Selector **Before:** ![merge-request-new-before](/uploads/8dd7b6e8ea38af7aced743386bfb83ca/merge-request-new-before.png) **After:** ![merge-request-new-after](/uploads/38ad8f5a315344b3bab7e936a84acf7e/merge-request-new-after.png) ### Global Search ![global-search-after](/uploads/f2912b7d91fd286028cb9481d2d53a82/global-search-after.png) ### Cycle Analytics ![cycle-analytics-after](/uploads/248d5ca360bb510aa0f0bfa8a1a00aae/cycle-analytics-after.png) ## Does this MR meet the acceptance criteria? - [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added - ~~[Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)~~ - ~~API support added~~ - Tests - ~~Added for this feature/bug~~ - [ ] All builds are passing - ~~Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)~~ - [ ] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides) - [ ] Branch has no merge conflicts with `master` (if it does - rebase it please) - [ ] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits) ## What are the relevant issue numbers? #24150 See merge request !7583
2016-11-29 08:57:10 +00:00 · 2016-11-29 08:57:10 +00:00 · 63f5c4ea54
commit 63f5c4ea54
parent e0a46540c3 927042985f
16 changed files with 91 additions and 60 deletions
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@ -205,7 +205,7 @@
  }

  .fa-caret-down,
-  .fa-caret-up {
+  .fa-chevron-down {
    margin-left: 5px;
  }

--- 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,53 +25,27 @@
    }
  }

+  .dropdown-toggle,
  .dropdown-menu-toggle {
+    @include chevron-active;
    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 +66,51 @@
    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;
+  }
+
+  &: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;
+  overflow: hidden;
+
+  .fa {
+    position: absolute;
+
+    &.fa-spinner {
+      font-size: 16px;
+      margin-top: -8px;
+    }
+  }
+
+  .fa-chevron-down {
+    position: absolute;
+    top: 11px;
+    right: 8px;
+  }
 }

 .dropdown-menu,
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@ -220,7 +220,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;
@ -229,13 +229,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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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]
--- 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
--- 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?
--- 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
--- 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)
--- a/changelogs/unreleased/24150-consistent-dropdown-styles.yml
+++ 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
--- 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'