upload wallpaper for great success.

app/assets/javascripts/app/forms/picture_form.js

@@ -1,11 +1,24 @@
-app.forms.Picture = app.views.Base.extend({
+app.forms.PictureBase = app.views.Base.extend({
-  templateName : "picture-form",
-
   events : {
     'ajax:complete .new_photo' : "photoUploaded",
     "change input[name='photo[user_file]']" : "submitForm"
   },
 
+  photoUploaded : $.noop,
+
+  postRenderTemplate : function(){
+    this.$("input[name=authenticity_token]").val($("meta[name=csrf-token]").attr("content"))
+  },
+
+  submitForm : function (){
+    this.$("form").submit();
+  }
+});
+
+/* multi photo uploader */
+app.forms.Picture = app.forms.PictureBase.extend({
+  templateName : "picture-form",
+
   initialize : function() {
     this.photos = new Backbone.Collection()
     this.photos.bind("add", this.render, this)
@@ -39,3 +52,17 @@ app.forms.Picture = app.views.Base.extend({
     })
   }
 });
+
+/* wallpaper uploader */
+app.forms.Wallpaper = app.forms.PictureBase.extend({
+  templateName : "wallpaper-form",
+
+  photoUploaded : function(evt, xhr) {
+    resp = JSON.parse(xhr.responseText)
+    if(resp.success) {
+      $("#profile").css("background-image", "url(" + resp.data.wallpaper + ")")
+    } else {
+      alert("Upload failed!  Please try again. " + resp.error);
+    }
+  }
+});

app/assets/javascripts/app/pages/profile.js

@@ -9,7 +9,8 @@ app.pages.Profile = app.views.Base.extend({
 
   subviews : {
     "#profile-info" : "profileInfo",
-    "#canvas" : "canvasView"
+    "#canvas" : "canvasView",
+    "#wallpaper-upload" : "wallpaperForm"
   },
 
   events : {
@@ -38,7 +39,7 @@ app.pages.Profile = app.views.Base.extend({
     this.model = new app.models.Profile.findByGuid(options.personId)
     this.stream = options && options.stream || new app.models.Stream()
 
-    this.model.bind("change", this.setPageTitle, this)
+    this.model.bind("change", this.setPageTitleAndBackground, this)
 
     /* binds for getting started pulsation */
     this.stream.bind("fetched", this.pulsateNewPostControl, this)
@@ -47,6 +48,7 @@ app.pages.Profile = app.views.Base.extend({
     this.stream.preloadOrFetch();
 
     this.canvasView = new app.views.Canvas({ model : this.stream })
+    this.wallpaperForm = new app.forms.Wallpaper()
 
     // send in isOwnProfile data
     this.profileInfo = new app.views.ProfileInfo({ model : this.model.set({isOwnProfile : this.isOwnProfile()}) })
@@ -60,9 +62,11 @@ app.pages.Profile = app.views.Base.extend({
       ]("pulse")
   },
 
-  setPageTitle : function() {
+  setPageTitleAndBackground : function() {
-    if(this.model.get("name"))
+    if(this.model.get("name")) {
       document.title = this.model.get("name")
+      this.$el.css("background-image", "url(" + this.model.get("wallpaper") + ")")
+    }
   },
 
   toggleEdit : function(evt) {

app/assets/stylesheets/new_styles/_base.scss

@@ -441,19 +441,6 @@ div[data-template=flow] {
   right : 10px;
   top : 10px;
 
-
-  .label {
-    padding : 2px 5px;
-    padding-bottom : 3px;
-
-    span {
-      display : inline-block;
-      position : relative;
-      top : 1px;
-      font-family : Roboto-Bold;
-    }
-  }
-
   & > a {
     @include transition(opacity);
     @include opacity(0.4);
@@ -466,3 +453,16 @@ div[data-template=flow] {
     }
   }
 }
+
+/* bootstrap label fixes for Roboto */
+.label {
+  padding : 2px 5px;
+  padding-bottom : 3px;
+
+  span {
+    display : inline-block;
+    position : relative;
+    top : 1px;
+    font-family : Roboto-Bold;
+  }
+}

app/assets/stylesheets/new_styles/_composer.scss

@@ -11,9 +11,7 @@
 
 #photo_upload_button {
   position: relative;
-  margin : {
+  margin-bottom : 9px;
-    bottom : 9px;
-  }
 
   input{
     @include opacity(0);
@@ -21,6 +19,7 @@
     top: 0;
     left: 0;  
     height:100%;
+    cursor : pointer;
   }
 }
 

app/assets/stylesheets/new_styles/_profile.scss

@@ -13,7 +13,7 @@
        NOTE: I noticed that just turning the brightness down had an adverse affect on contrast,
        thus the "washing out" at -50 contrast.  For more info on this specific command, read the documentation
        on it here: http://www.imagemagick.org/script/command-line-options.php#brightness-contrast */
-    image : url('/imagetest.jpg');
+    //image : url('/imagetest.jpg');
 
     size : cover;
     attachment : fixed;

app/assets/templates/profile.jst.hbs

@@ -1,3 +1,7 @@
+{{#if isOwnProfile}}
+    <div id="wallpaper-upload"></div>
+{{/if}}
+
 <div class="container">
     <div id="top-right-nav">
         {{#if showFollowButton}}

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

@@ -0,0 +1,13 @@
+<form accept-charset="UTF-8" action="/upload_wallpaper" class="new_photo" data-remote="true" enctype="multipart/form-data" method="post" style="position:absolute; left:10px; top: 10px; opacity:0.4;">
+    <input name="authenticity_token" type="hidden"/>
+    <div style="margin:0;padding:0;display:inline">
+        <input name="utf8" type="hidden" value="✓"/>
+    </div>
+
+    <div id='photo_upload_button'>
+        <a href="#" class='label label-inverse'>
+            <i class="icon-picture icon-white" style="margin-right:4px;"></i>CHANGE WALLPAPER
+        </a>
+        <input name="photo[user_file]" type="file"/>
+    </div>
+</form>

app/controllers/profiles_controller.rb

@@ -16,14 +16,14 @@ class ProfilesController < ApplicationController
     respond_to do |format|
       format.json {
         public_json = @person.as_api_response(:backbone)
-        extra_json = {}
+        extra_json = {:wallpaper => @person.profile.wallpaper.url}
 
         if(current_user && (current_user.person == @person || current_user.contacts.receiving.where(:person_id => @person.id).first))
-          extra_json = {
+          extra_json = extra_json.merge({
               :location => @person.profile.location,
               :birthday => @person.profile.formatted_birthday,
               :bio => @person.profile.bio
-          }
+          })
         end
 
         render :json => public_json.merge(extra_json)
@@ -77,6 +77,19 @@ class ProfilesController < ApplicationController
     end
   end
 
+  def upload_wallpaper_image
+    if remotipart_submitted?
+      profile = current_user.person.profile
+
+      profile.wallpaper.store! params[:photo][:user_file]
+      if profile.save
+        respond_to do |format|
+          format.json { render :json => {"success" => true, "data" => {"wallpaper" => profile.wallpaper.url}} }
+        end
+      end
+    end
+  end
+
   protected
 
   def munge_tag_string

app/models/profile.rb

@@ -5,6 +5,8 @@
 class Profile < ActiveRecord::Base
   self.include_root_in_json = false
 
+  mount_uploader :wallpaper, WallpaperUploader
+
   include Diaspora::Federated::Base
   include Diaspora::Taggable
 

app/uploaders/wallpaper_uploader.rb

@@ -0,0 +1,27 @@
+class WallpaperUploader < CarrierWave::Uploader::Base
+  include CarrierWave::MiniMagick
+
+  storage :file
+
+  process :darken
+
+  def store_dir
+    "uploads/images"
+  end
+
+  def extension_white_list
+    %w(jpg jpeg png tiff)
+  end
+
+  #def filename
+  #  SecureRandom.hex(10) + File.extname(@filename) if @filename
+  #end
+
+  def darken
+    manipulate! do |img|
+      img.brightness_contrast "-40x-50"
+      img = yield(img) if block_given?
+      img
+    end
+  end
+end

config/routes.rb

@@ -54,6 +54,8 @@ Diaspora::Application.routes.draw do
     put :make_profile_photo
   end
 
+  post "upload_wallpaper" => 'profiles#upload_wallpaper_image'
+
   # ActivityStreams routes
   scope "/activity_streams", :module => "activity_streams", :as => "activity_streams" do
     resources :photos, :controller => "photos", :only => [:create]

db/migrate/20120506053156_add_wallpaper_to_profile.rb

@@ -0,0 +1,5 @@
+class AddWallpaperToProfile < ActiveRecord::Migration
+  def change
+    add_column :profiles, :wallpaper, :string
+  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 => 20120427152648) do
+ActiveRecord::Schema.define(:version => 20120506053156) do
 
   create_table "account_deletions", :force => true do |t|
     t.string  "diaspora_handle"
@@ -369,6 +369,7 @@ ActiveRecord::Schema.define(:version => 20120427152648) do
     t.string   "location"
     t.string   "full_name",        :limit => 70
     t.boolean  "nsfw",                            :default => false
+    t.string   "wallpaper"
   end
 
   add_index "profiles", ["full_name", "searchable"], :name => "index_profiles_on_full_name_and_searchable"