diff options
| -rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 256 | ||||
| -rw-r--r-- | app/views/projects/ci/pipelines/_pipeline.html.haml | 15 |
2 files changed, 153 insertions, 118 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 50e8165a017..df88e7b5925 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -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; } } } diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml index e82faf4f6d3..9ecdb6269b9 100644 --- a/app/views/projects/ci/pipelines/_pipeline.html.haml +++ b/app/views/projects/ci/pipelines/_pipeline.html.haml @@ -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 |