public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ux(): redesign of axis & grid forms

Browse Source
This commit is contained in:
Torkel Ödegaard
2016-03-29 12:32:40 +02:00
parent 0c21d2c047
commit 32c8f495ab
3 changed files with 228 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/core/directives/dropdown_typeahead.js
+114
View File
@@ -119,4 +119,118 @@ function (_, $, coreModule) {
}
};
});
coreModule.default.directive('dropdownTypeahead2', function($compile) {
var inputTemplate = '<input type="text"'+
' class="gf-form-input"' +
' spellcheck="false" style="display:none"></input>';
var buttonTemplate = '<a class="gf-form-input dropdown-toggle"' +
' tabindex="1" gf-dropdown="menuItems" data-toggle="dropdown"' +
' data-placement="top"><i class="fa fa-plus"></i></a>';
return {
scope: {
menuItems: "=dropdownTypeahead2",
dropdownTypeaheadOnSelect: "&dropdownTypeaheadOnSelect",
model: '=ngModel'
},
link: function($scope, elem, attrs) {
var $input = $(inputTemplate);
var $button = $(buttonTemplate);
$input.appendTo(elem);
$button.appendTo(elem);
if (attrs.linkText) {
$button.html(attrs.linkText);
}
if (attrs.ngModel) {
$scope.$watch('model', function(newValue) {
_.each($scope.menuItems, function(item) {
_.each(item.submenu, function(subItem) {
if (subItem.value === newValue) {
$button.html(subItem.text);
}
});
});
});
}
var typeaheadValues = _.reduce($scope.menuItems, function(memo, value, index) {
if (!value.submenu) {
value.click = 'menuItemSelected(' + index + ')';
memo.push(value.text);
} else {
_.each(value.submenu, function(item, subIndex) {
item.click = 'menuItemSelected(' + index + ',' + subIndex + ')';
memo.push(value.text + ' ' + item.text);
});
}
return memo;
}, []);
$scope.menuItemSelected = function(index, subIndex) {
var menuItem = $scope.menuItems[index];
var payload = {$item: menuItem};
if (menuItem.submenu && subIndex !== void 0) {
payload.$subItem = menuItem.submenu[subIndex];
}
$scope.dropdownTypeaheadOnSelect(payload);
};
$input.attr('data-provide', 'typeahead');
$input.typeahead({
source: typeaheadValues,
minLength: 1,
items: 10,
updater: function (value) {
var result = {};
_.each($scope.menuItems, function(menuItem) {
_.each(menuItem.submenu, function(submenuItem) {
if (value === (menuItem.text + ' ' + submenuItem.text)) {
result.$subItem = submenuItem;
result.$item = menuItem;
}
});
});
if (result.$item) {
$scope.$apply(function() {
$scope.dropdownTypeaheadOnSelect(result);
});
}
$input.trigger('blur');
return '';
}
});
$button.click(function() {
$button.hide();
$input.show();
$input.focus();
});
$input.keyup(function() {
elem.toggleClass('open', $input.val() === '');
});
$input.blur(function() {
$input.hide();
$input.val('');
$button.show();
$button.focus();
// clicking the function dropdown menu wont
// work if you remove class at once
setTimeout(function() {
elem.removeClass('open');
}, 200);
});
$compile(elem.contents())($scope);
}
};
});
});
public/app/plugins/panel/graph/axisEditor.html
+97 -148
View File
@@ -1,157 +1,106 @@
<div class="editor-row gf-form-group">
<div class="section">
<h5 class="section-heading">Left Y</h5>
<div class="editor-row">
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Left Y
</li>
<li class="tight-form-item" style="width: 40px">
Unit
</li>
<li class="dropdown" style="width: 140px;"
ng-model="ctrl.panel.y_formats[0]"
dropdown-typeahead="ctrl.unitFormats"
dropdown-typeahead-on-select="ctrl.setUnitFormat(0, $subItem)">
</li>
<li class="tight-form-item">
Scale type
</li>
<li>
<select class="input-small tight-form-input" style="width: 113px" ng-model="ctrl.panel.grid.leftLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
</li>
<li class="tight-form-item">
Label
</li>
<li>
<input type="text" class="input-small tight-form-input last"
ng-model="ctrl.panel.leftYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.leftShow" on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-5">Unit</label>
<div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[0]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(0, $subItem)"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<i class="fa fa-remove invisible"></i>
</li>
<li class="tight-form-item">
Y-Max
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="ctrl.panel.grid.leftMax"
ng-change="ctrl.render()" ng-model-onblur>
</li>
<li class="tight-form-item" style="width: 115px; text-align: right;">
Y-Min
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto" style="width: 113px;"
empty-to-null ng-model="ctrl.panel.grid.leftMin"
ng-change="ctrl.render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form">
<label class="gf-form-label width-5">Scale</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.grid.leftLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Right Y
</li>
<li class="tight-form-item" style="width: 40px">
Unit
</li>
<li class="dropdown" style="width: 140px"
ng-model="ctrl.panel.y_formats[1]"
dropdown-typeahead="ctrl.unitFormats"
dropdown-typeahead-on-select="ctrl.setUnitFormat(1, $subItem)">
</li>
<li class="tight-form-item">
Scale type
</li>
<li>
<select class="input-small tight-form-input" style="width: 113px" ng-model="ctrl.panel.grid.rightLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
</li>
<li class="tight-form-item">
Label
</li>
<li>
<input type="text" class="input-small tight-form-input last"
ng-model="ctrl.panel.rightYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form-inline">
<div class="gf-form max-width-10">
<label class="gf-form-label width-5">Y-Min</label>
<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.leftMin" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form max-width-10">
<label class="gf-form-label width-5">Y-Max</label>
<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.leftMax" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<i class="fa fa-remove invisible"></i>
</li>
<li class="tight-form-item">
Y-Max
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto"
empty-to-null ng-model="ctrl.panel.grid.rightMax"
ng-change="ctrl.render()" ng-model-onblur>
</li>
<li class="tight-form-item" style="width: 115px; text-align: right;">
Y-Min
</li>
<li>
<input type="number" class="input-small tight-form-input" placeholder="auto" style="width: 113px;"
empty-to-null ng-model="ctrl.panel.grid.rightMin"
ng-change="ctrl.render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
<div class="gf-form">
<label class="gf-form-label width-5">Label</label>
<input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.leftYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Show Axis
</li>
<li class="tight-form-item">
X-Axis&nbsp;
<input class="cr1" id="hideXAxis" type="checkbox"
ng-model="ctrl.panel['x-axis']" ng-checked="ctrl.panel['x-axis']" ng-change="ctrl.render()">
<label for="hideXAxis" class="cr1"></label>
</li>
<li class="tight-form-item last">
Y-Axis&nbsp;
<input class="cr1" id="hideYAxis" type="checkbox"
ng-model="ctrl.panel['y-axis']" ng-checked="ctrl.panel['y-axis']" ng-change="ctrl.render()">
<label for="hideYAxis" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
<div class="section">
<h5 class="section-heading">Right Y</h5>
<gf-form-switch class="gf-form" label="Show" label-class="width-5" checked="ctrl.panel.grid.rightShow" on-change="ctrl.render()"></gf-form-switch>
<div class="gf-form">
<label class="gf-form-label width-5">Unit</label>
<div class="gf-form-dropdown-typeahead max-width-15" ng-model="ctrl.panel.y_formats[1]" dropdown-typeahead2="ctrl.unitFormats" dropdown-typeahead-on-select="ctrl.setUnitFormat(1, $subItem)"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Thresholds
</li>
<li class="tight-form-item">
Level 1
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="ctrl.panel.grid.threshold1Color" ng-change="ctrl.render()" ></spectrum-picker>
</li>
<li class="tight-form-item">
Level 2
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
<div class="gf-form">
<label class="gf-form-label width-5">Scale</label>
<div class="gf-form-select-wrapper max-width-15">
<select class="gf-form-input" ng-model="ctrl.panel.grid.rightLogBase" ng-options="v as k for (k, v) in ctrl.logScales" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form-inline">
<div class="gf-form max-width-10">
<label class="gf-form-label width-5">Y-Min</label>
<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.rightMin" ng-change="ctrl.render()" ng-model-onblur>
</div>
<div class="gf-form max-width-10">
<label class="gf-form-label width-5">Y-Max</label>
<input type="number" class="gf-form-input" placeholder="auto" empty-to-null ng-model="ctrl.panel.grid.rightMax" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-5">Label</label>
<input type="text" class="gf-form-input max-width-20" ng-model="ctrl.panel.rightYAxisLabel" ng-change="ctrl.render()" ng-model-onblur>
</div>
</div>
</div>
<div class="section" style="margin-bottom: 20px">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Show Axis
</li>
<li class="tight-form-item">
X-Axis&nbsp;
<input class="cr1" id="hideXAxis" type="checkbox"
ng-model="ctrl.panel['x-axis']" ng-checked="ctrl.panel['x-axis']" ng-change="ctrl.render()">
<label for="hideXAxis" class="cr1"></label>
</li>
<li class="tight-form-item last">
Y-Axis&nbsp;
<input class="cr1" id="hideYAxis" type="checkbox"
ng-model="ctrl.panel['y-axis']" ng-checked="ctrl.panel['y-axis']" ng-change="ctrl.render()">
<label for="hideYAxis" class="cr1"></label>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form last">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
Thresholds
</li>
<li class="tight-form-item">
Level 1
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="ctrl.panel.grid.threshold1" ng-change="ctrl.render()" ng-model-onblur>
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="ctrl.panel.grid.threshold1Color" ng-change="ctrl.render()" ></spectrum-picker>
</li>
<li class="tight-form-item">
Level 2
</li>
<li>
<input type="number" class="input-small tight-form-input"
ng-model="ctrl.panel.grid.threshold2" ng-change="ctrl.render()" ng-model-onblur>
</li>
<li class="tight-form-item">
<spectrum-picker ng-model="ctrl.panel.grid.threshold2Color" ng-change="ctrl.render()" ></spectrum-picker>
@@ -186,7 +135,7 @@
</li>
<li ng-if="ctrl.panel.legend.rightSide" style="width: 105px">
<input type="number" class="input-small tight-form-input" placeholder="250" bs-tooltip="'Set a min-width for the legend side table/block'" data-placement="right"
ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
ng-model="ctrl.panel.legend.sideWidth" ng-change="ctrl.render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
@@ -231,7 +180,7 @@
</li>
<li style="width: 105px">
<input type="number" class="input-small tight-form-input" placeholder="auto" bs-tooltip="'Override automatic decimal precision for legend and tooltips'" data-placement="right"
ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
ng-model="ctrl.panel.decimals" ng-change="ctrl.render()" ng-model-onblur>
</li>
</ul>
<div class="clearfix"></div>
public/sass/components/_gf-form.scss
+17 -1
View File
@@ -112,7 +112,6 @@ $gf-form-margin: 0.25rem;
margin-right: $gf-form-margin;
position: relative;
background-color: $input-bg;
margin-right: $gf-form-margin;
select.gf-form-input {
text-indent: .01px;
@@ -166,3 +165,20 @@ $gf-form-margin: 0.25rem;
}
}
.gf-form-dropdown-typeahead {
margin-right: $gf-form-margin;
position: relative;
background-color: $input-bg;
padding-right: $input-padding-x;
&:after {
position: absolute;
top: 35%;
right: $input-padding-x/2;
background-color: transparent;
color: $input-color;
font: normal normal normal $font-size-sm/1 FontAwesome;
content: '\f0d7';
pointer-events: none;
}
}