mirror of
https://github.com/grafana/grafana.git
synced 2025-02-11 16:15:42 -06:00
finally figured out target editor design
This commit is contained in:
Torkel Ödegaard
parent
5da23f9b81
commit
037837852f
@ -1,86 +1,9 @@
|
||||
<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"
|
||||
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"
|
||||
class="grafana-target-segment dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
ng-click="getAltSegments($index)"
|
||||
focus-me="segment.focus"
|
||||
ng-bind-html-unsafe="segment.html">
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li ng-repeat="altSegment in altSegments" role="menuitem">
|
||||
<a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html-unsafe="altSegment.html"></a>
|
||||
</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>
|
||||
<li class="dropdown">
|
||||
<a class="grafana-target-segment 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>
|
||||
</td>
|
||||
<td style="width: 90px;">
|
||||
<ul class="grafana-target-controls" style="width: 90px;">
|
||||
<ul class="grafana-target-controls">
|
||||
<li>
|
||||
<a class="pointer" tabindex="1" ng-click="showTextEditor = true">
|
||||
<i class="icon-pencil"></i>
|
||||
@ -97,29 +20,49 @@
|
||||
</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">
|
||||
<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>
|
||||
|
||||
</span>
|
||||
<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" />
|
||||
-->
|
||||
<ul class="grafana-segment-list" role="menu" ng-hide="showTextEditor">
|
||||
<li class="dropdown" ng-repeat="segment in segments" role="menuitem">
|
||||
<a tabindex="1"
|
||||
class="grafana-target-segment dropdown-toggle"
|
||||
data-toggle="dropdown"
|
||||
ng-click="getAltSegments($index)"
|
||||
focus-me="segment.focus"
|
||||
ng-bind-html-unsafe="segment.html">
|
||||
</a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li ng-repeat="altSegment in altSegments" role="menuitem">
|
||||
<a href="javascript:void(0)" tabindex="1" ng-click="setSegment($index, $parent.$index)" ng-bind-html-unsafe="altSegment.html"></a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<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>
|
||||
<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="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">
|
||||
@ -132,24 +75,11 @@
|
||||
</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">
|
||||
|
||||
2
src/css/bootstrap.dark.min.css
vendored
2
src/css/bootstrap.dark.min.css
vendored
File diff suppressed because one or more lines are too long
72
src/vendor/bootstrap/less/grafana.less
vendored
72
src/vendor/bootstrap/less/grafana.less
vendored
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user