BigW Consortium Gitlab

Skip to content

G
gitlab-ce
Commit f9c103c2 by Filipa Lacerda
Options

Fix tooltip to show the all name

CSS - Changes to look like newest mockups - Simplifies nested elements - Divides nodes from lines Remove is playable from left side Remove nested elements in scss Improve dropdown Focus state Fix scss linter Remove not used css Fix typo
parent c3c9122d
Showing with 179 additions and 223 deletions
app/assets/stylesheets/pages/pipelines.scss
......@@ -287,15 +287,40 @@
}
// Pipeline visualization
.pipeline-actions {
border-bottom: none;
}
.toggle-pipeline-btn {
background-color: $gray-dark;
.tab-pane {
&.pipelines {
.ci-table {
min-width: 900px;
}
&.graph-collapsed {
background-color: $white-light;
.content-list.pipelines {
overflow: auto;
}
.stage {
max-width: 100px;
width: 100px;
}
.pipeline-actions {
min-width: initial;
}
}
&.builds {
.ci-table {
tr {
height: 71px;
}
}
}
}
// Pipeline graph
.pipeline-graph {
width: 100%;
background-color: $background-color;
......@@ -304,21 +329,21 @@
white-space: nowrap;
transition: max-height 0.3s, padding 0.3s;
&.graph-collapsed {
max-height: 0;
padding: 0 16px;
ul {
padding: 0;
}
}
.pipeline-visualization {
position: relative;
a {
text-decoration: none;
color: $gl-text-color-light;
}
ul {
padding: 0;
svg {
vertical-align: middle;
margin-right: 3px;
}
}
.stage-column {
.stage-column {
display: inline-block;
vertical-align: top;
......@@ -352,6 +377,74 @@
list-style: none;
}
&:last-child {
.build {
// Remove right connecting horizontal line from first build in last stage
&:first-child {
&::after {
border: none;
}
}
// Remove right curved connectors from all builds in last stage
&:not(:first-child) {
&::after {
border: none;
}
}
// Remove opposite curve
.curve {
&::before {
display: none;
}
}
}
}
&:first-child {
.build {
// Remove left curved connectors from all builds in first stage
&:not(:first-child) {
&::before {
border: none;
}
}
// Remove opposite curve
.curve {
&::after {
display: none;
}
}
}
}
// Curve first child connecting lines in opposite direction
.curve {
display: none;
&::before,
&::after {
content: '';
width: 21px;
height: 25px;
position: absolute;
top: -31px;
border-top: 2px solid $border-color;
}
&::after {
left: -44px;
border-right: 2px solid $border-color;
border-radius: 0 20px;
}
&::before {
right: -44px;
border-left: 2px solid $border-color;
border-radius: 20px 0 0;
}
}
}
.stage-name {
margin: 0 0 15px 10px;
font-weight: bold;
......@@ -365,24 +458,12 @@
border: 1px solid $border-color;
border-radius: 30px;
background-color: $white-light;
color: $gl-text-color;
position: relative;
padding: 7px 10px 8px;
padding: 8px 10px 9px;
width: 186px;
margin-bottom: 10px;
&:hover {
background-color: $stage-hover-bg;
border: 1px solid $stage-hover-border;
.ci-status-text,
.dropdown-counter-bagde {
color: $gl-text-color;
}
}
&.playable {
svg {
height: 13px;
width: 20px;
......@@ -395,99 +476,28 @@
}
}
.build-content {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 164px;
.ci-status-icon {
svg {
height: 20px;
width: 20px;
}
}
.tooltip {
white-space: nowrap;
.tooltip-inner {
overflow: hidden;
text-overflow: ellipsis;
}
}
.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;
}
a {
color: $gl-text-color-light;
text-decoration: none;
}
&:hover {
background-color: $stage-hover-bg;
border: 1px solid $stage-hover-border;
a,
.dropdown-counter-badge,
.dropdown-menu-toggle {
background-color: transparent;
border: none;
width: auto;
padding: 0;
color: $gl-text-color-light;
flex-grow: 1;
.ci-status-text {
max-width: 110px;
width: auto;
}
}
.grouped-pipeline-dropdown {
padding: 0;
width: 186px;
left: auto;
right: -197px;
top: -9px;
ul {
max-height: 245px;
overflow: auto;
li:first-child {
padding-top: 8px;
}
li:last-child {
padding-bottom: 8px;
}
color: $gl-text-color;
}
a {
color: $gl-text-color;
padding: 7px 8px 8px;
.grouped-pipeline-dropdown a {
color: $gl-text-color-light;
&:hover {
background-color: $blue-light-transparent;
border-radius: 3px;
.ci-status-text {
text-decoration: none;
}
color: $gl-text-color;
}
}
svg {
width: 14px;
height: 14px;
}
.ci-status-text {
width: 110px;
.ci-status-icon svg {
height: 20px;
width: 20px;
}
.arrow {
......@@ -517,29 +527,6 @@
border-right-color: $white-light;
}
}
}
.badge {
background-color: $gray-darker;
color: $gl-text-color-light;
font-weight: normal;
margin-left: $btn-xs-side-margin;
}
}
.dropdown-counter-bagde {
float: right;
color: $stage-bagde-text;
font-weight: 100;
font-size: 13px;
margin-top: 1px;
margin-right: 2px;
}
svg {
vertical-align: middle;
margin-right: 3px;
}
// Connect first build in each stage with right horizontal line
&:first-child {
......@@ -595,113 +582,86 @@
}
}
&:last-child {
.build {
// Remove right connecting horizontal line from first build in last stage
&:first-child {
&::after {
border: none;
}
}
// Remove right curved connectors from all builds in last stage
&:not(:first-child) {
&::after {
border: none;
}
}
// Remove opposite curve
.curve {
&::before {
display: none;
}
}
}
.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;
}
&:first-child {
.build {
// Remove left curved connectors from all builds in first stage
&:not(:first-child) {
&::before {
.dropdown-menu-toggle {
background-color: transparent;
border: none;
}
}
// Remove opposite curve
.curve {
&::after {
display: none;
}
}
}
}
// Curve first child connecting lines in opposite direction
.curve {
display: none;
padding: 0;
color: $gl-text-color-light;
flex-grow: 1;
&::before,
&::after {
content: '';
width: 21px;
height: 25px;
position: absolute;
top: -32px;
border-top: 2px solid $border-color;
&:focus {
outline: none;
}
&::after {
left: -44px;
border-right: 2px solid $border-color;
border-radius: 0 20px;
}
&:hover {
color: $gl-text-color;
&::before {
right: -44px;
border-left: 2px solid $border-color;
border-radius: 20px 0 0;
.dropdown-counter-bagde {
color: $gl-text-color;
}
}
}
.pipeline-actions {
border-bottom: none;
}
.toggle-pipeline-btn {
.fa {
color: $dropdown-header-color;
}
}
.tab-pane {
&.pipelines {
.ci-table {
min-width: 900px;
.dropdown-counter-bagde {
float: right;
color: $stage-bagde-text;
font-weight: 100;
font-size: 13px;
margin-top: 1px;
margin-right: 2px;
}
.content-list.pipelines {
.grouped-pipeline-dropdown {
padding: 0;
width: 191px;
left: auto;
right: -206px;
top: -11px;
box-shadow: 0 1px 5px $black-transparent;
ul {
max-height: 245px;
overflow: auto;
li {
padding-top: 1px;
padding-bottom: 1px;
}
.stage {
max-width: 100px;
width: 100px;
li:first-child {
padding-top: 9px;
}
.pipeline-actions {
min-width: initial;
li:last-child {
padding-bottom: 9px;
}
}
&.builds {
a {
color: $gl-text-color-light;
padding: 7px 8px 8px;
.ci-table {
tr {
height: 71px;
&:hover {
background-color: $stage-hover-bg;
border-radius: 3px;
color: $gl-text-color;
}
}
.ci-status-icon svg {
height: 18px;
width: 18px;
}
}
}
app/views/projects/ci/builds/_build_pipeline.html.haml
- is_playable = subject.playable? && can?(current_user, :update_build, @project)
- if is_playable
= link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.pipeline-graph', placement: 'bottom' } do
= ci_icon_for_status('play')
.ci-status-text= subject.name
- elsif can?(current_user, :read_build, @project)
- if can?(current_user, :read_build, @project)
= link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } do
%span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
= ci_icon_for_status(subject.status)
......
app/views/projects/commit/_pipeline_status_group.html.haml
......@@ -4,7 +4,7 @@
= ci_icon_for_status(group_status)
%span.ci-status-text
= name
%span.dropdown-counter-bagde= subject.size
%span.dropdown-counter-badge= subject.size
.dropdown-menu.grouped-pipeline-dropdown
.arrow
%ul
......
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