diff --git a/public/app/plugins/panel/graph/thresholds.ts b/public/app/plugins/panel/graph/thresholds.ts index b7e36d04790..b5eb0f7ad47 100644 --- a/public/app/plugins/panel/graph/thresholds.ts +++ b/public/app/plugins/panel/graph/thresholds.ts @@ -19,13 +19,14 @@ export class ThresholdControls { colorClass = 'warn'; } - return `
-
-
-
- - ${valueStr} -
+ return ` +
+
+
+
+ + ${valueStr} +
`; } diff --git a/public/img/grab_dark.svg b/public/img/grab_dark.svg new file mode 100644 index 00000000000..e533274e7a0 --- /dev/null +++ b/public/img/grab_dark.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/img/grab_light.svg b/public/img/grab_light.svg new file mode 100644 index 00000000000..4b49c6d0d5e --- /dev/null +++ b/public/img/grab_light.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 7365b64cf78..38ff4e1e96b 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -152,8 +152,10 @@ $btn-link-color: $gray-3; $iconContainerBackground: $black; -$btn-divider-left: $dark-5; -$btn-divider-right: $dark-1; +$btn-divider-left: $dark-4; +$btn-divider-right: $dark-2; + +$btn-drag-image: '../img/grab_dark.svg'; // Forms // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index e9531a5b4b1..6727b88ca6b 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -157,8 +157,9 @@ $btn-inverse-text-color: $dark-4; $btn-link-color: $gray-1; -$btn-divider-left: $dark-5; -$btn-divider-right: $dark-1; +$btn-divider-left: $gray-4; +$btn-divider-right: $gray-7; +$btn-drag-image: '../img/grab_light.svg'; $iconContainerBackground: $white; diff --git a/public/sass/components/_panel_graph.scss b/public/sass/components/_panel_graph.scss index bb7a66e2015..32afd26f91d 100644 --- a/public/sass/components/_panel_graph.scss +++ b/public/sass/components/_panel_graph.scss @@ -350,6 +350,15 @@ border-left: 1px solid $btn-divider-right; padding: 0.5rem; line-height: 2rem; + + .alert-handle-grip { + background: url($btn-drag-image) no-repeat 50% 50%; + background-size: 8px; + float: right; + width: 1rem; + height: 2rem; + margin-right: 2px; + } } &--T1 {