diff options
| -rw-r--r-- | app/assets/stylesheets/pages/pipelines.scss | 116 | ||||
| -rw-r--r-- | app/views/projects/ci/pipelines/_pipeline.html.haml | 4 | ||||
| -rw-r--r-- | changelogs/unreleased/pipelines-graph-html-css.yml | 4 |
3 files changed, 103 insertions, 21 deletions
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index fcfc7c4d58c..2e93df72c44 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -180,9 +180,10 @@ > .stage-container > button > svg { height: 18px; width: 18px; - position: relative; + position: absolute; + top: 1px; + left: 1px; z-index: 2; - vertical-align: middle; overflow: visible; } @@ -200,7 +201,7 @@ content: ''; width: 8px; position: absolute; - right: -7px; + right: -8px; top: 10px; border-bottom: 2px solid $border-color; } @@ -667,35 +668,112 @@ background-color: $white-light; border-width: 1px; border-style: solid; - width: 24px; - height: 24px; + width: 22px; + height: 22px; margin: 0; padding: 0; - transition: all 0.2s; + transition: all 0.2s linear; position: relative; - svg { - width: 22px; - height: 22px; - position: absolute; - top: 0; - left: 0; - } - - .caret { + > .fa.fa-caret-down { position: absolute; left: 22px; - top: 10px; - display: none; + top: 4px; + display: inline-block; + visibility: hidden; + opacity: 0; + color: inherit; + font-size: 12px; + transition: visibility 0.1s, opacity 0.1s linear; } &:active, &:focus, &:hover { + outline: none; width: 38px; - .caret { - display: inline-block; + .fa.fa-caret-down { + visibility: visible; + opacity: 1; + } + } + + // Dropdown button animation in mini pipeline graph + &.ci-status-icon-success { + border-color: $gl-success; + color: $gl-success; + + &:hover, + &:focus, + &:active { + background-color: rgba($gl-success, 0.1); + border-color: $gl-success; + } + } + + &.ci-status-icon-failed { + border-color: $gl-danger; + color: $gl-danger; + + &:hover, + &:focus, + &:active { + background-color: rgba($gl-danger, 0.1); + border-color: $gl-danger; + } + } + + &.ci-status-icon-pending, + &.ci-status-icon-success_with_warnings { + border-color: $gl-warning; + color: $gl-warning; + + &:hover, + &:focus, + &:active { + background-color: rgba($gl-warning, 0.1); + border-color: $gl-warning; + } + } + + &.ci-status-icon-running { + border-color: $blue-normal; + color: $blue-normal; + + &:hover, + &:focus, + &:active { + background-color: rgba($blue-normal, 0.1); + border-color: $blue-normal; + } + } + + &.ci-status-icon-canceled, + &.ci-status-icon-disabled, + &.ci-status-icon-not-found, + &.ci-status-icon-manual { + border-color: $gl-gray; + color: $gl-gray; + + &:hover, + &:focus, + &:active { + background-color: rgba($gl-gray, 0.1); + border-color: $gl-gray; + } + } + + &.ci-status-icon-created, + &.ci-status-icon-skipped { + border-color: $gray-darkest; + color: $gray-darkest; + + &:hover, + &:focus, + &:active { + background-color: rgba($gray-darkest, 0.1); + border-color: $gray-darkest; } } } diff --git a/app/views/projects/ci/pipelines/_pipeline.html.haml b/app/views/projects/ci/pipelines/_pipeline.html.haml index 0549ac23903..0d62cd32871 100644 --- a/app/views/projects/ci/pipelines/_pipeline.html.haml +++ b/app/views/projects/ci/pipelines/_pipeline.html.haml @@ -48,9 +48,9 @@ - status_klass = "ci-status-icon ci-status-icon-#{detailed_status.group}" .stage-container.dropdown - %button.mini-pipeline-graph-dropdown-toggle.dropdown-toggle.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } } + %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_namespace_project_pipeline_path(pipeline.project.namespace, pipeline.project, pipeline, stage: stage.name) } } = custom_icon(icon_status) - %span.caret + = icon('caret-down') %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container .arrow-up diff --git a/changelogs/unreleased/pipelines-graph-html-css.yml b/changelogs/unreleased/pipelines-graph-html-css.yml new file mode 100644 index 00000000000..ff0c3122fdb --- /dev/null +++ b/changelogs/unreleased/pipelines-graph-html-css.yml @@ -0,0 +1,4 @@ +--- +title: Fixes and Improves CSS and HTML problems in mini pipeline graph and builds dropdown +merge_request: 8443 +author: |