IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

ux: made progress on popover forms

Browse Source
This commit is contained in:
Torkel Ödegaard 2017-04-13 18:39:49 +02:00
parent dbeeb32ab6
commit 2f61fc6afe
6 changed files with 65 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/core/services/popover_srv.ts
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"}]
}
});

26
public/app/features/dashboard/partials/event_editor.html
View File

@ -1,27 +1,27 @@
<div class="gf-form-group">
<h5 class="section-heading">Add annotation event</h5>
<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-8">Title</span>
<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-8">Time</span>
<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-8">To</span>
<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-25" rows="3" ng-model="ctrl.event.description" placeholder="Panel description, supports markdown & links"></textarea>
<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 btn-success" ng-click="ctrl.addAnnotation()">Save</button>
</div>
</div>
</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>

3
public/app/plugins/panel/graph/graph.ts
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
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
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
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;
}
}
}