Skip to content

G
gitlab-ce
Commit f9c103c2 authored by Filipa Lacerda's avatar Filipa Lacerda
Browse files
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
Hide whitespace changes
Inline Side-by-side
Showing with 231 additions and 275 deletions
app/assets/stylesheets/pages/pipelines.scss
View file @ f9c103c2
......@@ -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,52 +329,120 @@
white-space: nowrap;
transition: max-height 0.3s, padding 0.3s;
&.graph-collapsed {
max-height: 0;
padding: 0 16px;
}
}
.pipeline-visualization {
position: relative;
ul {
padding: 0;
}
}
.stage-column {
display: inline-block;
vertical-align: top;
a {
text-decoration: none;
color: $gl-text-color-light;
}
&:not(:last-child) {
margin-right: 44px;
svg {
vertical-align: middle;
margin-right: 3px;
}
&.left-margin {
&:not(:first-child) {
margin-left: 44px;
.stage-column {
display: inline-block;
vertical-align: top;
.left-connector {
&::before {
content: '';
position: absolute;
top: 48%;
left: -48px;
border-top: 2px solid $border-color;
width: 48px;
height: 1px;
&:not(:last-child) {
margin-right: 44px;
}
&.left-margin {
&:not(:first-child) {
margin-left: 44px;
.left-connector {
&::before {
content: '';
position: absolute;
top: 48%;
left: -48px;
border-top: 2px solid $border-color;
width: 48px;
height: 1px;
}
}
}
}
}
&.no-margin {
margin: 0;
}
&.no-margin {
margin: 0;
}
li {
list-style: none;
li {
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 {
......@@ -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,150 +476,56 @@
}
}
.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;
}
color: $gl-text-color;
}
.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;
}
}
.grouped-pipeline-dropdown a {
color: $gl-text-color-light;
a {
&:hover {
color: $gl-text-color;
padding: 7px 8px 8px;
&:hover {
background-color: $blue-light-transparent;
border-radius: 3px;
.ci-status-text {
text-decoration: none;
}
}
}
svg {
width: 14px;
height: 14px;
}
.ci-status-text {
width: 110px;
}
}
}
.arrow {
&::before,
&::after {
content: '';
display: inline-block;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: 18px;
}
&::before {
left: -5px;
margin-top: -6px;
border-width: 7px 5px 7px 0;
border-right-color: $border-color;
}
.ci-status-icon svg {
height: 20px;
width: 20px;
}
&::after {
left: -4px;
margin-top: -9px;
border-width: 10px 7px 10px 0;
border-right-color: $white-light;
}
}
.arrow {
&::before,
&::after {
content: '';
display: inline-block;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
top: 18px;
}
.badge {
background-color: $gray-darker;
color: $gl-text-color-light;
font-weight: normal;
margin-left: $btn-xs-side-margin;
&::before {
left: -5px;
margin-top: -6px;
border-width: 7px 5px 7px 0;
border-right-color: $border-color;
}
}
.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;
&::after {
left: -4px;
margin-top: -9px;
border-width: 10px 7px 10px 0;
border-right-color: $white-light;
}
}
// Connect first build in each stage with right horizontal line
......@@ -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;
}
}
}
}
&: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;
}
}
}
.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;
}
// Curve first child connecting lines in opposite direction
.curve {
display: none;
.dropdown-menu-toggle {
background-color: transparent;
border: 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;
.dropdown-counter-bagde {
float: right;
color: $stage-bagde-text;
font-weight: 100;
font-size: 13px;
margin-top: 1px;
margin-right: 2px;
}
}
.tab-pane {
.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;
&.pipelines {
li {
padding-top: 1px;
padding-bottom: 1px;
}
.ci-table {
min-width: 900px;
}
li:first-child {
padding-top: 9px;
}
.content-list.pipelines {
overflow: auto;
li:last-child {
padding-bottom: 9px;
}
}
.stage {
max-width: 100px;
width: 100px;
}
a {
color: $gl-text-color-light;
padding: 7px 8px 8px;
.pipeline-actions {
min-width: initial;
&:hover {
background-color: $stage-hover-bg;
border-radius: 3px;
color: $gl-text-color;
}
}
}
&.builds {
.ci-table {
tr {
height: 71px;
}
.ci-status-icon svg {
height: 18px;
width: 18px;
}
}
}
app/views/projects/ci/builds/_build_pipeline.html.haml
View file @ f9c103c2
- 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
View file @ f9c103c2
......@@ -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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7