Commit 70812585 authored by Filipa Lacerda's avatar Filipa Lacerda

Dropdown with arrow

parent fa4d41bf
...@@ -576,17 +576,14 @@ ...@@ -576,17 +576,14 @@
} }
} }
.ci-status-text { // Position in the pipeline graph
max-width: 110px; .grouped-pipeline-dropdown {
white-space: nowrap; right: -206px;
overflow: hidden; top: -11px;
text-overflow: ellipsis;
vertical-align: bottom;
display: inline-block;
position: relative;
font-weight: 100;
} }
}
<<<<<<< HEAD
.dropdown-menu-toggle { .dropdown-menu-toggle {
background-color: transparent; background-color: transparent;
border: none; border: none;
...@@ -594,30 +591,17 @@ ...@@ -594,30 +591,17 @@
color: $gl-text-color-light; color: $gl-text-color-light;
white-space: normal; white-space: normal;
overflow: visible; overflow: visible;
=======
&:focus { .dropdown-counter-badge {
outline: none;
}
&:hover {
color: $gl-text-color;
.dropdown-counter-badge {
color: $gl-text-color;
}
}
}
.dropdown-counter-badge {
float: right; float: right;
clear: right;
color: $border-color; color: $border-color;
font-weight: 100; font-weight: 100;
font-size: 15px; font-size: 15px;
margin-right: 2px; margin-right: 2px;
} }
>>>>>>> 5ba6f0d... Dropdown with arrow
.grouped-pipeline-dropdown { .grouped-pipeline-dropdown {
padding: 0; padding: 0;
width: 191px; width: 191px;
left: auto; left: auto;
...@@ -639,65 +623,49 @@ ...@@ -639,65 +623,49 @@
margin: 5px 0; margin: 5px 0;
li { li {
padding-top: 2px;
margin: 0 5px; margin: 0 5px;
padding-left: 0;
padding-bottom: 0;
margin-bottom: 0;
line-height: 1.2;
} }
li:first-child {
padding-top: 6px;
} }
.dropdown-build { li:last-child {
color: $gl-text-color-light; padding-bottom: 6px;
}
}
}
a.ci-action-icon-container { .ci-status-text {
padding: 0; max-width: 110px;
font-size: 11px; white-space: nowrap;
float: right; overflow: hidden;
margin-top: 4px; text-overflow: ellipsis;
vertical-align: bottom;
display: inline-block; display: inline-block;
position: relative; position: relative;
font-weight: 100;
}
i {
font-size: 11px;
margin-top: 0;
}
}
&:hover {
background-color: $stage-hover-bg;
border-radius: 3px;
color: $gl-text-color;
}
.ci-action-icon-container { .dropdown-menu-toggle {
i { background-color: transparent;
width: 25px; border: none;
height: 25px; padding: 0;
color: $gl-text-color-light;
flex-grow: 1;
&::before {
top: 1px;
left: 1px;
}
}
}
.stage { &:focus {
max-width: 100px; outline: none;
width: 100px;
} }
.ci-status-icon svg { &:hover {
height: 18px; color: $gl-text-color;
width: 18px;
}
.ci-status-text { .dropdown-counter-badge {
max-width: 95px; color: $gl-text-color;
padding-bottom: 3px;
position: relative;
top: 3px;
}
} }
} }
} }
...@@ -735,28 +703,94 @@ ...@@ -735,28 +703,94 @@
} }
} }
.dropdown-build {
color: $gl-text-color-light;
a.ci-action-icon-container {
padding: 0;
font-size: 11px;
float: right;
margin-top: 5px;
i {
font-size: 11px;
margin-top: 0;
}
}
&:hover {
background-color: $stage-hover-bg;
border-radius: 3px;
color: $gl-text-color;
}
.ci-action-icon-container {
i {
width: 25px;
height: 25px;
&:before{
top: 1px;
left: 1px;
}
}
}
.stage {
max-width: 100px;
width: 100px;
}
.ci-status-icon svg {
height: 18px;
width: 18px;
}
.ci-status-text {
max-width: 95px;
}
}
/** /**
* Builds dropdown in mini pipeline * Builds dropdown in mini pipeline
*/ */
.builds-dropdown { .mini-pipeline-graph {
.builds-dropdown {
background-color: transparent;
border: none; border: none;
background: transparent;
padding: 0; padding: 0;
font-size: inherit; color: #8c8c8c;
border-radius: 0; flex-grow: 1;
cursor: pointer; }
.dropdown-caret { .grouped-pipeline-dropdown {
display: none; right: -172px;
top: 23px;
}
.arrow-up {
&::before,
&::after {
content: '';
display: inline-block;
position: absolute; position: absolute;
top: 3px; width: 0;
right: 6px; height: 0;
font-size: 10px; border-color: transparent;
border-style: solid;
top: -6px;
left: 2px;
border-width: 0 5px 6px 5px;
} }
&:hover { &::before {
.dropdown-caret { border-width: 0 5px 5px 5px;
display: block; border-bottom-color: $border-color;
}
&::after {
margin-top: 1px;
border-bottom-color: $white-light;
} }
} }
} }
...@@ -49,17 +49,18 @@ ...@@ -49,17 +49,18 @@
- hasMultipleBuilds = stage.statuses.count > 1 - hasMultipleBuilds = stage.statuses.count > 1
- tooltip = "#{stage.name.titleize}: #{stage.status || 'not found'}" - tooltip = "#{stage.name.titleize}: #{stage.status || 'not found'}"
.stage-container .stage-container.mini-pipeline-graph
- if hasMultipleBuilds - if hasMultipleBuilds
.dropdown.inline.build-content .dropdown.inline.build-content
%button.dropdown-menu-toggle.has-tooltip{id: "dropdown-#{stage.name}", title: tooltip, class: klass, "data-toggle"=> "dropdown", "aria-haspopup"=> "true", "aria-expanded" => "false"} %button.has-tooltip.builds-dropdown{ type: 'button', data: { toggle: 'dropdown', title: tooltip} }
= custom_icon(detailed_status.icon) %span{ class: klass }
= icon('caret-down', class: 'dropdown-caret') = ci_icon_for_status(detailed_status.icon)
.dropdown-menu.grouped-pipeline-dropdown{"aria-labelledby"=> "dropdown-#{stage.name}"} %span= icon('caret-down', class: 'dropdown-caret')
.arrow .dropdown-menu.grouped-pipeline-dropdown
.arrow-up
%ul %ul
- stage.statuses.each do |status| - stage.statuses.each do |status|
%li %li.dropdown-build
= render 'ci/status/graph_badge', subject: status = render 'ci/status/graph_badge', subject: status
- else - else
- if details_path - if details_path
......
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