x/tuskar-ui
Code Issues Proposed changes

Number picker input widget and angular directive

Browse Source 
This patch implements Number picker widget that is used in deployment
creation and scaling forms.

Implements: blueprint tripleo-ui-numbers-directive

Change-Id: Ie8e249bec9c28bfb827e12bd83fa4ab84befb2c1
This commit is contained in:
Jiri Tomasek
2014-01-16 03:52:42 -05:00
parent 9d92a881de
commit a65f175063
8 changed files with 114 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
tuskar_ui/forms.py
View File

@@ -31,6 +31,14 @@ class NumberInput(forms.widgets.TextInput):
input_type = 'number'
class NumberPickerInput(NumberInput):
def __init__(self, attrs=None):
default_attrs = {'hr-number-picker': '', 'ng-cloak': '', }
if attrs:
default_attrs.update(attrs)
super(NumberPickerInput, self).__init__(default_attrs)
class MACField(forms.fields.Field):
def clean(self, value):
try:

13
tuskar_ui/infrastructure/overcloud/workflows/undeployed_overview.py
View File

@@ -40,13 +40,16 @@ class Action(horizon.workflows.Action):
name = 'count__%s__%s' % (category, 'default')
if category == 'controller':
initial = 1
self.fields[name] = django.forms.IntegerField(
label=_("Default"), initial=initial, min_value=initial,
widget=tuskar_ui.forms.NumberPickerInput(attrs={
'readonly': 'readonly',
}))
else:
initial = 0
self.fields[name] = django.forms.IntegerField(
label=_("Default"), initial=initial, min_value=initial,
widget=tuskar_ui.forms.NumberInput(attrs={
'class': 'input-mini',
}))
self.fields[name] = django.forms.IntegerField(
label=_("Default"), initial=initial, min_value=initial,
widget=tuskar_ui.forms.NumberPickerInput)
def roles_fieldset(self):
for category, label in CATEGORIES:

5
tuskar_ui/infrastructure/static/infrastructure/angular_templates/numberpicker.html Normal file
View File

@@ -0,0 +1,5 @@
<div class="number_picker">
<a ng-click="decrementValue()" class="btn btn-link" ng-class="{disabled: disabledInput || disableArrow()}"><i ng-hide="disabledInput" class="icon-chevron-left"></i></a>
<input type="text" value="{$value$}" ng-model="value">
<a ng-click="incrementValue()" class="btn btn-link" ng-class="{disabled: disabledInput}"><i ng-hide="disabledInput" class="icon-chevron-right"></i></a>
</div>

39
tuskar_ui/infrastructure/static/infrastructure/js/angular/horizon.number_picker.js Normal file
View File

@@ -0,0 +1,39 @@
angular.module('horizonApp').directive('hrNumberPicker', function() {
return {
restrict: 'A',
replace: true,
scope: { initial_value: '=value' },
templateUrl: '../../static/infrastructure/angular_templates/numberpicker.html',
link: function(scope, element, attrs) {
input = element.find('input').first();
angular.forEach(element[0].attributes, function(attribute) {
input_attr = input.attr(attribute.nodeName);
if (typeof input_attr === 'undefined' || input_attr === false) {
input.attr(attribute.nodeName, attribute.nodeValue);
}
});
// prevent text selection on doubleclick
element.disableSelection();
scope.value = scope.initial_value;
scope.disabledInput = (angular.isDefined(attrs.readonly)) ? true : false;
scope.disableArrow = function() {
return (scope.value === 0) ? true : false;
}
scope.incrementValue = function() {
if(!scope.disabledInput) {
scope.value++;
}
}
scope.decrementValue = function() {
if(!scope.disabledInput && scope.value !== 0) {
scope.value--;
}
}
}
};
})

35
tuskar_ui/infrastructure/static/infrastructure/less/buttons.less Normal file
View File

@@ -0,0 +1,35 @@
// BOOTSTRAP BUTTONS OVERRIDES/ADDITIONS
// Make a button look and behave like a link - available in later bootstrap versions
.btn {
&.btn-link,
&.btn-link:active,
&.btn-link[disabled],
&.btn-link:not(.btn-danger) {
background-color: transparent;
background-image: none;
.box-shadow(none); // mixin override does not work
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
&.btn-link {
border-color: transparent;
cursor: pointer;
color: @linkColor;
.border-radius(0);
}
&.btn-link:hover,
&.btn-link:focus,
&.btn-link:hover:not(.btn-danger),
&.btn-link:focus:not(.btn-danger) {
color: @linkColorHover;
text-decoration: underline;
background-color: transparent;
}
&.btn-link[disabled]:hover,
&.btn-link[disabled]:focus {
color: @linkColor;
text-decoration: none;
}
}

2
tuskar_ui/infrastructure/static/infrastructure/less/infrastructure.less
View File

@@ -1,5 +1,7 @@
/* Additional CSS for infrastructure. */
@import "../../bootstrap/less/variables.less";
@import "numberpicker.less";
@import "buttons.less";
// global layout
html,

16
tuskar_ui/infrastructure/static/infrastructure/less/numberpicker.less Normal file
View File

@@ -0,0 +1,16 @@
// Number picker widget
div.number_picker {
margin: 5px 0;
input {
width: 35px;
height: 30px;
margin-bottom: 0;
text-align: center;
}
a {
width: 14px;
&.disabled {
cursor: default;
}
}
}

1
tuskar_ui/infrastructure/templates/infrastructure/_scripts.html
View File

@@ -3,6 +3,7 @@
<script src='{{ STATIC_URL }}infrastructure/js/horizon.d3circleschart.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}infrastructure/js/horizon.d3linechart.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}infrastructure/js/horizon.d3singlebarchart.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}infrastructure/js/angular/horizon.number_picker.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}infrastructure/js/tuskar.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}infrastructure/js/tuskar.templates.js' type='text/javascript' charset='utf-8'></script>
<script src='{{ STATIC_URL }}infrastructure/js/tuskar.formset_table.js' type='text/javascript' charset='utf-8'></script>