diff --git a/css/main.css b/css/main.css
index 2456cac31b8671c0b968b54ab50da7f30b523011..b43f5b7c35950d777c8d64c79a609cd9ca55a3fb 100644
--- a/css/main.css
+++ b/css/main.css
@@ -74,8 +74,9 @@ nav .btn {
z-index: 2;
position: absolute;
display: block;
- background-color: rgba(255,255,255,0.8);
+ background-color: rgba(255,255,255,0.7);
right: 0;
+ overflow:hidden;
}
/*menus*/
@@ -96,7 +97,6 @@ nav .btn {
.nav-tabs .active a{
background-color: transparent !important;
- border-width:2px !important;
border-bottom-color: transparent!important;
}
@@ -105,12 +105,24 @@ nav .btn {
}
.nav-tabs li a{
+ border-left-width: 1px;
+ border-right-width; 1px;
+ border-color: #DDD;
border-bottom: 2px solid #DDD!important;
+ color:#bebebe;
+ margin-left: -2px;
+ margin-right: -2px;
+ margin-top:-2px;
+ background-color: rgba(0,0,0,0.03);
}
-.nav-tabs li{
- /*width:100%;*/
- margin-bottom: -2px;
+.nav-tabs li a:hover{
+ color:#555;
+ background-color: transparent;
+}
+#menuContent{
+ padding: 30px;
}
+
diff --git a/js/main.js b/js/main.js
index 3c7c1000044385efd5e48b2839a2e1a479e5dd19..624dca30ba273bd2f8a20f5ae17554d80d9d31e6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -22,5 +22,6 @@ $(function(){
var threeView = new ThreeView({model:threeModel, lattice:lattice});
+ MenuWrapper();
setupNavBar(threeModel);
});
diff --git a/js/menus/LatticeMenuView.js b/js/menus/LatticeMenuView.js
index aeb84d2730e9eaecf0ede786dee920579f4bd078..8e5946f54e1f2ecd7044e760f61ef4a6fcd7d0d2 100644
--- a/js/menus/LatticeMenuView.js
+++ b/js/menus/LatticeMenuView.js
@@ -5,7 +5,7 @@
LatticeMenuView = Backbone.View.extend({
- el: "",
+ el: "#menuContent",
events: {
},
@@ -13,14 +13,26 @@ LatticeMenuView = Backbone.View.extend({
initialize: function(){
_.bindAll(this, "render");
-
- this.render();
},
render: function(){
-
+ this.$el.html(this.template());
},
- template: null;
+ template: _.template('\
+ Cell Type: <br/>\
+ Cell Connection:<br/>\
+ Scale:<br/>\
+ Column Separation:<br/><br/>\
+ <a href="#" class=" btn btn-block btn-lg btn-default">Clear All</a><br/>\
+ <span class="btn btn-default btn-file fullWidth">\
+ Upload STL<input id="uploadMesh" type="file">\
+ </span><br/><br/>\
+ <div class="btn-group fullWidth">\
+ <button data-toggle="dropdown" class="btn btn-default dropdown-toggle fullWidth" type="button">Select Model <span class="caret"></span></button>\
+ <ul role="menu" class="dropdown-menu">\
+ <li><a class="selectMesh" data-file="Airbus_A300-600.stl" href="#">Plane</a></li>\
+ </ul>\
+ </div><!-- /btn-group -->')
});
\ No newline at end of file
diff --git a/js/menus/MenuWrapper.js b/js/menus/MenuWrapper.js
index 08edce1f98f57227b5b3a0a71e041a4ec38b9520..6affe9af4138c982c65fd75299268a547add146c 100644
--- a/js/menus/MenuWrapper.js
+++ b/js/menus/MenuWrapper.js
@@ -1,12 +1,42 @@
-
-
+/**
+ * Created by aghassaei on 1/26/15.
+ */
function MenuWrapper(){
- var cellMenu =
-
-
-
+ //init all tab view controllers
+ var latticeMenu = new LatticeMenuView();
+ var sketchMenu = new SketchMenuView();
+ var partMenu = new PartMenuView();
+ var scriptMenu = new ScriptMenuView();
+
+
+ var tabItems = $(".nav-tabs>li>a");
+ tabItems.click(function(e){
+ e.preventDefault();
+ var $this = $(this);
+
+ _.each(tabItems, function(tab){
+ $(tab).parent().removeClass("active");
+ });
+ $this.parent().addClass("active");
+
+ var tabName = $this.parent().data('name');
+ if (tabName == "lattice"){
+ latticeMenu.render();
+ } else if (tabName == "sketch"){
+ sketchMenu.render();
+ } else if (tabName == "part"){
+ partMenu.render();
+ } else if (tabName == "script"){
+ scriptMenu.render();
+ } else {
+ console.warn("no tab initialized!");
+ $("menuContent").html('');//clear out content from menu
+ }
+ });
+
+ latticeMenu.render();//init with lattice menu open
}
\ No newline at end of file
diff --git a/js/menus/PartMenuView.js b/js/menus/PartMenuView.js
new file mode 100644
index 0000000000000000000000000000000000000000..540b8b3fbcd289f3618002b73245167713cad44b
--- /dev/null
+++ b/js/menus/PartMenuView.js
@@ -0,0 +1,25 @@
+/**
+ * Created by aghassaei on 1/26/15.
+ */
+
+PartMenuView = Backbone.View.extend({
+
+ el: "#menuContent",
+
+ events: {
+ },
+
+ initialize: function(){
+
+ _.bindAll(this, "render");
+ },
+
+ render: function(){
+ this.$el.html(this.template());
+ },
+
+ template: _.template('\
+ Part Type: <br/>\
+ ')
+
+});
\ No newline at end of file
diff --git a/js/menus/ScriptMenuView.js b/js/menus/ScriptMenuView.js
new file mode 100644
index 0000000000000000000000000000000000000000..9b8adf2877860190a634c0ec5882cc1e4be2ec2e
--- /dev/null
+++ b/js/menus/ScriptMenuView.js
@@ -0,0 +1,25 @@
+/**
+ * Created by aghassaei on 1/26/15.
+ */
+
+ScriptMenuView = Backbone.View.extend({
+
+ el: "#menuContent",
+
+ events: {
+ },
+
+ initialize: function(){
+
+ _.bindAll(this, "render");
+ },
+
+ render: function(){
+ this.$el.html(this.template());
+ },
+
+ template: _.template('\
+ some kind of scripting functionality?\
+ ')
+
+});
\ No newline at end of file
diff --git a/js/menus/SketchMenuView.js b/js/menus/SketchMenuView.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad61270a962054feffd55775615017ae595162be
--- /dev/null
+++ b/js/menus/SketchMenuView.js
@@ -0,0 +1,26 @@
+/**
+ * Created by aghassaei on 1/26/15.
+ */
+
+
+SketchMenuView = Backbone.View.extend({
+
+ el: "#menuContent",
+
+ events: {
+ },
+
+ initialize: function(){
+
+ _.bindAll(this, "render");
+ },
+
+ render: function(){
+ this.$el.html(this.template());
+ },
+
+ template: _.template('\
+ sketch and extrude commands\
+ ')
+
+});
\ No newline at end of file
diff --git a/main.html b/main.html
index 49d3c45e0af3dcc48b2db62d6270f5dd7abf0f23..ada75f56a5e18a86d76b4f7228f8f5edec086fb9 100644
--- a/main.html
+++ b/main.html
@@ -54,12 +54,10 @@
<!--views-->
<script src="js/menus/MenuWrapper.js"></script>
<script src="js/menus/LatticeMenuView.js"></script>
- <script src="js/threeViews/meshHandle.js"></script>
+ <script src="js/menus/PartMenuView.js"></script>
+ <script src="js/menus/SketchMenuView.js"></script>
+ <script src="js/menus/ScriptMenuView.js"></script>
<script src="js/threeViews/threeView.js"></script>
- <script src="js/threeViews/pushPullMeshView.js"></script>
- <script src="js/menus/importView.js"></script>
- <script src="js/threeViews/fillGeometryView.js"></script>
- <script src="js/threeViews/latticeView.js"></script>
<script src="js/main.js"></script>
@@ -81,14 +79,7 @@
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-01">
<ul class="nav navbar-nav navbar-left">
- <li><a data-menu-id="importGeometry" class="menuHoverControls" href="#">Import</a></li>
- <li><a data-menu-id="element" class="menuHoverControls" href="#">Element</a></li>
-
- <!--<li><a data-menu-id="controls1Menu" class="menuHoverControls" href="#">Controls1</a></li>-->
- <!--<li><a data-menu-id="controls2Menu" class="menuHoverControls" href="#">Controls2</a></li>-->
- <!--<li><a data-menu-id="controls3Menu" class="menuHoverControls" href="#">Glyphs</a></li>-->
- <!--<li><a data-menu-id="controls4Menu" class="menuHoverControls" href="#">Buttons</a></li>-->
- <!--<li><a data-menu-id="controls5Menu" class="menuHoverControls" href="#">Inputs</a></li>-->
+ <li><a data-menu-id="file" class="menuHoverControls" href="#">File</a></li>
<li class="dropdown navDropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Export <b class="caret"></b></a>
<span class="dropdown-arrow"></span>
@@ -103,7 +94,7 @@
<li><a data-menu-id="about" class="menuHoverControls" href="#">About</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
- <li><a id="clearAll" class="menuHoverControls" href="#">Clear All</a></li>
+ <li><a id="clearAll" class="menuHoverControls" href="#">Show/Hide Menu >></a></li>
</ul>
<!--<a href="#fakelink" id="clearAll" class=" btn btn-lg btn-primary">Clear All</a>-->
</div><!-- /.navbar-collapse -->
@@ -111,10 +102,13 @@
<div id="menuWrapper">
<ul class="nav nav-tabs nav-justified">
- <li role="presentation" class="active"><a href="#">Cell</a></li>
- <li role="presentation"><a href="#">Part</a></li>
- <li role="presentation"><a href="#">Script</a></li>
+ <li role="presentation" class="active" data-name="lattice"><a href="#">Lattice</a></li>
+ <li role="presentation" data-name="sketch"><a href="#">Sketch</a></li>
+ <li role="presentation" data-name="part"><a href="#">Part</a></li>
+ <li role="presentation" data-name="script"><a href="#">Script</a></li>
</ul>
+
+ <div id="menuContent"></div>
</div>
<div id="importGeometry" class="row navMenu">