Commit 20938681 authored by Clement Ho's avatar Clement Ho

Merge branch '41784-monitoring-graph-popovers' into 'master'

Resolve "Fix arrow for popovers on monitoring graph"

Closes #41784

See merge request gitlab-org/gitlab-ce!20655
parents 6c6988cb 359018f5
...@@ -125,6 +125,7 @@ export default { ...@@ -125,6 +125,7 @@ export default {
:class="flagOrientation" :class="flagOrientation"
class="prometheus-graph-flag popover" class="prometheus-graph-flag popover"
> >
<div class="arrow-shadow"></div>
<div class="arrow"></div> <div class="arrow"></div>
<div class="popover-title"> <div class="popover-title">
<h5 v-if="deploymentFlagData"> <h5 v-if="deploymentFlagData">
......
...@@ -293,6 +293,8 @@ ...@@ -293,6 +293,8 @@
.prometheus-graph-flag { .prometheus-graph-flag {
display: block; display: block;
min-width: 160px; min-width: 160px;
border: 0;
box-shadow: 0 1px 4px 0 $black-transparent;
h5 { h5 {
padding: 0; padding: 0;
...@@ -312,7 +314,6 @@ ...@@ -312,7 +314,6 @@
&.popover { &.popover {
padding: 0; padding: 0;
border: 1px solid $border-color;
&.left { &.left {
left: auto; left: auto;
...@@ -320,12 +321,19 @@ ...@@ -320,12 +321,19 @@
margin-right: 10px; margin-right: 10px;
> .arrow { > .arrow {
right: -16px; right: -14px;
border-left-color: $border-color; border-left-color: $border-color;
} }
> .arrow::after { > .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 @@ ...@@ -335,19 +343,35 @@
margin-left: 10px; margin-left: 10px;
> .arrow { > .arrow {
left: -16px; left: -7px;
border-right-color: $border-color; border-right-color: $border-color;
} }
> .arrow::after { > .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 { > .arrow {
top: 16px; top: 10px;
margin-top: -8px; margin: 0;
border-width: 8px; }
.arrow-shadow {
content: "";
position: absolute;
width: 7px;
height: 7px;
background-color: transparent;
transform: rotate(45deg);
top: 13px;
} }
> .popover-title, > .popover-title,
...@@ -355,10 +379,12 @@ ...@@ -355,10 +379,12 @@
padding: 8px; padding: 8px;
font-size: 12px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
position: relative;
} }
> .popover-title { > .popover-title {
background-color: $theme-gray-50; background-color: $theme-gray-50;
border-radius: $border-radius-default $border-radius-default 0 0;
} }
} }
......
---
title: Update design for system metrics popovers
merge_request: 20655
author:
type: fixed
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