Skip to content

N
nexpie-grafana-theme
Commit 72d7a7d9 by Torkel Ödegaard
Options

changed grafana-target css names in partials

parent e1f410d3
Showing with 272 additions and 271 deletions
src/app/directives/dropdown.typeahead.js
...@@ -12,10 +12,10 @@ function (angular, app, _, $) { ...@@ -12,10 +12,10 @@ function (angular, app, _, $) {
.directive('dropdownTypeahead', function($compile) { .directive('dropdownTypeahead', function($compile) {
var inputTemplate = '<input type="text"'+ var inputTemplate = '<input type="text"'+
' class="grafana-target-segment-input input-medium grafana-target-segment-input"' + ' class="tight-form-input input-medium tight-form-input"' +
' spellcheck="false" style="display:none"></input>'; ' spellcheck="false" style="display:none"></input>';
var buttonTemplate = '<a class="grafana-target-segment grafana-target-function dropdown-toggle"' + var buttonTemplate = '<a class="tight-form-item tight-form-func dropdown-toggle"' +
' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' + ' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
' data-placement="top"><i class="fa fa-plus"></i></a>'; ' data-placement="top"><i class="fa fa-plus"></i></a>';
......
src/app/directives/graphiteSegment.js
...@@ -11,10 +11,10 @@ function (angular, app, _, $) { ...@@ -11,10 +11,10 @@ function (angular, app, _, $) {
.module('grafana.directives') .module('grafana.directives')
.directive('graphiteSegment', function($compile, $sce) { .directive('graphiteSegment', function($compile, $sce) {
var inputTemplate = '<input type="text" data-provide="typeahead" ' + var inputTemplate = '<input type="text" data-provide="typeahead" ' +
' class="grafana-target-text-input input-medium"' + ' class="tight-form-clear-input input-medium"' +
' spellcheck="false" style="display:none"></input>'; ' spellcheck="false" style="display:none"></input>';
var buttonTemplate = '<a class="grafana-target-segment" tabindex="1" focus-me="segment.focus" ng-bind-html="segment.html"></a>'; var buttonTemplate = '<a class="tight-form-item" tabindex="1" focus-me="segment.focus" ng-bind-html="segment.html"></a>';
return { return {
link: function($scope, elem) { link: function($scope, elem) {
......
src/app/directives/templateParamSelector.js
...@@ -11,10 +11,10 @@ function (angular, app, _, $) { ...@@ -11,10 +11,10 @@ function (angular, app, _, $) {
.module('grafana.directives') .module('grafana.directives')
.directive('templateParamSelector', function($compile) { .directive('templateParamSelector', function($compile) {
var inputTemplate = '<input type="text" data-provide="typeahead" ' + var inputTemplate = '<input type="text" data-provide="typeahead" ' +
' class="grafana-target-text-input input-medium"' + ' class="tight-form-clear-input input-medium"' +
' spellcheck="false" style="display:none"></input>'; ' spellcheck="false" style="display:none"></input>';
var buttonTemplate = '<a class="grafana-target-segment tabindex="1">{{variable.current.text}}</a>'; var buttonTemplate = '<a class="tight-form-item tabindex="1">{{variable.current.text}}</a>';
return { return {
link: function($scope, elem) { link: function($scope, elem) {
......
src/app/features/graphite/addGraphiteFunc.js
...@@ -12,10 +12,10 @@ function (angular, app, _, $, gfunc) { ...@@ -12,10 +12,10 @@ function (angular, app, _, $, gfunc) {
.module('grafana.directives') .module('grafana.directives')
.directive('graphiteAddFunc', function($compile) { .directive('graphiteAddFunc', function($compile) {
var inputTemplate = '<input type="text"'+ var inputTemplate = '<input type="text"'+
' class="grafana-target-segment-input input-medium grafana-target-segment-input"' + ' class="tight-form-input input-medium tight-form-input"' +
' spellcheck="false" style="display:none"></input>'; ' spellcheck="false" style="display:none"></input>';
var buttonTemplate = '<a class="grafana-target-segment grafana-target-function dropdown-toggle"' + var buttonTemplate = '<a class="tight-form-item tight-form-func dropdown-toggle"' +
' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown"' + ' tabindex="1" gf-dropdown="functionMenu" data-toggle="dropdown"' +
' data-placement="top"><i class="fa fa-plus"></i></a>'; ' data-placement="top"><i class="fa fa-plus"></i></a>';
......
src/app/features/graphite/funcEditor.js
...@@ -12,10 +12,10 @@ function (angular, _, $) { ...@@ -12,10 +12,10 @@ function (angular, _, $) {
var funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>'; var funcSpanTemplate = '<a ng-click="">{{func.def.name}}</a><span>(</span>';
var paramTemplate = '<input type="text" style="display:none"' + var paramTemplate = '<input type="text" style="display:none"' +
' class="input-mini grafana-function-param-input"></input>'; ' class="input-mini tight-form-func-param"></input>';
var funcControlsTemplate = var funcControlsTemplate =
'<div class="graphite-func-controls">' + '<div class="tight-form-func-controls">' +
'<span class="pointer fa fa-arrow-left"></span>' + '<span class="pointer fa fa-arrow-left"></span>' +
'<span class="pointer fa fa-question-circle"></span>' + '<span class="pointer fa fa-question-circle"></span>' +
'<span class="pointer fa fa-remove" ></span>' + '<span class="pointer fa fa-remove" ></span>' +
...@@ -126,7 +126,7 @@ function (angular, _, $) { ...@@ -126,7 +126,7 @@ function (angular, _, $) {
} }
function toggleFuncControls() { function toggleFuncControls() {
var targetDiv = elem.closest('.grafana-target-inner'); var targetDiv = elem.closest('.tight-form-row');
if (elem.hasClass('show-function-controls')) { if (elem.hasClass('show-function-controls')) {
elem.removeClass('show-function-controls'); elem.removeClass('show-function-controls');
......
src/app/features/graphite/partials/query.editor.html
<div class="editor-row"> <div class="editor-row">
<div ng-repeat="target in panel.targets" <div ng-repeat="target in panel.targets"
class="grafana-target" class="tight-form"
ng-class="{'grafana-target-hidden': target.hide}" ng-class="{'tight-form-disabled': target.hide}"
ng-controller="GraphiteQueryCtrl" ng-controller="GraphiteQueryCtrl"
ng-init="init()"> ng-init="init()">
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list pull-right"> <ul class="tight-form-list pull-right">
<li ng-show="parserError" class="grafana-target-segment"> <li ng-show="parserError" class="tight-form-item">
<a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem"> <a bs-tooltip="parserError" style="color: rgb(229, 189, 28)" role="menuitem">
<i class="fa fa-warning"></i> <i class="fa fa-warning"></i>
</a> </a>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor"> <a class="pointer" tabindex="1" ng-click="showTextEditor = !showTextEditor">
<i class="fa fa-pencil"></i> <i class="fa fa-pencil"></i>
</a> </a>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<div class="dropdown"> <div class="dropdown">
<a class="pointer dropdown-toggle" <a class="pointer dropdown-toggle"
data-toggle="dropdown" data-toggle="dropdown"
...@@ -47,19 +47,19 @@ ...@@ -47,19 +47,19 @@
</ul> </ul>
</div> </div>
</li> </li>
<li class="grafana-target-segment last"> <li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)"> <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
</li> </li>
</ul> </ul>
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment" style="min-width: 15px; text-align: center"> <li class="tight-form-item" style="min-width: 15px; text-align: center">
{{targetLetters[$index]}} {{targetLetters[$index]}}
</li> </li>
<li> <li>
<a class="grafana-target-segment" <a class="tight-form-item"
ng-click="target.hide = !target.hide; get_data();" ng-click="target.hide = !target.hide; get_data();"
role="menuitem"> role="menuitem">
<i class="fa fa-eye"></i> <i class="fa fa-eye"></i>
...@@ -68,17 +68,17 @@ ...@@ -68,17 +68,17 @@
</ul> </ul>
<input type="text" <input type="text"
class="grafana-target-text-input span10" class="tight-form-clear-input span10"
ng-model="target.target" ng-model="target.target"
focus-me="showTextEditor" focus-me="showTextEditor"
spellcheck='false' spellcheck='false'
ng-model-onblur ng-change="targetTextChanged()" ng-model-onblur ng-change="targetTextChanged()"
ng-show="showTextEditor" /> ng-show="showTextEditor" />
<ul class="grafana-segment-list" role="menu" ng-hide="showTextEditor"> <ul class="tight-form-list" role="menu" ng-hide="showTextEditor">
<li ng-repeat="segment in segments" role="menuitem" graphite-segment></li> <li ng-repeat="segment in segments" role="menuitem" graphite-segment></li>
<li ng-repeat="func in functions"> <li ng-repeat="func in functions">
<span graphite-func-editor class="grafana-target-segment grafana-target-function"> <span graphite-func-editor class="tight-form-item tight-form-func">
</span> </span>
</li> </li>
<li class="dropdown" graphite-add-func> <li class="dropdown" graphite-add-func>
...@@ -91,30 +91,30 @@ ...@@ -91,30 +91,30 @@
</div> </div>
<section class="grafana-metric-options"> <section class="grafana-metric-options">
<div class="grafana-target"> <div class="tight-form">
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment grafana-target-segment-icon"> <li class="tight-form-item tight-form-item-icon">
<i class="fa fa-wrench"></i> <i class="fa fa-wrench"></i>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Cache timeout Cache timeout
</li> </li>
<li> <li>
<input type="text" <input type="text"
class="input-mini grafana-target-segment-input" class="input-mini tight-form-input"
ng-model="panel.cacheTimeout" ng-model="panel.cacheTimeout"
bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'" bs-tooltip="'Graphite parameter to override memcache default timeout (unit is seconds)'"
data-placement="right" data-placement="right"
spellcheck='false' spellcheck='false'
placeholder="60"> placeholder="60">
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Max data points Max data points
</li> </li>
<li> <li>
<input type="text" <input type="text"
class="input-mini grafana-target-segment-input" class="input-mini tight-form-input"
ng-model="panel.maxDataPoints" ng-model="panel.maxDataPoints"
bs-tooltip="'Override max data points, automatically set to graph width in pixels.'" bs-tooltip="'Override max data points, automatically set to graph width in pixels.'"
data-placement="right" data-placement="right"
...@@ -125,32 +125,32 @@ ...@@ -125,32 +125,32 @@
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment grafana-target-segment-icon"> <li class="tight-form-item tight-form-item-icon">
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
shorter legend names shorter legend names
</a> </a>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
series as parameters series as parameters
</a> </a>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
stacking stacking
</a> </a>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
templating templating
</a> </a>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="toggleEditorHelp(5)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
max data points max data points
</a> </a>
......
src/app/features/influxdb/funcEditor.js
...@@ -14,7 +14,7 @@ function (angular, _, $) { ...@@ -14,7 +14,7 @@ function (angular, _, $) {
'data-toggle="dropdown">{{target.function}}</a><span>(</span>'; 'data-toggle="dropdown">{{target.function}}</a><span>(</span>';
var paramTemplate = '<input type="text" style="display:none"' + var paramTemplate = '<input type="text" style="display:none"' +
' class="input-mini grafana-function-param-input"></input>'; ' class="input-mini tight-form-func-param"></input>';
return { return {
restrict: 'A', restrict: 'A',
......
src/app/features/influxdb/partials/query.editor.html
<div class="editor-row"> <div class="editor-row">
<div ng-repeat="target in panel.targets" <div ng-repeat="target in panel.targets"
class="grafana-target" class="tight-form"
ng-class="{'grafana-target-hidden': target.hide}" ng-class="{'tight-form-disabled': target.hide}"
ng-controller="InfluxQueryCtrl" ng-controller="InfluxQueryCtrl"
ng-init="init()"> ng-init="init()">
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list pull-right"> <ul class="tight-form-list pull-right">
<li class="grafana-target-segment"> <li class="tight-form-item">
<div class="dropdown"> <div class="dropdown">
<a class="pointer dropdown-toggle" <a class="pointer dropdown-toggle"
data-toggle="dropdown" data-toggle="dropdown"
...@@ -23,26 +23,26 @@ ...@@ -23,26 +23,26 @@
</ul> </ul>
</div> </div>
</li> </li>
<li class="grafana-target-segment last"> <li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)"> <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
</li> </li>
</ul> </ul>
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li> <li>
<a class="grafana-target-segment" ng-click="target.hide = !target.hide; get_data();" role="menuitem"> <a class="tight-form-item" ng-click="target.hide = !target.hide; get_data();" role="menuitem">
<i class="fa fa-eye"></i> <i class="fa fa-eye"></i>
</a> </a>
</li> </li>
</ul> </ul>
<!-- Raw Query mode --> <!-- Raw Query mode -->
<ul class="grafana-segment-list" ng-show="target.rawQuery"> <ul class="tight-form-list" ng-show="target.rawQuery">
<li> <li>
<input type="text" <input type="text"
class="grafana-target-segment-input span10" class="tight-form-input span10"
ng-model="target.query" ng-model="target.query"
placeholder="select ..." placeholder="select ..."
focus-me="target.rawQuery" focus-me="target.rawQuery"
...@@ -54,13 +54,13 @@ ...@@ -54,13 +54,13 @@
</ul> </ul>
<!-- Query editor mode --> <!-- Query editor mode -->
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery"> <ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
<li class="grafana-target-segment"> <li class="tight-form-item">
series series
</li> </li>
<li> <li>
<input type="text" <input type="text"
class="grafana-target-segment-input span8" class="tight-form-input span8"
ng-model="target.series" ng-model="target.series"
spellcheck='false' spellcheck='false'
bs-typeahead="listSeries" bs-typeahead="listSeries"
...@@ -71,12 +71,12 @@ ...@@ -71,12 +71,12 @@
ng-blur="seriesBlur()"> ng-blur="seriesBlur()">
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
alias alias
</li> </li>
<li> <li>
<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.alias" <input type="text" class="input-medium tight-form-input" ng-model="target.alias"
spellcheck='false' placeholder="alias" ng-blur="get_data()"> spellcheck='false' placeholder="alias" ng-blur="get_data()">
</li> </li>
...@@ -85,28 +85,28 @@ ...@@ -85,28 +85,28 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="grafana-target-inner"> <div class="tight-form-row">
<!-- Raw Query mode --> <!-- Raw Query mode -->
<ul class="grafana-segment-list" ng-show="target.rawQuery"> <ul class="tight-form-list" ng-show="target.rawQuery">
<li class="grafana-target-segment"> <li class="tight-form-item">
<i class="fa fa-eye invisible"></i> <i class="fa fa-eye invisible"></i>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
alias alias
</li> </li>
<li> <li>
<input type="text" <input type="text"
class="input-medium grafana-target-segment-input" class="input-medium tight-form-input"
ng-model="target.alias" ng-model="target.alias"
spellcheck='false' spellcheck='false'
placeholder="alias" placeholder="alias"
ng-blur="get_data()"> ng-blur="get_data()">
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
group by time group by time
</li> </li>
<li> <li>
<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval" <input type="text" class="input-mini tight-form-input" ng-model="target.interval"
spellcheck='false' placeholder="{{interval}}" data-placement="right" spellcheck='false' placeholder="{{interval}}" data-placement="right"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'" bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
ng-model-onblur ng-change="get_data()" > ng-model-onblur ng-change="get_data()" >
...@@ -114,47 +114,47 @@ ...@@ -114,47 +114,47 @@
</ul> </ul>
<!-- Query editor mode --> <!-- Query editor mode -->
<ul class="grafana-segment-list" role="menu" ng-hide="target.rawQuery"> <ul class="tight-form-list" role="menu" ng-hide="target.rawQuery">
<li class="grafana-target-segment"> <li class="tight-form-item">
<i class="fa fa-eye invisible"></i> <i class="fa fa-eye invisible"></i>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
select select
</li> </li>
<li class="dropdown"> <li class="dropdown">
<span influxdb-func-editor class="grafana-target-segment grafana-target-function"> <span influxdb-func-editor class="tight-form-item tight-form-func">
</span> </span>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
where where
</li> </li>
<li> <li>
<input type="text" class="input-medium grafana-target-segment-input" ng-model="target.condition" <input type="text" class="input-medium tight-form-input" ng-model="target.condition"
bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()"> bs-tooltip="'Add a where clause'" data-placement="right" spellcheck='false' placeholder="column ~= value" ng-blur="get_data()">
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
group by time group by time
</li> </li>
<li> <li>
<input type="text" class="input-mini grafana-target-segment-input" ng-model="target.interval" <input type="text" class="input-mini tight-form-input" ng-model="target.interval"
spellcheck='false' placeholder="{{interval}}" data-placement="right" spellcheck='false' placeholder="{{interval}}" data-placement="right"
bs-tooltip="'Leave blank for auto handling based on time range and panel width'" bs-tooltip="'Leave blank for auto handling based on time range and panel width'"
ng-model-onblur ng-change="get_data()" > ng-model-onblur ng-change="get_data()" >
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
and and
</li> </li>
<li> <li>
<input type="text" class="input-small grafana-target-segment-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'" <input type="text" class="input-small tight-form-input" ng-model="target.groupby_field" bs-tooltip="'Add a group by column or leave blank'"
placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()"> placeholder="column" spellcheck="false" bs-typeahead="listColumns" data-min-length=0 ng-blur="get_data()">
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="grafana-target-segment pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right"> <a class="tight-form-item pointer" data-toggle="dropdown" bs-tooltip="'Insert missing values, important when stacking'" data-placement="right">
<span ng-show="target.fill"> <span ng-show="target.fill">
fill ({{target.fill}}) fill ({{target.fill}})
</span> </span>
...@@ -177,42 +177,42 @@ ...@@ -177,42 +177,42 @@
</div> </div>
<section class="grafana-metric-options"> <section class="grafana-metric-options">
<div class="grafana-target"> <div class="tight-form">
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment grafana-target-segment-icon"> <li class="tight-form-item tight-form-item-icon">
<i class="fa fa-wrench"></i> <i class="fa fa-wrench"></i>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
group by time group by time
</li> </li>
<li> <li>
<input type="text" class="input-medium grafana-target-segment-input" ng-model="panel.interval" ng-blur="get_data();" <input type="text" class="input-medium tight-form-input" ng-model="panel.interval" ng-blur="get_data();"
spellcheck='false' placeholder="example: >10s"> spellcheck='false' placeholder="example: >10s">
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i> <i class="fa fa-question-circle" bs-tooltip="'Set a low limit by having a greater sign: example: >60s'" data-placement="right"></i>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment grafana-target-segment-icon"> <li class="tight-form-item tight-form-item-icon">
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
alias patterns alias patterns
</a> </a>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="toggleEditorHelp(2)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
stacking &amp; and fill stacking &amp; and fill
</a> </a>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
group by time group by time
</a> </a>
......
src/app/features/opentsdb/partials/query.editor.html
<div class="editor-row" style="margin-top: 10px;"> <div class="editor-row" style="margin-top: 10px;">
<div ng-repeat="target in panel.targets" <div ng-repeat="target in panel.targets"
class="grafana-target" class="tight-form"
ng-class="{'grafana-target-hidden': target.hide}" ng-class="{'tight-form-disabled': target.hide}"
ng-controller="OpenTSDBQueryCtrl" ng-controller="OpenTSDBQueryCtrl"
ng-init="init()"> ng-init="init()">
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list pull-right"> <ul class="tight-form-list pull-right">
<li class="grafana-target-segment"> <li class="tight-form-item">
<div class="dropdown"> <div class="dropdown">
<a class="pointer dropdown-toggle" <a class="pointer dropdown-toggle"
data-toggle="dropdown" data-toggle="dropdown"
...@@ -23,16 +23,16 @@ ...@@ -23,16 +23,16 @@
</ul> </ul>
</div> </div>
</li> </li>
<li class="grafana-target-segment last"> <li class="tight-form-item last">
<a class="pointer" tabindex="1" ng-click="removeDataQuery(target)"> <a class="pointer" tabindex="1" ng-click="removeDataQuery(target)">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
</li> </li>
</ul> </ul>
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li> <li>
<a class="grafana-target-segment" <a class="tight-form-item"
ng-click="target.hide = !target.hide; get_data();" ng-click="target.hide = !target.hide; get_data();"
role="menuitem"> role="menuitem">
<i class="fa fa-eye"></i> <i class="fa fa-eye"></i>
...@@ -40,10 +40,10 @@ ...@@ -40,10 +40,10 @@
</li> </li>
</ul> </ul>
<ul class="grafana-segment-list" role="menu"> <ul class="tight-form-list" role="menu">
<li> <li>
<input type="text" <input type="text"
class="grafana-target-segment-input" class="tight-form-input"
ng-model="target.metric" ng-model="target.metric"
spellcheck='false' spellcheck='false'
bs-typeahead="suggestMetrics" bs-typeahead="suggestMetrics"
...@@ -57,12 +57,12 @@ ...@@ -57,12 +57,12 @@
<i class="fa fa-warning"></i> <i class="fa fa-warning"></i>
</a> </a>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Aggregator Aggregator
</li> </li>
<li> <li>
<select ng-model="target.aggregator" <select ng-model="target.aggregator"
class="grafana-target-segment-input input-small" class="tight-form-input input-small"
ng-options="agg for agg in aggregators" ng-options="agg for agg in aggregators"
ng-change="targetBlur()"> ng-change="targetBlur()">
</select> </select>
...@@ -73,28 +73,28 @@ ...@@ -73,28 +73,28 @@
</a> </a>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Rate: Rate:
<input type="checkbox" <input type="checkbox"
class="grafana-target-option-checkbox" class="tight-form-checkbox"
ng-model="target.shouldComputeRate" ng-model="target.shouldComputeRate"
ng-change="targetBlur()" ng-change="targetBlur()"
> >
</li> </li>
<li class="grafana-target-segment" ng-hide="!target.shouldComputeRate"> <li class="tight-form-item" ng-hide="!target.shouldComputeRate">
Counter: Counter:
<input type="checkbox" <input type="checkbox"
class="grafana-target-option-checkbox" class="tight-form-checkbox"
ng-disabled="!target.shouldComputeRate" ng-disabled="!target.shouldComputeRate"
ng-model="target.isCounter" ng-model="target.isCounter"
ng-change="targetBlur()"> ng-change="targetBlur()">
</li> </li>
<li class="grafana-target-segment" ng-hide="!target.isCounter"> <li class="tight-form-item" ng-hide="!target.isCounter">
Counter Max: Counter Max:
</li> </li>
<li ng-hide="!target.isCounter"> <li ng-hide="!target.isCounter">
<input type="text" <input type="text"
class="grafana-target-segment-input input-medium" class="tight-form-input input-medium"
ng-disabled="!target.shouldComputeRate" ng-disabled="!target.shouldComputeRate"
ng-model="target.counterMax" ng-model="target.counterMax"
spellcheck='false' spellcheck='false'
...@@ -102,12 +102,12 @@ ...@@ -102,12 +102,12 @@
ng-blur="targetBlur()" ng-blur="targetBlur()"
/> />
</li> </li>
<li class="grafana-target-segment" ng-hide="!target.isCounter"> <li class="tight-form-item" ng-hide="!target.isCounter">
Counter Reset Value: Counter Reset Value:
</li> </li>
<li ng-hide="!target.isCounter"> <li ng-hide="!target.isCounter">
<input type="text" <input type="text"
class="grafana-target-segment-input input-medium" class="tight-form-input input-medium"
ng-disabled="!target.shouldComputeRate" ng-disabled="!target.shouldComputeRate"
ng-model="target.counterResetValue" ng-model="target.counterResetValue"
spellcheck='false' spellcheck='false'
...@@ -115,12 +115,12 @@ ...@@ -115,12 +115,12 @@
ng-blur="targetBlur()" ng-blur="targetBlur()"
/> />
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Alias: Alias:
</li> </li>
<li> <li>
<input type="text" <input type="text"
class="grafana-target-segment-input input-medium" class="tight-form-input input-medium"
ng-model="target.alias" ng-model="target.alias"
spellcheck='false' spellcheck='false'
placeholder="series alias" placeholder="series alias"
...@@ -134,13 +134,13 @@ ...@@ -134,13 +134,13 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list" role="menu"> <ul class="tight-form-list" role="menu">
<li class="grafana-target-segment"> <li class="tight-form-item">
Downsample: Downsample:
<input type="checkbox" <input type="checkbox"
class="grafana-target-option-checkbox" class="tight-form-checkbox"
ng-model="target.shouldDownsample" ng-model="target.shouldDownsample"
ng-change="targetBlur(target)" ng-change="targetBlur(target)"
> >
...@@ -148,7 +148,7 @@ ...@@ -148,7 +148,7 @@
<li ng-hide="!target.shouldDownsample"> <li ng-hide="!target.shouldDownsample">
<input type="text" <input type="text"
class="input-small grafana-target-segment-input" class="input-small tight-form-input"
ng-disabled="!target.shouldDownsample" ng-disabled="!target.shouldDownsample"
ng-model="target.downsampleInterval" ng-model="target.downsampleInterval"
ng-change="targetBlur()" ng-change="targetBlur()"
...@@ -156,29 +156,29 @@ ...@@ -156,29 +156,29 @@
> >
</li> </li>
<li class="grafana-target-segment" ng-hide="!target.shouldDownsample"> <li class="tight-form-item" ng-hide="!target.shouldDownsample">
Aggregator Aggregator
</li> </li>
<li ng-hide="!target.shouldDownsample"> <li ng-hide="!target.shouldDownsample">
<select ng-model="target.downsampleAggregator" <select ng-model="target.downsampleAggregator"
class="grafana-target-segment-input input-small" class="tight-form-input input-small"
ng-options="agg for agg in aggregators" ng-options="agg for agg in aggregators"
ng-change="targetBlur()"> ng-change="targetBlur()">
</select> </select>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Tags: Tags:
</li> </li>
<li ng-repeat="(key, value) in target.tags track by $index" class="grafana-target-segment"> <li ng-repeat="(key, value) in target.tags track by $index" class="tight-form-item">
{{key}}&nbsp;=&nbsp;{{value}} {{key}}&nbsp;=&nbsp;{{value}}
<a ng-click="removeTag(key)"> <a ng-click="removeTag(key)">
<i class="fa fa-remove"></i> <i class="fa fa-remove"></i>
</a> </a>
</li> </li>
<li class="grafana-target-segment" ng-hide="addTagMode"> <li class="tight-form-item" ng-hide="addTagMode">
<a ng-click="addTag()"> <a ng-click="addTag()">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</a> </a>
...@@ -186,14 +186,14 @@ ...@@ -186,14 +186,14 @@
<li ng-show="addTagMode"> <li ng-show="addTagMode">
<input type="text" <input type="text"
class="input-small grafana-target-segment-input" class="input-small tight-form-input"
spellcheck='false' spellcheck='false'
bs-typeahead="suggestTagKeys" bs-typeahead="suggestTagKeys"
data-min-length=0 data-items=100 data-min-length=0 data-items=100
ng-model="target.currentTagKey" ng-model="target.currentTagKey"
placeholder="key"> placeholder="key">
<input type="text" <input type="text"
class="input-small grafana-target-segment-input" class="input-small tight-form-input"
spellcheck='false' spellcheck='false'
bs-typeahead="suggestTagValues" bs-typeahead="suggestTagValues"
data-min-length=0 data-items=100 data-min-length=0 data-items=100
......
src/app/features/panellinkeditor/module.html
...@@ -2,41 +2,41 @@ ...@@ -2,41 +2,41 @@
<div class="section"> <div class="section">
<h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5> <h5>Drilldown / detail link<tip>These links appear in the dropdown menu in the panel menu. </tip></h5>
<div class="grafana-target" ng-repeat="link in panel.links"j> <div class="tight-form" ng-repeat="link in panel.links"j>
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment"> <li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i> <i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
</li> </li>
<li class="grafana-target-segment">title</li> <li class="tight-form-item">title</li>
<li> <li>
<input type="text" ng-model="link.title" class="input-medium grafana-target-segment-input"> <input type="text" ng-model="link.title" class="input-medium tight-form-input">
</li> </li>
<li class="grafana-target-segment">type</li> <li class="tight-form-item">type</li>
<li> <li>
<select class="input-medium grafana-target-segment-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select> <select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboard','absolute']"></select>
</li> </li>
<li class="grafana-target-segment" ng-show="link.type === 'dashboard'">dashboard</li> <li class="tight-form-item" ng-show="link.type === 'dashboard'">dashboard</li>
<li ng-show="link.type === 'dashboard'"> <li ng-show="link.type === 'dashboard'">
<input type="text" <input type="text"
ng-model="link.dashboard" ng-model="link.dashboard"
bs-typeahead="searchDashboards" bs-typeahead="searchDashboards"
class="input-large grafana-target-segment-input"> class="input-large tight-form-input">
</li> </li>
<li class="grafana-target-segment" ng-show="link.type === 'absolute'">url</li> <li class="tight-form-item" ng-show="link.type === 'absolute'">url</li>
<li ng-show="link.type === 'absolute'"> <li ng-show="link.type === 'absolute'">
<input type="text" ng-model="link.url" class="input-large grafana-target-segment-input"> <input type="text" ng-model="link.url" class="input-large tight-form-input">
</li> </li>
<li class="grafana-target-segment">params <li class="tight-form-item">params
<tip>Use var-variableName=value to pass templating variables.</tip> <tip>Use var-variableName=value to pass templating variables.</tip>
</li> </li>
<li> <li>
<input type="text" ng-model="link.params" class="input-medium grafana-target-segment-input"> <input type="text" ng-model="link.params" class="input-medium tight-form-input">
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
......
src/app/panels/graph/styleEditor.html
...@@ -66,14 +66,14 @@ ...@@ -66,14 +66,14 @@
<div class="section"> <div class="section">
<h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5> <h5>Series specific overrides <tip>Regex match example: /server[0-3]/i </tip></h5>
<div> <div>
<div class="grafana-target" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl"> <div class="tight-form" ng-repeat="override in panel.seriesOverrides" ng-controller="SeriesOverridesCtrl">
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment"> <li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i> <i class="fa fa-remove pointer" ng-click="removeSeriesOverride(override)"></i>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
alias or regex alias or regex
</li> </li>
<li> <li>
...@@ -82,9 +82,9 @@ ...@@ -82,9 +82,9 @@
bs-typeahead="getSeriesNames" bs-typeahead="getSeriesNames"
ng-blur="render()" ng-blur="render()"
data-min-length=0 data-items=100 data-min-length=0 data-items=100
class="input-medium grafana-target-segment-input" > class="input-medium tight-form-input" >
</li> </li>
<li class="grafana-target-segment" ng-repeat="option in currentOverrides"> <li class="tight-form-item" ng-repeat="option in currentOverrides">
<i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i> <i class="pointer fa fa-remove" ng-click="removeOverride(option)"></i>
{{option.name}}: {{option.value}} {{option.name}}: {{option.value}}
</li> </li>
......
src/app/panels/singlestat/editor.html
<div class="editor-row"> <div class="editor-row">
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="grafana-target"> <div class="tight-form">
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Big value</strong> <strong>Big value</strong>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Prefix Prefix
</li> </li>
<li> <li>
<input type="text" class="input-small grafana-target-segment-input" <input type="text" class="input-small tight-form-input"
ng-model="panel.prefix" ng-change="render()" ng-model-onblur> ng-model="panel.prefix" ng-change="render()" ng-model-onblur>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Value Value
</li> </li>
<li> <li>
<select class="input-small grafana-target-segment-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select> <select class="input-small tight-form-input" ng-model="panel.valueName" ng-options="f for f in ['min','max','avg', 'current', 'total']" ng-change="render()"></select>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Postfix Postfix
</li> </li>
<li> <li>
<input type="text" class="input-small grafana-target-segment-input last" <input type="text" class="input-small tight-form-input last"
ng-model="panel.postfix" ng-change="render()" ng-model-onblur> ng-model="panel.postfix" ng-change="render()" ng-model-onblur>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Font size</strong> <strong>Font size</strong>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Prefix Prefix
</li> </li>
<li> <li>
<select class="input-small grafana-target-segment-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select> <select class="input-small tight-form-input" style="width: 99px;" ng-model="panel.prefixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Value Value
</li> </li>
<li> <li>
<select class="input-small grafana-target-segment-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select> <select class="input-small tight-form-input" ng-model="panel.valueFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Postfix Postfix
</li> </li>
<li> <li>
<select class="input-small grafana-target-segment-input last" style="width: 99px" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select> <select class="input-small tight-form-input last" style="width: 99px" ng-model="panel.postfixFontSize" ng-options="f for f in fontSizes" ng-change="render()"></select>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Unit</strong> <strong>Unit</strong>
</li> </li>
<li class="dropdown" style="width: 130px;" <li class="dropdown" style="width: 130px;"
...@@ -74,39 +74,39 @@ ...@@ -74,39 +74,39 @@
<div class="editor-row"> <div class="editor-row">
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="grafana-target"> <div class="tight-form">
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Coloring</strong> <strong>Coloring</strong>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Background&nbsp; Background&nbsp;
<input class="cr1" id="panel.colorBackground" type="checkbox" <input class="cr1" id="panel.colorBackground" type="checkbox"
ng-model="panel.colorBackground" ng-checked="panel.colorBackground" ng-change="render()"> ng-model="panel.colorBackground" ng-checked="panel.colorBackground" ng-change="render()">
<label for="panel.colorBackground" class="cr1"></label> <label for="panel.colorBackground" class="cr1"></label>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Value&nbsp; Value&nbsp;
<input class="cr1" id="panel.colorValue" type="checkbox" <input class="cr1" id="panel.colorValue" type="checkbox"
ng-model="panel.colorValue" ng-checked="panel.colorValue" ng-change="render()"> ng-model="panel.colorValue" ng-checked="panel.colorValue" ng-change="render()">
<label for="panel.colorValue" class="cr1"></label> <label for="panel.colorValue" class="cr1"></label>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Thresholds<tip>Comma seperated values</tip> Thresholds<tip>Comma seperated values</tip>
</li> </li>
<li> <li>
<input type="text" class="input-large grafana-target-segment-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input> <input type="text" class="input-large tight-form-input" ng-model="panel.thresholds" ng-blur="render()" placeholder="0,50,80"></input>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Colors Colors
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="panel.colors[0]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="panel.colors[1]" ng-change="render()" ></spectrum-picker>
<spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="panel.colors[2]" ng-change="render()" ></spectrum-picker>
</li> </li>
<li class="grafana-target-segment last"> <li class="tight-form-item last">
<a class="pointer" ng-click="invertColorOrder()">invert order</a> <a class="pointer" ng-click="invertColorOrder()">invert order</a>
</li> </li>
</ul> </ul>
...@@ -118,34 +118,34 @@ ...@@ -118,34 +118,34 @@
<div class="editor-row"> <div class="editor-row">
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="grafana-target"> <div class="tight-form">
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment" style="width: 80px"> <li class="tight-form-item" style="width: 80px">
<strong>Spark lines</strong> <strong>Spark lines</strong>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Show&nbsp; Show&nbsp;
<input class="cr1" id="panel.sparkline.show" type="checkbox" <input class="cr1" id="panel.sparkline.show" type="checkbox"
ng-model="panel.sparkline.show" ng-checked="panel.sparkline.show" ng-change="render()"> ng-model="panel.sparkline.show" ng-checked="panel.sparkline.show" ng-change="render()">
<label for="panel.sparkline.show" class="cr1"></label> <label for="panel.sparkline.show" class="cr1"></label>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Background mode&nbsp; Background mode&nbsp;
<input class="cr1" id="panel.sparkline.full" type="checkbox" <input class="cr1" id="panel.sparkline.full" type="checkbox"
ng-model="panel.sparkline.full" ng-checked="panel.sparkline.full" ng-change="render()"> ng-model="panel.sparkline.full" ng-checked="panel.sparkline.full" ng-change="render()">
<label for="panel.sparkline.full" class="cr1"></label> <label for="panel.sparkline.full" class="cr1"></label>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Line Color Line Color
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="panel.sparkline.lineColor" ng-change="render()" ></spectrum-picker>
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
Fill Color Fill Color
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker> <spectrum-picker ng-model="panel.sparkline.fillColor" ng-change="render()" ></spectrum-picker>
</li> </li>
</ul> </ul>
...@@ -157,27 +157,27 @@ ...@@ -157,27 +157,27 @@
<div class="editor-row"> <div class="editor-row">
<div class="section" style="margin-bottom: 20px"> <div class="section" style="margin-bottom: 20px">
<div class="grafana-target"> <div class="tight-form">
<div class="grafana-target-inner"> <div class="tight-form-row">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment"> <li class="tight-form-item">
<strong>Value to text mapping</strong> <strong>Value to text mapping</strong>
</li> </li>
<li class="grafana-target-segment" ng-repeat-start="map in panel.valueMaps"> <li class="tight-form-item" ng-repeat-start="map in panel.valueMaps">
<i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i> <i class="fa fa-remove pointer" ng-click="removeValueMap(map)"></i>
</li> </li>
<li> <li>
<input type="text" ng-model="map.value" placeholder="value" class="input-mini grafana-target-segment-input" ng-blur="render()"> <input type="text" ng-model="map.value" placeholder="value" class="input-mini tight-form-input" ng-blur="render()">
</li> </li>
<li class="grafana-target-segment"> <li class="tight-form-item">
<i class="fa fa-arrow-right"></i> <i class="fa fa-arrow-right"></i>
</li> </li>
<li ng-repeat-end> <li ng-repeat-end>
<input type="text" placeholder="text" ng-model="map.text" class="input-mini grafana-target-segment-input" ng-blur="render()"> <input type="text" placeholder="text" ng-model="map.text" class="input-mini tight-form-input" ng-blur="render()">
</li> </li>
<li> <li>
<a class="pointer grafana-target-segment" ng-click="addValueMap();"> <a class="pointer tight-form-item" ng-click="addValueMap();">
<i class="fa fa-plus"></i> <i class="fa fa-plus"></i>
</a> </a>
</li> </li>
......
src/app/partials/submenu.html
<div class="submenu-controls" ng-controller="SubmenuCtrl"> <div class="submenu-controls" ng-controller="SubmenuCtrl">
<div class="grafana-target"> <div class="tight-form">
<div class="grafana-target-inner" style="border-top: none"> <div class="tight-form-row" style="border-top: none">
<ul class="grafana-segment-list"> <ul class="tight-form-list">
<li class="grafana-target-segment"> <li class="tight-form-item">
<div class="dropdown"> <div class="dropdown">
<a class="pointer" data-toggle="dropdown"> <a class="pointer" data-toggle="dropdown">
<i class="fa fa-cog"></i> <i class="fa fa-cog"></i>
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
</li> </li>
</ul> </ul>
<ul class="grafana-segment-list" ng-if="dashboard.templating.enable"> <ul class="tight-form-list" ng-if="dashboard.templating.enable">
<li ng-repeat-start="variable in variables" class="grafana-target-segment template-param-name"> <li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
<span class="template-variable "> <span class="template-variable ">
${{variable.name}}: ${{variable.name}}:
</span> </span>
...@@ -27,8 +27,8 @@ ...@@ -27,8 +27,8 @@
</li> </li>
</ul> </ul>
<ul class="grafana-segment-list" ng-if="dashboard.annotations.enable"> <ul class="tight-form-list" ng-if="dashboard.annotations.enable">
<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}"> <li ng-repeat="annotation in dashboard.annotations.list" class="tight-form-item annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
<a ng-click="disableAnnotation(annotation)"> <a ng-click="disableAnnotation(annotation)">
<i class="annotation-color-icon fa fa-bolt"></i> <i class="annotation-color-icon fa fa-bolt"></i>
{{annotation.name}} {{annotation.name}}
......
src/css/less/tightform.less
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
} }
//.grafana-target-function { //.grafana-target-function {
.tight-form-item-func { .tight-form-func {
background: @grafanaTargetFuncBackground; background: @grafanaTargetFuncBackground;
> a { > a {
color: @grafanaTargetColor; color: @grafanaTargetColor;
...@@ -103,16 +103,16 @@ input[type=text].tight-form-func-param { ...@@ -103,16 +103,16 @@ input[type=text].tight-form-func-param {
} }
//input[type=text].grafana-target-text-input { //input[type=text].grafana-target-text-input {
// input[type=text].tight-form-input { input[type=text].tight-form-clear-input {
// padding: 8px 7px; padding: 8px 7px;
// border: none; border: none;
// margin: 0px; margin: 0px;
// background: transparent; background: transparent;
// float: left; float: left;
// color: @grafanaTargetColor; color: @grafanaTargetColor;
// border-radius: 0; border-radius: 0;
// border-right: 1px solid @grafanaTargetSegmentBorder; border-right: 1px solid @grafanaTargetSegmentBorder;
// } }
//[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input { //[type=text].grafana-target-segment-input, [type=number].grafana-target-segment-input {
[type=text].tight-form-input, [type=number].tight-form-input { [type=text].tight-form-input, [type=number].tight-form-input {
...@@ -126,9 +126,10 @@ input[type=text].tight-form-func-param { ...@@ -126,9 +126,10 @@ input[type=text].tight-form-func-param {
} }
} }
// input[type=checkbox].grafana-target-option-checkbox { //input[type=checkbox].grafana-target-option-checkbox {
// margin: 0; input[type=checkbox].tight-form-checkbox {
// } margin: 0;
}
select.tight-form-input { select.tight-form-input {
border: none; border: none;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment