From b6b2b0a9679b0b66d86b013f5e397b67e258833a Mon Sep 17 00:00:00 2001
From: Amanda Ghassaei <amandaghassaei@gmail.com>
Date: Mon, 26 Jan 2015 22:07:29 -0500
Subject: [PATCH] adding menus
---
css/main.css | 22 ++++++++++++++-----
js/main.js | 1 +
js/menus/LatticeMenuView.js | 22 ++++++++++++++-----
js/menus/MenuWrapper.js | 42 +++++++++++++++++++++++++++++++------
js/menus/PartMenuView.js | 25 ++++++++++++++++++++++
js/menus/ScriptMenuView.js | 25 ++++++++++++++++++++++
js/menus/SketchMenuView.js | 26 +++++++++++++++++++++++
main.html | 28 ++++++++++---------------
8 files changed, 158 insertions(+), 33 deletions(-)
create mode 100644 js/menus/PartMenuView.js
create mode 100644 js/menus/ScriptMenuView.js
create mode 100644 js/menus/SketchMenuView.js
diff --git a/css/main.css b/css/main.css
index 2456cac3..b43f5b7c 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 3c7c1000..624dca30 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 aeb84d27..8e5946f5 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 08edce1f..6affe9af 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 00000000..540b8b3f
--- /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 00000000..9b8adf28
--- /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 00000000..ad61270a
--- /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 49d3c45e..ada75f56 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">
--
GitLab