Redesign inbox

Cuts down on buttons, grey, and bold clutter.

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 0f71004812c693e19cfe11da89c3379e51aab128..bd812b7e3c9e9cdb339607dcdf243ebb60d95de4 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -652,6 +652,11 @@ body.site-export #tabnav a#exportanchor {
   margin-bottom: 5px;
 }
 
+/* rules for text content pages */
+.wide-table {
+  width:100%;
+}
+
 /* Rules for the home page */
 
 .site-index #map {
@@ -986,19 +991,48 @@ p#contributorGuidance {
 }
 
 /* Rules for message in/out box page */
+.messages {
+  width:100%;
+  border-collapse:collapse;
+  border-spacing:0;
+  border-width:0;
+}
 
-#messages {
-  border: 1px solid #ccc;
+.messages tbody tr {
+  border-top:1px solid #ccc;
 }
 
-.inbox-row-unread .inbox-subject {
-  font-weight: bold;
+.messages .inbox-row {
+  background:#eee;
+}
+
+.messages tr td,
+.messages tr th {
+  padding:0 5px;
 }
 
 .inbox-row .inbox-mark-read {
   display: none;
 }
 
+.info-line {
+  border-bottom:1px solid #ccc;
+  padding:5px 0 4px 0;
+}
+
+.info-line form,
+.info-line form div {
+  display:inline;
+}
+
+.info-line .user_thumbnail_tiny {
+  vertical-align:middle;
+}
+
+.right {
+  float:right;
+}
+
 .inbox-row-unread .inbox-mark-unread {
   display: none;
 }
@@ -1096,13 +1130,19 @@ textarea {
 img.user_image {
   max-width: 100px;
   max-height: 100px;
-  border: 1px solid black;
+  border: 1px solid #ccc;
 }
 
 img.user_thumbnail {
   max-width: 50px;
   max-height: 100px;
-  border: 1px solid black;
+  border: 1px solid #ccc;
+}
+
+img.user_thumbnail_tiny {
+  max-width: 25px;
+  max-height: 25px;
+  border: 1px solid #ccc;
 }
 
 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */

diff --git a/app/helpers/user_helper.rb b/app/helpers/user_helper.rb
index 6a239df5d723d02f0b02f2fa5e68e58871a94a1d..70125e8047e5f1fc13f35dad24a59da2d5148846 100644 (file)
--- a/app/helpers/user_helper.rb
+++ b/app/helpers/user_helper.rb
@@ -11,6 +11,12 @@ module UserHelper
     image_tag user.image.url(:small), options
   end
 
+  def user_thumbnail_tiny(user, options = {})
+    options[:class] ||= "user_thumbnail_tiny"
+
+    image_tag user.image.url(:small), options
+  end
+
   def openid_logo
     image_tag "openid_small.png", :alt => t('user.login.openid_logo_alt'), :class => "openid_logo"
   end

diff --git a/app/views/message/_message_summary.html.erb b/app/views/message/_message_summary.html.erb
index 6d09d5c713ec7ea14395fd45bc82581148a6a9fa..b52eb1f1b93d833933076aa6195306adabce9535 100644 (file)
--- a/app/views/message/_message_summary.html.erb
+++ b/app/views/message/_message_summary.html.erb
@@ -1,11 +1,8 @@
-<% this_colour = cycle('lightgrey', 'white') %>
-
 <tr id="inbox-<%= message_summary.id %>" class="inbox-row<%= "-unread" if not message_summary.message_read? %>">
-  <td class="inbox-sender" bgcolor="<%= this_colour %>"><%= link_to h(message_summary.sender.display_name), :controller => 'user', :action => 'view', :display_name => message_summary.sender.display_name %></td>
-  <td class="inbox-subject" bgcolor="<%= this_colour %>"><%= link_to h(message_summary.title), :controller => 'message', :action => 'read', :message_id => message_summary.id  %></td>
-  <td class="inbox-sent nowrap" bgcolor="<%= this_colour %>"><%= l message_summary.sent_on, :format => :friendly %></td>
+  <td class="inbox-sender"><%= link_to h(message_summary.sender.display_name), :controller => 'user', :action => 'view', :display_name => message_summary.sender.display_name %></td>
+  <td class="inbox-subject"><%= link_to h(message_summary.title), :controller => 'message', :action => 'read', :message_id => message_summary.id  %></td>
+  <td class="inbox-sent nowrap"><%= l message_summary.sent_on, :format => :friendly %></td>
   <td class="inbox-mark-unread"><%= button_to t('message.message_summary.unread_button'), {:controller => 'message', :action => 'mark', :message_id => message_summary.id, :mark => 'unread'}, { :remote => true } %></td>
   <td class="inbox-mark-read"><%= button_to t('message.message_summary.read_button'), {:controller => 'message', :action => 'mark', :message_id => message_summary.id, :mark => 'read'}, { :remote => true } %></td>
-  <td><%= button_to t('message.message_summary.reply_button'), :controller => 'message', :action => 'reply', :message_id => message_summary.id %></td>
   <td><%= button_to t('message.message_summary.delete_button'), :controller => 'message', :action => 'delete', :message_id => message_summary.id, :referer => request.fullpath %></td>
 </tr>

diff --git a/app/views/message/_sent_message_summary.html.erb b/app/views/message/_sent_message_summary.html.erb
index 830f105da6f8dccda04f92666a8fb4605859bc02..962cf0a5d1e3e4529376230cb63df865ce823c20 100644 (file)
--- a/app/views/message/_sent_message_summary.html.erb
+++ b/app/views/message/_sent_message_summary.html.erb
@@ -1,8 +1,6 @@
-<% this_colour = cycle('lightgrey', 'white') %>
-
 <tr class="inbox-row">
-  <td class="inbox-sender" bgcolor="<%= this_colour %>"><%= link_to h(sent_message_summary.recipient.display_name), :controller => 'user', :action => 'view', :display_name => sent_message_summary.recipient.display_name %></td>
-  <td class="inbox-subject" bgcolor="<%= this_colour %>"><%= link_to h(sent_message_summary.title), :controller => 'message', :action => 'read', :message_id => sent_message_summary.id  %></td>
-  <td class="inbox-sent nowrap" bgcolor="<%= this_colour %>"><%= l sent_message_summary.sent_on, :format => :friendly %></td>
+  <td class="inbox-sender"><%= link_to h(sent_message_summary.recipient.display_name), :controller => 'user', :action => 'view', :display_name => sent_message_summary.recipient.display_name %></td>
+  <td class="inbox-subject"><%= link_to h(sent_message_summary.title), :controller => 'message', :action => 'read', :message_id => sent_message_summary.id  %></td>
+  <td class="inbox-sent nowrap"><%= l sent_message_summary.sent_on, :format => :friendly %></td>
   <td><%= button_to t('message.sent_message_summary.delete_button'), :controller => 'message', :action => 'delete', :message_id => sent_message_summary.id, :referer => request.fullpath %></td>
 </tr>

diff --git a/app/views/message/inbox.html.erb b/app/views/message/inbox.html.erb
index 0cbc7c77c4748365b9b06075c2e4daf6668ed6ff..ec1460745578eba1057cff6d57c1073d7bbed192 100644 (file)
--- a/app/views/message/inbox.html.erb
+++ b/app/views/message/inbox.html.erb
@@ -1,21 +1,24 @@
+<div class='text-content'>
 <h2><%= t'message.inbox.my_inbox'%>/<%= link_to t('message.inbox.outbox'), outbox_path(@user.display_name) %></h2>
 
 <%= render :partial => "message_count" %>
 
 <% if @user.messages.size > 0 %>
-  <div id="messages">
-    <table class="messages">
+  <table class="messages">
+    <thead>
       <tr>
         <th><%= t'message.inbox.from' %></th>
         <th><%= t'message.inbox.subject' %></th>
         <th><%= t'message.inbox.date' %></th>
         <th></th>
         <th></th>
-        <th></th>
       </tr>
-      <%= render :partial => "message_summary", :collection => @user.messages %>
-    </table>
-  </div>
+    </thead>
+    <tbody>
+        <%= render :partial => "message_summary", :collection => @user.messages %>
+    </tbody>
+  </table>
 <% else %>
-  <div id="messages"><%= raw(t'message.inbox.no_messages_yet', :people_mapping_nearby_link => link_to(t('message.inbox.people_mapping_nearby'), :controller => 'user', :action => 'view', :display_name => @user.display_name)) %></div>
+  <div><%= raw(t'message.inbox.no_messages_yet', :people_mapping_nearby_link => link_to(t('message.inbox.people_mapping_nearby'), :controller => 'user', :action => 'view', :display_name => @user.display_name)) %></div>
 <% end %>
+</div>

diff --git a/app/views/message/outbox.html.erb b/app/views/message/outbox.html.erb
index 6f6823c1bbf036537bd4bbdb90850767f7cd3927..9786d6fb7e15b057895d557b618a6568b6e2fc30 100644 (file)
--- a/app/views/message/outbox.html.erb
+++ b/app/views/message/outbox.html.erb
@@ -3,17 +3,21 @@
 <p><%= t'message.outbox.messages', :count => @user.sent_messages.size %></p>
 
 <% if @user.sent_messages.size > 0 %>
-  <div id="messages">
-    <table class="messages">
+  <table class="messages">
+    <thead>
       <tr>
-        <th><%= t'message.outbox.to' %></th>
-        <th><%= t'message.outbox.subject' %></th>
-        <th><%= t'message.outbox.date' %></th>
+        <th><%= t'message.inbox.from' %></th>
+        <th><%= t'message.inbox.subject' %></th>
+        <th><%= t'message.inbox.date' %></th>
+        <th></th>
+        <th></th>
         <th></th>
       </tr>
+    </thead>
+    <tbody>
       <%= render :partial => "sent_message_summary", :collection => @user.sent_messages %>
-    </table>
-  </div>
+    </tbody>
+  </table>
 <% else %>
-  <div id="messages"><%= raw(t'message.outbox.no_sent_messages', :people_mapping_nearby_link => link_to(t('message.outbox.people_mapping_nearby'), :controller => 'user', :action => 'view', :display_name => @user.display_name)) %></div>
+  <div class="messages"><%= raw(t'message.outbox.no_sent_messages', :people_mapping_nearby_link => link_to(t('message.outbox.people_mapping_nearby'), :controller => 'user', :action => 'view', :display_name => @user.display_name)) %></div>
 <% end %>

diff --git a/app/views/message/read.html.erb b/app/views/message/read.html.erb
index d829c79e94520a3245f31a378fa02249f2266848..0fbef1d8c8f1d9d0016887c94eaaa89dceb72de1 100644 (file)
--- a/app/views/message/read.html.erb
+++ b/app/views/message/read.html.erb
@@ -1,73 +1,37 @@
+<div class='text-content'>
 <% if @user == @message.recipient %>
 
-<h2><%= t'message.read.reading_your_messages' %></h2>
+    <h2><%= h(@message.title) %></h2>
 
-<table>
-  <tr>
-    <th class="fieldName"><%= t'message.read.from' %></th>
-    <td><%= link_to h(@message.sender.display_name), :controller => 'user', :action => 'view', :display_name => @message.sender.display_name %></td>
-    <td rowspan="4" valign="top"><%= user_thumbnail @message.sender %></td>
-  </tr>
-  <tr>
-    <th class="fieldName"><%= t'message.read.subject' %></th>
-    <td><%= h(@message.title) %></td>
-    <td></td>
-  </tr>
-  <tr>
-    <th class="fieldName"><%= t'message.read.date' %></th>
-    <td><%= l @message.sent_on, :format => :friendly %></td>
-    <td></td>
-  </tr>
-  <tr>
-    <th></th>
-    <td><%= @message.body.to_html %></td>
-    <td></td>
-  </tr>
-</table>
+    <div class='info-line'>
+        <%= user_thumbnail_tiny @message.sender %>
+        <%= link_to h(@message.sender.display_name), :controller => 'user', :action => 'view', :display_name => @message.sender.display_name %></td>
+        <div class='right'>
+            <%= l @message.sent_on, :format => :friendly %>
+            <%= button_to t('message.read.reply_button'), :controller => 'message', :action => 'reply', :message_id => @message.id %>
+            <%= button_to t('message.read.unread_button'), :controller => 'message', :action => 'mark', :message_id => @message.id, :mark => 'unread' %>
+        </div>
+    </div>
 
-<br />
+    <%= @message.body.to_html %></td>
 
-<table>
-  <tr>
-    <td><%= button_to t('message.read.reply_button'), :controller => 'message', :action => 'reply', :message_id => @message.id %></td>
-    <td><%= button_to t('message.read.unread_button'), :controller => 'message', :action => 'mark', :message_id => @message.id, :mark => 'unread' %></td>
-    <td><%= link_to t('message.read.back_to_inbox'), :controller => 'message', :action => 'inbox', :display_name => @user.display_name %></td>
-  </tr>
-</table>
+    <%= link_to t('message.read.back_to_inbox'), :controller => 'message', :action => 'inbox', :display_name => @user.display_name %>
 
 <% else %>
 
-<h2><%= t'message.read.reading_your_sent_messages' %></h2>
+    <h2><%= h(@message.title) %></h2>
 
-<table>
-  <tr>
-    <th class="fieldName"><%= t'message.read.to' %></th>
-    <td><%= link_to h(@message.recipient.display_name), :controller => 'user', :action => 'view', :display_name => @message.recipient.display_name %></td>
-    <td rowspan="4" valign="top"><%= user_thumbnail @message.recipient %></td>
-  </tr>
-  <tr>
-    <th class="fieldName"><%= t'message.read.subject' %></th>
-    <td><%= h(@message.title) %></td>
-    <td></td>
-  </tr>
-  <tr>
-    <th class="fieldName"><%= t'message.read.date' %></th>
-    <td><%= l @message.sent_on, :format => :friendly %></td>
-    <td></td>
-  </tr>
-  <tr>
-    <th></th>
-    <td><%= @message.body.to_html %></td>
-    <td></td>
-  </tr>
-</table>
+    <div class='info-line'>
+        <%= user_thumbnail_tiny @message.recipient %>
+        <%= link_to h(@message.recipient.display_name), :controller => 'user', :action => 'view', :display_name => @message.recipient.display_name %></td>
+        <div class='right'>
+            <%= l @message.sent_on, :format => :friendly %>
+        </div>
+    </div>
 
-<br />
+    <%= @message.body.to_html %></td>
 
-<table>
-  <tr>
-    <td><%= link_to t('message.read.back_to_outbox'), :controller => 'message', :action => 'outbox', :display_name => @user.display_name %></td>
-  </tr>
-</table>
+    <%= link_to t('message.read.back_to_inbox'), :controller => 'message', :action => 'inbox', :display_name => @user.display_name %>
 
 <% end %>
+</div>