From 0b2fafe28fca06400b001aca243b11bdddb507fe Mon Sep 17 00:00:00 2001
From: Val Erastov <xibyte@gmail.com>
Date: Thu, 18 Feb 2016 18:56:46 -0800
Subject: [PATCH] setup properties view

---
 web/app/app-init.js   | 18 ++++++++++--------
 web/app/ui/toolkit.js |  8 ++++++++
 web/css/app.css       | 12 ++++++++++++
 web/css/toolkit.css   |  9 +++++++--
 web/sketcher.html     |  1 +
 5 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/web/app/app-init.js b/web/app/app-init.js
index 4eefad55..67edabb5 100644
--- a/web/app/app-init.js
+++ b/web/app/app-init.js
@@ -79,11 +79,9 @@ function start() {
   app.dock.views['Constraints'].node.append(constrList.ul);
   app.viewer.parametricManager.listeners.push(function() {constrList.refresh()});
   constrList.refresh();
-  
-  var layerSelection = $('<span>', {id: 'layerSelection'})
-    .append($('<label>', {for : 'layersList'}).text('Layer: '))
-    .append($('<select>', {id : 'layersList'}));
-  app.dock.views['Properties'].node.append(layerSelection);
+
+  var layerSelection = new TCAD.toolkit.Combo('layerSelection', 'Layer');
+  app.dock.views['Properties'].node.append(layerSelection.root);
   
   var updateLayersList = function () {
     var options = '';
@@ -91,20 +89,24 @@ function start() {
       var layer = app.viewer.layers[i];
       options += "<option value='"+layer.name+"'>"+layer.name+"</option>"
     }
-    $('#layersList').html(options).val(app.viewer.activeLayer.name);
+    layerSelection.select.html(options).val(app.viewer.activeLayer.name);
   };
   updateLayersList();
   app.viewer.bus.subscribe("activeLayer", function() {
     updateLayersList();
   });
-  $('#layersList')
+  layerSelection.select
     .mousedown(updateLayersList)
     .change(function () {
-      var layer = app.viewer.findLayerByName($('#layersList').val());
+      var layer = app.viewer.findLayerByName(layerSelection.select.val());
       if (layer != null) {
         app.viewer.activeLayer = layer;
       }
     });
+
+  var dimScale = new TCAD.toolkit.Number("Dim Scale", 1);
+  app.dock.views['Properties'].node.append(dimScale.root);
+  
 }
 window.___log = function(log) {
     $('#log').append( " *****************<br><br><br><br>");
diff --git a/web/app/ui/toolkit.js b/web/app/ui/toolkit.js
index 890e8aed..81f8a2cf 100644
--- a/web/app/ui/toolkit.js
+++ b/web/app/ui/toolkit.js
@@ -112,6 +112,14 @@ TCAD.toolkit.Number = function(name, initValue, baseStep) {
   TCAD.toolkit.propLayout(this.root, name, this.input);
 };
 
+TCAD.toolkit.Combo = function(id, label) {
+  this.root = $('<div/>', {class: 'tc-row tc-ctrl tc-ctrl-combo'});
+  var label = $('<span/>', {class: 'tc-prop-name', text: label});
+  this.select = $('<select>', {id : id});
+  this.root.append(label)
+    .append($('<div/>', {class: 'tc-prop-value'}).append(this.select));
+};
+
 TCAD.toolkit.Text = function(name) {
   this.root = $('<div/>', {class: 'tc-row tc-ctrl tc-ctrl-text'});
   TCAD.toolkit.propLayout(this.root, name, $('<input type="text"/>'));
diff --git a/web/css/app.css b/web/css/app.css
index 8b5978d6..b02b2668 100644
--- a/web/css/app.css
+++ b/web/css/app.css
@@ -46,6 +46,10 @@ html, body {
   font-size: 14px;
 }
 
+#dock {
+  color: #fff;
+}
+
 .dock-btn {
   padding: 1px 5px 1px 5px;
   border:0 solid black;
@@ -238,4 +242,12 @@ html, body {
 #layersList {
   background-color: #ddd;
   margin: 10px;
+}
+
+.tc-ctrl {
+  border-left: 0;
+}
+
+.tc-ctrl input[type=text], .tc-ctrl select {
+  color: #fff;
 }
\ No newline at end of file
diff --git a/web/css/toolkit.css b/web/css/toolkit.css
index bc103633..51a2f803 100644
--- a/web/css/toolkit.css
+++ b/web/css/toolkit.css
@@ -3,7 +3,7 @@
   position: absolute;
   margin-left: 0; margin-top: 0;
   top: 0; left: 0;
-  width : 250px;
+  width: 250px;
   background-color: #000;
 }
 
@@ -58,7 +58,7 @@
   width: 60%;
 }
 
-.tc-ctrl input[type=text] {
+.tc-ctrl input[type=text], .tc-ctrl select {
     color: #2fa1d6;
     background: #303030;
     outline: none;
@@ -69,6 +69,11 @@
     float: right;
 }
 
+.tc-prop-value select {
+  padding-bottom: 1px;  
+  box-sizing: content-box;
+}
+
 .tc-ctrl-text input[type=text] {
   color:#1ed36f;
 }
diff --git a/web/sketcher.html b/web/sketcher.html
index c5107689..0d90f67c 100644
--- a/web/sketcher.html
+++ b/web/sketcher.html
@@ -4,6 +4,7 @@
 <head>
   <title>sketcher.js</title>
   <link rel="shortcut icon" href="img/tgn.png" />
+  <link rel="stylesheet" href="css/toolkit.css">
   <link rel="stylesheet" href="css/app.css">
   <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">