From 10c2ce6389d0ff84b292f9ecad69f5fed9adcc28 Mon Sep 17 00:00:00 2001
From: Val Erastov <xibyte@gmail.com>
Date: Wed, 17 Feb 2016 00:30:16 -0800
Subject: [PATCH] working on dock UI

---
 web/app/app-init.js        |  3 +-
 web/app/sketcher/main2d.js | 33 ++++++++++++++-
 web/app/ui.js              | 84 +++++++++++++++++++++++++++++++++++---
 web/css/app.css            | 74 ++++++++++++++++++++++-----------
 web/sketcher.html          | 16 ++------
 5 files changed, 166 insertions(+), 44 deletions(-)

diff --git a/web/app/app-init.js b/web/app/app-init.js
index 1304047b..6459197a 100644
--- a/web/app/app-init.js
+++ b/web/app/app-init.js
@@ -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();
 
diff --git a/web/app/sketcher/main2d.js b/web/app/sketcher/main2d.js
index 3b42823d..22197a05 100644
--- a/web/app/sketcher/main2d.js
+++ b/web/app/sketcher/main2d.js
@@ -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;
 };
diff --git a/web/app/ui.js b/web/app/ui.js
index 6dca5611..1d5d2cae 100644
--- a/web/app/ui.js
+++ b/web/app/ui.js
@@ -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)
   }
-};
\ No newline at end of file
+};
+
+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');
+};
+
diff --git a/web/css/app.css b/web/css/app.css
index 33a47483..565c555b 100644
--- a/web/css/app.css
+++ b/web/css/app.css
@@ -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;
 }
 
 
diff --git a/web/sketcher.html b/web/sketcher.html
index eb8b52cb..26368400 100644
--- a/web/sketcher.html
+++ b/web/sketcher.html
@@ -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>