diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb index 8d61f9c9a..d3a09d9ed 100644 --- a/app/controllers/users_controller.rb +++ b/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 diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index cbbf5fca3..31d379fdf 100644 --- a/app/views/layouts/application.html.haml +++ b/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' diff --git a/app/views/users/edit.html.haml b/app/views/users/edit.html.haml index fb5b15766..594647c29 100644 --- a/app/views/users/edit.html.haml +++ b/app/views/users/edit.html.haml @@ -1,18 +1,31 @@ -%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 diff --git a/public/javascripts/image_picker.js b/public/javascripts/image_picker.js new file mode 100644 index 000000000..7324d680c --- /dev/null +++ b/public/javascripts/image_picker.js @@ -0,0 +1,11 @@ +$(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); + }); +}); diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 86c4fc512..5c820ef31 100644 --- a/public/stylesheets/application.css +++ b/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; } diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index 09bd60a8b..2f034a93e 100644 --- a/public/stylesheets/sass/application.sass +++ b/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 +