setup properties view

This commit is contained in:
Val Erastov 2016-02-18 18:56:46 -08:00
parent f6013c8d58
commit 0b2fafe28f
5 changed files with 38 additions and 10 deletions

View file

@ -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>");

View file

@ -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"/>'));

View file

@ -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;
}

View file

@ -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;
}

View file

@ -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">