BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit 70812585 by Filipa Lacerda
Options

Dropdown with arrow

parent fa4d41bf
Showing with 153 additions and 118 deletions
app/assets/stylesheets/pages/pipelines.scss
...@@ -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,110 +591,81 @@ ...@@ -594,110 +591,81 @@
color: $gl-text-color-light; color: $gl-text-color-light;
white-space: normal; white-space: normal;
overflow: visible; overflow: visible;
=======
.dropdown-counter-badge {
float: right;
color: $border-color;
font-weight: 100;
font-size: 15px;
margin-right: 2px;
}
>>>>>>> 5ba6f0d... Dropdown with arrow
&:focus { .grouped-pipeline-dropdown {
outline: none; padding: 0;
} width: 191px;
left: auto;
right: -206px;
top: -11px;
box-shadow: 0 1px 5px $black-transparent;
&:hover { a {
color: $gl-text-color; display: inline-block;
.dropdown-counter-badge { &:hover {
color: $gl-text-color; background-color: $stage-hover-bg;
}
} }
} }
.dropdown-counter-badge { ul {
float: right; max-height: 245px;
clear: right; overflow: auto;
color: $border-color; margin: 5px 0;
font-weight: 100;
font-size: 15px;
margin-right: 2px;
}
.grouped-pipeline-dropdown {
padding: 0;
width: 191px;
left: auto;
right: -206px;
top: -11px;
box-shadow: 0 1px 5px $black-transparent;
a {
display: inline-block;
&:hover { li {
background-color: $stage-hover-bg; padding-top: 2px;
} margin: 0 5px;
} }
ul { li:first-child {
max-height: 245px; padding-top: 6px;
overflow: auto;
margin: 5px 0;
li {
margin: 0 5px;
padding-left: 0;
padding-bottom: 0;
margin-bottom: 0;
line-height: 1.2;
}
} }
.dropdown-build { li:last-child {
color: $gl-text-color-light; padding-bottom: 6px;
}
a.ci-action-icon-container { }
padding: 0; }
font-size: 11px;
float: right;
margin-top: 4px;
display: inline-block;
position: relative;
i { .ci-status-text {
font-size: 11px; max-width: 110px;
margin-top: 0; white-space: nowrap;
} overflow: hidden;
} text-overflow: ellipsis;
vertical-align: bottom;
display: inline-block;
position: relative;
font-weight: 100;
}
&: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 {
border: none; .builds-dropdown {
background: transparent; background-color: transparent;
padding: 0; border: none;
font-size: inherit; padding: 0;
border-radius: 0; color: #8c8c8c;
cursor: pointer; flex-grow: 1;
}
.dropdown-caret { .grouped-pipeline-dropdown {
display: none; right: -172px;
position: absolute; top: 23px;
top: 3px;
right: 6px;
font-size: 10px;
} }
&:hover { .arrow-up {
.dropdown-caret { &::before,
display: block; &::after {
content: '';
display: inline-block;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: -6px;
left: 2px;
border-width: 0 5px 6px 5px;
}
&::before {
border-width: 0 5px 5px 5px;
border-bottom-color: $border-color;
}
&::after {
margin-top: 1px;
border-bottom-color: $white-light;
} }
} }
} }
app/views/projects/ci/pipelines/_pipeline.html.haml
...@@ -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