kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Resolve "Fix arrow for popovers on monitoring graph"

Browse source
This commit is contained in:
Annabel Gray 2018-07-18 16:08:43 +00:00 committed by Clement Ho
parent 6c6988cb5e
commit 359018f5a7
3 changed files with 40 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app/assets/javascripts/monitoring/components/graph/flag.vue
View file

@ -125,6 +125,7 @@ export default {
:class="flagOrientation"
class="prometheus-graph-flag popover"
>
<div class="arrow-shadow"></div>
<div class="arrow"></div>
<div class="popover-title">
<h5 v-if="deploymentFlagData">

42
app/assets/stylesheets/pages/environments.scss
View file

@ -293,6 +293,8 @@
.prometheus-graph-flag {
display: block;
min-width: 160px;
border: 0;
box-shadow: 0 1px 4px 0 $black-transparent;
h5 {
padding: 0;
@ -312,7 +314,6 @@
&.popover {
padding: 0;
border: 1px solid $border-color;
&.left {
left: auto;
@ -320,12 +321,19 @@
margin-right: 10px;
> .arrow {
right: -16px;
right: -14px;
border-left-color: $border-color;
}
> .arrow::after {
border-left-color: $theme-gray-50;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 4px solid $theme-gray-50;
}
.arrow-shadow {
right: -3px;
box-shadow: 1px 0 9px 0 $black-transparent;
}
}
@ -335,19 +343,35 @@
margin-left: 10px;
> .arrow {
left: -16px;
left: -7px;
border-right-color: $border-color;
}
> .arrow::after {
border-right-color: $theme-gray-50;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-right: 4px solid $theme-gray-50;
}
.arrow-shadow {
left: -3px;
box-shadow: 1px 0 8px 0 $black-transparent;
}
}
> .arrow {
top: 16px;
margin-top: -8px;
border-width: 8px;
top: 10px;
margin: 0;
}
.arrow-shadow {
content: "";
position: absolute;
width: 7px;
height: 7px;
background-color: transparent;
transform: rotate(45deg);
top: 13px;
}
> .popover-title,
@ -355,10 +379,12 @@
padding: 8px;
font-size: 12px;
white-space: nowrap;
position: relative;
}
> .popover-title {
background-color: $theme-gray-50;
border-radius: $border-radius-default $border-radius-default 0 0;
}
}

5
changelogs/unreleased/41784-monitoring-graph-popovers.yml Normal file
View file

@ -0,0 +1,5 @@
---
title: Update design for system metrics popovers
merge_request: 20655
author:
type: fixed