Initial commit

app/assets/stylesheets/framework/icons.scss

@@ -4,6 +4,10 @@
   svg {
     fill: $gl-success;
   }
+
+  .builds-dropdown-caret {
+    color: $gl-success;
+  }
 }
 
 .ci-status-icon-failed {
@@ -12,6 +16,10 @@
   svg {
     fill: $gl-danger;
   }
+
+  .builds-dropdown-caret {
+    color: $gl-danger;
+  }
 }
 
 .ci-status-icon-pending,
@@ -21,6 +29,10 @@
   svg {
     fill: $gl-warning;
   }
+
+  .builds-dropdown-caret {
+    color: $gl-warning;
+  }
 }
 
 .ci-status-icon-running {
@@ -29,6 +41,10 @@
   svg {
     fill: $blue-normal;
   }
+
+  .builds-dropdown-caret {
+    color: $blue-normal;
+  }
 }
 
 .ci-status-icon-canceled,
@@ -39,6 +55,10 @@
   svg {
     fill: $gl-gray;
   }
+
+  .builds-dropdown-caret {
+    color: $gl-gray;
+  }
 }
 
 .ci-status-icon-created,
@@ -48,4 +68,8 @@
   svg {
     fill: $gray-darkest;
   }
+
+  .builds-dropdown-caret {
+    color: $gray-darkest;
+  }
 }

app/assets/stylesheets/pages/pipelines.scss

@@ -734,3 +734,29 @@
     padding: 5px 5px 5px 7px;
   }
 }
+
+/**
+ * Builds dropdown in mini pipeline
+ */
+.builds-dropdown {
+  border: none;
+  background: transparent;
+  padding: 0;
+  font-size: inherit;
+  border-radius: 0;
+  cursor: pointer;
+
+  .dropdown-caret {
+    display: none;
+    position: absolute;
+    top: 3px;
+    right: 6px;
+    font-size: 10px;
+  }
+
+  &:hover {
+    .dropdown-caret {
+      display: block;
+    }
+  }
+}

app/views/projects/ci/pipelines/_pipeline.html.haml

@@ -51,15 +51,16 @@
           .stage-container
             - if hasMultipleBuilds
               .dropdown.inline
-                %a.dropdown-toggle{id: "dropdown-#{stage.name}", "data-toggle"=> "dropdown", "aria-haspopup"=> "true", "aria-expanded" => "false" }
+                %a.dropdown-toggle.builds-dropdown{id: "dropdown-#{stage.name}", title: tooltip, class: "has-tooltip ci-status-icon-#{stage.status}", "data-toggle"=> "dropdown", "aria-haspopup"=> "true", "aria-expanded" => "false"}
                   = ci_icon_for_status(stage.detailed_status)
-                  %span.caret
+                  = icon('caret-down', class: 'dropdown-caret')
                 .dropdown-menu.grouped-pipeline-dropdown{"aria-labelledby"=> "dropdown-#{stage.name}"}
                   .arrow
                     %ul
                       - stage.statuses.each do |status|
                         %li
-                          status
+                          = ci_icon_for_status(status)
+                          -# =render 'ci/status/icon_with_name_and_action', subject: status
             - else
               = link_to namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline.id, anchor: stage.name), class: "has-tooltip ci-status-icon-#{stage.status}", title: tooltip do
                 = ci_icon_for_status(stage.detailed_status)