diff --git a/src/demo.js b/src/demo.js
index d0a773ddf..9aa83c1df 100644
--- a/src/demo.js
+++ b/src/demo.js
@@ -317,6 +317,10 @@ require(['src/config/require-config.js'], function() {
sectors: [{
name: 'General',
properties:[{
+ name : 'Test',
+ property : 'test',
+ defaults : 'testDef',
+ },{
name : 'Alignment',
property : 'float',
type : 'radio',
diff --git a/src/style_manager/templates/propertyInput.html b/src/style_manager/templates/propertyInput.html
new file mode 100644
index 000000000..b07ba910f
--- /dev/null
+++ b/src/style_manager/templates/propertyInput.html
@@ -0,0 +1,4 @@
+
+
+
+
\ No newline at end of file
diff --git a/src/style_manager/view/PropertySelectView.js b/src/style_manager/view/PropertySelectView.js
index c37b80518..1305c340c 100644
--- a/src/style_manager/view/PropertySelectView.js
+++ b/src/style_manager/view/PropertySelectView.js
@@ -1,30 +1,32 @@
-define(['backbone','./PropertyView', 'text!./../templates/propertySelect.html'],
+define(['backbone','./PropertyView', 'text!./../templates/propertySelect.html'],
function (Backbone, PropertyView, propertyTemplate) {
- /**
+ /**
* @class PropertySelectView
* */
return PropertyView.extend({
-
+
template: _.template(propertyTemplate),
-
+
/** @inheritdoc */
renderInput: function() {
var pfx = this.pfx;
if(!this.$input){
if(this.list && this.list.length){
this.input = '';
this.$input = $(this.input);
- this.$el.find('#'+ pfx +'input-holder').html(this.$input);
+ this.$el.find('#'+ pfx +'input-holder').html(this.$input);
}
}
this.setValue(this.componentValue, 0);
- },
+ },
});
});
diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js
index 292894f2a..c4ed24971 100644
--- a/src/style_manager/view/PropertyView.js
+++ b/src/style_manager/view/PropertyView.js
@@ -1,12 +1,12 @@
-define(['backbone', 'text!./../templates/propertyLabel.html'],
- function (Backbone, propertyTemplate) {
+define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templates/propertyInput.html'],
+ function (Backbone, propertyLabel, propertyTemplate) {
/**
* @class PropertyView
* */
return Backbone.View.extend({
template: _.template(propertyTemplate),
- templateLabel: _.template(propertyTemplate),
+ templateLabel: _.template(propertyLabel),
events: {
'change' : 'valueChanged',
@@ -30,6 +30,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
this.list = this.model.get('list');
this.input = this.$input = null;
this.className = this.pfx + 'property';
+ this.inputHolderId = '#' + this.pfx + 'input-holder';
this.listenTo( this.propTarget, 'update', this.targetUpdated);
this.listenTo( this.model ,'change:value', this.valueChanged);
},
@@ -169,7 +170,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
icon : this.model.get('icon'),
info : this.model.get('info'),
label : this.model.get('name'),
- }) );
+ }));
},
/**
@@ -197,7 +198,13 @@ define(['backbone', 'text!./../templates/propertyLabel.html'],
* Renders input, to override
* */
renderInput: function(){
- console.warn("No render input implemented for '"+this.model.get('type')+"'");
+ if(!this.$input){
+ this.$input = $('', {
+ placeholder: this.defaultValue,
+ type: 'text'
+ });
+ this.$el.find(this.inputHolderId).html(this.$input);
+ }
},
/**
diff --git a/styles/css/main.css b/styles/css/main.css
index a3f96eada..e1faf3a04 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -3030,7 +3030,7 @@ ol.example li.placeholder:before {
bottom: 4px; }
.wte-sm-sector .wte-sm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-sm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-sm-d-s-arrow, .wte-sm-sector .wte-sm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-sm-field .wte-clm-d-s-arrow, .wte-sm-sector .wte-clm-field .wte-clm-d-s-arrow, .wte-clm-tags .wte-clm-field .wte-clm-d-s-arrow {
bottom: 7px; }
- .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-integer.wte-clm-field, .wte-clm-tags .wte-sm-integer.wte-clm-field, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-color.wte-clm-field, .wte-clm-tags .wte-sm-color.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field {
+ .wte-sm-sector .wte-sm-field.wte-sm-integer, .wte-clm-tags .wte-sm-field.wte-sm-integer, .wte-sm-sector .wte-sm-integer.wte-clm-field, .wte-clm-tags .wte-sm-integer.wte-clm-field, .wte-clm-tags #wte-clm-tags-field, .wte-sm-sector .wte-sm-field.wte-sm-select, .wte-clm-tags .wte-sm-field.wte-sm-select, .wte-sm-sector .wte-sm-select.wte-clm-field, .wte-clm-tags .wte-sm-select.wte-clm-field, .wte-sm-sector .wte-clm-select, .wte-clm-tags .wte-clm-select, .wte-sm-sector .wte-sm-field.wte-sm-list, .wte-clm-tags .wte-sm-field.wte-sm-list, .wte-sm-sector .wte-sm-list.wte-clm-field, .wte-clm-tags .wte-sm-list.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-color, .wte-clm-tags .wte-sm-field.wte-sm-color, .wte-sm-sector .wte-sm-color.wte-clm-field, .wte-clm-tags .wte-sm-color.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-composite, .wte-clm-tags .wte-sm-field.wte-sm-composite, .wte-sm-sector .wte-sm-composite.wte-clm-field, .wte-clm-tags .wte-sm-composite.wte-clm-field, .wte-sm-sector .wte-sm-field.wte-sm-input, .wte-clm-tags .wte-sm-field.wte-sm-input, .wte-sm-sector .wte-sm-input.wte-clm-field, .wte-clm-tags .wte-sm-input.wte-clm-field {
background-color: #333333;
/*353535*/
border: 1px solid #292929;
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index be69bfc65..a01c0aea9 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -533,7 +533,7 @@ $arrowColor: darken($fontColor,24%); /*b1b1b1*/
}
.#{$sm-prefix}d-s-arrow, .#{$clm-prefix}d-s-arrow{ bottom: 7px; }
- &.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite {
+ &.#{$sm-prefix}integer, &.#{$sm-prefix}select, &.#{$sm-prefix}list, &.#{$sm-prefix}color, &.#{$sm-prefix}composite, &.#{$sm-prefix}input {
background-color: darken($mainDkColor, 2.5%);/*353535*/
border: 1px solid darken($mainDkColor, 6.5%);/*292929*/
box-shadow: 1px 1px 0 lighten($mainDkColor, 11.5%);/*575757*/
diff --git a/test/specs/style_manager/view/PropertyView.js b/test/specs/style_manager/view/PropertyView.js
index 02093aaba..7ce713512 100644
--- a/test/specs/style_manager/view/PropertyView.js
+++ b/test/specs/style_manager/view/PropertyView.js
@@ -41,10 +41,13 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod
prop.querySelector('.label').should.be.ok;
});
- it('Rendered correctly', function() {
- var prop = view.el;
- $fixture.get(0).querySelector('.property').should.be.ok;
- prop.querySelector('.label').should.be.ok;
+ it.skip('Update target on value change', function() {
+ });
+
+ it.skip('Update value on target swap', function() {
+ });
+
+ it.skip('Get target style', function() {
});
});