Redesign inbox

Cuts down on buttons, grey, and bold clutter.
This commit is contained in:
Tom MacWright 2012-08-09 15:15:08 -04:00 committed by Tom Hughes
parent 024838f203
commit be8617dfdc
7 changed files with 105 additions and 93 deletions

View file

@ -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 {
border: 1px solid #ccc;
.messages {
width:100%;
border-collapse:collapse;
border-spacing:0;
border-width:0;
}
.inbox-row-unread .inbox-subject {
font-weight: bold;
.messages tbody tr {
border-top:1px solid #ccc;
}
.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 */

View file

@ -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

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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 %>

View file

@ -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>