Improve the user image selection UI

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index bc5601113ac170ce21d12835aa9d7798311015f7..a1099a153c9c45a38e4936c3f72920b455f3aceb 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -928,8 +928,19 @@ p#contributorGuidance {
   border: 1px solid #ccc;
 }
 
   border: 1px solid #ccc;
 }
 

-#accountImage td {
-  padding-bottom: 0px;
+#accountForm td.accountImage {
+  img {
+    vertical-align: top;
+    margin-top: 3px;
+  }
+
+  table {
+    display: inline-block;
+
+    td {
+      padding-bottom: 0px;
+    }
+  }

 }
 
 .nohome .location {
 }
 
 .nohome .location {

diff --git a/app/views/user/account.html.erb b/app/views/user/account.html.erb
index 7adea7c2cec3884c19b6ab07b88735f4c10a6fc0..179e1b2f687b0d09a48d39ef33ae87d6c139de4c 100644 (file)
--- a/app/views/user/account.html.erb
+++ b/app/views/user/account.html.erb
@@ -84,27 +84,30 @@
     <td class="fieldName">
       <%= t 'user.account.image' %>
     </td>
     <td class="fieldName">
       <%= t 'user.account.image' %>
     </td>

-    <td valign="top">
-      <table id="accountImage">
+    <td class="accountImage">
+      <%= user_image @user %>
+      <table>

         <% if @user.image.file? %>
         <tr>
         <% if @user.image.file? %>
         <tr>

-          <td rowspan="4" valign="top"><%= user_image @user %></td>

           <td><%= radio_button_tag "image_action", "keep", !@user.image_use_gravatar %></td>
           <td><%= t 'user.account.keep image' %></td>
         </tr>
           <td><%= radio_button_tag "image_action", "keep", !@user.image_use_gravatar %></td>
           <td><%= t 'user.account.keep image' %></td>
         </tr>

+        <% end %>
+        <% if @user.image.file? || @user.image_use_gravatar? %>

         <tr>
           <td><%= radio_button_tag "image_action", "delete" %></td>
           <td><%= t 'user.account.delete image' %></td>
         </tr>
         <tr>
           <td><%= radio_button_tag "image_action", "delete" %></td>
           <td><%= t 'user.account.delete image' %></td>
         </tr>

+        <% end %>
+        <% if @user.image.file? %>

         <tr>
           <td><%= radio_button_tag "image_action", "new" %></td>
         <tr>
           <td><%= radio_button_tag "image_action", "new" %></td>

-          <td><%= t 'user.account.replace image' %><br /><%= f.file_field :image, :onchange => "$('image_action_new').prop('checked', true)" %><br /><span class="minorNote"><%= t 'user.account.image size hint' %></span></td>
+          <td><%= t 'user.account.replace image' %><br /><%= f.file_field :image, :onchange => "$('#image_action_new').prop('checked', true)" %><br /><span class="minorNote"><%= t 'user.account.image size hint' %></span></td>

         </tr>
         <% else %>
         <tr>
         </tr>
         <% else %>
         <tr>

-          <td rowspan="2" valign="top"><%= user_image @user %></td>
-          <td><%= radio_button_tag "image_action", "new", !@user.image_use_gravatar %></td>
-          <td><%= t 'user.account.new image' %> <%= f.file_field :image %><br /><span class="minorNote"><%= t 'user.account.image size hint' %></span></td>
+          <td><%= radio_button_tag "image_action", "new" %></td>
+          <td><%= t 'user.account.new image' %><br /><%= f.file_field :image, :onchange => "$('#image_action_new').prop('checked', true)" %><br /><span class="minorNote"><%= t 'user.account.image size hint' %></span></td>

         </tr>
         <% end %>
         <tr>
         </tr>
         <% end %>
         <tr>