diff --git a/public/app/core/services/popover_srv.ts b/public/app/core/services/popover_srv.ts index 73249a67b5b..a6fb7c10655 100644 --- a/public/app/core/services/popover_srv.ts +++ b/public/app/core/services/popover_srv.ts @@ -10,9 +10,14 @@ import Drop from 'tether-drop'; function popoverSrv($compile, $rootScope) { this.show = function(options) { + var classNames = 'drop-popover'; var popoverScope = _.extend($rootScope.$new(true), options.model); var drop; + if (options.classNames) { + classNames = options.classNames; + } + function destroyDrop() { setTimeout(function() { if (drop.tether) { @@ -35,11 +40,11 @@ function popoverSrv($compile, $rootScope) { target: options.element, content: contentElement, position: options.position, - classes: 'drop-popover', + classes: classNames, openOn: options.openOn || 'hover', hoverCloseDelay: 200, tetherOptions: { - constraints: [{to: 'window', pin: true, attachment: "both"}] + constraints: [{to: 'scrollParent', attachment: "none both"}] } }); diff --git a/public/app/features/dashboard/partials/event_editor.html b/public/app/features/dashboard/partials/event_editor.html index 3aaa9d6855f..9d8d84bbee1 100644 --- a/public/app/features/dashboard/partials/event_editor.html +++ b/public/app/features/dashboard/partials/event_editor.html @@ -1,27 +1,27 @@ -
-
Add annotation event
-
- Title - -
-
- Time - -
-
- To - -
-
- Description - +
Create event
+ +
+
+
+ Title + +
+
+ Time + +
+
+ To + +
+
+ Description + +
+ +
+ +
- -
- -
diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index a0e18dae597..8eaf9d00b83 100755 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -98,6 +98,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) { function showAddAnnotationView(timeRange) { popoverSrv.show({ element: elem[0], + classNames: 'drop-popover drop-popover--form', position: 'bottom center', openOn: 'click', template: '', @@ -672,7 +673,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) { // Create new annotation from time range let timeRange = ranges.xaxis; showAddAnnotationView(timeRange); - plot.clearSelection(); + //plot.clearSelection(); } else { scope.$apply(function() { timeSrv.setTime({ diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 8ecad9e3287..9539da9ad8f 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -251,7 +251,7 @@ $infoText: $blue-dark; $infoBackground: $blue-dark; // popover -$popover-bg: $dark-4; +$popover-bg: $panel-bg; $popover-color: $text-color; $popover-help-bg: $btn-secondary-bg; diff --git a/public/sass/components/_drop.scss b/public/sass/components/_drop.scss index 6f3aff23cef..cd42d1b6fa2 100644 --- a/public/sass/components/_drop.scss +++ b/public/sass/components/_drop.scss @@ -1,11 +1,18 @@ $popover-arrow-size: 0.7rem; $color: inherit; -$backgroundColor: $btn-secondary-bg; $color: $text-color; $useDropShadow: false; $attachmentOffset: 0%; $easing: cubic-bezier(0, 0, 0.265, 1.00); +@include drop-theme("help", $popover-help-bg, $popover-help-color); +@include drop-theme("error", $errorBackground, $popover-color); +@include drop-theme("popover", $popover-bg, $popover-color, $brand-primary); + +@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); +@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing); +@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing); + .drop-element { z-index: 10000; position: absolute; @@ -44,11 +51,8 @@ $easing: cubic-bezier(0, 0, 0.265, 1.00); } } -@include drop-theme("help", $popover-help-bg, $popover-help-color); -@include drop-theme("error", $errorBackground, $popover-color); -@include drop-theme("popover", $popover-bg, $popover-color); - -@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); -@include drop-animation-scale("drop", "error", $attachmentOffset: $attachmentOffset, $easing: $easing); -@include drop-animation-scale("drop", "popover", $attachmentOffset: $attachmentOffset, $easing: $easing); - +.drop-element.drop-popover--form { + .drop-content { + max-width: none; + } +} diff --git a/public/sass/mixins/_drop_element.scss b/public/sass/mixins/_drop_element.scss index 0f7eda19efe..d73837e0b59 100644 --- a/public/sass/mixins/_drop_element.scss +++ b/public/sass/mixins/_drop_element.scss @@ -1,5 +1,5 @@ -@mixin drop-theme($themeName, $theme-bg, $theme-color) { +@mixin drop-theme($themeName, $theme-bg, $theme-color, $border-color: $theme-color) { .drop-element.drop-#{$themeName} { max-width: 100%; max-height: 100%; @@ -14,6 +14,8 @@ font-size: $font-size-sm; word-wrap: break-word; max-width: 20rem; + border: 1px solid $border-color; + box-shadow: 0 0 10px #f86e06; &:before { content: ""; @@ -43,7 +45,7 @@ top: 100%; left: 50%; margin-left: - $popover-arrow-size; - border-top-color: $theme-bg; + border-top-color: $border-color; } } @@ -54,7 +56,7 @@ bottom: 100%; left: 50%; margin-left: - $popover-arrow-size; - border-bottom-color: $theme-bg; + border-bottom-color: $border-color; } } @@ -65,7 +67,7 @@ left: 100%; top: 50%; margin-top: - $popover-arrow-size; - border-left-color: $theme-bg; + border-left-color: $border-color; } } @@ -76,7 +78,7 @@ right: 100%; top: 50%; margin-top: - $popover-arrow-size; - border-right-color: $theme-bg; + border-right-color: $border-color; } } @@ -95,7 +97,7 @@ &:before { bottom: 100%; left: $popover-arrow-size; - border-bottom-color: $theme-bg; + border-bottom-color: $border-color; } } @@ -105,7 +107,7 @@ &:before { bottom: 100%; right: $popover-arrow-size; - border-bottom-color: $theme-bg; + border-bottom-color: $border-color; } } @@ -115,7 +117,7 @@ &:before { top: 100%; left: $popover-arrow-size; - border-top-color: $theme-bg; + border-top-color: $border-color; } } @@ -125,7 +127,7 @@ &:before { top: 100%; right: $popover-arrow-size; - border-top-color: $theme-bg; + border-top-color: $border-color; } } @@ -136,7 +138,7 @@ &:before { bottom: 100%; left: $popover-arrow-size; - border-bottom-color: $theme-bg; + border-bottom-color: $border-color; } } @@ -146,7 +148,7 @@ &:before { bottom: 100%; right: $popover-arrow-size; - border-bottom-color: $theme-bg; + border-bottom-color: $border-color; } } @@ -166,7 +168,7 @@ &:before { top: 100%; right: $popover-arrow-size; - border-top-color: $theme-bg; + border-top-color: $border-color; } } @@ -177,7 +179,7 @@ &:before { top: $popover-arrow-size; left: 100%; - border-left-color: $theme-bg; + border-left-color: $border-color; } } @@ -187,7 +189,7 @@ &:before { top: $popover-arrow-size; right: 100%; - border-right-color: $theme-bg; + border-right-color: $border-color; } } @@ -197,7 +199,7 @@ &:before { bottom: $popover-arrow-size; left: 100%; - border-left-color: $theme-bg; + border-left-color: $border-color; } } @@ -207,7 +209,7 @@ &:before { bottom: $popover-arrow-size; right: 100%; - border-right-color: $theme-bg; + border-right-color: $border-color; } } }