Replace bootstrap caret with fontawesome caret

e23c1d88 · Clement Ho · 7e493b11 · e23c1d88 · e23c1d88 · e23c1d88
Commit e23c1d88 authored Aug 23, 2016 by Clement Ho
31 changed files
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -44,6 +44,7 @@ v 8.13.0 (unreleased)
  - Add broadcast messages and alerts below sub-nav
  - Better empty state for Groups view
  - 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
  - Add organization field to user profile
  - Fix resolved discussion display in side-by-side diff view !6575

--- a/app/assets/javascripts/pipeline.js.es6
+++ b/app/assets/javascripts/pipeline.js.es6
@@ -3,12 +3,21 @@
    const $pipelineBtn = $(this).closest('.toggle-pipeline-btn');
    const $pipelineGraph = $(this).closest('.row-content-block').next('.pipeline-graph');
    const $btnText = $(this).find('.toggle-btn-text');
+    const $icon = $(this).find('.fa');

    $($pipelineBtn).add($pipelineGraph).toggleClass('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);

--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -194,10 +194,17 @@
    pointer-events: none !important;
  }

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

+  &.dropdown-toggle {
+    .fa-caret-down {
+      margin-left: 3px;
+    }
+  }
+
  svg {
    height: 15px;
    width: 15px;

--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
-.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 {
  position: relative;


--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -81,10 +81,10 @@ label {
 .select-wrapper {
  position: relative;

-  .caret {
+  .fa-caret-down {
    position: absolute;
    right: 10px;
-    top: $gl-padding;
+    top: 10px;
    color: $gray-darkest;
    pointer-events: none;
  }

--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -57,6 +57,10 @@ header {
        &:hover, &:focus, &:active {
          background-color: $background-color;
        }
+
+        .fa-caret-down {
+          font-size: 15px;
+        }
      }

      .navbar-toggle {

--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -21,7 +21,14 @@
      padding-right: 10px;

      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;
      }
    }

--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -229,9 +229,12 @@

      .fa {
        color: $table-text-gray;
-        margin-right: 6px;
        font-size: 14px;
      }
+
+      svg, .fa {
+        margin-right: 0;
+      }
    }

    .btn-remove {
@@ -272,18 +275,8 @@
 .toggle-pipeline-btn {
  background-color: $gray-dark;

-  .caret {
-    border-top: none;
-    border-bottom: 4px solid;
-  }
-
  &.graph-collapsed {
    background-color: $white-light;
-
-    .caret {
-      border-bottom: none;
-      border-top: 4px solid;
-    }
  }
 }


--- a/app/views/dashboard/todos/index.html.haml
+++ b/app/views/dashboard/todos/index.html.haml
@@ -55,7 +55,7 @@
              = sort_options_hash[@sort]
            - else
              = sort_title_recently_created
-            %b.caret
+            = icon('caret-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
@@ -23,7 +23,7 @@
          = sort_options_hash[@sort]
        - else
          = sort_title_recently_created
-        %b.caret
+        = icon('caret-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
@@ -7,7 +7,7 @@
        = visibility_level_label(params[:visibility_level].to_i)
      - else
        Any
-      %b.caret
+      = icon('caret-down')
    %ul.dropdown-menu.dropdown-menu-align-right
      %li
        = link_to filter_projects_path(visibility_level: nil) do
@@ -27,7 +27,7 @@
        = params[:tag]
      - else
        Any
-      %b.caret
+      = icon('caret-down')
    %ul.dropdown-menu.dropdown-menu-align-right
      %li
        = link_to filter_projects_path(tag: nil) do

--- a/app/views/layouts/header/_default.html.haml
+++ b/app/views/layouts/header/_default.html.haml
@@ -41,7 +41,7 @@
            %li.header-user.dropdown
              = 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"
-                %span.caret
+                = icon('caret-down')
              .dropdown-menu-nav.dropdown-menu-align-right
                %ul
                  %li

--- a/app/views/projects/branches/index.html.haml
+++ b/app/views/projects/branches/index.html.haml
@@ -15,7 +15,7 @@
        %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
          %span.light
            = projects_sort_options_hash[@sort]
-          %b.caret
+          = icon('caret-down')
        %ul.dropdown-menu.dropdown-menu-align-right
          %li
            = link_to filter_branches_path(sort: sort_value_name) do

--- a/app/views/projects/ci/pipelines/_pipeline.html.haml
+++ b/app/views/projects/ci/pipelines/_pipeline.html.haml
@@ -67,7 +67,7 @@
            .btn-group
              %a.dropdown-toggle.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
                = custom_icon('icon_play')
-                %b.caret
+                = icon('caret-down')
              %ul.dropdown-menu.dropdown-menu-align-right
                - actions.each do |build|
                  %li
@@ -78,7 +78,7 @@
            .btn-group
              %a.dropdown-toggle.btn.btn-default.build-artifacts{type: 'button', 'data-toggle' => 'dropdown'}
                = icon("download")
-                %b.caret
+                = icon('caret-down')
              %ul.dropdown-menu.dropdown-menu-align-right
                - artifacts.each do |build|
                  %li

--- a/app/views/projects/commit/_commit_box.html.haml
+++ b/app/views/projects/commit/_commit_box.html.haml
@@ -14,7 +14,7 @@
    .dropdown.inline
      %a.btn.btn-default.dropdown-toggle{ data: { toggle: "dropdown" } }
        %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
        %li.visible-xs-block.visible-sm-block
          = link_to namespace_project_tree_path(@project.namespace, @project, @commit) do

--- a/app/views/projects/commit/_pipeline.html.haml
+++ b/app/views/projects/commit/_pipeline.html.haml
@@ -3,7 +3,7 @@
    .btn.btn-grouped.btn-white.toggle-pipeline-btn
      %span.toggle-btn-text Hide
      %span pipeline graph
-      %span.caret
+      = icon('caret-up')
    - if can?(current_user, :update_pipeline, pipeline.project)
      - 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

--- a/app/views/projects/deployments/_actions.haml
+++ b/app/views/projects/deployments/_actions.haml
@@ -6,7 +6,7 @@
        .dropdown
          %a.dropdown-new.btn.btn-default{type: 'button', 'data-toggle' => 'dropdown'}
            = custom_icon('icon_play')
-            %b.caret
+            = icon('caret-down')
          %ul.dropdown-menu.dropdown-menu-align-right
            - actions.each do |action|
              %li

--- a/app/views/projects/forks/index.html.haml
+++ b/app/views/projects/forks/index.html.haml
@@ -15,7 +15,7 @@
          = sort_options_hash[@sort]
        - else
          = sort_title_recently_created
-        %b.caret
+        = icon('caret-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/group_links/index.html.haml
+++ b/app/views/projects/group_links/index.html.haml
@@ -16,7 +16,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"
-          %span.caret
+          = icon('caret-down')
      .form-group
        = label_tag :expires_at, 'Access expiration date', class: 'label-light'
        .clearable-input

--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -23,7 +23,7 @@
    .issuable-actions
      .clearfix.issue-btn-group.dropdown
        %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
-          %span.caret
+          = icon('caret-down')
          Options
        .dropdown-menu.dropdown-menu-align-right.hidden-lg
          %ul

--- a/app/views/projects/labels/_label.html.haml
+++ b/app/views/projects/labels/_label.html.haml
@@ -5,7 +5,7 @@
  .visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown
    %button.btn.btn-default.label-options-toggle{ data: { toggle: "dropdown" } }
      Options
-      %span.caret
+      = icon('caret-down')
    .dropdown-menu.dropdown-menu-align-right
      %ul
        %li

--- a/app/views/projects/merge_requests/_show.html.haml
+++ b/app/views/projects/merge_requests/_show.html.haml
@@ -22,7 +22,7 @@
          %span.dropdown.inline.prepend-left-5
            %a.btn.btn-sm.dropdown-toggle{ data: {toggle: :dropdown} }
              Download as
-              %span.caret
+              = icon('caret-down')
            %ul.dropdown-menu.dropdown-menu-align-right
              %li= link_to "Email Patches", merge_request_path(@merge_request, format: :patch)
              %li= link_to "Plain Diff",    merge_request_path(@merge_request, format: :diff)

--- a/app/views/projects/merge_requests/show/_mr_title.html.haml
+++ b/app/views/projects/merge_requests/show/_mr_title.html.haml
@@ -19,7 +19,7 @@
    .issuable-actions
      .clearfix.issue-btn-group.dropdown
        %button.btn.btn-default.pull-left.hidden-md.hidden-lg{ type: "button", data: { toggle: "dropdown" } }
-          %span.caret
+          = icon('caret-down')
          Options
        .dropdown-menu.dropdown-menu-align-right.hidden-lg
          %ul

--- a/app/views/projects/merge_requests/show/_versions.html.haml
+++ b/app/views/projects/merge_requests/show/_versions.html.haml
@@ -9,7 +9,7 @@
              latest version
            - else
              version #{version_index(@merge_request_diff)}
-          %span.caret
+          = icon('caret-down')
        .dropdown-menu.dropdown-select.dropdown-menu-selectable
          .dropdown-title
            %span Version:
@@ -39,7 +39,7 @@
                version #{version_index(@start_version)}
              - else
                #{@merge_request.target_branch}
-            %span.caret
+            = icon('caret-down')
          .dropdown-menu.dropdown-select.dropdown-menu-selectable
            .dropdown-title
              %span Compared with:

--- a/app/views/projects/merge_requests/widget/open/_accept.html.haml
+++ b/app/views/projects/merge_requests/widget/open/_accept.html.haml
@@ -12,7 +12,7 @@
              Merge When Build Succeeds
            - unless @project.only_allow_merge_if_build_succeeds?
              = button_tag class: "btn btn-success dropdown-toggle", 'data-toggle' => 'dropdown' do
-                %span.caret
+                = icon('caret-down')
                %span.sr-only
                  Select Merge Moment
              %ul.js-merge-dropdown.dropdown-menu.dropdown-menu-right{ role: 'menu' }

--- a/app/views/projects/snippets/_actions.html.haml
+++ b/app/views/projects/snippets/_actions.html.haml
@@ -12,7 +12,7 @@
  .visible-xs-block.dropdown
    %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
      Options
-      %span.caret
+      = icon('caret-down')
    .dropdown-menu.dropdown-menu-full-width
      %ul
        - if can?(current_user, :create_project_snippet, @project)

--- a/app/views/projects/tags/index.html.haml
+++ b/app/views/projects/tags/index.html.haml
@@ -14,7 +14,7 @@
        %button.dropdown-toggle.btn{ type: 'button', data: { toggle: 'dropdown'} }
          %span.light
            = @sort.humanize
-          %b.caret
+          = icon('caret-down')
        %ul.dropdown-menu.dropdown-menu-align-right
          %li
            = link_to filter_tags_path(sort: nil) do

--- a/app/views/shared/_new_project_item_select.html.haml
+++ b/app/views/shared/_new_project_item_select.html.haml
@@ -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' }
    %a.btn.btn-new.new-project-item-select-button
      = local_assigns[:label]
-      %b.caret
+      = icon('caret-down')

  :javascript
    $('.new-project-item-select-button').on('click', function() {

--- a/app/views/shared/_sort_dropdown.html.haml
+++ b/app/views/shared/_sort_dropdown.html.haml
@@ -5,7 +5,7 @@
      = sort_options_hash[@sort]
    - else
      = sort_title_recently_created
-    %b.caret
+    = icon('caret-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/notifications/_button.html.haml
+++ b/app/views/shared/notifications/_button.html.haml
@@ -11,7 +11,7 @@
              = icon("bell", class: "js-notification-loading")
              = notification_title(notification_setting.level)
            %button.btn.dropdown-toggle{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting) } }
-              %span.caret
+              = icon('caret-down')
              .sr-only Toggle dropdown
          - else
            %button.dropdown-new.btn.btn-default.notifications-btn#notifications-button{ type: "button", data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting) } }

--- a/app/views/snippets/_actions.html.haml
+++ b/app/views/snippets/_actions.html.haml
@@ -12,7 +12,7 @@
  .visible-xs-block.dropdown
    %button.btn.btn-default.btn-block.append-bottom-0.prepend-top-5{ data: { toggle: "dropdown" } }
      Options
-      %span.caret
+      = icon('caret-down')
    .dropdown-menu.dropdown-menu-full-width
      %ul
        %li