mirror of
https://github.com/zulip/zulip.git
synced 2025-11-14 02:48:00 +00:00
Change the layout of the message boxes in the message pane and make other message-related adjustments.
Specifically: * Leave the avatar image as inline and round it. * Move timestamp to the left column. * Replace the "Info" link with a permanent info sign. * Move the pointer bar to the left. * Remove borders * Change selection background colors, and PM colors. * Introduce the "narrowing" icon into our FontAwesome set. * Modify the tests to account for the new "narrowing" icon and fixed a bug in star-finding. * Clean up CSS and add a more prominent color to private messages (imported from commit 8a8d6de8acccc52c0d16f5d1ce31aabdc72c88c8)
This commit is contained in:
Allen Rabinovich
committed by
Leo Franchi
Leo Franchi
parent
dc738d01a4
commit
93a2e23e96
@@ -38,6 +38,7 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="pointer"></td>
|
||||
<td id="left-of-compose">
|
||||
<div>
|
||||
<input type="file" id="file_input" class="notvisible pull-left" multiple />
|
||||
@@ -47,9 +48,7 @@
|
||||
href="#markdown-help" title="Formatting" data-toggle="modal"></a>
|
||||
</div>
|
||||
</td>
|
||||
<td class="pointer"></td>
|
||||
<td class="messagebox">
|
||||
|
||||
<div class="message_content">
|
||||
<textarea class="new_message_textarea" name="content" id="new_message_content"
|
||||
value="" placeholder="Compose your message here..." tabindex="140" maxlength="10000"></textarea>
|
||||
|
||||
@@ -22,12 +22,10 @@
|
||||
<td class="ztable_col3" />
|
||||
</tr>
|
||||
<tr style="display: none;" id="current_label_stream" class="recipient_row">
|
||||
<td colspan="2" class="message_label_clickable message_header message_header_stream left_part"></td>
|
||||
<td class="message_label_clickable message_header message_header_stream right_part"></td>
|
||||
<td colspan="3" class="message_label_clickable message_header message_header_stream right_part"></td>
|
||||
</tr>
|
||||
<tr style="display: none;" id="current_label_private_message" class="recipient_row">
|
||||
<td colspan="2" class="message_label_clickable message_header message_header_private_message left_part"></td>
|
||||
<td class="message_label_clickable message_header message_header_private_message right_part"></td>
|
||||
<td colspan="3" class="message_label_clickable message_header message_header_private_message right_part"></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -90,7 +90,7 @@ exports.decorate_stream_bar = function (stream_name) {
|
||||
};
|
||||
|
||||
function messages_to_fade() {
|
||||
var all_elts = rows.get_table(current_msg_list.table_name).find(".recipient_row, .messagebox");
|
||||
var all_elts = rows.get_table(current_msg_list.table_name).find(".recipient_row, .message_row");
|
||||
var i, elts_to_fade = [];
|
||||
var different_recipient = false;
|
||||
// Note: The below algorithm relies on the fact that all_elts is
|
||||
@@ -117,7 +117,7 @@ exports.unfade_messages = function (clear_state) {
|
||||
}
|
||||
|
||||
var fade_class = narrow.active() ? "message_reply_fade_narrowed" : "message_reply_fade";
|
||||
rows.get_table(current_msg_list.table_name).find(".recipient_row, .messagebox").removeClass(fade_class);
|
||||
rows.get_table(current_msg_list.table_name).find(".recipient_row, .message_row").removeClass(fade_class);
|
||||
if (clear_state === true) {
|
||||
faded_to = undefined;
|
||||
}
|
||||
|
||||
@@ -53,13 +53,13 @@ function render_now(time) {
|
||||
|
||||
// "\xa0" is U+00A0 NO-BREAK SPACE.
|
||||
// Can't use as that represents the literal string " ".
|
||||
return [day_string + "\xa0" + time.toString("HH:mm"),
|
||||
return [day_string + " " + time.toString("HH:mm"),
|
||||
start_of_other_day.addDays(expire_days)
|
||||
.toString("yyyy-MM-dd")];
|
||||
} else {
|
||||
// For now, if we get a message from tomorrow, we don't bother
|
||||
// rewriting the timestamp when it gets to be tomorrow.
|
||||
return [time.toString("MMM dd") + "\xa0\xa0" + time.toString("HH:mm"),
|
||||
return [time.toString("MMM\xa0dd") + " " + time.toString("HH:mm"),
|
||||
undefined];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -592,7 +592,7 @@ function toggle_star(row_id) {
|
||||
// messages table from a stream that isn't in your home view.
|
||||
return;
|
||||
}
|
||||
var favorite_image = row.find("i");
|
||||
var favorite_image = row.find(".message_star");
|
||||
favorite_image.toggleClass("icon-vector-star-empty");
|
||||
favorite_image.toggleClass("icon-vector-star");
|
||||
var title_state = message.starred ? "Unstar" : "Star";
|
||||
|
||||
@@ -289,7 +289,7 @@ ul.filters li.out_of_home_view {
|
||||
.message_area_padder {
|
||||
margin-top: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 20px;
|
||||
padding-right: 10px;
|
||||
/* This is needed for the floating recipient bar
|
||||
in Firefox only, for some reason; otherwise it gets
|
||||
a scrollbar */
|
||||
@@ -314,23 +314,25 @@ ul.filters li.out_of_home_view {
|
||||
td.pointer {
|
||||
vertical-align: top;
|
||||
padding-top: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.selected_message .messagebox {
|
||||
background-color: #F7F7F7;
|
||||
.selected_message .messagebox, .selected_message .message_data {
|
||||
background-color: #FAFFC7;
|
||||
}
|
||||
|
||||
.selected_message .messagebox.private-message {
|
||||
background-color: #FEFFCC;
|
||||
.selected_message.private-message .message_data, .selected_message .messagebox.private-message {
|
||||
background-color: #e1ffb2;
|
||||
}
|
||||
|
||||
.selected_message .messagebox.mention {
|
||||
background-color: #FFE0DC;
|
||||
}
|
||||
|
||||
.selected_message .pointer {
|
||||
.selected_message .pointer, .selected_message.private-message .pointer {
|
||||
background-color: #08c;
|
||||
}
|
||||
|
||||
.window_blurred .selected_message .pointer {
|
||||
background-color: #9bc;
|
||||
}
|
||||
@@ -350,43 +352,40 @@ td.pointer {
|
||||
border-left-color: #BBB;
|
||||
}
|
||||
|
||||
.message_picture {
|
||||
.message_data {
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
padding-right: 7px;
|
||||
padding-top: 5px;
|
||||
padding: 7px 5px 0px 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.ztable_layout_row {
|
||||
visibility: collapse;
|
||||
}
|
||||
.ztable_col1 { /* sender's gravatar */
|
||||
width: 46px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.ztable_col1 {
|
||||
width: 0px;
|
||||
}
|
||||
}
|
||||
.ztable_col2 { /* pointer */
|
||||
|
||||
.ztable_col1 { /* pointer */
|
||||
width: 2px;
|
||||
}
|
||||
.ztable_col3 { /* subjectname */
|
||||
|
||||
.ztable_col2 { /* sender's gravatar and date */
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.recipient_row {
|
||||
border: 1px solid grey;
|
||||
.ztable_col3 { /* subjectname */
|
||||
}
|
||||
|
||||
.message_header {
|
||||
vertical-align: middle;
|
||||
text-align: left;
|
||||
|
||||
/* We can overflow-y if the font size gets big */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
padding-left: 14px;
|
||||
font-weight: 600;
|
||||
line-height: 14px;
|
||||
padding-top: 4px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.message_header_stream {
|
||||
@@ -397,28 +396,42 @@ td.pointer {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.messagebox.private-message {
|
||||
border-width: 0px 1px 1px 1px;
|
||||
background-color: #feffe0;
|
||||
.private-message .messagebox, .private-message .message_data, .private-message .pointer {
|
||||
background-color: #E2FFDE;
|
||||
}
|
||||
|
||||
.messagebox.mention {
|
||||
background-color: #FFE4E0;
|
||||
}
|
||||
|
||||
.selected_message .messagebox.mention {
|
||||
background-color: #FEE4B3;
|
||||
}
|
||||
|
||||
.message_sender {
|
||||
line-height: 15px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.sender_name {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.actions_hover {
|
||||
line-height: 0px;
|
||||
}
|
||||
|
||||
.actions_hovered .sender_name {
|
||||
color: #0088CC;
|
||||
color: #0088CC;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.message_label_clickable:hover {
|
||||
cursor: pointer;
|
||||
color: #08C;
|
||||
color: #08C;
|
||||
}
|
||||
|
||||
/* Brighten text because of the dark background */
|
||||
@@ -440,8 +453,10 @@ td.pointer {
|
||||
}
|
||||
|
||||
.message_time {
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
font-size: 90%;
|
||||
font-size: 80%;
|
||||
line-height: 100%;
|
||||
}
|
||||
|
||||
.small {
|
||||
@@ -486,8 +501,6 @@ table.focused_table {
|
||||
}
|
||||
|
||||
.message_content {
|
||||
margin-left: 5px;
|
||||
margin-right: 35px; /* size of the timestamp */
|
||||
line-height: 17px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
@@ -529,10 +542,8 @@ blockquote p {
|
||||
}
|
||||
|
||||
.messagebox {
|
||||
padding: 5px 14px;
|
||||
background-color: white;
|
||||
border: 1px solid gray;
|
||||
border-width: 0px 1px 1px 1px;
|
||||
padding: 5px 10px 5px 5px;
|
||||
background-color: #fff;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -578,36 +589,44 @@ blockquote p {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.prev_is_same_sender {
|
||||
.prev_is_same_sender.messagebox {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.prev_is_same_sender.message_data {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.next_is_same_sender {
|
||||
border-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
img.profile_picture {
|
||||
.profile_picture {
|
||||
display: block;
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
max-height: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
max-height: 15px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
cursor: pointer;
|
||||
border-radius: 30px;
|
||||
-moz-box-shadow: 1px 1px 1px #777 inset;
|
||||
-webkit-box-shadow: 1px 1px 1px #777 inset;
|
||||
box-shadow: 1px 1px 1px #777 inset;
|
||||
background-size: 15px 15px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
img.profile_picture {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
img.inline_profile_picture {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
img.inline_profile_picture {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.inline_profile_picture {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-size: 15px 15px;
|
||||
-moz-box-shadow: 1px 1px 1px #777 inset;
|
||||
-webkit-box-shadow: 1px 1px 1px #777 inset;
|
||||
box-shadow: 1px 1px 1px #777 inset;
|
||||
border-radius: 15px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#compose {
|
||||
@@ -918,12 +937,6 @@ table.floating_recipient {
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
.message_body_gravatar {
|
||||
margin-bottom: 2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.message_inline_image {
|
||||
margin-bottom: 5px;
|
||||
margin-left: 5px;
|
||||
@@ -1194,14 +1207,10 @@ table.floating_recipient {
|
||||
}
|
||||
|
||||
.message_reply_fade {
|
||||
/* If we change the message_list background, we must change this */
|
||||
border-color: aliceblue;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.message_reply_fade_narrowed {
|
||||
/* If we change the narrowed_view background, we must change this */
|
||||
border-color: #DDD;
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
@@ -1258,12 +1267,26 @@ li.expanded_subject {
|
||||
}
|
||||
|
||||
.star {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
opacity: .7;
|
||||
font-size: 16px;
|
||||
color: #2c8211;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: inline-block;
|
||||
padding-left: 2px;
|
||||
opacity: .7;
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.info:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.star:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
|
||||
@@ -30,11 +30,7 @@
|
||||
{{#include_recipient}}
|
||||
{{#if is_stream}}
|
||||
<tr zid="{{id}}" class="recipient_row">
|
||||
<td colspan="2"
|
||||
class="message_header message_header_stream left_part {{color_class}}"
|
||||
style="background-color: {{background_color}};">
|
||||
</td>
|
||||
<td class="message_header message_header_stream right_part {{color_class}}"
|
||||
<td colspan="3" class="message_header message_header_stream right_part {{color_class}}"
|
||||
style="background-color: {{background_color}};">
|
||||
{{#if invite_only}}<i class="icon-lock" title="This is an invite-only stream"></i>{{/if}}
|
||||
<span class="message_label_clickable narrows_by_recipient stream_label"
|
||||
@@ -46,10 +42,7 @@
|
||||
</tr>
|
||||
{{else}}
|
||||
<tr zid="{{id}}" class="recipient_row">
|
||||
<td colspan="2"
|
||||
class="message_header message_header_private_message left_part dark_background">
|
||||
</td>
|
||||
<td class="message_header message_header_private_message right_part dark_background">
|
||||
<td colspan="3" class="message_header message_header_private_message right_part dark_background">
|
||||
<span class="message_label_clickable narrows_by_recipient"
|
||||
title="Narrow to your private messages with {{display_reply_to}}">
|
||||
You and {{display_reply_to}}</span>
|
||||
@@ -59,30 +52,30 @@
|
||||
{{/include_recipient}}
|
||||
<tr zid="{{id}}" id="{{dom_id}}"
|
||||
class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}">
|
||||
<td class="message_picture">
|
||||
{{#include_sender}}
|
||||
<img class="img-rounded profile_picture actions_hover"
|
||||
src="https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30?stamp={{stamp}}"/>
|
||||
{{/include_sender}}
|
||||
</td>
|
||||
<td class="pointer"><p></p></td>
|
||||
<td class="message_data{{^include_sender}} prev_is_same_sender{{/include_sender}}">
|
||||
<div class="actions_hover">
|
||||
<span class="message_time">{{{timestr}}}</span>
|
||||
</div>
|
||||
<div class="message_controls">
|
||||
<div class="star">
|
||||
<i class="message_star {{#if starred}}icon-vector-star{{else}}icon-vector-star-empty{{/if}}"
|
||||
title="{{#if starred}}Unstar{{else}}Star{{/if}} this message"></i>
|
||||
</div>
|
||||
<div class="info actions_hover">
|
||||
<i class="icon-vector-info-sign"></i>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}{{#contains_mention}} mention{{/contains_mention}}">
|
||||
<div class="message_top_line">
|
||||
{{#include_sender}}
|
||||
<span class="message_sender actions_hover">
|
||||
<img class="inline_profile_picture message_body_gravatar img-rounded" src="https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30?stamp={{stamp}}"/>
|
||||
<div class="inline_profile_picture"
|
||||
style="background-image: url('https://secure.gravatar.com/avatar/{{gravatar_hash}}?d=identicon&s=30?stamp={{stamp}}');"/>
|
||||
<span class="sender_name">{{sender_full_name}}</span>
|
||||
</span>
|
||||
{{/include_sender}}
|
||||
<div class="message_right star">
|
||||
<i class="{{#if starred}}icon-vector-star{{else}}icon-vector-star-empty{{/if}}"
|
||||
title="{{#if starred}}Unstar{{else}}Star{{/if}} this message"></i>
|
||||
</div>
|
||||
<div class="message_right actions_hover">
|
||||
{{! If include_sender is not set, we will never show this link anyway. }}
|
||||
{{#include_sender}}<span class="actions_link">« Info</span>{{/include_sender}}
|
||||
<span class="message_time">{{{timestr}}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message_content">{{#if ../../use_match_properties}}{{{match_content}}}{{else}}{{{content}}}{{/if}}</div>
|
||||
<div class="message_expander message_length_controller" title="See the rest of this message">[More...]</div>
|
||||
|
||||
@@ -21,7 +21,7 @@ casper.then(function () {
|
||||
|
||||
msg.headings.forEach(function (heading) {
|
||||
casper.test.assertMatch(common.normalize_spaces(heading),
|
||||
/(^You and )|( > )/,
|
||||
/(^You and )|( )/,
|
||||
'Heading is well-formed');
|
||||
});
|
||||
|
||||
@@ -57,8 +57,8 @@ common.send_many([
|
||||
|
||||
common.wait_for_receive(function () {
|
||||
common.expected_messages('zhome', [
|
||||
'Verona > frontend test',
|
||||
'Verona > other subject',
|
||||
'Verona frontend test',
|
||||
'Verona other subject',
|
||||
'You and Cordelia Lear, King Hamlet',
|
||||
'You and Cordelia Lear'
|
||||
], [
|
||||
|
||||
@@ -47,7 +47,7 @@ common.send_many([
|
||||
|
||||
function expect_home() {
|
||||
common.expected_messages('zhome', [
|
||||
'Verona > frontend test',
|
||||
'Verona frontend test',
|
||||
'You and Cordelia Lear, King Hamlet',
|
||||
'You and Cordelia Lear'
|
||||
], [
|
||||
@@ -59,9 +59,9 @@ function expect_home() {
|
||||
|
||||
function expect_stream() {
|
||||
common.expected_messages('zfilt', [
|
||||
'Verona > frontend test',
|
||||
'Verona > other subject',
|
||||
'Verona > frontend test'
|
||||
'Verona frontend test',
|
||||
'Verona other subject',
|
||||
'Verona frontend test'
|
||||
], [
|
||||
'<p>test message A</p>',
|
||||
'<p>test message B</p>',
|
||||
@@ -72,7 +72,7 @@ function expect_stream() {
|
||||
|
||||
function expect_stream_subject() {
|
||||
common.expected_messages('zfilt', [
|
||||
'Verona > frontend test'
|
||||
'Verona frontend test'
|
||||
], [
|
||||
'<p>test message A</p>',
|
||||
'<p>test message B</p>',
|
||||
@@ -82,9 +82,9 @@ function expect_stream_subject() {
|
||||
|
||||
function expect_subject() {
|
||||
common.expected_messages('zfilt', [
|
||||
'Verona > frontend test',
|
||||
'Venice > frontend test',
|
||||
'Verona > frontend test'
|
||||
'Verona frontend test',
|
||||
'Venice frontend test',
|
||||
'Verona frontend test'
|
||||
], [
|
||||
'<p>test message A</p>',
|
||||
'<p>test message B</p>',
|
||||
|
||||
@@ -41,7 +41,7 @@ casper.then(function() {
|
||||
|
||||
casper.then(function() {
|
||||
// You can narrow to your starred messages.
|
||||
common.expected_messages('zfilt', ['Verona > stars'], ['<p>test star</p>']);
|
||||
common.expected_messages('zfilt', ['Verona stars'], ['<p>test star</p>']);
|
||||
common.un_narrow();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user