diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 13f026e3f..5a895af2b 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -184,7 +184,8 @@ define(function() {
* @private
* */
clean: function() {
- this.selEl.removeClass(this.hoverClass);
+ if(this.selEl)
+ this.selEl.removeClass(this.hoverClass);
},
/**
diff --git a/src/device_manager/template/devices.html b/src/device_manager/template/devices.html
index 9375e2b29..0ff894420 100644
--- a/src/device_manager/template/devices.html
+++ b/src/device_manager/template/devices.html
@@ -1 +1,10 @@
-
\ No newline at end of file
+Device
+
+
\ No newline at end of file
diff --git a/src/device_manager/view/DevicesView.js b/src/device_manager/view/DevicesView.js
index 1ea80a8a5..eea2ee7ed 100644
--- a/src/device_manager/view/DevicesView.js
+++ b/src/device_manager/view/DevicesView.js
@@ -11,8 +11,17 @@ function(Backbone, devicesTemplate) {
initialize: function(o) {
this.config = o.config || {};
- console.log(this.config);
this.ppfx = this.config.pStylePrefix || '';
+ this.events['click .' + this.ppfx + 'add-trasp'] = this.startAdd;
+ this.delegateEvents();
+ },
+
+ /**
+ * Start adding new device
+ * @return {[type]} [description]
+ */
+ startAdd: function(){
+ console.log('start new device');
},
/**
diff --git a/styles/css/main.css b/styles/css/main.css
index 4eaecd591..a3477ffc4 100644
--- a/styles/css/main.css
+++ b/styles/css/main.css
@@ -2994,12 +2994,92 @@ ol.example li.placeholder:before {
content: "\f03e"; }
/*********** END Components *************/
-/********* Style Manager **********/
+/********* Inputs **********/
+/*#d5d5d5*/
/*303030*/
/*414141*/
/*#252525*/
-/*#d5d5d5*/
/*b1b1b1*/
+.wte-field {
+ background-color: rgba(0, 0, 0, 0.3);
+ /*353535*/
+ border: 1px solid rgba(0, 0, 0, 0.1);
+ /*292929*/
+ box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);
+ /*575757*/
+ border-radius: 2px;
+ box-sizing: border-box;
+ padding: 0 5px;
+ position: relative; }
+ .wte-field input, .wte-field select {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ color: #d5d5d5;
+ border: none;
+ background-color: transparent;
+ width: 100%;
+ position: relative;
+ z-index: 1; }
+ .wte-field select {
+ color: transparent;
+ text-shadow: 0 0 0 #d5d5d5;
+ height: 20px; }
+ .wte-field option {
+ margin: 5px 0; }
+ .wte-field .wte-sel-arrow {
+ height: 100%;
+ width: 9px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ z-index: 0; }
+ .wte-field .wte-d-s-arrow {
+ bottom: 7px;
+ border-top: 4px solid #b1b1b1;
+ position: absolute;
+ height: 0;
+ width: 0;
+ border-left: 3px solid transparent;
+ border-right: 4px solid transparent;
+ cursor: pointer; }
+
+.wte-add-trasp {
+ background: none;
+ border: none;
+ color: #eee;
+ cursor: pointer;
+ font-size: 1em;
+ border-radius: 2px;
+ opacity: 0.75;
+ filter: alpha(opacity=75); }
+ .wte-add-trasp:hover {
+ opacity: 1;
+ filter: alpha(opacity=100); }
+ .wte-add-trasp:active {
+ background-color: rgba(0, 0, 0, 0.2); }
+
+/********* END Inputs **********/
+/********* Device Manager **********/
+.wte-devices-c {
+ display: flex;
+ align-items: center;
+ padding: 10px 5px;
+ color: #d5d5d5;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+ margin-bottom: 10px; }
+ .wte-devices-c .wte-device-label {
+ flex-grow: 2;
+ font-size: 0.7em;
+ text-align: left; }
+ .wte-devices-c .wte-select {
+ flex-grow: 20; }
+ .wte-devices-c .wte-add-trasp {
+ flex-grow: 1;
+ margin-left: 5px; }
+
+/********* END Device Manager **********/
+/********* Style Manager **********/
.wte-sm-close-btn, .wte-sm-sector .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close, .wte-clm-tags .wte-sm-property.wte-sm-file #wte-sm-preview-box #wte-sm-close {
display: block;
font-size: 23px;
diff --git a/styles/scss/main.scss b/styles/scss/main.scss
index a9c5af4a4..a80f585d4 100644
--- a/styles/scss/main.scss
+++ b/styles/scss/main.scss
@@ -506,13 +506,107 @@ $leftWidth: 16.5%;
/*********** END Components *************/
-/********* Style Manager **********/
+/********* Inputs **********/
+
+$inputFontColor: darken($fontColor,10%); /*#d5d5d5*/
+$darkBorder: rgba(0, 0, 0, 0.15); /*303030*/
+$lightBorder: rgba(255, 255, 255, 0.05); /*414141*/
+$darkTextShadow: rgba(0, 0, 0, 0.3); /*#252525*/
+$arrowColor: darken($fontColor,24%); /*b1b1b1*/
+
+.#{$app-prefix}field {
+ background-color: rgba(0, 0, 0, 0.3);/*353535*/
+ border: 1px solid rgba(0, 0, 0, 0.1);/*292929*/
+ box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.1);/*575757*/
+ border-radius: 2px;
+ box-sizing: border-box;
+ padding: 0 5px;
+ position: relative;
+
+ input, select{
+ @include appearance(none);
+ color: $inputFontColor;
+ border:none;
+ background-color: transparent;
+ width: 100%;
+ position: relative;
+ z-index:1;
+ }
+
+ select{
+ color: transparent;
+ text-shadow: 0 0 0 $inputFontColor;
+ height: 20px;
+ }
+
+ option{
+ margin: 5px 0;
+ }
+
+ .#{$app-prefix}sel-arrow {
+ height: 100%; width: 9px;
+ position: absolute;
+ right: 0; top: 0;
+ z-index: 0;
+ }
+ .#{$app-prefix}d-s-arrow {
+ bottom: 7px;
+ border-top: 4px solid $arrowColor;
+ position: absolute;
+ height: 0; width: 0;
+ border-left: 3px solid transparent;
+ border-right: 4px solid transparent;
+ cursor:pointer;
+ }
+}
+
+.#{$app-prefix}add-trasp {
+ background: none;
+ border: none;
+ color: $fontColor;
+ cursor: pointer;
+ font-size: 1em;
+ border-radius: 2px;
+ @include opacity(0.75);
+
+ &:hover{ @include opacity(1); }
+ &:active{
+ background-color: rgba(0, 0, 0, 0.2);
+ }
+}
+
+/********* END Inputs **********/
+
+/********* Device Manager **********/
+
+.#{$app-prefix}devices-c{
+ display: flex;
+ align-items: center;
+ padding: 10px 5px;
+ color: $inputFontColor;
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+ margin-bottom: 10px;
+
+ .#{$app-prefix}device-label {
+ flex-grow: 2;
+ font-size: 0.7em;
+ text-align: left;
+ }
+
+ .#{$app-prefix}select{
+ flex-grow: 20;
+ }
+
+ .#{$app-prefix}add-trasp{
+ flex-grow: 1;
+ margin-left: 5px;
+ }
+}
+
+/********* END Device Manager **********/
-$darkBorder: rgba(0, 0, 0, 0.15); /*303030*/
-$lightBorder: rgba(255, 255, 255, 0.05); /*414141*/
-$darkTextShadow: rgba(0, 0, 0, 0.3); /*#252525*/
-$inputFontColor: darken($fontColor,10%); /*#d5d5d5*/
-$arrowColor: darken($fontColor,24%); /*b1b1b1*/
+
+/********* Style Manager **********/
.#{$sm-prefix}close-btn{
display:block;