summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorClement Ho <clemmakesapps@gmail.com>2018-07-18 16:08:43 +0000
committerClement Ho <clemmakesapps@gmail.com>2018-07-18 16:08:43 +0000
commit20938681f65e136c869813da6d1a45bd7c8dde7d (patch)
tree57ea997f29643d9485e2dbf8df20a4bbe2842927
parent6c6988cb5ef8bb749da058b5fe1bf0e188e8062f (diff)
parent359018f5a7dca9601e36bb65d6218798bca297a3 (diff)
downloadgitlab-ce-20938681f65e136c869813da6d1a45bd7c8dde7d.tar.gz
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
-rw-r--r--app/assets/javascripts/monitoring/components/graph/flag.vue1
-rw-r--r--app/assets/stylesheets/pages/environments.scss42
-rw-r--r--changelogs/unreleased/41784-monitoring-graph-popovers.yml5
3 files changed, 40 insertions, 8 deletions
diff --git a/app/assets/javascripts/monitoring/components/graph/flag.vue b/app/assets/javascripts/monitoring/components/graph/flag.vue
index 92fe98508ad..1e6803abf3a 100644
--- a/app/assets/javascripts/monitoring/components/graph/flag.vue
+++ b/app/assets/javascripts/monitoring/components/graph/flag.vue
@@ -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">
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 3144dcc4dc0..8915b323b3c 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -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;
}
}
diff --git a/changelogs/unreleased/41784-monitoring-graph-popovers.yml b/changelogs/unreleased/41784-monitoring-graph-popovers.yml
new file mode 100644
index 00000000000..757445d7e0c
--- /dev/null
+++ b/changelogs/unreleased/41784-monitoring-graph-popovers.yml
@@ -0,0 +1,5 @@
+---
+title: Update design for system metrics popovers
+merge_request: 20655
+author:
+type: fixed