Skip to content

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

finally figured out target editor design

parent 5da23f9b
Showing with 68 additions and 142 deletions
src/app/panels/graphite/editor.html
<div class="editor-row">
<style>
.table-top {
table-layout: fixed;
width: 100%;
}
.my-wrapper {
width: 100%;
overflow: hidden;
}
.grafana-segment-list {
display: block;
float: none;
position: relative;
white-space: nowrap;
}
.grafana-segment-list li {
display: inline-block;
float: none;
}
</style>
<div class="grafana-target" ng-repeat="target in panel.targets" ng-controller="GraphiteTargetCtrl" ng-init="init()">
<div class="grafana-target-inner-wrapper">
<div class="grafana-target-inner">
<table class="table-top">
<tr>
<td>
<span class="grafana-target-onoff">
<i class="icon-eye-open"></i>
</span>
</td>
<input type="text"
<ul class="grafana-target-controls">
<li>
<a class="pointer" tabindex="1" ng-click="showTextEditor = true">
<i class="icon-pencil"></i>
</a>
</li>
<li>
<a class="pointer" tabindex="1" ng-click="enableTextEditor()">
<i class="icon-cog"></i>
</a>
</li>
<li>
<a class="pointer" tabindex="1" ng-click="removeTarget(target)">
<i class="icon-remove"></i>
</a>
</li>
</ul>
<ul class="grafana-target-controls-left">
<li>
<a class="grafana-target-segment" ng-click="hideit()" role="menuitem">
<i class="icon-eye-open"></i>
</a>
</li>
</ul>
<!-- <input type="text"
class="grafana-target-text-input"
ng-model="target.target"
focus-me="showTextEditor"
ng-blur="showTextEditor = false"
ng-model-onblur ng-change="targetChanged()"
ng-show="showTextEditor" />
<td style="width: 100%">
<div class="my-wrapper">
-->
<ul class="grafana-segment-list" role="menu" ng-hide="showTextEditor">
<li class="dropdown" ng-repeat="segment in segments" role="menuitem">
<a tabindex="1"
......@@ -55,16 +52,17 @@
</li>
</ul>
</li>
<li ng-repeat="func in functions" class="dropdown">
<a class="grafana-target-segment dropdown-toggle" bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="top">{{func.text}}</a>
<i class="icon-long-arrow-right"></i>
<li ng-repeat="func in functions">
<a class="grafana-target-segment grafana-target-function dropdown-toggle" bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="bottom">
{{func.text}}
</a>
</li>
<li class="dropdown">
<a class="grafana-target-segment dropdown-toggle"
<a class="grafana-target-segment grafana-target-function dropdown-toggle"
data-toggle="dropdown"
tabindex="1"
ng-click="addFunction">
add function
<i class="icon-plus"></i>
</a>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="funcDef in funcDefs" role="menuitem">
......@@ -77,79 +75,11 @@
</ul>
</li>
</ul>
</div>
</td>
<td style="width: 90px;">
<ul class="grafana-target-controls" style="width: 90px;">
<li>
<a class="pointer" tabindex="1" ng-click="showTextEditor = true">
<i class="icon-pencil"></i>
</a>
</li>
<li>
<a class="pointer" tabindex="1" ng-click="enableTextEditor()">
<i class="icon-cog"></i>
</a>
</li>
<li>
<a class="pointer" tabindex="1" ng-click="removeTarget(target)">
<i class="icon-remove"></i>
</a>
</li>
</ul>
</td>
</tr>
</table>
<div class="clearfix"></div>
</div>
</div>
<div class="grafana-target-func-panel-wrapper" ng-if="false">
<div class="grafana-target-func-panel">
<span class="grafana-target-func-panel-icon">
</span>
<ul>
<li ng-repeat="func in functions">
<a bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="top">{{func.text}}</a>
<i class="icon-long-arrow-right"></i>
</li>
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
tabindex="1"
ng-click="addFunction">
add function
</a>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="funcDef in funcDefs" role="menuitem">
<a href="javascript:void(0)"
tabindex="1"
ng-click="addFunction(funcDef)">
{{funcDef.name}}
</a>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<!-- <div class="row-fluid">
<div class="span12">
<span ng-if="!editMode">
{{target.target}}
</span>
<input ng-if="editMode" type="text" ng-model="target.target" class="input-large" style="width:100%" ng-model-onblur ng-change="targetChanged()" bs-typeahead="typeAheadSource" data-min-length=0 />
<span ng-if="!editMode">
<i ng-click="edit()" class="pointer icon-edit" style="padding: 0 7px;"></i>
<i ng-click="panel.targets = _.without(panel.targets, target)" class="pointer icon-remove" style="padding: 0 7px;"></i>
</span>
</div>
</div> -->
</div>
<div class="row-fluid" style="margin-top: 20px">
......
src/css/bootstrap.dark.min.css
This source diff could not be displayed because it is too large. You can view the blob instead.
src/vendor/bootstrap/less/grafana.less
......@@ -103,22 +103,27 @@
.grafana-target-inner-wrapper {
border-top: 1px solid #444444;
border-bottom: 1px solid #444444;
width: 100%;
}
.grafana-target-inner {
border-top: 1px solid black;
border-bottom: 1px solid black;
background: #202020;
width: 100%;
}
.grafana-target-onoff {
float: left;
display: inline-block;
padding: 5px 7px;
display: inline-block;
}
.grafana-segment-list {
list-style: none;
margin: 0;
float: left;
margin-right: 90px;
margin-left: 30px;
>li {
float: left;
}
......@@ -128,30 +133,51 @@
padding: 5px 7px;
display: inline-block;
font-weight: normal;
border-left: 1px solid #050505;
border: 1px solid #050505;
color: #c8c8c8;
display: inline-block;
&:hover {
&:hover, &:focus {
text-decoration: none;
}
&:focus {
text-decoration: none;
&:hover {
background: #282828;
}
}
.grafana-target-function {
background: #303030;
&:hover {
background: #383838;
}
}
.grafana-target-controls-left {
list-style: none;
float: left;
width: 30px;
margin: 0px;
}
.grafana-target-controls {
width: 90px;
float: right;
list-style: none;
margin: 0;
>li {
float: left;
display: inline-block;
white-space: nowrap;
}
a {
padding: 5px 7px;
position: relative;
top: 5px;
color: #c8c8c8;
&:hover, &:focus {
text-decoration: none;
}
}
}
......@@ -168,37 +194,6 @@ input[type=text].grafana-target-text-input {
padding: 0; margin: 0;
}
.grafana-target-func-panel-wrapper {
border-bottom: 1px;
border-bottom: 1px solid #444444;
}
.grafana-target-func-panel {
background: #202020;
border-top: 1px solid black;
border-bottom: 1px solid black;
ul {
list-style: none;
margin: 0;
>li, li.dropdown {
float: left;
padding: 2px 5px;
>i {
padding-left: 5px;
postition: relative;
}
}
}
}
.grafana-target-func-panel-icon {
float: left;
padding: 12px 14px;
}
input[type=text].func-param {
border: none;
background: inherit;
......@@ -220,6 +215,7 @@ input[type=text].func-param {
text-align: center;
border-bottom: 1px solid #353a3e;
padding: 2px 5px;
white-space: nowrap;
}
.editor-row {
padding: 5px;
......
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