Commit 9af0e8f9 authored by Annabel Dunstone Gray's avatar Annabel Dunstone Gray

Merge branch '27697-make-arrow-icons-consistent-in-dropdown' into 'master'

[#27697] Make the arrow icons consistent in dropdown

Closes #27697

See merge request !9659
parents 9fe6c2b2 f5d16b0d
...@@ -125,10 +125,11 @@ label { ...@@ -125,10 +125,11 @@ label {
.select-wrapper { .select-wrapper {
position: relative; position: relative;
.fa-caret-down { .fa-chevron-down {
position: absolute; position: absolute;
font-size: 10px;
right: 10px; right: 10px;
top: 10px; top: 12px;
color: $gray-darkest; color: $gray-darkest;
pointer-events: none; pointer-events: none;
} }
...@@ -138,6 +139,12 @@ label { ...@@ -138,6 +139,12 @@ label {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&::-ms-expand {
display: none;
}
} }
.form-control-inline { .form-control-inline {
......
...@@ -18,19 +18,28 @@ ...@@ -18,19 +18,28 @@
background-image: none; background-image: none;
background-color: transparent; background-color: transparent;
border: none; border: none;
padding-top: 6px; padding-top: 12px;
padding-right: 10px; padding-right: 20px;
font-size: 10px;
b { b {
display: inline-block; display: none;
width: 0; }
height: 0;
margin-left: 2px; &::after {
vertical-align: middle; content: "\f078";
border-top: 5px dashed; position: absolute;
border-right: 5px solid transparent; z-index: 1;
border-left: 5px solid transparent; text-align: center;
pointer-events: none;
box-sizing: border-box;
color: $gray-darkest; color: $gray-darkest;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
} }
......
...@@ -151,14 +151,21 @@ module ProjectsHelper ...@@ -151,14 +151,21 @@ module ProjectsHelper
disabled: disabled_option disabled: disabled_option
) )
content_tag :div, class: "select-wrapper" do
concat(
content_tag( content_tag(
:select, :select,
options, options,
name: "project[project_feature_attributes][#{field}]", name: "project[project_feature_attributes][#{field}]",
id: "project_project_feature_attributes_#{field}", id: "project_project_feature_attributes_#{field}",
class: "pull-right form-control #{repo_children_classes(field)}", class: "pull-right form-control select-control #{repo_children_classes(field)} ",
data: { field: field } data: { field: field }
).html_safe )
)
concat(
icon('chevron-down')
)
end.html_safe
end end
def link_to_autodeploy_doc def link_to_autodeploy_doc
......
- if can_change_visibility_level?(@project, current_user) - if can_change_visibility_level?(@project, current_user)
= form.select(model_method, visibility_select_options(@project, selected_level), {}, class: 'form-control visibility-select') .select-wrapper
= form.select(model_method, visibility_select_options(@project, selected_level), {}, class: 'form-control visibility-select select-control')
= icon('chevron-down')
- else - else
.info.js-locked{ data: { help_block: visibility_level_description(@project.visibility_level, @project) } } .info.js-locked{ data: { help_block: visibility_level_description(@project.visibility_level, @project) } }
= visibility_level_icon(@project.visibility_level) = visibility_level_icon(@project.visibility_level)
......
...@@ -99,9 +99,9 @@ ...@@ -99,9 +99,9 @@
Git Large File Storage Git Large File Storage
= link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs') = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
.col-md-3 .col-md-3
= f.select :lfs_enabled, [%w(Enabled true), %w(Disabled false)], {}, selected: @project.lfs_enabled?, class: 'pull-right form-control project-repo-select', data: { field: 'lfs_enabled' } .select-wrapper
= f.select :lfs_enabled, [%w(Enabled true), %w(Disabled false)], {}, selected: @project.lfs_enabled?, class: 'pull-right form-control project-repo-select select-control', data: { field: 'lfs_enabled' }
= icon('chevron-down')
- if Gitlab.config.registry.enabled - if Gitlab.config.registry.enabled
.form-group.js-container-registry{ style: ("display: none;" if @project.project_feature.send(:repository_access_level) == 0) } .form-group.js-container-registry{ style: ("display: none;" if @project.project_feature.send(:repository_access_level) == 0) }
.checkbox .checkbox
......
...@@ -6,7 +6,9 @@ ...@@ -6,7 +6,9 @@
= users_select_tag(:user_ids, multiple: true, class: "input-clamp", scope: :all, email_user: true, placeholder: "Search for members to update or invite") = users_select_tag(:user_ids, multiple: true, class: "input-clamp", scope: :all, email_user: true, placeholder: "Search for members to update or invite")
.form-group .form-group
= label_tag :access_level, "Choose a role permission", class: "label-light" = label_tag :access_level, "Choose a role permission", class: "label-light"
= select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select" .select-wrapper
= select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select select-control"
= icon('chevron-down')
.help-block.append-bottom-10 .help-block.append-bottom-10
= link_to "Read more", help_page_path("user/permissions"), class: "vlink" = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
about role permissions about role permissions
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
= label_tag :link_group_access, "Max access level", class: "label-light" = label_tag :link_group_access, "Max access level", class: "label-light"
.select-wrapper .select-wrapper
= select_tag :link_group_access, options_for_select(ProjectGroupLink.access_options, ProjectGroupLink.default_access), class: "form-control select-control" = select_tag :link_group_access, options_for_select(ProjectGroupLink.access_options, ProjectGroupLink.default_access), class: "form-control select-control"
= icon('caret-down') = icon('chevron-down')
.help-block.append-bottom-10 .help-block.append-bottom-10
= link_to "Read more", help_page_path("user/permissions"), class: "vlink" = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
about role permissions about role permissions
......
---
title: Use fa-chevron-down on dropdown arrows for consistency
merge_request: 9659
author: TM Lee
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment