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) {
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"}]
}
});

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">
<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>
<div class="gf-form">
<span class="gf-form-label width-8">Time</span>
<input type="text" ng-model="ctrl.event.time" class="gf-form-input max-width-20">
</div>
<div class="gf-form" ng-if="ctrl.event.isRegion">
<span class="gf-form-label width-8">To</span>
<input type="text" ng-model="ctrl.event.endTime" class="gf-form-input max-width-20">
</div>
<div class="gf-form gf-form--v-stretch">
<span class="gf-form-label width-7">Description</span>
<textarea class="gf-form-input width-25" rows="3" ng-model="ctrl.event.description" placeholder="Panel description, supports markdown & links"></textarea>
</div>
</div>
<h5 class="section-heading text-center">Create event</h5>
<div class="text-center">
<div class="gf-form-group" style="display: inline-block">
<div class="gf-form">
<span class="gf-form-label width-7">Title</span>
<input type="text" ng-model="ctrl.event.title" class="gf-form-input max-width-20">
</div>
<div class="gf-form">
<span class="gf-form-label width-7">Time</span>
<input type="text" ng-model="ctrl.event.time" class="gf-form-input max-width-20">
</div>
<div class="gf-form" ng-if="ctrl.event.isRegion">
<span class="gf-form-label width-7">To</span>
<input type="text" ng-model="ctrl.event.endTime" class="gf-form-input max-width-20">
</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">
<button class="btn gf-form-btn width-10 btn-success" ng-click="ctrl.addAnnotation()">
<i class="fa fa-pencil"></i>
Add Annotation
</button>
<div class="gf-form-button-row">
<button class="btn gf-form-btn btn-success" ng-click="ctrl.addAnnotation()">Save</button>
</div>
</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) {
popoverSrv.show({
element: elem[0],
classNames: 'drop-popover drop-popover--form',
position: 'bottom center',
openOn: 'click',
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
let timeRange = ranges.xaxis;
showAddAnnotationView(timeRange);
plot.clearSelection();
//plot.clearSelection();
} else {
scope.$apply(function() {
timeSrv.setTime({

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

@ -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;

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

@ -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;
}
}

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} {
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;
}
}
}

Write Preview
Loading…
Cancel
Save