Commit a4adec42 by Torkel Ödegaard

worked on filter panel styling

parent 5995ae6f
......@@ -6,9 +6,10 @@
.filter-panel-filter {
display:inline-block;
vertical-align: top;
padding: 5px 5px 0px 5px;
padding: 5px 10px 0px 10px;
margin: 0px 5px;
background-color: #444;
border-left: 1px solid #111;
border-right: 1px solid #111;
}
.filter-panel-filter ul {
margin-bottom: 3px;
......@@ -25,7 +26,7 @@
}
.add-filter-action {
position: relative;
top: 3px;
top: 4px;
}
.filter-mandate {
text-decoration: underline;
......@@ -50,9 +51,14 @@
<ul class="unstyled">
<li ng-if="filter.name" class="dropdown">
{{filter.name}} :
<a bs-dropdown="filter.options">
'All'
<a class="dropdown-toggle" data-toggle="dropdown">
{{filter.current.text}}
</a>
<ul class="dropdown-menu">
<li ng-repeat="option in filter.options">
<a ng-click="filter.current = option">{{option.text}}</a>
</li>
</ul>
</li>
</ul>
</div>
......@@ -60,10 +66,15 @@
<form ng-show="filter.editing">
<ul class="unstyled">
<li>
<strong>name</strong> : <input type='text' ng-model="filter.name">
<strong>name</strong>:<br/>
<input type='text' ng-model="filter.name">
</li>
<li>
<strong>filter.query</strong> : <input type='text' ng-model="filter.query">
<strong>filter.query</strong>:<br/>
<input type='text' ng-model="filter.query">
</li>
<li>
<strong>Include All</strong> : <input type='checkbox' ng-model="filter.includeAll">
</li>
</ul>
<div>
......
......@@ -38,7 +38,13 @@ function (angular, app, _) {
graphiteSrv.metricFindQuery(filter.query)
.then(function (results) {
filter.editing=undefined;
filter.options = results;
filter.options = _.map(results, function(node) {
return { text: node.text, value: node.text };
});
if (filter.includeAll) {
filter.options.unshift({text: 'All', value: '*'});
}
filter.current = filter.options[0];
});
};
......@@ -47,7 +53,6 @@ function (angular, app, _) {
type : 'filter',
name : 'filter name',
editing : true,
value : '*',
query : 'metric.path.query.*',
});
};
......
<!-- is there a better way to repeat without actually affecting the page? -->
<nil ng-repeat="pulldown in dashboard.current.pulldowns" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
<div class="filter-pulldown" ng-repeat="pulldown in dashboard.current.pulldowns" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
<div class="top-row-close pointer pull-left" ng-click="toggle_pulldown(pulldown);dismiss();" bs-tooltip="'Toggle '+pulldown.type" data-placement="bottom">
<span class="small">{{pulldown.type}}</span>
<i class="small" ng-class="{'icon-caret-left':pulldown.collapse,'icon-caret-right':!pulldown.collapse}"></i>
<i class="small icon-star" ng-show="row.notice && pulldown.collapse"></i>
<span class="small"><strong>{{pulldown.type}}</strong></span>
</div>
<div class="top-row-open" ng-hide="pulldown.collapse">
<kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
</div>
</nil>
<div class="clearfix bgNav" ></div>
</div>
<div class="clearfix"></div>
<div class="container-fluid main" ng-class="{'grafana-dashboard-hide-controls': dashboard.current.hideControls}">
<div class="row-fluid">
<div class="row-fluid container" style="margin-top:10px; width:98%">
......
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -546,7 +546,6 @@ angular.module('$strap.directives').directive('bsPopover', [
$('body').on('keyup', function (ev) {
if (ev.keyCode === 27) {
$('.popover.in').each(function () {
debugger;
$(this).popover('hide');
});
}
......
......@@ -30,9 +30,19 @@
}
}
.filter-pulldown {
background: #444;
overflow: hidden;
border-top: 1px solid #111;
border-bottom: 1px solid #111;
}
.top-row-open {
float: left;
padding: 0 10px;
padding: 0px;
}
.top-row-open {
background: none;
}
.panelCont {
......
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