From f5d16b0db81d094b751adc13e0f7e3e362493bf2 Mon Sep 17 00:00:00 2001 From: TM Lee Date: Mon, 19 Jun 2017 13:50:30 +0000 Subject: [#27697] Make the arrow icons consistent in dropdown --- app/assets/stylesheets/framework/forms.scss | 11 ++++++-- app/assets/stylesheets/framework/selects.scss | 29 ++++++++++++++-------- app/helpers/projects_helper.rb | 23 +++++++++++------ app/views/projects/_visibility_select.html.haml | 4 ++- app/views/projects/edit.html.haml | 6 ++--- .../project_members/_new_project_member.html.haml | 4 ++- .../project_members/_new_shared_group.html.haml | 2 +- ...697-make-arrow-icons-consistent-in-dropdown.yml | 4 +++ 8 files changed, 57 insertions(+), 26 deletions(-) create mode 100644 changelogs/unreleased/27697-make-arrow-icons-consistent-in-dropdown.yml diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index a78179e727f..61e3897f369 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -125,10 +125,11 @@ label { .select-wrapper { position: relative; - .fa-caret-down { + .fa-chevron-down { position: absolute; + font-size: 10px; right: 10px; - top: 10px; + top: 12px; color: $gray-darkest; pointer-events: none; } @@ -138,6 +139,12 @@ label { padding-left: 10px; padding-right: 10px; -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + &::-ms-expand { + display: none; + } } .form-control-inline { diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss index 1b20c35ad98..40e654f4838 100644 --- a/app/assets/stylesheets/framework/selects.scss +++ b/app/assets/stylesheets/framework/selects.scss @@ -18,19 +18,28 @@ background-image: none; background-color: transparent; border: none; - padding-top: 6px; - padding-right: 10px; + padding-top: 12px; + padding-right: 20px; + font-size: 10px; b { - display: inline-block; - width: 0; - height: 0; - margin-left: 2px; - vertical-align: middle; - border-top: 5px dashed; - border-right: 5px solid transparent; - border-left: 5px solid transparent; + display: none; + } + + &::after { + content: "\f078"; + position: absolute; + z-index: 1; + text-align: center; + pointer-events: none; + box-sizing: border-box; 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; } } diff --git a/app/helpers/projects_helper.rb b/app/helpers/projects_helper.rb index 84c09a32987..0d0459f5a70 100644 --- a/app/helpers/projects_helper.rb +++ b/app/helpers/projects_helper.rb @@ -151,14 +151,21 @@ module ProjectsHelper disabled: disabled_option ) - content_tag( - :select, - options, - name: "project[project_feature_attributes][#{field}]", - id: "project_project_feature_attributes_#{field}", - class: "pull-right form-control #{repo_children_classes(field)}", - data: { field: field } - ).html_safe + content_tag :div, class: "select-wrapper" do + concat( + content_tag( + :select, + options, + name: "project[project_feature_attributes][#{field}]", + id: "project_project_feature_attributes_#{field}", + class: "pull-right form-control select-control #{repo_children_classes(field)} ", + data: { field: field } + ) + ) + concat( + icon('chevron-down') + ) + end.html_safe end def link_to_autodeploy_doc diff --git a/app/views/projects/_visibility_select.html.haml b/app/views/projects/_visibility_select.html.haml index 65fc0a36ca9..4026b9e3c46 100644 --- a/app/views/projects/_visibility_select.html.haml +++ b/app/views/projects/_visibility_select.html.haml @@ -1,5 +1,7 @@ - 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 .info.js-locked{ data: { help_block: visibility_level_description(@project.visibility_level, @project) } } = visibility_level_icon(@project.visibility_level) diff --git a/app/views/projects/edit.html.haml b/app/views/projects/edit.html.haml index c3dab68cea5..296e37e20e6 100644 --- a/app/views/projects/edit.html.haml +++ b/app/views/projects/edit.html.haml @@ -99,9 +99,9 @@ Git Large File Storage = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs') .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 .form-group.js-container-registry{ style: ("display: none;" if @project.project_feature.send(:repository_access_level) == 0) } .checkbox diff --git a/app/views/projects/project_members/_new_project_member.html.haml b/app/views/projects/project_members/_new_project_member.html.haml index 247c4bdbe2d..8bf2246662a 100644 --- a/app/views/projects/project_members/_new_project_member.html.haml +++ b/app/views/projects/project_members/_new_project_member.html.haml @@ -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") .form-group = 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 = link_to "Read more", help_page_path("user/permissions"), class: "vlink" about role permissions diff --git a/app/views/projects/project_members/_new_shared_group.html.haml b/app/views/projects/project_members/_new_shared_group.html.haml index b7cc8dd7062..643569db646 100644 --- a/app/views/projects/project_members/_new_shared_group.html.haml +++ b/app/views/projects/project_members/_new_shared_group.html.haml @@ -8,7 +8,7 @@ = label_tag :link_group_access, "Max access level", class: "label-light" .select-wrapper = 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 = link_to "Read more", help_page_path("user/permissions"), class: "vlink" about role permissions diff --git a/changelogs/unreleased/27697-make-arrow-icons-consistent-in-dropdown.yml b/changelogs/unreleased/27697-make-arrow-icons-consistent-in-dropdown.yml new file mode 100644 index 00000000000..92b5b59f46f --- /dev/null +++ b/changelogs/unreleased/27697-make-arrow-icons-consistent-in-dropdown.yml @@ -0,0 +1,4 @@ +--- +title: Use fa-chevron-down on dropdown arrows for consistency +merge_request: 9659 +author: TM Lee -- cgit v1.2.1