add rounded buttons to the composer flow; slay multi-photo option

app/assets/javascripts/app/models/post.js

@@ -69,7 +69,6 @@ app.models.Post = Backbone.Model.extend(_.extend({}, app.models.formatDateMixin,
     "status-with-photo-backdrop",
     "note",
     "rich-media",
-    "multi-photo",
     "photo-backdrop",
     "activity-streams-photo",
     "status"

app/assets/javascripts/app/pages/composer.js

@@ -7,7 +7,7 @@ app.pages.Composer = app.views.Base.extend({
   },
 
   events : {
-    "click button.next" : "navigateNext"
+    "click .next" : "navigateNext"
   },
 
   formAttrs : {
@@ -22,7 +22,9 @@ app.pages.Composer = app.views.Base.extend({
 
   unbind : function(){
     this.model.off()
-    this.model.photos.off()
+    if(this.model.photos) {
+      this.model.photos.off()
+    }
   },
 
   navigateNext : function(){

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

@@ -49,8 +49,8 @@ app.views.framerControls = app.views.Base.extend({
   templateName : 'framer-controls',
 
   events : {
-    "click button.done" : "saveFrame",
-    "click button.back" : "editFrame",
+    "click input.done" : "saveFrame",
+    "click input.back" : "editFrame",
     "change input" : "setFormAttrs"
   },
 

app/assets/javascripts/app/views/post/mood_view.js

@@ -33,7 +33,7 @@ app.views.Post.Day = app.views.Post.Mood.extend({
 })
 
 app.views.Post.Night = app.views.Post.Mood.extend({
-  mood : "night",
+  mood : "night"
 })
 
 app.views.Post.Newspaper = app.views.Post.Mood.extend({

app/assets/stylesheets/new_styles/_base.scss

@@ -14,11 +14,6 @@ a { color : rgb(42,156,235)  }
 .icon-red   { background-image: image_url("img/glyphicons-halflings-red.png");   }
 .icon-blue  { background-image: image_url("img/glyphicons-halflings-blue.png");  }
 
-.photoset {
-  @include center(horizontal);
-  width: 100%;
-}
-
 .rich-media {
   background-color: $night-background-color;
 
@@ -177,12 +172,6 @@ article { //mood posts
     #author-info {
       color : $night-text-color;
     }
-
-    .photo-viewer {
-      img {
-        max-height: 80%;
-      }
-    }
   }
 
   &.newspaper {
@@ -217,26 +206,15 @@ article { //mood posts
     color : #fff;
   }
 
-  &.multi-photo {
-    p {
-      @include media-text();
-    }
+  .img-bounding-box {
+    margin : 10px;
+    display : inline-block;
+    text-align : left;
+  }
 
-    .img-bounding-box {
-      display: table-cell;
-      text-align: center;
-      vertical-align: middle;
-
-      padding: 20px;
-      max-height: 400px;
-      width: 300px;
-    }
-
-    img {
-      @include photo-shadow();
-      max-width: 100%;
-      max-height: 100%;
-    }
+  img {
+    max-height: 400px;
+    max-width: 400px;
   }
 }
 

app/assets/stylesheets/new_styles/_canvas.scss

@@ -274,8 +274,7 @@
 
   &.day:not(.sticky-note),
   &.has-text:not(.sticky-note):not(.wallpaper),
-  &.night:not(.sticky-note),
-  &.multi-photo:not(.sticky-note) {
+  &.night:not(.sticky-note) {
     img {
       border-bottom : 1px solid #ddd;
     }

app/assets/stylesheets/new_styles/_composer.scss

@@ -39,6 +39,7 @@
   legend {
     color : #fff;
     text-align : left;
+    border : none;
   }
 
   textarea#post_text{
@@ -51,7 +52,11 @@
     max-height: 68px;
 
     .aspect-selector {
-      float: left;
+      display : inline-block;
+
+      .aspects_dropdown {
+        display : inline-block;
+      }
 
       form {
         margin: 0
@@ -83,8 +88,8 @@
     }
 
     .service-selector {
-      float: left;
       margin-left: 100px;
+      display : inline-block;
     }
 
     .dropdown-menu {
@@ -129,6 +134,8 @@
   // the checkbox should be hidden, and in the off state the service icons should be lighter
   // when the service icons are clicked they should be lighter, and toggle the hidden checkbox.
   .magic-service-selector {
+    margin : 0;
+
     label { display : inline; }
 
     img {
@@ -157,6 +164,21 @@
   }
 }
 
+input[type="image"] {
+  height : 70px;
+  width : 70px;
+
+  &:active {
+    -webkit-transform : scale(0.95);
+       -moz-transform : scale(0.95);
+        -ms-transform : scale(0.95);
+  }
+}
+
+#controls-wrapper {
+  text-align : center;
+}
+
 .new_photo .photo{
   display: inline;
   max-width: 200px;

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

@@ -1,3 +1,4 @@
 <div id='controls-wrapper'>
-  <button class="done btn btn-primary next">Next <i class="icon-arrow-right icon-white"></i></button>
+  <input type="image" src="{{imageUrl "buttons/close@2x.png"}}" class="cancel" />
+  <input type="image" src="{{imageUrl "buttons/next_hov@2x.png"}}" class="next"/>
 </div>

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

@@ -1,12 +1,16 @@
-<div id='controls-wrapper'>
+<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>
-    <button id='back' class="back btn">Back</button>
-    <button id='done' class="done btn btn-success">Post <i class='icon-white icon-ok-sign'></i></button>
+
     <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>

app/assets/templates/photo-viewer.jst.hbs

@@ -1,3 +1,7 @@
-{{#each photos}}
-   <img src="{{sizes.large}}"/>
-{{/each}}
+<div class="photo-set">
+    {{#each photos}}
+        <div class="img-bounding-box">
+            <img src="{{sizes.large}}"/>
+        </div>
+    {{/each}}
+</div>

app/assets/templates/post-viewer/content/multi-photo.jst.hbs

@@ -1,9 +0,0 @@
-{{{text}}}
-
-<div class="photoset">
-  {{#each photos}}
-    <div class="img-bounding-box">
-      <img src="{{sizes.large}}" />
-    </div>
-  {{/each}}
-</div>

db/migrate/20120519015723_remove_multi_photo_frame_reference.rb

@@ -0,0 +1,8 @@
+class RemoveMultiPhotoFrameReference < ActiveRecord::Migration
+  def up
+    execute("UPDATE posts SET frame_name='Day' WHERE frame_name='multi-photo'")
+  end
+
+  def down
+  end
+end

db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 20120517014034) do
+ActiveRecord::Schema.define(:version => 20120519015723) do
 
   create_table "account_deletions", :force => true do |t|
     t.string  "diaspora_handle"

features/step_definitions/trumpeter_steps.rb

@@ -29,11 +29,11 @@ def select_from_dropdown(option_text, dropdown)
 end
 
 def go_to_framer
-  click_button "Next"
+  find(".next").click()
 end
 
 def finalize_frame
-  click_button "done"
+  find(".done").click()
 end
 
 def assert_post_renders_with(mood)
@@ -168,5 +168,5 @@ Then /^"([^"]*)" should be the first canvas frame$/ do |post_text|
 end
 
 When /^I go back to the composer$/ do
-  click_button "Back"
+  find(".back").click()
 end

lib/template_picker.rb

@@ -4,7 +4,6 @@ class TemplatePicker
   TEMPLATES = %w{ status_with_photo_backdrop
                   note
                   rich_media
-                  multi_photo
                   photo_backdrop
                   activity_streams_photo
                   status
@@ -34,10 +33,6 @@ class TemplatePicker
     post.o_embed_cache.present?
   end
 
-  def multi_photo?
-    post.photos.size > 1
-  end
-
   def photo_backdrop?
     post.photos.size == 1 
   end

spec/factories.rb

@@ -205,12 +205,6 @@ FactoryGirl.define do
   end
 
   #templates
-  factory(:multi_photo, :parent => :status_message_with_photo) do
-    after_build do |sm|
-      2.times{ Factory(:photo, :author => sm.author, :status_message => sm, :pending => false, :public => public)}
-    end
-  end
-
   factory(:status_with_photo_backdrop, :parent => :status_message_with_photo)
 
   factory(:photo_backdrop, :parent => :status_message_with_photo) do

spec/javascripts/app/pages/composer_spec.js

@@ -14,7 +14,7 @@ describe("app.pages.Composer", function(){
       })
 
       it("navigates to the framer", function(){
-        this.page.$("button.next").click()
+        this.page.$("input.next").click()
         expect(this.navigateSpy).toHaveBeenCalledWith("framer", true)
       });
 
@@ -24,7 +24,7 @@ describe("app.pages.Composer", function(){
         })
 
         it("instantiates a post on form submit", function(){
-          this.page.$("button.next").click()
+          this.page.$("input.next").click()
           waitsFor(function(){ return this.navigateSpy.wasCalled })
           runs(function(){
             expect(this.page.model.get("text")).toBe("Oh My")

spec/javascripts/app/pages/framer_spec.js

@@ -43,7 +43,7 @@ describe("app.pages.Framer", function(){
 
     it("saves the model when you click done",function(){
       spyOn(app.frame, "save");
-      this.page.$("button.done").click();
+      this.page.$("input.done").click();
       expect(app.frame.save).toHaveBeenCalled();
     });
 

spec/lib/template_picker_spec.rb

@@ -42,12 +42,6 @@ describe TemplatePicker do
     end
   end
 
-  describe 'multi_photo?' do
-    it 'is true if the post contains more than one photo' do
-      TemplatePicker.new(post).should be_multi_photo
-    end
-  end
-
   describe '#photo_backdrop?' do
     it 'is true if the post contains only one photo' do
       @post_stubs.merge!(:photos => stub(:size => 1))