Backup_Repos/jsketcher
1
0
Fork 0
mirror of https://github.com/xibyte/jsketcher synced 2025-12-09 09:52:34 +01:00
Code Issues Projects Releases Wiki Activity

working on dock UI

Browse source
This commit is contained in:
Val Erastov 2016-02-17 00:30:16 -08:00
parent 9cec97fee1
commit 10c2ce6389
5 changed files with 166 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/app/app-init.js
View file

@ -35,7 +35,7 @@ function start() {
}
var pm = app.viewer.parametricManager;
var constrList = new TCAD.ui.List($('#constrs'), {
var constrList = new TCAD.ui.List('constrs', {
items : function() {
var theItems = [];
for (var j = 0; j < pm.subSystems.length; j++) {
@ -76,6 +76,7 @@ function start() {
app.viewer.parametricManager.refresh();
}
});
$('.dock-node').append(constrList.ul);
app.viewer.parametricManager.listeners.push(function() {constrList.refresh()});
constrList.refresh();

33
web/app/sketcher/main2d.js
View file

@ -17,6 +17,9 @@ TCAD.App2D = function() {
//For debug view
this._actionsOrder = [];
this.dock = new TCAD.ui.Dock($('#dock'), $('#status'), TCAD.App2D.viewes);
this.dock.show('Constraints');
this.registerAction = function(id, desc, action) {
app.actions[id] = {id: id, desc: desc, action: action};
app._actionsOrder.push(id);
@ -185,6 +188,33 @@ TCAD.App2D = function() {
});
};
TCAD.App2D.viewes = [
{
name: 'Layers',
icon: 'bars'
},
{
name: 'Properties',
icon: 'sliders'
},
{
name: 'Dimensions',
icon: 'arrows-v'
},
{
name: 'Settings',
icon: 'wrench'
},
{
name: 'Constraints',
icon: 'cogs'
}
];
TCAD.App2D.faBtn = function(iconName) {
return $('<i>', {class : 'fa fa-'+iconName});
};
TCAD.App2D.prototype.fit = function() {
var bbox = new TCAD.io.BBox();
@ -244,7 +274,7 @@ TCAD.App2D.prototype.newSketch = function() {
TCAD.App2D.prototype.initSketchManager = function(data, ext) {
this._sketchesWin = new TCAD.ui.Window($('#sketchManager'));
var app = this;
var sketchesList = new TCAD.ui.List($('#sketchList'), {
var sketchesList = new TCAD.ui.List('sketchList', {
items : function() {
var theItems = [];
for (var name in localStorage) {
@ -273,6 +303,7 @@ TCAD.App2D.prototype.initSketchManager = function(data, ext) {
app.openSketch(item.name);
}
});
$('#sketchManager').find('.content').append(sketchesList.ul);
sketchesList.refresh();
this._sketchesList = sketchesList;
};

84
web/app/ui.js
View file

@ -49,11 +49,10 @@ TCAD.ui.openWin = function(win, mouseEvent) {
};
/** @constructor */
TCAD.ui.List = function(el, model) {
this.ul = el;
this.template = this.ul.html();
this.ul.empty();
TCAD.ui.List = function(id, model) {
this.ul = $('<ul>', { class : 'tlist', id : id});
this.model = model;
this.template = '<li>$name$<span class="btn rm" style="float: right;"><i class="fa fa-remove"></i></span></li>';
};
TCAD.ui.List.prototype.refresh = function() {
@ -61,7 +60,7 @@ TCAD.ui.List.prototype.refresh = function() {
var items = this.model.items();
var model = this.model;
function makeCallbacks(li, item, index) {
li.find('.ui-rm').click(function(e) {
li.find('.rm').click(function(e) {
model.remove(item, index);
e.stopPropagation();
});
@ -69,10 +68,83 @@ TCAD.ui.List.prototype.refresh = function() {
li.mouseleave(function() {model.mouseleave(item, index)});
li.click(function() {model.click(item, index)});
}
for (var i = 0; i < items.length; ++i) {
var item = items[i];
var li = $(this.template.replace('$name$', item.name));
this.ul.append(li);
makeCallbacks(li, item, i)
}
};
};
TCAD.ui.Dock = function(dockEl, switcherEl, viewDefinitions) {
this.viewes = {};
this.dockEl = dockEl;
this.order = [];
function bindClick(dock, switchEl, viewName) {
switchEl.click(function() {
if (dock.isVisible(viewName)) {
dock.hide(viewName);
} else {
dock.show(viewName);
}
});
}
for (var i = 0; i < viewDefinitions.length; i++) {
var viewDef = viewDefinitions[i];
var view = {};
this.viewes[viewDef.name] = view;
this.order.push(viewDef.name);
view.node = $('<div>', {class: 'dock-node'});
var caption = $('<div>', {class: 'tool-caption'});
caption.append($('<span>', {class: 'txt'}).text(viewDef.name.toUpperCase()));
caption.append(TCAD.App2D.faBtn(viewDef.icon));
view.node.append(caption);
view.switch = $('<span>', {class: 'dock-btn'});
view.switch.append(TCAD.App2D.faBtn(viewDef.icon));
view.switch.append($('<span>', {class: 'txt'}).text(viewDef.name));
bindClick(this, view.switch, viewDef.name);
switcherEl.append(view.switch);
}
};
TCAD.ui.Dock.prototype.show = function(viewName) {
var view = this.viewes[viewName];
if (view.switch.hasClass('selected')) {
return;
}
var addAfter = null;
for (var i = 0; i < this.order.length; i++) {
var otherView = this.order[i];
if (viewName == otherView) break;
if (this.isVisible(otherView)) {
addAfter = this.viewes[otherView]
}
}
if (addAfter == null) {
this.dockEl.find('.tool-caption .no-top-border').removeClass('no-top-border');
this.dockEl.prepend(view.node);
view.node.find('.tool-caption').addClass('no-top-border');
} else {
view.node.insertAfter(addAfter.node);
}
view.switch.addClass('selected');
};
TCAD.ui.Dock.prototype.hide = function(viewName) {
var view = this.viewes[viewName];
if (!view.switch.hasClass('selected')) {
return;
}
view.node.detach();
view.switch.removeClass('selected');
};
TCAD.ui.Dock.prototype.isVisible = function(viewName) {
return this.viewes[viewName].switch.hasClass('selected');
};

74
web/css/app.css
View file

@ -31,15 +31,13 @@ html, body {
}
.btn {
border:1px solid black;
background-color: #606060;
background-position: center;
background-repeat: no-repeat;
border:1px solid #808080;
background: #606060 no-repeat center;
border-radius: 4px;
color: white;
font-size: 16px;
font-family: DejaVu Sans, Symbola, Everson Mono, Dingbats, Segoe UI Symbol,
Quivira, SunExt-A, FreeSerif, Universalia, unifont;
Quivira, SunExt-A, FreeSerif, Universalia, unifont, serif;
vertical-align: top;
}
@ -48,12 +46,39 @@ html, body {
font-size: 14px;
}
.dock-btn {
padding: 1px 5px 1px 5px;
border:0 solid black;
background: #606060 no-repeat center;
border-radius: 4px;
color: white;
font-size: 13px;
font-family: Monospace, serif;
cursor: pointer;
margin: 1px 4px 1px 4px;
}
.dock-btn:hover {
background-color: #808080;
}
.dock-btn .txt {
padding-left: 5px;
}
.selected {
background-color: #333;
color: #ccc;
}
.sbtn {
min-width:20px;
height:20px;
line-height: 1.1;
border-color: #999;
padding: 1px 3px;
font-family: monospace;
font-size: 14px;
}
.rbtn {
@ -78,11 +103,12 @@ html, body {
padding: 0px;
margin:0;
color: #fff;
font-size: 13px;
}
.tlist li {
border-bottom: 1px solid #777;
padding: 4px 3px 4px 15px;
padding: 2px 3px 2px 15px;
cursor: pointer;
}
@ -94,12 +120,13 @@ html, body {
font-weight: bold;
color: #fff;
border-bottom: 1px solid #000;
padding: 0 0 0 3px;
border-top: 1px solid #000;
padding: 1px 0 1px 3px;
background: #333;
}
#status > * {
margin: 1px;
.no-top-border {
border-top: 0;
}
.tool-caption .btn {
@ -110,18 +137,22 @@ html, body {
margin-top: -1px;
}
.tool-caption .fa {
font-size: 11px;
}
.tool-caption .txt {
padding-right: 3px;
}
.tlist .btn {
width:18px;
height:19px;
font-size: 12px;
line-height: 17px;
margin-top: -2px;
font-size: 11px;
border: 0;
}
.tlist .rm {
visibility:hidden;
padding-left: 5px;
padding: 0 5px 0 5px;
}
.tlist li:hover .rm {
@ -134,23 +165,18 @@ html, body {
}
.scroll::-webkit-scrollbar {
width: 2px;
width: 4px;
}
.scroll::-webkit-scrollbar-track {
background:#eee;
border: thin solid lightgray;
box-shadow: 0px 0px 3px #dfdfdf inset;
border-radius:10px;
background: white;
}
.scroll::-webkit-scrollbar-thumb {
background:#999;
border: thin solid gray;
border-radius:10px;
background: steelblue;
}
.scroll::-webkit-scrollbar-thumb:hover {
background:#7d7d7d;
background: royalblue;
}

16
web/sketcher.html
View file

@ -73,12 +73,7 @@
</div>
<div style="width: 100%; height: calc(100% - 59px);">
<div class="panel b-right scroll" style="float: left; width: 245px; height: 100%;">
<div class="tool-caption">CONSTRAINTS</div>
<ul class="tlist" id='constrs'>
<li>$name$<span class="rm" style="float: right;"><input class="btn sbtn ui-rm" style="" type="submit" value="✘"></span></li>
</ul>
</div>
<div id="dock" class="panel b-right scroll" style="float: left; width: 245px; height: 100%;"></div>
<div style="background: black; float: left; width: calc(100% - 298px); height: 100%;">
<canvas width="300" height="300" id="viewer"></canvas>
</div>
@ -101,9 +96,9 @@
<button class="btn rbtn act-llAngle" style="background-image: url(img/vec/angle.svg);"></button>
</div>
</div>
<div id="status" class="panel b-top" style="width: 100%; height:22px;">
<input id='showActions' class="btn sbtn" style="" type="submit" value="⌘">
</div>
<div id="status" class="panel b-top" style="width: 100%; height:22px; padding-top: 3px;"><span
id='showActions' class="dock-btn"><i class="fa fa-slack"></i></span></div>
<div id="actions" class="scroll win" style="display: none;">
<div class="tool-caption" >ACTIONS<div class="rm pseudo-btn" style="float: right;">✘</div></div>
@ -115,9 +110,6 @@
<div id="sketchManager" class="win" style="display: none; min-width: 100px;">
<div class="tool-caption" >SKETCHES<div class="rm pseudo-btn" style="float: right;">✘</div></div>
<div class="content panel scroll" style="padding: 0;max-height: 500px;">
<ul class="tlist" id='sketchList'>
<li>$name$<span class="rm" style="float: right;"><input class="btn sbtn ui-rm" style="" type="submit" value="✘"></span></li>
</ul>
</div>
</div>