mirror of https://github.com/grafana/grafana
Conflicts: public/sass/_grafana.scsspull/4119/head
Torkel Ödegaard
9 years ago
commit
cb83c237f4
@ -0,0 +1,55 @@ |
||||
///<reference path="../../../headers/common.d.ts" />
|
||||
|
||||
import _ from 'lodash'; |
||||
import $ from 'jquery'; |
||||
import coreModule from '../../core_module'; |
||||
import Drop from 'tether-drop'; |
||||
|
||||
export function popoverDirective() { |
||||
return { |
||||
restrict: 'E', |
||||
transclude: true, |
||||
link: function(scope, elem, attrs, ctrl, transclude) { |
||||
var inputElem = elem.prev(); |
||||
if (inputElem.length === 0) { |
||||
console.log('Failed to find input element for popover'); |
||||
return; |
||||
} |
||||
|
||||
var offset = attrs.offset || '0 -10px'; |
||||
|
||||
transclude(function(clone, newScope) { |
||||
var content = document.createElement("div"); |
||||
_.each(clone, (node) => { |
||||
content.appendChild(node); |
||||
}); |
||||
|
||||
var drop = new Drop({ |
||||
target: inputElem[0], |
||||
content: content, |
||||
position: 'right middle', |
||||
classes: 'drop-help', |
||||
openOn: 'click', |
||||
tetherOptions: { |
||||
offset: offset |
||||
} |
||||
}); |
||||
|
||||
// inputElem.on('focus.popover', function() {
|
||||
// drop.open();
|
||||
// });
|
||||
//
|
||||
// inputElem.on('blur.popover', function() {
|
||||
// close();
|
||||
// });
|
||||
|
||||
scope.$on('$destroy', function() { |
||||
drop.destroy(); |
||||
}); |
||||
|
||||
}); |
||||
} |
||||
}; |
||||
} |
||||
|
||||
coreModule.directive('gfPopover', popoverDirective); |
||||
@ -1,39 +1,36 @@ |
||||
<div class="editor-row"> |
||||
<div class="section" ng-if="ctrl.annotation.index"> |
||||
<h5>Index name</h5> |
||||
<div class="editor-option"> |
||||
<input type="text" class="span4" ng-model='ctrl.annotation.index' placeholder="events-*"></input> |
||||
</div> |
||||
<div class="gf-form-group"> |
||||
<div class="gf-form" ng-if="ctrl.annotation.index"> |
||||
<span class="gf-form-label width-14">Index name</span> |
||||
<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.index' placeholder="events-*"></input> |
||||
</div> |
||||
<div class="section"> |
||||
<h5>Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></h5> |
||||
<div class="editor-option"> |
||||
<input type="text" class="span6" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input> |
||||
</div> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-14">Search query (lucene) <tip>Use [[filterName]] in query to replace part of the query with a filter value</tip></span> |
||||
<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.query' placeholder="tags:deploy"></input> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="editor-row"> |
||||
<div class="section"> |
||||
<h5>Field mappings</h5> |
||||
<div class="editor-option"> |
||||
<label class="small">Time</label> |
||||
<input type="text" class="input-small" ng-model='ctrl.annotation.timeField' placeholder="@timestamp"></input> |
||||
<div class="gf-form-group"> |
||||
<h6>Field mappings</h6> |
||||
<div class="gf-form-inline"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Time</span> |
||||
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.timeField' placeholder="@timestamp"></input> |
||||
</div> |
||||
|
||||
<div class="editor-option"> |
||||
<label class="small">Title</label> |
||||
<input type="text" class="input-small" ng-model='ctrl.annotation.titleField' placeholder="desc"></input> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Title</span> |
||||
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.titleField' placeholder="desc"></input> |
||||
</div> |
||||
|
||||
<div class="editor-option"> |
||||
<label class="small">Tags</label> |
||||
<input type="text" class="input-small" ng-model='ctrl.annotation.tagsField' placeholder="tags"></input> |
||||
</div> |
||||
<div class="gf-form-inline"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Tags</span> |
||||
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.tagsField' placeholder="tags"></input> |
||||
</div> |
||||
|
||||
<div class="editor-option"> |
||||
<label class="small">Text</label> |
||||
<input type="text" class="input-small" ng-model='ctrl.annotation.textField' placeholder=""></input> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Text</span> |
||||
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.textField' placeholder=""></input> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
@ -1,15 +1,10 @@ |
||||
<div class="editor-row"> |
||||
<div class="editor-option"> |
||||
<label class="small">Graphite target expression</label> |
||||
<input type="text" class="span10" ng-model='ctrl.annotation.target' placeholder=""></input> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="editor-row"> |
||||
<div class="editor-option"> |
||||
<label class="small">Graphite event tags</label> |
||||
<input type="text" ng-model='ctrl.annotation.tags' placeholder=""></input> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<div class="gf-form-group"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-14">Graphite target expression</span> |
||||
<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.target' placeholder=""></input> |
||||
</div> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-14">Graphite event tags</span> |
||||
<input type="text" class="gf-form-input max-width-20" ng-model='ctrl.annotation.tags' placeholder=""></input> |
||||
</div> |
||||
</div> |
||||
@ -1,28 +1,28 @@ |
||||
<div class="editor-row"> |
||||
<div class="section"> |
||||
<h5>Search expression</h5> |
||||
<div class="editor-option"> |
||||
<input type="text" class="span6" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input> |
||||
<div class="gf-form-group"> |
||||
<div class="gf-form-inline"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Search expression</span> |
||||
<input type="text" class="gf-form-input max-width-16" ng-model='ctrl.annotation.expr' placeholder="ALERTS"></input> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="editor-row"> |
||||
<div class="section"> |
||||
<h5>Field formats</h5> |
||||
<div class="editor-option"> |
||||
<label class="small">Title</label> |
||||
<input type="text" class="input-small" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input> |
||||
<div class="gf-form-group"> |
||||
<h6>Field formats</h6> |
||||
<div class="gf-form-inline"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Title</span> |
||||
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.titleFormat' placeholder="alertname"></input> |
||||
</div> |
||||
|
||||
<div class="editor-option"> |
||||
<label class="small">Tags</label> |
||||
<input type="text" class="input-small" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Tags</span> |
||||
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.tagKeys' placeholder="label1,label2"></input> |
||||
</div> |
||||
|
||||
<div class="editor-option"> |
||||
<label class="small">Text</label> |
||||
<input type="text" class="input-small" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input> |
||||
</div> |
||||
<div class="gf-form-inline"> |
||||
<div class="gf-form"> |
||||
<span class="gf-form-label width-10">Text</span> |
||||
<input type="text" class="gf-form-input" ng-model='ctrl.annotation.textFormat' placeholder="instance"></input> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
@ -0,0 +1,28 @@ |
||||
$popover-arrow-size: 1rem; |
||||
$color: inherit; |
||||
$backgroundColor: $btn-secondary-bg; |
||||
$color: $text-color; |
||||
$useDropShadow: false; |
||||
$attachmentOffset: $popover-arrow-size; |
||||
$easing: cubic-bezier(0, 0, 0.265, 1.55); |
||||
|
||||
.drop-element { |
||||
position: absolute; |
||||
display: none; |
||||
|
||||
&.drop-open { |
||||
display: block; |
||||
} |
||||
|
||||
&.drop-open.drop-popover.drop-out-of-bounds, |
||||
&.drop-open-transitionend.drop-popover.drop-out-of-bounds { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.drop-element, .drop-element * { |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
@include drop-theme("help", $popover-help-bg, $popover-help-color); |
||||
@include drop-animation-scale("drop", "help", $attachmentOffset: $attachmentOffset, $easing: $easing); |
||||
@ -0,0 +1,272 @@ |
||||
|
||||
@mixin drop-theme($themeName, $theme-bg, $theme-color) { |
||||
.drop-element.drop-#{$themeName} { |
||||
max-width: 100%; |
||||
max-height: 100%; |
||||
|
||||
.drop-content { |
||||
border-radius: $border-radius-lg; |
||||
position: relative; |
||||
font-family: inherit; |
||||
background: $theme-bg; |
||||
color: $theme-color; |
||||
padding: 1em; |
||||
font-size: $font-size-sm; |
||||
max-width: 20rem; |
||||
|
||||
&:before { |
||||
content: ""; |
||||
display: block; |
||||
position: absolute; |
||||
width: 0; |
||||
height: 0; |
||||
border-color: transparent; |
||||
border-width: $popover-arrow-size; |
||||
border-style: solid; |
||||
pointer-events: null; |
||||
} |
||||
} |
||||
|
||||
// Centers and middles |
||||
|
||||
&.drop-element-attached-bottom.drop-element-attached-center .drop-content { |
||||
margin-bottom: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
top: 100%; |
||||
left: 50%; |
||||
margin-left: - $popover-arrow-size; |
||||
border-top-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-top.drop-element-attached-center .drop-content { |
||||
margin-top: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
bottom: 100%; |
||||
left: 50%; |
||||
margin-left: - $popover-arrow-size; |
||||
border-bottom-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-right.drop-element-attached-middle .drop-content { |
||||
margin-right: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
left: 100%; |
||||
top: 50%; |
||||
margin-top: - $popover-arrow-size; |
||||
border-left-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-left.drop-element-attached-middle .drop-content { |
||||
margin-left: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
right: 100%; |
||||
top: 50%; |
||||
margin-top: - $popover-arrow-size; |
||||
border-right-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
// Target middle/center, element corner |
||||
&.drop-element-attached-left.drop-target-attached-center .drop-content { |
||||
left: - $popover-arrow-size * 2; |
||||
} |
||||
|
||||
&.drop-element-attached-right.drop-target-attached-center .drop-content { |
||||
left: $popover-arrow-size * 2; |
||||
} |
||||
|
||||
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-middle .drop-content { |
||||
margin-top: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
bottom: 100%; |
||||
left: $popover-arrow-size; |
||||
border-bottom-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-middle .drop-content { |
||||
margin-top: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
bottom: 100%; |
||||
right: $popover-arrow-size; |
||||
border-bottom-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-middle .drop-content { |
||||
margin-bottom: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
top: 100%; |
||||
left: $popover-arrow-size; |
||||
border-top-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-middle .drop-content { |
||||
margin-bottom: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
top: 100%; |
||||
right: $popover-arrow-size; |
||||
border-top-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
// Top and bottom corners |
||||
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content { |
||||
margin-top: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
bottom: 100%; |
||||
left: $popover-arrow-size; |
||||
border-bottom-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content { |
||||
margin-top: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
bottom: 100%; |
||||
right: $popover-arrow-size; |
||||
border-bottom-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content { |
||||
margin-bottom: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
top: 100%; |
||||
left: $popover-arrow-size; |
||||
border-top-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content { |
||||
margin-bottom: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
top: 100%; |
||||
right: $popover-arrow-size; |
||||
border-top-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
// Side corners |
||||
&.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content { |
||||
margin-right: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
top: $popover-arrow-size; |
||||
left: 100%; |
||||
border-left-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content { |
||||
margin-left: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
top: $popover-arrow-size; |
||||
right: 100%; |
||||
border-right-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content { |
||||
margin-right: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
bottom: $popover-arrow-size; |
||||
left: 100%; |
||||
border-left-color: $theme-bg; |
||||
} |
||||
} |
||||
|
||||
&.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content { |
||||
margin-left: $popover-arrow-size; |
||||
|
||||
&:before { |
||||
bottom: $popover-arrow-size; |
||||
right: 100%; |
||||
border-right-color: $theme-bg; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@mixin drop-animation-scale($themePrefix: "drop", $themeName: "default", $attachmentOffset: 0, $easing: "linear") { |
||||
.#{$themePrefix}-element.#{$themePrefix}-#{$themeName} { |
||||
transform: translateZ(0); |
||||
transition: opacity 100ms; |
||||
opacity: 0; |
||||
.#{$themePrefix}-content { |
||||
transition: transform 0.2s $easing; |
||||
transform: scale(0) translateZ(0); |
||||
} |
||||
&.#{$themePrefix}-open { |
||||
display: none; |
||||
} |
||||
&.#{$themePrefix}-open-transitionend { |
||||
display: block; |
||||
} |
||||
&.#{$themePrefix}-after-open { |
||||
transition: none; |
||||
opacity: 1; |
||||
.#{$themePrefix}-content { |
||||
transform: scale(1) translateZ(0); |
||||
} |
||||
} |
||||
// Centers and middles |
||||
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-center .#{$themePrefix}-content { |
||||
transform-origin: 50% calc(100% + #{$attachmentOffset}); |
||||
} |
||||
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-center .#{$themePrefix}-content { |
||||
transform-origin: 50% (-$attachmentOffset); |
||||
} |
||||
&.#{$themePrefix}-element-attached-right.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content { |
||||
transform-origin: calc(100% + #{$attachmentOffset}) 50%; |
||||
} |
||||
&.#{$themePrefix}-element-attached-left.#{$themePrefix}-element-attached-middle .#{$themePrefix}-content { |
||||
transform-origin: -($attachmentOffset 50%); |
||||
} |
||||
// Top and bottom corners |
||||
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content { |
||||
transform-origin: 0 (-$attachmentOffset); |
||||
} |
||||
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-bottom .#{$themePrefix}-content { |
||||
transform-origin: 100% (-$attachmentOffset); |
||||
} |
||||
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-top .#{$themePrefix}-content { |
||||
transform-origin: 0 calc(100% + #{$attachmentOffset}); |
||||
} |
||||
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-top .#{$themePrefix}-content { |
||||
transform-origin: 100% calc(100% + #{$attachmentOffset}); |
||||
} |
||||
// Side corners |
||||
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content { |
||||
transform-origin: calc(100% + #{$attachmentOffset}) 0; |
||||
} |
||||
&.#{$themePrefix}-element-attached-top.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content { |
||||
transform-origin: (-$attachmentOffset) 0; |
||||
} |
||||
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-right.#{$themePrefix}-target-attached-left .#{$themePrefix}-content { |
||||
transform-origin: calc(100% + #{$attachmentOffset}) 100%; |
||||
} |
||||
&.#{$themePrefix}-element-attached-bottom.#{$themePrefix}-element-attached-left.#{$themePrefix}-target-attached-right .#{$themePrefix}-content { |
||||
transform-origin: (-$attachmentOffset) 100%; |
||||
} |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue