Commit d6d295d4 authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'replace-bootstrap-caret' into 'master'

Replace bootstrap caret with fontawesome caret

## What does this MR do?

1. Replaces all occurrences of `.caret` with fontawesome's caret (`fa-caret-down` for most cases)
2. Remove `.caret` from CSS
3. Refactored pipeline graph toggle to display the correct fontawesome caret (Had to change some JavaScript for this)  

## Are there points in the code the reviewer needs to double check?

*  Need to check if I missed any pages 😥 or for any side effects

## Why was this MR needed?
Resolves UI inconsistency

## Screenshots (if relevant)
Before (1 example out of many):
![Screen_Shot_2016-09-12_at_3.49.58_PM](/uploads/5eb93bbcc00412a5875e39302f4d8ba0/Screen_Shot_2016-09-12_at_3.49.58_PM.png)

After:
![Screen_Shot_2016-09-12_at_3.49.48_PM](/uploads/9259a9ebfb0bd09b4cfd55674e9b8be4/Screen_Shot_2016-09-12_at_3.49.48_PM.png)

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- Tests
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #21169

See merge request !6314
parents 63201925 e23c1d88
...@@ -52,6 +52,7 @@ v 8.13.0 (unreleased) ...@@ -52,6 +52,7 @@ v 8.13.0 (unreleased)
- Add broadcast messages and alerts below sub-nav - Add broadcast messages and alerts below sub-nav
- Better empty state for Groups view - Better empty state for Groups view
- Update ruby-prof to 0.16.2. !6026 (Elan Ruusamäe) - Update ruby-prof to 0.16.2. !6026 (Elan Ruusamäe)
- Replace bootstrap caret with fontawesome caret (ClemMakesApps)
- Fix unnecessary escaping of reserved HTML characters in milestone title. !6533 - Fix unnecessary escaping of reserved HTML characters in milestone title. !6533
- Add organization field to user profile - Add organization field to user profile
- Fix deploy status responsiveness error !6633 - Fix deploy status responsiveness error !6633
......
...@@ -3,12 +3,21 @@ ...@@ -3,12 +3,21 @@
const $pipelineBtn = $(this).closest('.toggle-pipeline-btn'); const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph'); const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
const $btnText = $(this).find('.toggle-btn-text'); const $btnText = $(this).find('.toggle-btn-text');
const $icon = $(this).find('.fa');
$($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed'); $($pipelineBtn).add($pipelineGraph).toggleClass('graph-collapsed');
const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed'); const graphCollapsed = $pipelineGraph.hasClass('graph-collapsed');
const expandIcon = 'fa-caret-down';
const hideIcon = 'fa-caret-up';
graphCollapsed ? $btnText.text('Expand') : $btnText.text('Hide') if(graphCollapsed) {
$btnText.text('Expand');
$icon.removeClass(hideIcon).addClass(expandIcon);
} else {
$btnText.text('Hide');
$icon.removeClass(expandIcon).addClass(hideIcon);
}
} }
$(document).on('click', '.toggle-pipeline-btn', toggleGraph); $(document).on('click', '.toggle-pipeline-btn', toggleGraph);
......
...@@ -194,10 +194,17 @@ ...@@ -194,10 +194,17 @@
pointer-events: none !important; pointer-events: none !important;
} }
.caret { .fa-caret-down,
.fa-caret-up {
margin-left: 5px; margin-left: 5px;
} }
&.dropdown-toggle {
.fa-caret-down {
margin-left: 3px;
}
}
svg { svg {
height: 15px; height: 15px;
width: 15px; width: 15px;
......
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: $caret-width-base dashed;
border-right: $caret-width-base solid transparent;
border-left: $caret-width-base solid transparent;
}
.btn-group {
.caret {
margin-left: 0;
}
}
.dropdown { .dropdown {
position: relative; position: relative;
......
...@@ -81,10 +81,10 @@ label { ...@@ -81,10 +81,10 @@ label {
.select-wrapper { .select-wrapper {
position: relative; position: relative;
.caret { .fa-caret-down {
position: absolute; position: absolute;
right: 10px; right: 10px;
top: $gl-padding; top: 10px;
color: $gray-darkest; color: $gray-darkest;
pointer-events: none; pointer-events: none;
} }
......
...@@ -57,6 +57,10 @@ header { ...@@ -57,6 +57,10 @@ header {
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
background-color: $background-color; background-color: $background-color;
} }
.fa-caret-down {
font-size: 15px;
}
} }
.navbar-toggle { .navbar-toggle {
......
...@@ -21,7 +21,14 @@ ...@@ -21,7 +21,14 @@
padding-right: 10px; padding-right: 10px;
b { b {
@extend .caret; display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: $caret-width-base dashed;
border-right: $caret-width-base solid transparent;
border-left: $caret-width-base solid transparent;
color: $gray-darkest; color: $gray-darkest;
} }
} }
......
...@@ -229,9 +229,12 @@ ...@@ -229,9 +229,12 @@
.fa { .fa {
color: $table-text-gray; color: $table-text-gray;
margin-right: 6px;
font-size: 14px; font-size: 14px;
} }
svg, .fa {
margin-right: 0;
}
} }
.btn-remove { .btn-remove {
...@@ -272,18 +275,8 @@ ...@@ -272,18 +275,8 @@
.toggle-pipeline-btn { .toggle-pipeline-btn {
background-color: $gray-dark; background-color: $gray-dark;
.caret {
border-top: none;
border-bottom: 4px solid;
}
&.graph-collapsed { &.graph-collapsed {
background-color: $white-light; background-color: $white-light;
.caret {
border-bottom: none;
border-top: 4px solid;
}
} }
} }
......
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
= sort_options_hash[@sort] = sort_options_hash[@sort]
- else - else
= sort_title_recently_created = sort_title_recently_created
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort
%li %li
= link_to todos_filter_path(sort: sort_value_priority) do = link_to todos_filter_path(sort: sort_value_priority) do
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
= sort_options_hash[@sort] = sort_options_hash[@sort]
- else - else
= sort_title_recently_created = sort_title_recently_created
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
%li %li
= link_to explore_groups_path(sort: sort_value_recently_created) do = link_to explore_groups_path(sort: sort_value_recently_created) do
......
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
= visibility_level_label(params[:visibility_level].to_i) = visibility_level_label(params[:visibility_level].to_i)
- else - else
Any Any
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
%li %li
= link_to filter_projects_path(visibility_level: nil) do = link_to filter_projects_path(visibility_level: nil) do
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
= params[:tag] = params[:tag]
- else - else
Any Any
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
%li %li
= link_to filter_projects_path(tag: nil) do = link_to filter_projects_path(tag: nil) do
......
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
%li.header-user.dropdown %li.header-user.dropdown
= link_to current_user, class: "header-user-dropdown-toggle", data: { toggle: "dropdown" } do = link_to current_user, class: "header-user-dropdown-toggle", data: { toggle: "dropdown" } do
= image_tag avatar_icon(current_user, 26), width: 26, height: 26, class: "header-user-avatar" = image_tag avatar_icon(current_user, 26), width: 26, height: 26, class: "header-user-avatar"
%span.caret = icon('caret-down')
.dropdown-menu-nav.dropdown-menu-align-right .dropdown-menu-nav.dropdown-menu-align-right
%ul %ul
%li %li
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
%button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'} %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
%span.light %span.light
= projects_sort_options_hash[@sort] = projects_sort_options_hash[@sort]
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
%li %li
= link_to filter_branches_path(sort: sort_value_name) do = link_to filter_branches_path(sort: sort_value_name) do
......
...@@ -67,7 +67,7 @@ ...@@ -67,7 +67,7 @@
.btn-group .btn-group
%a.dropdown-toggle.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'} %a.dropdown-toggle.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
= custom_icon('icon_play') = custom_icon('icon_play')
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
- actions.each do |build| - actions.each do |build|
%li %li
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
.btn-group .btn-group
%a.dropdown-toggle.btn.btn-default.build-artifacts{type: 'button', 'data-toggle' => 'dropdown'} %a.dropdown-toggle.btn.btn-default.build-artifacts{type: 'button', 'data-toggle' => 'dropdown'}
= icon("download") = icon("download")
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
- artifacts.each do |build| - artifacts.each do |build|
%li %li
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
.dropdown.inline .dropdown.inline
%a.btn.btn-default.dropdown-toggle{ data: { toggle: "dropdown" } } %a.btn.btn-default.dropdown-toggle{ data: { toggle: "dropdown" } }
%span.hidden-xs Options %span.hidden-xs Options
%span.caret.commit-options-dropdown-caret = icon('caret-down', class: ".commit-options-dropdown-caret")
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
%li.visible-xs-block.visible-sm-block %li.visible-xs-block.visible-sm-block
= link_to namespace_project_tree_path(@project.namespace, @project, @commit) do = link_to namespace_project_tree_path(@project.namespace, @project, @commit) do
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
.btn.btn-grouped.btn-white.toggle-pipeline-btn .btn.btn-grouped.btn-white.toggle-pipeline-btn
%span.toggle-btn-text Hide %span.toggle-btn-text Hide
%span pipeline graph %span pipeline graph
%span.caret = icon('caret-up')
- if can?(current_user, :update_pipeline, pipeline.project) - if can?(current_user, :update_pipeline, pipeline.project)
- if pipeline.builds.latest.failed.any?(&:retryable?) - if pipeline.builds.latest.failed.any?(&:retryable?)
= link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post = link_to "Retry failed", retry_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id), class: 'btn btn-grouped btn-primary', method: :post
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
.dropdown .dropdown
%a.dropdown-new.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'} %a.dropdown-new.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
= custom_icon('icon_play') = custom_icon('icon_play')
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
- actions.each do |action| - actions.each do |action|
%li %li
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
= sort_options_hash[@sort] = sort_options_hash[@sort]
- else - else
= sort_title_recently_created = sort_title_recently_created
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
%li %li
- excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id] - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
......
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,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"
%span.caret = icon('caret-down')
.form-group .form-group
= label_tag :expires_at, 'Access expiration date', class: 'label-light' = label_tag :expires_at, 'Access expiration date', class: 'label-light'
.clearable-input .clearable-input
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
.issuable-actions .issuable-actions
.clearfix.issue-btn-group.dropdown .clearfix.issue-btn-group.dropdown
%button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } } %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
%span.caret = icon('caret-down')
Options Options
.dropdown-menu.dropdown-menu-align-right.hidden-lg .dropdown-menu.dropdown-menu-align-right.hidden-lg
%ul %ul
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
.visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown .visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown
%button.btn.btn-default.label-options-toggle{ data: { toggle: "dropdown" } } %button.btn.btn-default.label-options-toggle{ data: { toggle: "dropdown" } }
Options Options
%span.caret = icon('caret-down')
.dropdown-menu.dropdown-menu-align-right .dropdown-menu.dropdown-menu-align-right
%ul %ul
%li %li
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
%span.dropdown.inline.prepend-left-5 %span.dropdown.inline.prepend-left-5
%a.btn.btn-sm.dropdown-toggle{ data: {toggle: :dropdown} } %a.btn.btn-sm.dropdown-toggle{ data: {toggle: :dropdown} }
Download as Download as
%span.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
%li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch) %li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch)
%li= link_to "Plain Diff", merge_request_path(@merge_request, format: :diff) %li= link_to "Plain Diff", merge_request_path(@merge_request, format: :diff)
......
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
.issuable-actions .issuable-actions
.clearfix.issue-btn-group.dropdown .clearfix.issue-btn-group.dropdown
%button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } } %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
%span.caret = icon('caret-down')
Options Options
.dropdown-menu.dropdown-menu-align-right.hidden-lg .dropdown-menu.dropdown-menu-align-right.hidden-lg
%ul %ul
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
latest version latest version
- else - else
version #{version_index(@merge_request_diff)} version #{version_index(@merge_request_diff)}
%span.caret = icon('caret-down')
.dropdown-menu.dropdown-select.dropdown-menu-selectable .dropdown-menu.dropdown-select.dropdown-menu-selectable
.dropdown-title .dropdown-title
%span Version: %span Version:
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
version #{version_index(@start_version)} version #{version_index(@start_version)}
- else - else
#{@merge_request.target_branch} #{@merge_request.target_branch}
%span.caret = icon('caret-down')
.dropdown-menu.dropdown-select.dropdown-menu-selectable .dropdown-menu.dropdown-select.dropdown-menu-selectable
.dropdown-title .dropdown-title
%span Compared with: %span Compared with:
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
Merge When Build Succeeds Merge When Build Succeeds
- unless @project.only_allow_merge_if_build_succeeds? - unless @project.only_allow_merge_if_build_succeeds?
= button_tag class: "btn btn-success dropdown-toggle", 'data-toggle' => 'dropdown' do = button_tag class: "btn btn-success dropdown-toggle", 'data-toggle' => 'dropdown' do
%span.caret = icon('caret-down')
%span.sr-only %span.sr-only
Select Merge Moment Select Merge Moment
%ul.js-merge-dropdown.dropdown-menu.dropdown-menu-right{ role: 'menu' } %ul.js-merge-dropdown.dropdown-menu.dropdown-menu-right{ role: 'menu' }
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
.visible-xs-block.dropdown .visible-xs-block.dropdown
%button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } } %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
Options Options
%span.caret = icon('caret-down')
.dropdown-menu.dropdown-menu-full-width .dropdown-menu.dropdown-menu-full-width
%ul %ul
- if can?(current_user, :create_project_snippet, @project) - if can?(current_user, :create_project_snippet, @project)
......
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
%button.dropdown-toggle.btn{ type: 'button', data: { toggle: 'dropdown'} } %button.dropdown-toggle.btn{ type: 'button', data: { toggle: 'dropdown'} }
%span.light %span.light
= @sort.humanize = @sort.humanize
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right %ul.dropdown-menu.dropdown-menu-align-right
%li %li
= link_to filter_tags_path(sort: nil) do = link_to filter_tags_path(sort: nil) do
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
= project_select_tag :project_path, class: "project-item-select", data: { include_groups: local_assigns[:include_groups], order_by: 'last_activity_at' } = project_select_tag :project_path, class: "project-item-select", data: { include_groups: local_assigns[:include_groups], order_by: 'last_activity_at' }
%a.btn.btn-new.new-project-item-select-button %a.btn.btn-new.new-project-item-select-button
= local_assigns[:label] = local_assigns[:label]
%b.caret = icon('caret-down')
:javascript :javascript
$('.new-project-item-select-button').on('click', function() { $('.new-project-item-select-button').on('click', function() {
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
= sort_options_hash[@sort] = sort_options_hash[@sort]
- else - else
= sort_title_recently_created = sort_title_recently_created
%b.caret = icon('caret-down')
%ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort %ul.dropdown-menu.dropdown-menu-align-right.dropdown-menu-sort
%li %li
= link_to page_filter_path(sort: sort_value_priority, label: true) do = link_to page_filter_path(sort: sort_value_priority, label: true) do
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
= icon("bell", class: "js-notification-loading") = icon("bell", class: "js-notification-loading")
= notification_title(notification_setting.level) = notification_title(notification_setting.level)
%button.btn.dropdown-toggle{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting) } } %button.btn.dropdown-toggle{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting) } }
%span.caret = icon('caret-down')
.sr-only Toggle dropdown .sr-only Toggle dropdown
- else - else
%button.dropdown-new.btn.btn-default.notifications-btn#notifications-button{ type: "button", data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting) } } %button.dropdown-new.btn.btn-default.notifications-btn#notifications-button{ type: "button", data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting) } }
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
.visible-xs-block.dropdown .visible-xs-block.dropdown
%button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } } %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
Options Options
%span.caret = icon('caret-down')
.dropdown-menu.dropdown-menu-full-width .dropdown-menu.dropdown-menu-full-width
%ul %ul
%li %li
......
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