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"> <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" ng-repeat="target in panel.targets" ng-controller="GraphiteTargetCtrl" ng-init="init()">
<div class="grafana-target-inner-wrapper"> <div class="grafana-target-inner-wrapper">
<div class="grafana-target-inner"> <div class="grafana-target-inner">
<table class="table-top"> <ul class="grafana-target-controls">
<tr> <li>
<td> <a class="pointer" tabindex="1" ng-click="showTextEditor = true">
<span class="grafana-target-onoff"> <i class="icon-pencil"></i>
<i class="icon-eye-open"></i> </a>
</span> </li>
</td> <li>
<input type="text" <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" class="grafana-target-text-input"
ng-model="target.target" ng-model="target.target"
focus-me="showTextEditor" focus-me="showTextEditor"
ng-blur="showTextEditor = false" ng-blur="showTextEditor = false"
ng-model-onblur ng-change="targetChanged()" ng-model-onblur ng-change="targetChanged()"
ng-show="showTextEditor" /> ng-show="showTextEditor" />
<td style="width: 100%"> -->
<div class="my-wrapper">
<ul class="grafana-segment-list" role="menu" ng-hide="showTextEditor"> <ul class="grafana-segment-list" role="menu" ng-hide="showTextEditor">
<li class="dropdown" ng-repeat="segment in segments" role="menuitem"> <li class="dropdown" ng-repeat="segment in segments" role="menuitem">
<a tabindex="1" <a tabindex="1"
...@@ -55,16 +52,17 @@ ...@@ -55,16 +52,17 @@
</li> </li>
</ul> </ul>
</li> </li>
<li ng-repeat="func in functions" class="dropdown"> <li ng-repeat="func in functions">
<a class="grafana-target-segment dropdown-toggle" bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="top">{{func.text}}</a> <a class="grafana-target-segment grafana-target-function dropdown-toggle" bs-popover="'app/panels/graphite/funcEditor.html'" data-placement="bottom">
<i class="icon-long-arrow-right"></i> {{func.text}}
</a>
</li> </li>
<li class="dropdown"> <li class="dropdown">
<a class="grafana-target-segment dropdown-toggle" <a class="grafana-target-segment grafana-target-function dropdown-toggle"
data-toggle="dropdown" data-toggle="dropdown"
tabindex="1" tabindex="1"
ng-click="addFunction"> ng-click="addFunction">
add function <i class="icon-plus"></i>
</a> </a>
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li ng-repeat="funcDef in funcDefs" role="menuitem"> <li ng-repeat="funcDef in funcDefs" role="menuitem">
...@@ -77,79 +75,11 @@ ...@@ -77,79 +75,11 @@
</ul> </ul>
</li> </li>
</ul> </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 class="clearfix"></div>
</div> </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>
<div class="row-fluid" style="margin-top: 20px"> <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 @@ ...@@ -103,22 +103,27 @@
.grafana-target-inner-wrapper { .grafana-target-inner-wrapper {
border-top: 1px solid #444444; border-top: 1px solid #444444;
border-bottom: 1px solid #444444; border-bottom: 1px solid #444444;
width: 100%;
} }
.grafana-target-inner { .grafana-target-inner {
border-top: 1px solid black; border-top: 1px solid black;
border-bottom: 1px solid black; border-bottom: 1px solid black;
background: #202020; background: #202020;
width: 100%;
} }
.grafana-target-onoff { .grafana-target-onoff {
float: left; display: inline-block;
padding: 5px 7px; padding: 5px 7px;
display: inline-block;
} }
.grafana-segment-list { .grafana-segment-list {
list-style: none; list-style: none;
margin: 0; margin: 0;
float: left; margin-right: 90px;
margin-left: 30px;
>li { >li {
float: left; float: left;
} }
...@@ -128,30 +133,51 @@ ...@@ -128,30 +133,51 @@
padding: 5px 7px; padding: 5px 7px;
display: inline-block; display: inline-block;
font-weight: normal; font-weight: normal;
border-left: 1px solid #050505; border: 1px solid #050505;
color: #c8c8c8; color: #c8c8c8;
display: inline-block;
&:hover { &:hover, &:focus {
text-decoration: none; text-decoration: none;
} }
&:focus { &:hover {
text-decoration: none; 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 { .grafana-target-controls {
width: 90px;
float: right; float: right;
list-style: none; list-style: none;
margin: 0; margin: 0;
>li { >li {
float: left; display: inline-block;
white-space: nowrap;
} }
a { a {
padding: 5px 7px; padding: 5px 7px;
position: relative; position: relative;
top: 5px; top: 5px;
color: #c8c8c8;
&:hover, &:focus {
text-decoration: none;
}
} }
} }
...@@ -168,37 +194,6 @@ input[type=text].grafana-target-text-input { ...@@ -168,37 +194,6 @@ input[type=text].grafana-target-text-input {
padding: 0; margin: 0; 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 { input[type=text].func-param {
border: none; border: none;
background: inherit; background: inherit;
...@@ -220,6 +215,7 @@ input[type=text].func-param { ...@@ -220,6 +215,7 @@ input[type=text].func-param {
text-align: center; text-align: center;
border-bottom: 1px solid #353a3e; border-bottom: 1px solid #353a3e;
padding: 2px 5px; padding: 2px 5px;
white-space: nowrap;
} }
.editor-row { .editor-row {
padding: 5px; 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