Change pipeline dropdowns to new style

app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue

@@ -72,7 +72,7 @@
   };
 </script>
 <template>
-  <div>
+  <div class="ci-job-dropdown-container">
     <button
       v-tooltip
       type="button"

app/assets/javascripts/pipelines/components/graph/job_component.vue

@@ -75,7 +75,7 @@
   };
 </script>
 <template>
-  <div>
+  <div class="ci-job-component">
     <a
       v-tooltip
       v-if="job.status.details_path"

app/assets/javascripts/pipelines/components/graph/job_name_component.vue

@@ -26,7 +26,7 @@
   };
 </script>
 <template>
-  <span>
+  <span class="ci-job-name-component">
     <ci-icon
       :status="status" />
 

app/assets/stylesheets/framework/common.scss

@@ -16,6 +16,7 @@
 .prepend-left-default { margin-left: $gl-padding; }
 .prepend-left-20 { margin-left: 20px; }
 .append-right-5 { margin-right: 5px; }
+.append-right-8 { margin-right: 8px; }
 .append-right-10 { margin-right: 10px; }
 .append-right-default { margin-right: $gl-padding; }
 .append-right-20 { margin-right: 20px; }

app/assets/stylesheets/framework/dropdowns.scss

@@ -748,7 +748,8 @@
       }
 
       a,
