apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

ux: made progress on popover forms

Browse Source
pull/8098/head
Torkel Ödegaard 8 years ago
parent dbeeb32ab6
commit 2f61fc6afe
6 changed files with 65 additions and 53 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 9
      public/app/core/services/popover_srv.ts
  2. 48
      public/app/features/dashboard/partials/event_editor.html
  3. 3
      public/app/plugins/panel/graph/graph.ts
  4. 2
      public/sass/_variables.dark.scss
  5. 22
      public/sass/components/_drop.scss
  6. 34
      public/sass/mixins/_drop_element.scss

9
public/app/core/services/popover_srv.ts
Unescape View File

@ -10,9 +10,14 @@ import Drop from 'tether-drop';
function popoverSrv($compile, $rootScope) { function popoverSrv($compile, $rootScope) {
this.show = function(options) { this.show = function(options) {
var classNames = 'drop-popover';
var popoverScope = _.extend($rootScope.$new(true), options.model); var popoverScope = _.extend($rootScope.$new(true), options.model);
var drop; var drop;
if (options.classNames) {
classNames = options.classNames;
}
function destroyDrop() { function destroyDrop() {
setTimeout(function() { setTimeout(function() {
if (drop.tether) { if (drop.tether) {
@ -35,11 +40,11 @@ function popoverSrv($compile, $rootScope) {
target: options.element, target: options.element,
content: contentElement, content: contentElement,
position: options.position, position: options.position,
classes: 'drop-popover', classes: classNames,
openOn: options.openOn || 'hover', openOn: options.openOn || 'hover',
hoverCloseDelay: 200, hoverCloseDelay: 200,
tetherOptions: { tetherOptions: {
constraints: [{to: 'window', pin: true, attachment: "both"}] constraints: [{to: 'scrollParent', attachment: "none both"}]
} }
}); });

48
public/app/features/dashboard/partials/event_editor.html
Unescape View File

@ -1,27 +1,27 @@
<div class="gf-form-group">
<h5 class="section-heading">Add annotation event</h5>
<div class="gf-form"> <h5 class="section-heading text-center">Create event</h5>
<span class="gf-form-label width-8">Title</span>
<input type="text" ng-model="ctrl.event.title" class="gf-form-input max-width-20"> <div class="text-center">
</div> <div class="gf-form-group" style="display: inline-block">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-8">Time</span> <span class="gf-form-label width-7">Title</span>
<input type="text" ng-model="ctrl.event.time" class="gf-form-input max-width-20"> <input type="text" ng-model="ctrl.event.title" class="gf-form-input max-width-20">
</div> </div>
<div class="gf-form" ng-if="ctrl.event.isRegion"> <div class="gf-form">
<span class="gf-form-label width-8">To</span> <span class="gf-form-label width-7">Time</span>
<input type="text" ng-model="ctrl.event.endTime" class="gf-form-input max-width-20"> <input type="text" ng-model="ctrl.event.time" class="gf-form-input max-width-20">
</div> </div>
<div class="gf-form gf-form--v-stretch"> <div class="gf-form" ng-if="ctrl.event.isRegion">
<span class="gf-form-label width-7">Description</span> <span class="gf-form-label width-7">To</span>
<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.event.description" placeholder="Panel description, supports markdown & links"></textarea> <input type="text" ng-model="ctrl.event.endTime" class="gf-form-input max-width-20">
</div> </div>
</div> <div class="gf-form gf-form--v-stretch">
<span class="gf-form-label width-7">Description</span>
<textarea class="gf-form-input width-20" rows="3" ng-model="ctrl.event.description" placeholder="Event description"></textarea>
</div>
<div class="gf-form-button-row"> <div class="gf-form-button-row">
<button class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.addAnnotation()"> <button class="btn gf-form-btn btn-success" ng-click="ctrl.addAnnotation()">Save</button>
<i class="fa fa-pencil"></i> </div>
Add Annotation </div>
</button>
</div> </div>

3
public/app/plugins/panel/graph/graph.ts
Unescape View File

@ -98,6 +98,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
function showAddAnnotationView(timeRange) { function showAddAnnotationView(timeRange) {
popoverSrv.show({ popoverSrv.show({
element: elem[0], element: elem[0],
classNames: 'drop-popover drop-popover--form',
position: 'bottom center', position: 'bottom center',
openOn: 'click', openOn: 'click',
template: '<event-editor panelCtrl="ctrl" timeRange="timeRange"></event-editor>', template: '<event-editor panelCtrl="ctrl" timeRange="timeRange"></event-editor>',
@ -672,7 +673,7 @@ coreModule.directive('grafanaGraph', function($rootScope, timeSrv, popoverSrv) {
// Create new annotation from time range // Create new annotation from time range
let timeRange = ranges.xaxis; let timeRange = ranges.xaxis;
showAddAnnotationView(timeRange); showAddAnnotationView(timeRange);
plot.clearSelection(); //plot.clearSelection();
} else { } else {
scope.$apply(function() { scope.$apply(function() {
timeSrv.setTime({ timeSrv.setTime({

2
public/sass/_variables.dark.scss
Unescape View File

@ -251,7 +251,7 @@ $infoText: $blue-dark;
$infoBackground: $blue-dark; $infoBackground: $blue-dark;
// popover // popover
$popover-bg: $dark-4; $popover-bg: $panel-bg;
$popover-color: $text-color; $popover-color: $text-color;
$popover-help-bg: $btn-secondary-bg; $popover-help-bg: $btn-secondary-bg;

22
public/sass/components/_drop.scss
Unescape View File

@ -1,11 +1,18 @@
$popover-arrow-size: 0.7rem; $popover-arrow-size: 0.7rem;
$color: inherit; $color: inherit;
$backgroundColor: $btn-secondary-bg;
$color: $text-color; $color: $text-color;
$useDropShadow: false; $useDropShadow: false;
$attachmentOffset: 0%; $attachmentOffset: 0%;
$easing: cubic-bezier(0, 0, 0.265, 1.00); $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 { .drop-element {
z-index: 10000; z-index: 10000;
position: absolute; 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); .drop-element.drop-popover--form {
@include drop-theme("error", $errorBackground, $popover-color); .drop-content {
@include drop-theme("popover", $popover-bg, $popover-color); max-width: none;
}
@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);

34
public/sass/mixins/_drop_element.scss
Unescape View File

@ -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} { .drop-element.drop-#{$themeName} {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
@ -14,6 +14,8 @@
font-size: $font-size-sm; font-size: $font-size-sm;
word-wrap: break-word; word-wrap: break-word;
max-width: 20rem; max-width: 20rem;
border: 1px solid $border-color;
box-shadow: 0 0 10px #f86e06;
&:before { &:before {
content: ""; content: "";
@ -43,7 +45,7 @@
top: 100%; top: 100%;
left: 50%; left: 50%;
margin-left: - $popover-arrow-size; margin-left: - $popover-arrow-size;
border-top-color: $theme-bg; border-top-color: $border-color;
} }
} }
@ -54,7 +56,7 @@
bottom: 100%; bottom: 100%;
left: 50%; left: 50%;
margin-left: - $popover-arrow-size; margin-left: - $popover-arrow-size;
border-bottom-color: $theme-bg; border-bottom-color: $border-color;
} }
} }
@ -65,7 +67,7 @@
left: 100%; left: 100%;
top: 50%; top: 50%;
margin-top: - $popover-arrow-size; margin-top: - $popover-arrow-size;
border-left-color: $theme-bg; border-left-color: $border-color;
} }
} }
@ -76,7 +78,7 @@
right: 100%; right: 100%;
top: 50%; top: 50%;
margin-top: - $popover-arrow-size; margin-top: - $popover-arrow-size;
border-right-color: $theme-bg; border-right-color: $border-color;
} }
} }
@ -95,7 +97,7 @@
&:before { &:before {
bottom: 100%; bottom: 100%;
left: $popover-arrow-size; left: $popover-arrow-size;
border-bottom-color: $theme-bg; border-bottom-color: $border-color;
} }
} }
@ -105,7 +107,7 @@
&:before { &:before {
bottom: 100%; bottom: 100%;
right: $popover-arrow-size; right: $popover-arrow-size;
border-bottom-color: $theme-bg; border-bottom-color: $border-color;
} }
} }
@ -115,7 +117,7 @@
&:before { &:before {
top: 100%; top: 100%;
left: $popover-arrow-size; left: $popover-arrow-size;
border-top-color: $theme-bg; border-top-color: $border-color;
} }
} }
@ -125,7 +127,7 @@
&:before { &:before {
top: 100%; top: 100%;
right: $popover-arrow-size; right: $popover-arrow-size;
border-top-color: $theme-bg; border-top-color: $border-color;
} }
} }
@ -136,7 +138,7 @@
&:before { &:before {
bottom: 100%; bottom: 100%;
left: $popover-arrow-size; left: $popover-arrow-size;
border-bottom-color: $theme-bg; border-bottom-color: $border-color;
} }
} }
@ -146,7 +148,7 @@
&:before { &:before {
bottom: 100%; bottom: 100%;
right: $popover-arrow-size; right: $popover-arrow-size;
border-bottom-color: $theme-bg; border-bottom-color: $border-color;
} }
} }
@ -166,7 +168,7 @@
&:before { &:before {
top: 100%; top: 100%;
right: $popover-arrow-size; right: $popover-arrow-size;
border-top-color: $theme-bg; border-top-color: $border-color;
} }
} }
@ -177,7 +179,7 @@
&:before { &:before {
top: $popover-arrow-size; top: $popover-arrow-size;
left: 100%; left: 100%;
border-left-color: $theme-bg; border-left-color: $border-color;
} }
} }
@ -187,7 +189,7 @@
&:before { &:before {
top: $popover-arrow-size; top: $popover-arrow-size;
right: 100%; right: 100%;
border-right-color: $theme-bg; border-right-color: $border-color;
} }
} }
@ -197,7 +199,7 @@
&:before { &:before {
bottom: $popover-arrow-size; bottom: $popover-arrow-size;
left: 100%; left: 100%;
border-left-color: $theme-bg; border-left-color: $border-color;
} }
} }
@ -207,7 +209,7 @@
&:before { &:before {
bottom: $popover-arrow-size; bottom: $popover-arrow-size;
right: 100%; right: 100%;
border-right-color: $theme-bg; border-right-color: $border-color;
} }
} }
} }

Write Preview
Loading…
Cancel
Save