Finished adding the appMenu and cleanup

bstaats · Mar 24, 2011 · 4ca57d5 · 4ca57d5
1 parent e228916
commit 4ca57d5
Show file tree

Hide file tree

Showing 11 changed files with 144 additions and 164 deletions.
diff --git a/.gitignore b/.gitignore
@@ -39,4 +39,6 @@ Thumbs.db
 *.swp
 
 .sass-cache
-frameworks/**/*
+frameworks/**/*
+/frameworks/scui
+/frameworks/sproutcore
diff --git a/modules/studio/delegates/app_menu.js b/modules/studio/delegates/app_menu.js
@@ -1,11 +1,11 @@
-sc_require('core');
-
 Workr.AppMenuDelegate = {
   isAppMenuDelegate: YES,
 
   search: function(filter){
     Workr.SearchResultsController.find(filter);
-  }
-
+  },
 
+  nothingClicked: function(){
+    Workr.StudioStatechart.sendAction('canvasClicked');
+  }
 }
diff --git a/modules/studio/resources/templates/app_menu.handlebars b/modules/studio/resources/templates/app_menu.handlebars
@@ -0,0 +1,17 @@
+<ul class="left">
+  {{! Why cant I embed a subview here? }}
+  {{!#view "Workr.AppMenuButton"}}
+    <li id='studio_btn' class='studio_btn'><span></span><label>Studio</label></li>
+  {{!/view}}
+</ul>
+<input type="text" placeholder="Search">
+<ul class="search_results"></ul>
+<ul class="menuitems">
+  <li class="login">   <span></span><label>Login</label></li>
+  <li></li>
+  <li class="new">     <span></span><label>New Workr</label></li>
+  <li class="load">    <span></span><label>Load Workr</label></li>
+  <li></li>
+  <li class="clear">   <span></span><label>Clear Canvas</label></li>
+</ul>
+
diff --git a/modules/studio/views/app_menu.js b/modules/studio/views/app_menu.js
@@ -4,16 +4,9 @@ Workr.AppMenu = SC.View.extend(
 
 
   tagName: 'div',
-  layerId: 'appmenu',
-  classNamesReset: YES,
-  classNames: ['menu'],
+  classNames: ['appmenu'],
   wantsAcceleratedLayer: YES,
   displayProperties:  ['viewClasses'],
-/*
-  transitions: {
-    left:{duration:0.4, timing:SC.Animatable.TRANSITION_EASE_IN_OUT}
-  },
-*/
   delegate: null,
 
   appMenuDelegate: function() {
@@ -39,27 +32,40 @@ Workr.AppMenu = SC.View.extend(
   opened: Ki.State.design({
 
     enterState: function(){
-      this.get('owner').animate('left', 0, Workr.TRANSITION);
+      this.get('owner').$().toggleClass('open');
+      // Have to set an empty call back here or the callback on the exitstate animate will fire.  WHY?
+      this.get('owner').animate('left', 0, Workr.TRANSITION, function(){});
     },
 
     exitState: function(){
-      this.get('owner').animate('left', -Workr.APPMENU_WIDTH, Workr.TRANSITION);
+      this.get('owner').animate('left', -Workr.APPMENU_WIDTH, Workr.TRANSITION, function(){
+        this.view.$().toggleClass('open');
+      });
+
     },
 
     close: function(){
       this.gotoState('closed')
     },
-
+
+    mouseDown: function(evt){
+      var id = evt.target.id || evt.target.parentNode.id,
+          del = this.get('owner').get('appMenuDelegate');
+
+      if(id=='studio_btn'){
+        del.nothingClicked();
+      }
+    },
+
+
   }),
 
 
   render: function (context, firstTime) {
     if(firstTime){
+      // how do I get this to recognize sub templateviews within this template?
       context.push(
-        '<ul class="tabs">',
-          '<li id="menu_studio_btn" class="studio_btn"><span></span><label>Studio</label></li>',
-        '</ul>',
-        '<div class="search_field">  <input type="text" value="Search" ></div>'
+        SC.TEMPLATES['app_menu']({sc_view:this})
       );
 
       this.set('owner', this); // why should I have to do this? the owner is this objects parent by default
@@ -72,11 +78,12 @@ Workr.AppMenu = SC.View.extend(
 
   },
 
+/*
   createChildViews: function(){
     var content = this.get('content');
 
     this.set('childViews', [
-/*
+
       this.createChildView(
         SCUI.ComboBoxView.design({
           layerId: 'appmenu_search',
@@ -105,35 +112,11 @@ Workr.AppMenu = SC.View.extend(
 
         })
       ),
-*/
 
-      this.createChildView(
-        SC.View.extend({
-          tagName: 'ul',
-          classNamesReset: YES,
-          classNames:'menuitems',
-          layout: { top: 80, left: 0, right:0, bottom:0 },
-          update: function(context) {
-          },
-          render: function (context, firstTime) {
-            if(firstTime){
-              context.push(
-                '<li id="appmenu_login">   <span></span><label>Login</label></li>',
-                '<li></li>',
-                '<li id="appmenu_new">     <span></span><label>New Workr</label></li>',
-                '<li id="appmenu_load">    <span></span><label>Load Workr</label></li>',
-                '<li></li>',
-                '<li id="appmenu_clear">   <span></span><label>Clear Canvas</label></li>'
-              );
-            }else{
-              this.update(context);
-            }
-          }
 
-        })
-      )
     ]);
   }
+*/
 
 
 });
diff --git a/modules/studio/views/top_menu.js b/modules/studio/views/top_menu.js
@@ -5,8 +5,8 @@ Workr.TopMenu = SC.View.extend(
 
   tagName: 'div',
   childViews: ['workrTitle'],
-  classNamesReset: YES,
   classNames: ['topmenu'],
+  wantsAcceleratedLayer: YES,
   delegate: null,
 
   topMenuDelegate: function() {
@@ -48,6 +48,8 @@ Workr.TopMenu = SC.View.extend(
 
   render: function(context, firstTime){
     if (firstTime) {
+
+      // how do I get this to recognize sub templateviews within this template?
       context.push(
         SC.TEMPLATES['top_menu']({sc_view:this})
       );
@@ -64,17 +66,11 @@ Workr.TopMenu = SC.View.extend(
   CHILDREN VIEWS
 */
   workrTitle: SC.LabelView.extend({
-    layout: { top: 7, left: Workr.LEFT_MARGIN*2, width:600, height: 22},
-    classNamesReset: YES,
+    layout: { top: 3, left: Workr.LEFT_MARGIN*2, width:600, height: 24},
     classNames: ['title'],
     isEditable: YES,
     contentBinding: 'Workr.masterWorkrController',
     contentValueKey: 'title'
-/*
-    transitions: {
-      left:{duration:0.4, timing:SC.Animatable.TRANSITION_EASE_IN_OUT}
-    }
-*/
   })