Skip to content

N
nexpie-grafana-theme
Commit e17f56b4 by Torkel Ödegaard
Options

Final polish on panel & row repeats, #1888, still some missing places where… 

Final polish on panel & row repeats, #1888, still some missing places where scopedVars needs to be used
parent 32e0ce1b
Showing with 53 additions and 28 deletions
public/app/features/dashboard/partials/variableValueSelect.html
<span class="template-variable" ng-show="!variable.hideLabel" style="padding-right: 5px"> <span class="template-variable" ng-show="!variable.hideLabel" style="padding-right: 5px">
{{labelText}}: {{labelText}}:
</span> </span>
<a ng-click="show()" class="variable-value-link">
{{linkText}}
<i class="fa fa-caret-down"></i>
</a>
<div ng-if="selectorOpen" class="variable-value-dropdown"> <div style="position: relative; display: inline-block">
<div class="variable-search-wrapper"> <a ng-click="show()" class="variable-value-link">
<span style="position: relative;"> {{linkText}}
<input type="text" placeholder="Search values..." ng-keydown="keyDown($event)" give-focus="giveFocus" tabindex="1" ng-model="search.query" spellcheck='false' ng-change="queryChanged()" /> <i class="fa fa-caret-down"></i>
</span> </a>
</div>
<div ng-if="selectorOpen" class="variable-value-dropdown">
<div class="variable-search-wrapper">
<span style="position: relative;">
<input type="text" placeholder="Search values..." ng-keydown="keyDown($event)" give-focus="giveFocus" tabindex="1" ng-model="search.query" spellcheck='false' ng-change="queryChanged()" />
</span>
</div>
<div class="variable-options-container" ng-if="!query.tagcloud"> <div class="variable-options-container" ng-if="!query.tagcloud">
<a class="variable-option pointer" bindonce ng-repeat="option in search.options" <a class="variable-option pointer" bindonce ng-repeat="option in search.options"
ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)"> ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
<span >{{option.text}}</label> <span >{{option.text}}</label>
<span class="fa fa-fw variable-option-icon"></span> <span class="fa fa-fw variable-option-icon"></span>
</div> </a>
</a> </div>
</div> </div>
</div> </div>
public/app/partials/panelgeneral.html
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
Repeat Panel Repeat Panel
</li> </li>
<li> <li>
<select class="input-small tight-form-input" ng-model="panel.repeat" ng-options="f.name as f.name for f in dashboard.templating.list"> <select class="input-small tight-form-input last" ng-model="panel.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option> <option value=""></option>
</select> </select>
</li> </li>
......
public/app/partials/roweditor.html
<div class="gf-box-header"> <div class="gf-box-header">
<div class="gf-box-title"> <div class="gf-box-title">
<i class="fa fa-th-list"></i> <i class="fa fa-th-list"></i>
...@@ -16,24 +17,46 @@ ...@@ -16,24 +17,46 @@
<div class="gf-box-body"> <div class="gf-box-body">
<div class="editor-row" ng-if="editor.index == 0"> <div class="editor-row">
<div class="section"> <div class="section">
<h5>Row details</h5> <h5>Row details</h5>
<div class="editor-option"> <div class="tight-form">
<label class="small">Title</label><input type="text" class="input-medium" ng-model='row.title'></input> <ul class="tight-form-list">
</div> <li class="tight-form-item">
<div class="editor-option"> Title
<label class="small">Height</label><input type="text" class="input-mini" ng-model='row.height'></input> </li>
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model='row.title'></input>
</li>
<li class="tight-form-item">
Height
</li>
<li>
<input type="text" class="input-small tight-form-input" ng-model='row.height'></input>
</li>
<li class="tight-form-item">
<label class="checkbox-label" for="row.showTitle">Show Title</label>
<input class="cr1" id="row.showTitle" type="checkbox" ng-model="row.showTitle" ng-checked="row.showTitle">
<label for="row.showTitle" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
<editor-opt-bool text="Editable" model="row.editable"></editor-opt-bool>
<editor-opt-bool text="Show title" model="row.showTitle"></editor-opt-bool>
</div> </div>
<div class="section"> <div class="section">
<h5>Templating options</h5> <h5>Templating options</h5>
<div class="editor-option"> <div class="tight-form">
<label class="small">Repeat row</label> <ul class="tight-form-list">
<input type="text" class="input-medium" ng-model='row.repeat'></input> <li class="tight-form-item">
Repeat Row
</li>
<li>
<select class="input-small tight-form-input last" ng-model="row.repeat" ng-options="f.name as f.name for f in dashboard.templating.list">
<option value=""></option>
</select>
</li>
</ul>
<div class="clearfix"></div>
</div> </div>
</div> </div>
</div> </div>
......
public/css/less/submenu.less
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
.variable-value-dropdown { .variable-value-dropdown {
position: absolute; position: absolute;
top: 35px; top: 27px;
min-width: 150px; min-width: 150px;
max-height: 400px; max-height: 400px;
background: @grafanaPanelBackground; background: @grafanaPanelBackground;
......
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