Skip to content
Snippets Groups Projects
Commit 0c8736a8 authored by Winnie Hellmann's avatar Winnie Hellmann
Browse files

Change pipeline dropdowns to new style

parent 6f0f65be
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 123 additions and 132 deletions
app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue
+ 1
− 1
View file @ 0c8736a8
@@ -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
+ 1
− 1
View file @ 0c8736a8
@@ -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
+ 1
− 1
View file @ 0c8736a8
@@ -26,7 +26,7 @@
};
</script>
<template>
<span>
<span class="ci-job-name-component">
<ci-icon
:status="status" />
 
app/assets/stylesheets/framework/common.scss
+ 1
− 0
View file @ 0c8736a8
@@ -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
+ 2
− 1
View file @ 0c8736a8
@@ -748,7 +748,8 @@
}
 
a,
button {
button,
.menu-item {
border-radius: 0;
padding: 8px 16px;
 
app/assets/stylesheets/framework/variables.scss
+ 4
− 3
View file @ 0c8736a8
@@ -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
+ 0
− 11
View file @ 0c8736a8
@@ -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
+ 108
− 109
View file @ 0c8736a8
@@ -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,105 +662,119 @@ 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;
}
 
// 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;
padding: 2px 0 0 5px;
cursor: pointer;
float: right;
margin: -26px 9px 0 0;
font-size: 12px;
background-color: $white-light;
li {
position: relative;
 
&:hover,
&:focus {
background-color: $stage-hover-bg;
border: 1px solid transparent;
// 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;
}
 
svg {
width: 22px;
height: 22px;
left: -6px;
position: relative;
top: -3px;
fill: $action-icon-color;
}
// Action icon on the right
a.ci-action-icon-wrapper {
border-radius: 50%;
border: 1px solid $border-color;
width: $ci-action-icon-size;
height: $ci-action-icon-size;
padding: 2px 0 0 5px;
font-size: 12px;
background-color: $white-light;
position: absolute;
top: 50%;
right: $gl-padding;
margin-top: -#{$ci-action-icon-size / 2};
 
&:hover svg,
&:focus svg {
fill: $gl-text-color;
}
}
&:hover,
&:focus {
background-color: $stage-hover-bg;
border: 1px solid $dropdown-toggle-active-border-color;
}
 
// link to the build
.mini-pipeline-graph-dropdown-item {
padding: 3px 7px 4px;
clear: both;
font-weight: $gl-font-weight-normal;
line-height: 1.428571429;
white-space: nowrap;
margin: 0 5px;
border-radius: 3px;
svg {
fill: $gl-text-color-secondary;
width: $ci-action-icon-size;
height: $ci-action-icon-size;
left: -6px;
position: relative;
top: -3px;
}
 
// build name
.ci-build-text,
.ci-status-text {
font-weight: 200;
overflow: hidden;
&:hover svg,
&:focus svg {
fill: $gl-text-color;
}
}
// link to the build
.mini-pipeline-graph-dropdown-item {
padding: 3px 7px 4px;
align-items: center;
clear: both;
display: flex;
font-weight: normal;
line-height: $line-height-base;
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;
border-radius: 3px;
 
@media (max-width: $screen-xs-max) {
max-width: 60%;
.ci-job-name-component {
align-items: center;
display: flex;
flex: 1;
}
}
 
// status icon on the left
.ci-status-icon {
top: 3px;
position: relative;
// build name
.ci-build-text,
.ci-status-text {
font-weight: 200;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 70%;
margin-left: 2px;
display: inline-block;
 
> svg {
overflow: visible;
width: 18px;
height: 18px;
@media (max-width: $screen-xs-max) {
max-width: 60%;
}
}
}
 
&:hover,
&:focus {
outline: none;
text-decoration: none;
color: $gl-text-color;
background-color: $stage-hover-bg;
.ci-status-icon {
@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;
display: block;
}
}
&:hover,
&:focus {
outline: none;
text-decoration: none;
background-color: $stage-hover-bg;
}
}
}
}
@@ -776,16 +783,9 @@ button.mini-pipeline-graph-dropdown-toggle {
.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
+ 3
− 3
View file @ 0c8736a8
@@ -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
+ 2
− 2
View file @ 0c8736a8
@@ -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
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