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) { 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
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 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 btn-success" ng-click="ctrl.addAnnotation()">Save</button>
</div>
</div> </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) { 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
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
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
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;
} }
} }
} }