From e36b00e7137a7fd024ba4639ac6cb077edd2618a Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Thu, 15 Dec 2016 14:46:28 +0000 Subject: [PATCH] CSS - Adds background color. Removes unused CSS Fix scss linter errors Adds changelog entry Increase icons size. Adds transition animation Fix jumping icon. Reduce icon size Fix columns width Changes after review Fix transition --- app/assets/stylesheets/framework/icons.scss | 24 ---- app/assets/stylesheets/pages/pipelines.scss | 116 ++++++++++++------ .../projects/commit/_pipelines_list.haml | 14 +-- app/views/projects/pipelines/index.html.haml | 12 +- .../19703-direct-link-pipelines.yml | 4 + 5 files changed, 93 insertions(+), 77 deletions(-) create mode 100644 changelogs/unreleased/19703-direct-link-pipelines.yml diff --git a/app/assets/stylesheets/framework/icons.scss b/app/assets/stylesheets/framework/icons.scss index 88b391ef2df..226bd2ead31 100644 --- a/app/assets/stylesheets/framework/icons.scss +++ b/app/assets/stylesheets/framework/icons.scss @@ -4,10 +4,6 @@ svg { fill: $gl-success; } - - .builds-dropdown-caret { - color: $gl-success; - } } .ci-status-icon-failed { @@ -16,10 +12,6 @@ svg { fill: $gl-danger; } - - .builds-dropdown-caret { - color: $gl-danger; - } } .ci-status-icon-pending, @@ -29,10 +21,6 @@ svg { fill: $gl-warning; } - - .builds-dropdown-caret { - color: $gl-warning; - } } .ci-status-icon-running { @@ -41,10 +29,6 @@ svg { fill: $blue-normal; } - - .builds-dropdown-caret { - color: $blue-normal; - } } .ci-status-icon-canceled, @@ -55,10 +39,6 @@ svg { fill: $gl-gray; } - - .builds-dropdown-caret { - color: $gl-gray; - } } .ci-status-icon-created, @@ -68,8 +48,4 @@ svg { fill: $gray-darkest; } - - .builds-dropdown-caret { - color: $gray-darkest; - } } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index 105c3fc3e7c..33d3a800e7c 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -28,12 +28,16 @@ color: $black; } - .branch-commit { - width: 30%; + .pipeline-date, + .pipeline-status { + width: 10%; + } - .branch-name { - max-width: 195px; - } + .pipeline-info, + .pipeline-commit, + .pipeline-actions, + .pipeline-stages { + width: 20%; } } } @@ -107,7 +111,7 @@ .branch-name { font-weight: bold; - max-width: 150px; + max-width: 120px; overflow: hidden; display: inline-block; white-space: nowrap; @@ -133,7 +137,7 @@ .commit-title { margin-top: 4px; - max-width: 300px; + max-width: 225px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; @@ -580,15 +584,6 @@ } } -<<<<<<< HEAD - .dropdown-menu-toggle { - background-color: transparent; - border: none; - padding: 0; - color: $gl-text-color-light; - white-space: normal; - overflow: visible; -======= .dropdown-counter-badge { float: right; color: $border-color; @@ -596,7 +591,6 @@ font-size: 15px; margin-right: 2px; } ->>>>>>> 5ba6f0d... Dropdown with arrow .grouped-pipeline-dropdown { padding: 0; @@ -707,7 +701,9 @@ padding: 0; font-size: 11px; float: right; - margin-top: 5px; + margin-top: 4px; + display: inline-block; + position: relative; i { font-size: 11px; @@ -726,7 +722,7 @@ width: 25px; height: 25px; - &:before{ + &::before { top: 1px; left: 1px; } @@ -782,11 +778,11 @@ border-style: solid; top: -6px; left: 2px; - border-width: 0 5px 6px 5px; + border-width: 0 5px 6px; } &::before { - border-width: 0 5px 5px 5px; + border-width: 0 5px 5px; border-bottom-color: $border-color; } @@ -797,53 +793,93 @@ } } +/** + * Icons in mini pipeline graph + */ .mini-pipeline-graph-icon-container .ci-status-icon { - display: inline-block; - border: 1px solid; - border-radius: 20px; - margin-right: 1px; - width: 20px; - height: 20px; - position: relative; + display: inline-block; + border: 1px solid; + border-radius: 20px; + margin-right: 1px; + width: 20px; + height: 20px; + position: relative; + z-index: 2; + transition: all 0.2s cubic-bezier(0.25, 0, 1, 1); - svg { - top: -1px; - position: relative; - } + svg { + top: -1px; + } } .builds-dropdown { &:focus { - margin-right: -6px; + outline: none; + margin-right: -8px; .ci-status-icon { - width: 27px; - padding: 0px 6px 0px 0px; + width: 28px; + padding: 0 8px 0 0; + transition: all 0.2s cubic-bezier(0.25, 0, 1, 1); + .dropdown-caret { - display: inline-block; + display: inline-block; } } } + &:focus, + &:active { + .ci-status-icon-success { + background-color: rgba($gl-success, .1); + } + + .ci-status-icon-failed { + background-color: rgba($gl-danger, .1); + } + + .ci-status-icon-pending, + .ci-status-icon-success_with_warnings { + background-color: rgba($gl-warning, .1); + } + + .ci-status-icon-running { + background-color: rgba($blue-normal, .1); + } + + .ci-status-icon-canceled, + .ci-status-icon-disabled, + .ci-status-icon-not-found { + background-color: rgba($gl-gray, .1); + } + + .ci-status-icon-created, + .ci-status-icon-skipped { + background-color: rgba($gray-darkest, .1); + } + + } + .mini-pipeline-graph-icon-container { .ci-status-icon:hover, .ci-status-icon:focus { - width: 27px; - padding: 0px 6px 0px 0px; + width: 28px; + padding: 0 8px 0 0; + transition: all 0.2s cubic-bezier(0.25, 0, 1, 1); + .dropdown-caret { - display: inline-block; + display: inline-block; } } .dropdown-caret { - font-size: 12px; + font-size: 11px; position: relative; top: 3px; left: -11px; margin-right: -6px; display: none; + z-index: 2; } } } diff --git a/app/views/projects/commit/_pipelines_list.haml b/app/views/projects/commit/_pipelines_list.haml index 7f42fde0fea..0c2f45c6035 100644 --- a/app/views/projects/commit/_pipelines_list.haml +++ b/app/views/projects/commit/_pipelines_list.haml @@ -5,11 +5,11 @@ - else .table-holder %table.table.ci-table - %tbody - %th Status - %th Pipeline - %th Commit - %th Stages - %th - %th + %thead + %th.pipeline-status Status + %th.pipeline-info Pipeline + %th.pipeline-commit Commit + %th.pipeline-stages Stages + %th.pipeline-date + %th.pipeline-actions = render pipelines, commit_sha: true, stage: true, allow_retry: true, show_commit: false diff --git a/app/views/projects/pipelines/index.html.haml b/app/views/projects/pipelines/index.html.haml index 030cd8ef78f..4d009871f0d 100644 --- a/app/views/projects/pipelines/index.html.haml +++ b/app/views/projects/pipelines/index.html.haml @@ -44,12 +44,12 @@ .table-holder %table.table.ci-table %thead - %th Status - %th Pipeline - %th Commit - %th Stages - %th - %th.hidden-xs + %th.pipeline-status Status + %th.pipeline-info Pipeline + %th.pipeline-commit Commit + %th.pipeline-stages Stages + %th.pipeline-date + %th.pipeline-actions.hidden-xs = render @pipelines, commit_sha: true, stage: true, allow_retry: true = paginate @pipelines, theme: 'gitlab' diff --git a/changelogs/unreleased/19703-direct-link-pipelines.yml b/changelogs/unreleased/19703-direct-link-pipelines.yml new file mode 100644 index 00000000000..d846ad41e0f --- /dev/null +++ b/changelogs/unreleased/19703-direct-link-pipelines.yml @@ -0,0 +1,4 @@ +--- +title: Adds Direct link from pipeline list to builds +merge_request: 8097 +author: