diff options
author | winh <winnie@gitlab.com> | 2017-08-11 18:42:35 +0200 |
---|---|---|
committer | winh <winnie@gitlab.com> | 2017-08-29 15:10:51 +0200 |
commit | 0c8736a8a741770672fbb91fab9203d323781b86 (patch) | |
tree | 490f93219292533f681f1e4730e5da65e34c7764 /app | |
parent | 6f0f65becbbe968bd26a5a3872044d7b8633bf2e (diff) | |
download | gitlab-ce-0c8736a8a741770672fbb91fab9203d323781b86.tar.gz |
Change pipeline dropdowns to new stylewinh-pipeline-graph-dropdowns
Diffstat (limited to 'app')
9 files changed, 121 insertions, 130 deletions
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue index 7695b04db74..3e5d6d15909 100644 --- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue @@ -72,7 +72,7 @@ }; </script> <template> - <div> + <div class="ci-job-dropdown-container"> <button v-tooltip type="button" diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue index 1f5ed3f1074..3933509a6f4 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue @@ -75,7 +75,7 @@ }; </script> <template> - <div> + <div class="ci-job-component"> <a v-tooltip v-if="job.status.details_path" diff --git a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue index d8856e10668..f46d21bd6d7 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_name_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_name_component.vue @@ -26,7 +26,7 @@ }; </script> <template> - <span> + <span class="ci-job-name-component"> <ci-icon :status="status" /> diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index e16fbbf43b5..68a51c5a461 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -16,6 +16,7 @@ .prepend-left-default { margin-left: $gl-padding; } .prepend-left-20 { margin-left: 20px; } .append-right-5 { margin-right: 5px; } +.append-right-8 { margin-right: 8px; } .append-right-10 { margin-right: 10px; } .append-right-default { margin-right: $gl-padding; } .append-right-20 { margin-right: 20px; } diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss index a45d5a6dca0..180804c96d6 100644 --- a/app/assets/stylesheets/framework/dropdowns.scss +++ b/app/assets/stylesheets/framework/dropdowns.scss @@ -748,7 +748,8 @@ } a, - button { + button, + .menu-item { border-radius: 0; padding: 8px 16px; diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 26920869bec..01fffa717e9 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -591,9 +591,10 @@ $ui-dev-kit-example-border: #ddd; /* Pipeline Graph */ -$stage-hover-bg: #eaf3fc; -$stage-hover-border: #d1e7fc; -$action-icon-color: #d6d6d6; +$stage-hover-bg: $gray-darker; +$ci-action-icon-size: 22px; +$pipeline-dropdown-line-height: 20px; +$pipeline-dropdown-status-icon-size: 18px; /* Pipeline Schedules diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index d1678a17aaf..092d12f6282 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -174,17 +174,6 @@ vertical-align: top; } - .mini-pipeline-graph-dropdown-menu .mini-pipeline-graph-dropdown-item { - display: flex; - align-items: center; - - .ci-status-text, - .ci-status-icon { - top: 0; - margin-right: 10px; - } - } - .normal { line-height: 28px; } diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss index a408bde37d6..8c48cfeb6ea 100644 --- a/app/assets/stylesheets/pages/pipelines.scss +++ b/app/assets/stylesheets/pages/pipelines.scss @@ -40,7 +40,7 @@ .btn.btn-retry:hover, .btn.btn-retry:focus { - border-color: $gray-darkest; + border-color: $dropdown-toggle-active-border-color; background-color: $white-normal; } @@ -206,8 +206,8 @@ .stage-cell { .mini-pipeline-graph-dropdown-toggle svg { - height: 22px; - width: 22px; + height: $ci-action-icon-size; + width: $ci-action-icon-size; position: absolute; top: -1px; left: -1px; @@ -219,7 +219,7 @@ display: inline-block; position: relative; vertical-align: middle; - height: 22px; + height: $ci-action-icon-size; margin: 3px 0; + .stage-container { @@ -308,7 +308,7 @@ a { text-decoration: none; - color: $gl-text-color-secondary; + color: $gl-text-color; } svg { @@ -432,7 +432,11 @@ width: 186px; margin-bottom: 10px; white-space: normal; - color: $gl-text-color-secondary; + + // ensure .build-content has hover style when action-icon is hovered + .ci-job-dropdown-container:hover .build-content { + @extend .build-content:hover; + } // Action Icons in big pipeline-graph nodes .ci-action-icon-container .ci-action-icon-wrapper { @@ -445,11 +449,11 @@ &:hover { background-color: $stage-hover-bg; - border: 1px solid $stage-hover-bg; + border: 1px solid $dropdown-toggle-active-border-color; } svg { - fill: $border-color; + fill: $gl-text-color-secondary; position: relative; left: -1px; top: -1px; @@ -475,19 +479,10 @@ background-color: transparent; border: none; padding: 0; - color: $gl-text-color-secondary; &:focus { outline: none; } - - &:hover { - color: $gl-text-color; - - .dropdown-counter-badge { - color: $gl-text-color; - } - } } .build-content { @@ -502,8 +497,7 @@ a.build-content:hover, button.build-content:hover { background-color: $stage-hover-bg; - border: 1px solid $stage-hover-border; - color: $gl-text-color; + border: 1px solid $dropdown-toggle-active-border-color; } @@ -564,7 +558,6 @@ // Triggers the dropdown in the big pipeline graph .dropdown-counter-badge { - color: $border-color; font-weight: 100; font-size: 15px; position: absolute; @@ -606,8 +599,8 @@ button.mini-pipeline-graph-dropdown-toggle { background-color: $white-light; border-width: 1px; border-style: solid; - width: 22px; - height: 22px; + width: $ci-action-icon-size; + height: $ci-action-icon-size; margin: 0; padding: 0; transition: all 0.2s linear; @@ -669,105 +662,119 @@ button.mini-pipeline-graph-dropdown-toggle { } } +@include new-style-dropdown('.big-pipeline-graph-dropdown-menu'); +@include new-style-dropdown('.mini-pipeline-graph-dropdown-menu'); + // dropdown content for big and mini pipeline .big-pipeline-graph-dropdown-menu, .mini-pipeline-graph-dropdown-menu { width: 195px; max-width: 195px; - li { - padding: 2px 3px; - } - .scrollable-menu { padding: 0; max-height: 245px; overflow: auto; } - // Action icon on the right - a.ci-action-icon-wrapper { - color: $action-icon-color; - border: 1px solid $action-icon-color; - border-radius: 20px; - width: 22px; - height: 22px; - padding: 2px 0 0 5px; - cursor: pointer; - float: right; - margin: -26px 9px 0 0; - font-size: 12px; - background-color: $white-light; + li { + position: relative; - &:hover, - &:focus { - background-color: $stage-hover-bg; - border: 1px solid transparent; + // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered + &:hover > .mini-pipeline-graph-dropdown-item, + &:hover > .ci-job-component > .mini-pipeline-graph-dropdown-item { + @extend .mini-pipeline-graph-dropdown-item:hover; } - svg { - width: 22px; - height: 22px; - left: -6px; - position: relative; - top: -3px; - fill: $action-icon-color; - } + // Action icon on the right + a.ci-action-icon-wrapper { + border-radius: 50%; + border: 1px solid $border-color; + width: $ci-action-icon-size; + height: $ci-action-icon-size; + padding: 2px 0 0 5px; + font-size: 12px; + background-color: $white-light; + position: absolute; + top: 50%; + right: $gl-padding; + margin-top: -#{$ci-action-icon-size / 2}; - &:hover svg, - &:focus svg { - fill: $gl-text-color; - } - } + &:hover, + &:focus { + background-color: $stage-hover-bg; + border: 1px solid $dropdown-toggle-active-border-color; + } - // link to the build - .mini-pipeline-graph-dropdown-item { - padding: 3px 7px 4px; - clear: both; - font-weight: $gl-font-weight-normal; - line-height: 1.428571429; - white-space: nowrap; - margin: 0 5px; - border-radius: 3px; + svg { + fill: $gl-text-color-secondary; + width: $ci-action-icon-size; + height: $ci-action-icon-size; + left: -6px; + position: relative; + top: -3px; + } - // build name - .ci-build-text, - .ci-status-text { - font-weight: 200; - overflow: hidden; + &:hover svg, + &:focus svg { + fill: $gl-text-color; + } + } + + // link to the build + .mini-pipeline-graph-dropdown-item { + padding: 3px 7px 4px; + align-items: center; + clear: both; + display: flex; + font-weight: normal; + line-height: $line-height-base; white-space: nowrap; - text-overflow: ellipsis; - max-width: 70%; - color: $gl-text-color-secondary; - margin-left: 2px; - display: inline-block; - top: 1px; - vertical-align: text-bottom; - position: relative; + border-radius: 3px; - @media (max-width: $screen-xs-max) { - max-width: 60%; + .ci-job-name-component { + align-items: center; + display: flex; + flex: 1; } - } - // status icon on the left - .ci-status-icon { - top: 3px; - position: relative; + // build name + .ci-build-text, + .ci-status-text { + font-weight: 200; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + max-width: 70%; + margin-left: 2px; + display: inline-block; - > svg { - overflow: visible; - width: 18px; - height: 18px; + @media (max-width: $screen-xs-max) { + max-width: 60%; + } } - } - &:hover, - &:focus { - outline: none; - text-decoration: none; - color: $gl-text-color; - background-color: $stage-hover-bg; + .ci-status-icon { + @extend .append-right-8; + + position: relative; + + > svg { + width: $pipeline-dropdown-status-icon-size; + height: $pipeline-dropdown-status-icon-size; + margin: 3px 0; + position: relative; + overflow: visible; + display: block; + } + } + + &:hover, + &:focus { + outline: none; + text-decoration: none; + background-color: $stage-hover-bg; + } } } } @@ -776,16 +783,9 @@ button.mini-pipeline-graph-dropdown-toggle { .big-pipeline-graph-dropdown-menu { width: 195px; min-width: 195px; - left: auto; - right: -195px; - top: -4px; + left: 100%; + top: -10px; box-shadow: 0 1px 5px $black-transparent; - - .mini-pipeline-graph-dropdown-item { - .ci-status-icon { - top: -1px; - } - } } /** @@ -806,15 +806,14 @@ button.mini-pipeline-graph-dropdown-toggle { } &::before { - left: -5px; - margin-top: -6px; + left: -6px; + margin-top: 3px; border-width: 7px 5px 7px 0; border-right-color: $border-color; } &::after { - left: -4px; - margin-top: -9px; + left: -5px; border-width: 10px 7px 10px 0; border-right-color: $white-light; } diff --git a/app/views/ci/status/_dropdown_graph_badge.html.haml b/app/views/ci/status/_dropdown_graph_badge.html.haml index 8ed23ac4919..dcfb7f0c32d 100644 --- a/app/views/ci/status/_dropdown_graph_badge.html.haml +++ b/app/views/ci/status/_dropdown_graph_badge.html.haml @@ -6,14 +6,14 @@ - tooltip = "#{subject.name} - #{status.label}" - if status.has_details? - = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip } do + = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item', data: { toggle: 'tooltip', title: tooltip, container: 'body' } do %span{ class: klass }= custom_icon(status.icon) %span.ci-build-text= subject.name - else - .mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip } } + .menu-item.mini-pipeline-graph-dropdown-item{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } } %span{ class: klass }= custom_icon(status.icon) %span.ci-build-text= subject.name - if status.has_action? - = link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title } do + = link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do = custom_icon(status.action_icon) |