From ec0eb42987de51f77df04a6115ecd01f0c3ae4b7 Mon Sep 17 00:00:00 2001
From: amandaghassaei <amandaghassaei@gmail.com>
Date: Wed, 18 Mar 2015 17:02:08 -0400
Subject: [PATCH] ribbon started
---
css/main.css | 26 ++++++++++++++++++++++++++
js/main.js | 1 +
js/menus/Ribbon.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
main.html | 10 ++--------
4 files changed, 73 insertions(+), 8 deletions(-)
create mode 100644 js/menus/Ribbon.js
diff --git a/css/main.css b/css/main.css
index a50982c9..55dc09fa 100644
--- a/css/main.css
+++ b/css/main.css
@@ -262,4 +262,30 @@ input.numberInput{
.btn-halfWidth {
width: 47%;
+}
+
+#navRibbon{
+ height: 30px;
+ width: 300px;
+ z-index: 1;
+ display: block;
+ position: absolute;
+ margin: 0 auto;
+ left: 0;
+ right: 0;
+ bottom: 35px;
+ opacity: 0.75;
+}
+#navRibbon .btn-toolbar{
+ margin: 0 50px;
+ left: 0;
+ right: 0;
+}
+
+#navRibbon .btn-ribbon{
+ background-color: #444;
+}
+
+#navRibbon .btn-ribbon:hover{
+ background-color: #000;
}
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 09de1c03..bade9628 100644
--- a/js/main.js
+++ b/js/main.js
@@ -23,6 +23,7 @@ $(function(){
//ui
new NavBar({model:dmaGlobals.appState});
+ new Ribbon({model:dmaGlobals.appState});
//threeJS View
new ThreeView({model:dmaGlobals.three, appState:dmaGlobals.appState});
diff --git a/js/menus/Ribbon.js b/js/menus/Ribbon.js
new file mode 100644
index 00000000..775938a6
--- /dev/null
+++ b/js/menus/Ribbon.js
@@ -0,0 +1,44 @@
+/**
+ * Created by fab on 3/18/15.
+ */
+
+
+Ribbon = Backbone.View.extend({
+
+ el: "#navRibbon",
+
+ events: {
+ "click #cellModeToggle": "_toggleCellMode"
+ },
+
+ initialize: function(){
+
+ _.bindAll(this, "render");
+
+ this.listenTo(this.model, "change:cellMode", this.render);
+ this.render();
+ },
+
+ _toggleCellMode: function(e){
+ e.preventDefault();
+ var currentState = dmaGlobals.appState.get("cellMode");
+ var nextState = "cell";
+ if (currentState == "cell"){
+ nextState = "part";
+ }
+ dmaGlobals.appState.set("cellMode", nextState);
+ },
+
+ render: function(){
+ this.$el.html(this.template(this.model.toJSON()));
+ },
+
+ template: _.template('\
+ <div class="btn-toolbar">\
+ <div class="btn-group">\
+ <a id="cellModeToggle" class="btn btn-primary btn-ribbon" href="#fakelink">toggle cell/part view</a>\
+ </div>\
+ </div>\
+ ')
+
+});
\ No newline at end of file
diff --git a/main.html b/main.html
index afb20398..e35761c1 100644
--- a/main.html
+++ b/main.html
@@ -71,6 +71,7 @@
<!--views-->
<script src="js/menus/MenuWrapperView.js"></script>
<script src="js/menus/Navbar.js"></script>
+ <script src="js/menus/Ribbon.js"></script>
<script src="js/menus/LatticeMenuView.js"></script>
<script src="js/menus/ImportMenuView.js"></script>
<script src="js/menus/PartMenuView.js"></script>
@@ -171,14 +172,7 @@
</div>
<div id="menuWrapper"><div id="menuHeader"></div><div id="menuContent"></div></div>
-
-<div id="about" class="row navMenu">
- <div class="row demo-row">
- <div class="col-xs-3">
- Latest code available on github
- </div>
- </div>
-</div>
+<div id="navRibbon"></div>
<div id="threeContainer"></div>
--
GitLab