DG MS; moved framer controls into a subview & off to the side

app/assets/javascripts/app/pages/framer.js

@@ -4,7 +4,7 @@ app.pages.Framer = app.views.Base.extend({
   id : "post-content",
 
   subviews : {
-    ".flow-content" : "postView",
+    ".flow-content" : "framerContent",
     ".flow-controls .controls" : "framerControls"
   },
 
@@ -13,9 +13,9 @@ app.pages.Framer = app.views.Base.extend({
     if(!this.model.get("frame_name")) this.model.setFrameName()
 
     this.model.authorIsCurrentUser = function(){ return true }
-    this.model.bind("change:frame_name", this.render, this)
     this.model.bind("sync", this.navigateNext, this)
 
+    this.framerContent = new app.views.framerContent({model : this.model})
     this.framerControls = new app.views.framerControls({model : this.model})
   },
 
@@ -23,10 +23,6 @@ app.pages.Framer = app.views.Base.extend({
     this.model.off()
   },
 
-  postView : function(){
-    return new app.views.Post.SmallFrame({model : this.model})
-  },
-
   navigateNext : function(){
     if(parent.location.pathname == '/new_bookmarklet') {
       this.bookmarkletNavigation()
@@ -45,6 +41,45 @@ app.pages.Framer = app.views.Base.extend({
   }
 });
 
+app.views.framerContent = app.views.Base.extend({
+  templateName : "framer-content",
+
+  events : {
+    "change input" : "setFormAttrs"
+  },
+
+  subviews : {
+    ".preview" : "smallFrameView",
+    ".template-picker" : 'templatePicker'
+  },
+
+  formAttrs : {
+    "input.mood:checked" : "frame_name"
+  },
+
+  initialize : function(){
+    this.model.bind("change:frame_name", this.render, this)
+  },
+
+  smallFrameView : function() {
+    return new app.views.Post.SmallFrame({model : this.model})
+  },
+
+  presenter : function() {
+    var selectedFrame = this.model.get("frame_name")
+      , templates = app.models.Post.frameMoods;
+
+    return _.extend(this.defaultPresenter(), {
+      templates : _.map(templates, function(template) {
+        return {
+          name : template,
+          checked : selectedFrame === template
+        }
+      })
+    })
+  }
+});
+
 app.views.framerControls = app.views.Base.extend({
   templateName : 'framer-controls',
 
@@ -55,13 +90,11 @@ app.views.framerControls = app.views.Base.extend({
   },
 
   subviews:{
-    ".template-picker":'templatePicker',
-    ".aspect-selector":"aspectsDropdown",
-    ".service-selector":"servicesSelector"
+    ".aspect-selector" : "aspectsDropdown",
+    ".service-selector" : "servicesSelector"
   },
 
   formAttrs : {
-    "input.mood:checked" : "frame_name",
     "input.aspect_ids" : "aspect_ids[]",
     "input.services" : "services[]"
   },
@@ -71,19 +104,6 @@ app.views.framerControls = app.views.Base.extend({
     this.servicesSelector = new app.views.ServicesSelector({model:this.model});
   },
 
-  presenter : function() {
-    var selectedFrame = this.model.get("frame_name")
-      , templates = app.models.Post.frameMoods //subtract re-implemented templates
-    return _.extend(this.defaultPresenter(), {
-      templates :_.map(templates, function(template) {
-        return {
-          name : template,
-          checked : selectedFrame === template
-        }
-      })
-    })
-  },
-
   saveFrame : function(){
     this.$('button').prop('disabled', 'disabled').addClass('disabled')
     this.setFormAttrs()

app/assets/stylesheets/new_styles/_composer.scss

@@ -43,6 +43,36 @@
     padding : 10px;
   }
 
+  .template-picker {
+    margin-bottom : 1em;
+
+    input {
+      display : none;
+    }
+
+    label {
+      @include transition(background-color);
+      @include border-radius();
+
+      cursor : pointer;
+
+      margin-right: 11px;
+      padding: 7px;
+      color: #999;
+      font-size: 14px;
+      line-height: 2em;
+
+      &:hover {
+        background-color: #222;
+        text-decoration: none;
+      }
+    }
+
+    input:checked + label {
+      background-color: #222;
+    }
+  }
+
   .flow-controls {
     padding: 20px 0;
     max-height: 68px;
@@ -84,45 +114,12 @@
     }
 
     .service-selector {
-      margin-left: 100px;
       display : inline-block;
     }
 
     .dropdown-menu {
       text-align: left;
     }
-
-    .template-picker {
-      margin-bottom : 1em;
-
-      input {
-        display : none;
-      }
-
-      label {
-        @include transition(background-color);
-        @include border-radius();
-
-        cursor : pointer;
-
-        display: inline;
-        margin-right: 11px;
-        padding: 7px;
-        color: #999;
-        font-size: 14px;
-        line-height: 2em;
-
-        &:hover {
-          background-color: #222;
-          text-decoration: none;
-        }
-      }
-
-      input:checked + label {
-        background-color: #222;
-      }
-    }
-
   }
 
   // this is about the service toggle icons, there is a jasmine test that tests this in service_selector spec
@@ -171,7 +168,7 @@ input[type="image"] {
   }
 }
 
-#controls-wrapper {
+.flow-controls {
   text-align : center;
 }
 

app/assets/templates/composer-controls.jst.hbs

@@ -1,4 +1,2 @@
-<div id='controls-wrapper'>
-  <input type="image" src="{{imageUrl "buttons/close@2x.png"}}" class="cancel" />
-  <input type="image" src="{{imageUrl "buttons/next_hov@2x.png"}}" class="next"/>
-</div>
+<input type="image" src="{{imageUrl "buttons/close@2x.png"}}" class="cancel" />
+<input type="image" src="{{imageUrl "buttons/next_hov@2x.png"}}" class="next" />

app/assets/templates/flow.jst.hbs

@@ -1,15 +1,13 @@
 <div id="framer">
     <div class="container">
         <div class="row">
-            <div class="span8 offset2">
+            <div class="span6 offset3">
                 <div class="row">
                     <div class="flow-content"/>
                 </div>
                 <div class="row">
-                    <div class="span8">
-                        <div class="flow-controls">
-                            <div class="controls"/>
-                        </div>
+                    <div class="flow-controls">
+                        <div class="controls"/>
                     </div>
                 </div>
             </div>

app/assets/templates/framer-content.jst.hbs

@@ -0,0 +1,8 @@
+<div class="preview"> </div>
+
+<div class='template-picker'>
+    {{#each templates}}
+    <input id='frame_name_{{name}}' name="frame_name" type="radio" class="mood" value={{name}} {{#if checked}}checked=checked{{/if}} />
+    <label for='frame_name_{{name}}'>{{name}}</label>
+    {{/each}}
+</div>

app/assets/templates/framer-controls.jst.hbs

@@ -1,16 +1,4 @@
-<div>
-    <div class='template-picker'>
-        {{#each templates}}
-            <input id='frame_name_{{name}}' name="frame_name" type="radio" class="mood" value={{name}} {{#if checked}}checked=checked{{/if}} />
-            <label for='frame_name_{{name}}'>{{name}}</label>
-        {{/each}}
-    </div>
-
-    <div class="aspect-selector"/>
-    <div class="service-selector"/>
-</div>
-
-<div id='controls-wrapper'>
-    <input type="image" src="{{imageUrl "buttons/back_hov@2x.png"}}" class="back"/>
-    <input type="image" src="{{imageUrl "buttons/done_hov@2x.png"}}" class="done" />
-</div>
+<input type="image" src="{{imageUrl "buttons/back_hov@2x.png"}}" class="back" />
+<div class="aspect-selector"/>
+<div class="service-selector"/>
+<input type="image" src="{{imageUrl "buttons/done_hov@2x.png"}}" class="done" />

app/assets/templates/post-form.jst.hbs

@@ -1,14 +1,12 @@
-<h3 class="span8">
+<h3>
     Make something!
 </h3>
 
-<div class="span8 new_picture"/>
+<div class="new_picture"/>
 
-<div class='span8'>
-    <form class="new-post">
-        <fieldset>
-            <textarea name="text" id='post_text' class="text span8" placeholder="Add Text">{{text}}</textarea>
-            <textarea id="text_with_markup" style="display:none;"/>
-        </fieldset>
-    </form>
-</div>
+<form class="new-post">
+    <fieldset>
+        <textarea name="text" id='post_text' class="text span8" placeholder="Add Text">{{text}}</textarea>
+        <textarea id="text_with_markup" style="display:none;"/>
+    </fieldset>
+</form>

spec/javascripts/app/pages/framer_spec.js

@@ -8,10 +8,6 @@ describe("app.pages.Framer", function(){
     expect(this.model).toBe(app.frame) //uses global state of app.frame :/
   });
 
-  it("passes the model down to the post view", function(){
-    expect(this.page.postView().model).toBe(app.frame)
-  });
-
   describe("navigation on save", function(){
     it("navigates to the current user's profile page", function(){
       spyOn(app.router, "navigate")