Skip to content

G
gitlab-ce
Commit 70812585 authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
Options

Dropdown with arrow

parent fa4d41bf
Hide whitespace changes
Inline Side-by-side
Showing with 153 additions and 118 deletions
app/assets/stylesheets/pages/pipelines.scss
View file @ 70812585
......@@ -576,17 +576,14 @@
}
}
.ci-status-text {
max-width: 110px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
display: inline-block;
position: relative;
font-weight: 100;
// Position in the pipeline graph
.grouped-pipeline-dropdown {
right: -206px;
top: -11px;
}
}
<<<<<<< HEAD
.dropdown-menu-toggle {
background-color: transparent;
border: none;
......@@ -594,110 +591,81 @@
color: $gl-text-color-light;
white-space: normal;
overflow: visible;
=======
.dropdown-counter-badge {
float: right;
color: $border-color;
font-weight: 100;
font-size: 15px;
margin-right: 2px;
}
>>>>>>> 5ba6f0d... Dropdown with arrow
&:focus {
outline: none;
}
.grouped-pipeline-dropdown {
padding: 0;
width: 191px;
left: auto;
right: -206px;
top: -11px;
box-shadow: 0 1px 5px $black-transparent;
&:hover {
color: $gl-text-color;
a {
display: inline-block;
.dropdown-counter-badge {
color: $gl-text-color;
}
&:hover {
background-color: $stage-hover-bg;
}
}
.dropdown-counter-badge {
float: right;
clear: right;
color: $border-color;
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;
ul {
max-height: 245px;
overflow: auto;
margin: 5px 0;
&:hover {
background-color: $stage-hover-bg;
}
li {
padding-top: 2px;
margin: 0 5px;
}
ul {
max-height: 245px;
overflow: auto;
margin: 5px 0;
li {
margin: 0 5px;
padding-left: 0;
padding-bottom: 0;
margin-bottom: 0;
line-height: 1.2;
}
li:first-child {
padding-top: 6px;
}
.dropdown-build {
color: $gl-text-color-light;
a.ci-action-icon-container {
padding: 0;
font-size: 11px;
float: right;
margin-top: 4px;
display: inline-block;
position: relative;
li:last-child {
padding-bottom: 6px;
}
}
}
i {
font-size: 11px;
margin-top: 0;
}
}
.ci-status-text {
max-width: 110px;
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 {
i {
width: 25px;
height: 25px;
.dropdown-menu-toggle {
background-color: transparent;
border: none;
padding: 0;
color: $gl-text-color-light;
flex-grow: 1;
&::before {
top: 1px;
left: 1px;
}
}
}
.stage {
max-width: 100px;
width: 100px;
}
&:focus {
outline: none;
}
.ci-status-icon svg {
height: 18px;
width: 18px;
}
&:hover {
color: $gl-text-color;
.ci-status-text {
max-width: 95px;
padding-bottom: 3px;
position: relative;
top: 3px;
}
.dropdown-counter-badge {
color: $gl-text-color;
}
}
}
......@@ -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 {
border: none;
background: transparent;
padding: 0;
font-size: inherit;
border-radius: 0;
cursor: pointer;
.mini-pipeline-graph {
.builds-dropdown {
background-color: transparent;
border: none;
padding: 0;
color: #8c8c8c;
flex-grow: 1;
}
.dropdown-caret {
display: none;
position: absolute;
top: 3px;
right: 6px;
font-size: 10px;
.grouped-pipeline-dropdown {
right: -172px;
top: 23px;
}
&:hover {
.dropdown-caret {
display: block;
.arrow-up {
&::before,
&::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
View file @ 70812585
......@@ -49,17 +49,18 @@
- hasMultipleBuilds = stage.statuses.count > 1
- tooltip = "#{stage.name.titleize}: #{stage.status || 'not found'}"
.stage-container
.stage-container.mini-pipeline-graph
- if hasMultipleBuilds
.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"}
= custom_icon(detailed_status.icon)
= icon('caret-down', class: 'dropdown-caret')
.dropdown-menu.grouped-pipeline-dropdown{"aria-labelledby"=> "dropdown-#{stage.name}"}
.arrow
%button.has-tooltip.builds-dropdown{ type: 'button', data: { toggle: 'dropdown', title: tooltip} }
%span{ class: klass }
= ci_icon_for_status(detailed_status.icon)
%span= icon('caret-down', class: 'dropdown-caret')
.dropdown-menu.grouped-pipeline-dropdown
.arrow-up
%ul
- stage.statuses.each do |status|
%li
%li.dropdown-build
= render 'ci/status/graph_badge', subject: status
- else
- 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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7