DG IZ; added simple image picker for edit profile page. currently displays all images uploaded.

app/controllers/users_controller.rb

@@ -12,6 +12,7 @@ class UsersController < ApplicationController
   def edit
     @user = User.first(:id => params[:id])
     @profile = @user.profile
+    @photos = Photo.all
   end
 
   def update

app/views/layouts/application.html.haml

@@ -9,7 +9,8 @@
     = stylesheet_link_tag "blueprint/screen", :media => 'screen'
     = stylesheet_link_tag "application"
     /= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
-    = javascript_include_tag 'jquery142', 'rails', 'view', 'publisher', 'google'
+    = javascript_include_tag 'jquery142', 'rails', 'google'
+    = javascript_include_tag 'view', 'publisher', 'image_picker'
     = javascript_include_tag 'tiny_mce/tiny_mce', 'jquery.infieldlabel'
     = render 'js/websocket_js'
     

app/views/users/edit.html.haml

-%h3 Editing Profile
+%h1 Editing Profile
 
 = form_for @user do |f|
   = f.error_messages
 
   = f.fields_for :profile do |p|
+
+    %h3 Picture
+    %div#image_picker
+      = p.hidden_field :image_url, :value => @profile.image_url, :id => 'image_url_field'
+      - for photo in @photos
+        - if photo.image.url(:thumb_medium) == @profile.image_url
+          %div.small_photo{:id => photo.image.thumb_medium.url, :class=>'selected'}
+            = check_box_tag 'checked_photo', true, true
+            = link_to image_tag(photo.image.url(:thumb_medium)), "#"
+        - else
+          %div.small_photo{:id => photo.image.thumb_medium.url}
+            = check_box_tag 'checked_photo'
+            = link_to image_tag(photo.image.url(:thumb_medium)), "#"
+
+
+    %h3 Info
     %p
       = p.label :first_name
       = p.text_field :first_name, :value => @profile.first_name
     %p
       = p.label :last_name 
       = p.text_field :last_name, :value => @profile.last_name
-    %p
-      = p.label :image_url
-      = p.text_field :image_url, :value => @profile.image_url
 
   %p
     = f.label :email

public/javascripts/image_picker.js

+$(document).ready( function() {
+    $('div#image_picker div.small_photo').click( function() {
+      $('#image_url_field').val($(this).attr('id'));
+
+      $('div#image_picker div.small_photo').removeClass('selected');
+      $("div#image_picker div.small_photo input[type='checkbox']").attr("checked", false);
+
+      $(this).addClass('selected');
+      $(this).children("input[type='checkbox']").attr("checked", true);
+    });
+});

public/stylesheets/application.css

@@ -193,6 +193,7 @@ ul.comment_set {
 img.person_picture {
   max-width: 100%;
   border-radius: 3px;
+  -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   display: inline block; }
 
@@ -297,5 +298,20 @@ ul#publisher_content_pickers li {
   padding: 5px 10px;
   margin-right: 5px; }
 
-.selected {
+#publisher.selected {
   border-bottom: 3px solid #999999; }
+
+#image_picker .small_photo {
+  height: 100px;
+  position: relative;
+  display: inline-block;
+  margin-right: 1em;
+  margin-bottom: 1em; }
+  #image_picker .small_photo img {
+    border-radius: 3px; }
+  #image_picker .small_photo input[type='checkbox'] {
+    position: absolute; }
+#image_picker .selected {
+  -webkit-box-shadow: 0 3px 6px black;
+  -moz-box-shadow: 0 3px 6px black;
+  border: 1px solid white; }

public/stylesheets/sass/application.sass

@@ -230,6 +230,7 @@ ul.comment_set
 img.person_picture
   :max-width 100%
   :border-radius 3px
+  :-webkit-border-radius 3px
   :-moz-border-radius 3px
   :display inline block
 
@@ -348,6 +349,27 @@ ul#publisher_content_pickers li
   :margin
     :right 5px
 
-.selected
+#publisher.selected
   :border
     :bottom 3px solid #999
+
+#image_picker
+  .small_photo
+    :height 100px
+    :position relative
+    :display inline-block
+    :margin
+      :right 1em
+      :bottom 1em
+
+    img
+      :border-radius 3px
+
+    input[type='checkbox']
+      :position absolute
+
+  .selected
+    :-webkit-box-shadow 0 3px 6px #000
+    :-moz-box-shadow 0 3px 6px #000
+    :border 1px solid #fff
+