-      button {
+      button,
+      .menu-item {
         border-radius: 0;
         padding: 8px 16px;
 

app/assets/stylesheets/framework/variables.scss

@@ -591,9 +591,10 @@ $ui-dev-kit-example-border: #ddd;
 /*
 Pipeline Graph
 */
-$stage-hover-bg: #eaf3fc;
-$stage-hover-border: #d1e7fc;
-$action-icon-color: #d6d6d6;
+$stage-hover-bg: $gray-darker;
+$ci-action-icon-size: 22px;
+$pipeline-dropdown-line-height: 20px;
+$pipeline-dropdown-status-icon-size: 18px;
 
 /*
 Pipeline Schedules

app/assets/stylesheets/pages/merge_requests.scss

@@ -174,17 +174,6 @@
     vertical-align: top;
   }
 
-  .mini-pipeline-graph-dropdown-menu .mini-pipeline-graph-dropdown-item {
-    display: flex;
-    align-items: center;
-
-    .ci-status-text,
-    .ci-status-icon {
-      top: 0;
-      margin-right: 10px;
-    }
-  }
-
   .normal {
     line-height: 28px;
   }

app/assets/stylesheets/pages/pipelines.scss

@@ -40,7 +40,7 @@
 
       .btn.btn-retry:hover,
       .btn.btn-retry:focus {
-        border-color: $gray-darkest;
+        border-color: $dropdown-toggle-active-border-color;
         background-color: $white-normal;
       }
 
@@ -206,8 +206,8 @@
 
 .stage-cell {
   .mini-pipeline-graph-dropdown-toggle svg {
-    height: 22px;
-    width: 22px;
+    height: $ci-action-icon-size;
+    width: $ci-action-icon-size;
     position: absolute;
     top: -1px;
     left: -1px;
@@ -219,7 +219,7 @@
     display: inline-block;
     position: relative;
     vertical-align: middle;
-    height: 22px;
+    height: $ci-action-icon-size;
     margin: 3px 0;
 
     + .stage-container {
@@ -308,7 +308,7 @@
 
   a {
     text-decoration: none;
-    color: $gl-text-color-secondary;
+    color: $gl-text-color;
   }
 
   svg {
@@ -432,7 +432,11 @@
     width: 186px;
     margin-bottom: 10px;
     white-space: normal;
-    color: $gl-text-color-secondary;
+
+    // ensure .build-content has hover style when action-icon is hovered
+    .ci-job-dropdown-container:hover .build-content {
+      @extend .build-content:hover;
+    }
 
     // Action Icons in big pipeline-graph nodes
     .ci-action-icon-container .ci-action-icon-wrapper {
@@ -445,11 +449,11 @@
 
       &:hover {
         background-color: $stage-hover-bg;
-        border: 1px solid $stage-hover-bg;
+        border: 1px solid $dropdown-toggle-active-border-color;
       }
 
       svg {
-        fill: $border-color;
+        fill: $gl-text-color-secondary;
         position: relative;
         left: -1px;
         top: -1px;
@@ -475,19 +479,10 @@
       background-color: transparent;
       border: none;
       padding: 0;
-      color: $gl-text-color-secondary;
 
       &:focus {
         outline: none;
       }
-
-      &:hover {
-        color: $gl-text-color;
-
-        .dropdown-counter-badge {
-          color: $gl-text-color;
-        }
-      }
     }
 
     .build-content {
@@ -502,8 +497,7 @@
     a.build-content:hover,
     button.build-content:hover {
       background-color: $stage-hover-bg;
-      border: 1px solid $stage-hover-border;
-      color: $gl-text-color;
+      border: 1px solid $dropdown-toggle-active-border-color;
     }
 
 
@@ -564,7 +558,6 @@
 
 // Triggers the dropdown in the big pipeline graph
 .dropdown-counter-badge {
-  color: $border-color;
   font-weight: 100;
   font-size: 15px;
   position: absolute;
@@ -606,8 +599,8 @@ button.mini-pipeline-graph-dropdown-toggle {
   background-color: $white-light;
   border-width: 1px;
   border-style: solid;
-  width: 22px;
-  height: 22px;
+  width: $ci-action-icon-size;
+  height: $ci-action-icon-size;
   margin: 0;
   padding: 0;
   transition: all 0.2s linear;
@@ -669,49 +662,57 @@ button.mini-pipeline-graph-dropdown-toggle {
   }
 }
 
+@include new-style-dropdown('.big-pipeline-graph-dropdown-menu');
+@include new-style-dropdown('.mini-pipeline-graph-dropdown-menu');
+
 // dropdown content for big and mini pipeline
 .big-pipeline-graph-dropdown-menu,
 .mini-pipeline-graph-dropdown-menu {
   width: 195px;
   max-width: 195px;
 
-  li {
-    padding: 2px 3px;
-  }
-
   .scrollable-menu {
     padding: 0;
     max-height: 245px;
     overflow: auto;
   }
 
+  li {
+    position: relative;
+
+    // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered
+    &:hover > .mini-pipeline-graph-dropdown-item,
+    &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item {
+      @extend .mini-pipeline-graph-dropdown-item:hover;
+    }
+
     // Action icon on the right
     a.ci-action-icon-wrapper {
-    color: $action-icon-color;
-    border: 1px solid $action-icon-color;
-    border-radius: 20px;
-    width: 22px;
-    height: 22px;
+      border-radius: 50%;
+      border: 1px solid $border-color;
+      width: $ci-action-icon-size;
+      height: $ci-action-icon-size;
       padding: 2px 0 0 5px;
-    cursor: pointer;
-    float: right;
-    margin: -26px 9px 0 0;
       font-size: 12px;
       background-color: $white-light;
+      position: absolute;
+      top: 50%;
+      right: $gl-padding;
+      margin-top: -#{$ci-action-icon-size / 2};
 
       &:hover,
       &:focus {
         background-color: $stage-hover-bg;
-      border: 1px solid transparent;
+        border: 1px solid $dropdown-toggle-active-border-color;
       }
 
       svg {
-      width: 22px;
-      height: 22px;
+        fill: $gl-text-color-secondary;
+        width: $ci-action-icon-size;
+        height: $ci-action-icon-size;
         left: -6px;
         position: relative;
         top: -3px;
-      fill: $action-icon-color;
       }
 
       &:hover svg,
@@ -723,13 +724,20 @@ button.mini-pipeline-graph-dropdown-toggle {
     // link to the build
     .mini-pipeline-graph-dropdown-item {
       padding: 3px 7px 4px;
+      align-items: center;
       clear: both;
-    font-weight: $gl-font-weight-normal;
-    line-height: 1.428571429;
+      display: flex;
+      font-weight: normal;
+      line-height: $line-height-base;
       white-space: nowrap;
-    margin: 0 5px;
       border-radius: 3px;
 
+      .ci-job-name-component {
+        align-items: center;
+        display: flex;
+        flex: 1;
+      }
+
       // build name
       .ci-build-text,
       .ci-status-text {
@@ -738,27 +746,26 @@ button.mini-pipeline-graph-dropdown-toggle {
         white-space: nowrap;
         text-overflow: ellipsis;
         max-width: 70%;
-      color: $gl-text-color-secondary;
         margin-left: 2px;
         display: inline-block;
-      top: 1px;
-      vertical-align: text-bottom;
-      position: relative;
 
         @media (max-width: $screen-xs-max) {
           max-width: 60%;
         }
       }
 
-    // status icon on the left
       .ci-status-icon {
-      top: 3px;
+        @extend .append-right-8;
+
         position: relative;
 
         > svg {
+          width: $pipeline-dropdown-status-icon-size;
+          height: $pipeline-dropdown-status-icon-size;
+          margin: 3px 0;
+          position: relative;
           overflow: visible;
-        width: 18px;
-        height: 18px;
+          display: block;
         }
       }
 
@@ -766,26 +773,19 @@ button.mini-pipeline-graph-dropdown-toggle {
       &:focus {
         outline: none;
         text-decoration: none;
-      color: $gl-text-color;
         background-color: $stage-hover-bg;
       }
     }
+  }
 }
 
 // Dropdown in the big pipeline graph
 .big-pipeline-graph-dropdown-menu {
   width: 195px;
   min-width: 195px;
-  left: auto;
-  right: -195px;
-  top: -4px;
+  left: 100%;
+  top: -10px;
   box-shadow: 0 1px 5px $black-transparent;
-
-  .mini-pipeline-graph-dropdown-item {
-    .ci-status-icon {
-      top: -1px;
-    }
-  }
 }
 
 /**
@@ -806,15 +806,14 @@ button.mini-pipeline-graph-dropdown-toggle {
   }
 
   &::before {
-    left: -5px;
-    margin-top: -6px;
+    left: -6px;
+    margin-top: 3px;
     border-width: 7px 5px 7px 0;
     border-right-color: $border-color;
   }
 
   &::after {
-    left: -4px;
-    margin-top: -9px;
+    left: -5px;
     border-width: 10px 7px 10px 0;
     border-right-color: $white-light;
   }

app/views/ci/status/_dropdown_graph_badge.html.haml

@@ -6,14 +6,14 @@
 - tooltip = "#{subject.name} - #{status.label}"
 
 - if status.has_details?
-  = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip }  do
+  = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, container: 'body' }  do
     %span{ class: klass }= custom_icon(status.icon)
     %span.ci-build-text= subject.name
 - else
-  .mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip } }
+  .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } }
     %span{ class: klass }= custom_icon(status.icon)
     %span.ci-build-text= subject.name
 
 - if status.has_action?
-  = link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title }  do
+  = link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' }  do
     = custom_icon(status.action_icon)

spec/features/merge_requests/mini_pipeline_graph_spec.rb

@@ -70,7 +70,7 @@ feature 'Mini Pipeline Graph', :js do
     it 'should show tooltip when hovered' do
       toggle.hover
 
-      expect(toggle.find(:xpath, '..')).to have_selector('.tooltip')
+      expect(page).to have_selector('.tooltip')
     end
   end
 
@@ -117,7 +117,7 @@ feature 'Mini Pipeline Graph', :js do
       it 'should show tooltip when hovered' do
         build_item.hover
 
-        expect(build_item.find(:xpath, '..')).to have_selector('.tooltip')
+        expect(page).to have_selector('.tooltip')
       end
     end
   end