Usability: CSS/HTML/Text Improvements (Make it easier to read private messages)

I recently noticed one additional issue. If you include a moderately long URL in your private message (like I did when testing out new token features), it is possible that the URL will be too long for the width of the message area. As a result, in some browsers, horizontal scroll bars are shown in the message area (to account for the excessive width).

We should probably increase the allowed width and allow the text to overflow beyond the column width. Most people don't care for horizontal scroll bars.

--Ben

Okay, let me take a closer look at this... My CSS skills are decent, but the difficulty is always making things work across browsers properly. If you have any suggestions, Sascha, let me know and I can try to incorporate them in revised CSS.

--Ben

One more thing that needs to be fixed with CSS: When you attach fields to a Private Message, the width of that field is limited to a few hundred pixels. So if you attach an image that is, let's say, 400 pixels wide (or if the imagecache preset is that wide) you're going to end up with horizontal scroll bars to see the whole image.

--Ben

Found another CSS issue that needs to be fixed... When a message is new, the word "New" is displayed, but it's the same font, color, and size as the message text and only one line above. As a result, it looks like it's actually part of the written message.

Hey Berdir,

Based on our conversation in IRC, here is a list of to-do items for cleaning up the display of the message view page (/messages/view/mid)...

Pager:

A. Hide the pager if there are no more messages to display
B. Remove the pager from the top of the page (keep it at the bottom only)

We can deal with the mechanics of the pager itself on a separate issue thread. I'll post that shortly.

Message Links:

C. Put the message author, timestamp, and message links all on the same line. Change the "delete message" link to "Delete". Change the "Block author" link to "Block". Any links added by other modules would appear to the right of these links. (I'll adjust the CSS for this, making the links smaller, once we have this done. I'll use Facebook as a model.)

Text:

D. Instead of "Reply to thread" we should just use "Reply" as the label.

E. Change the "Participants: BenK, Berdir and Dries" format to "Between BenK, Berdir, and Dries". We'll basically follow Facebook's syntax on this. Move up this line so that it is appearing at the top where the pager is now (and so there is a line between it and the start of the messages).

F. Hide the "Write new message" link from the message view page.

G. On the message view page, hide the "Message" label above the text field (since we already have "Reply" to be the label instead).

H. Change the "Recipients" section to use the following logic: 1. Hide the recipients. 2. If all participants are blocked, show them and why. 3. If you can write to some participants, show an information about those that were blocked after sending the message"

Layout Positioning:

I. Improve the current patch to hide text format and preview button. This includes making sure that text format and preview are separate options. This can be done by making preview a setting and format a permission ("use available text formats in private messages"). The existing patch and thread is located here: http://drupal.org/node/864554

J. Add token browser to the Field UI page. Place it in its own fieldset and make this fieldset collapsed by default. Make it immediately below the body text field by default.

While you are working on all of these items, I'll work on cleaning up all of the CSS. Various CSS items on my to-do list are posted in the prior comments on this thread.

Sound good? ;-)

--Ben

Berdir,

I've attached a patch that cleans up a bunch of CSS on the message view page. Take a look and let me know what you think. I can do more CSS cleanup once you implement some of the to-do items in #7.

--Ben

Based on a conversation in IRC with Berdir, here is another item to add to the to-do list in #7:

K. Add classes for "New" messages: To do this, add a "privatemsg-message-new" class both to that span (so you can theme it differently than the default "New" text if you want) and in the most upper div (the one that has the "privatemsg-message" class).

--Ben

Since Berdir has reviewed my CSS changes and is currently working on the to-do list, I'm changing this to "Needs work."

Hey Berdir,

I've tested the patch in #11 and things are looking and working great. Here are my notes:

D + G: I agree with your points here. :-) And I think it would be good to add a bit more space between "Reply" and "Message".

H. I don't mind the yellow warning (at least it's yellow in bartik). To me, yellow means something very different than red.... I view red as more of an "error" and yellow just as a "notice". But green might not be appropriate here because the message wasn't exactly sent successfully to that user.

J. The token browser in the collapsed field is looking and working great!

Other fixes:

1) Remove the period at the end of the "Between" line.

2) One thing I noticed from Facebook is that in the "Between" line, they replace your username with "You" when you're a message participant. So I don't think this is essential at all, but I thought I'd mention it. Since those other than message participants could be reading the thread in the user's inbox (those with "Read all messages" permission), we'd only want to convert to "You" if the current user matched the mailbox page. But maybe this is more trouble than its worth.

3) Add CSS styling to the "New" indicator. Probably we want to make this red and aligned right. Also, I noticed that the new indicator has a around it, but we may want to change it to a

It's looking great! Very close to being done. Some notes:

2) The "You" functionality is working great. Since it's new, I expected to have some bugs to fix, but I couldn't find any.

3) Your "New" styling looked great, too. Yeah, I think a light background color would look nice as well.

4) How about adding the following CSS to allow a little more spacing after a field:

div.privatemsg-message-body div.field {
margin-bottom:15px;
}

Other Items:

6) For the ".privatemsg-message-body" CSS, change the margin-left to 10px. I think it looks a little better with a bigger indent on the message body text.

--Ben

Also, while testing these changes, I noticed a bug involving viewing another user's message list. I've created a new issue for this bug here:

http://drupal.org/node/933214

--Ben

As discussed in IRC, we're going to remove for now the light red background on new messages and the extra padding that was added to messages (which caused the horizontal lines of the message and thread to not quite line up vertically). Once this is done, this is RTBC and is a big stylistic improvement! :-)

--Ben