mirror of https://github.com/zulip/zulip.git
Modify message box layout and spacing.
* Modify the narrow icon in FontAwesome to make it better align to the pixel grid and display well on Windows+Chrome. * Move the message controls to the right * Hide the message info icon until the message is hovered / selected * Switch the star to a gray version * Increase the size of the gravatar * Adjust the spacing * Add the right-side message pointer * Fix private message background colors and mention colors * Modify star count test to account for new stars * Bug fixes for stream subscription messages and other miscellanea. (imported from commit 3d3d9de7e03f3658c5c78b492051b2b7f795487d)
This commit is contained in:
Allen Rabinovich
Waseem Daher
parent
7cdbb0e6b0
commit
f69762e612
|
|
@ -11,8 +11,9 @@
|
|||
<tbody>
|
||||
<tr class="ztable_layout_row">
|
||||
<td class="ztable_col1" />
|
||||
<td class="ztable_col2" />
|
||||
<td class="ztable_col3" />
|
||||
<td class="ztable_col2" />
|
||||
<td class="ztable_col4" />
|
||||
</tr>
|
||||
<tr id="stream-message">
|
||||
<td colspan="2" class="message_header message_header_stream left_part">
|
||||
|
|
|
|||
|
|
@ -241,9 +241,6 @@ function message_unhover() {
|
|||
|
||||
function message_hover(message_row) {
|
||||
message_unhover();
|
||||
while (!message_row.hasClass('include-sender')) {
|
||||
message_row = message_row.prev();
|
||||
}
|
||||
message_row.addClass('message_hovered');
|
||||
current_message_hover = message_row;
|
||||
}
|
||||
|
|
@ -574,8 +571,7 @@ function toggle_star(row_id) {
|
|||
return;
|
||||
}
|
||||
var favorite_image = row.find(".message_star");
|
||||
favorite_image.toggleClass("icon-vector-star-empty");
|
||||
favorite_image.toggleClass("icon-vector-star");
|
||||
favorite_image.toggleClass("empty-star");
|
||||
var title_state = message.starred ? "Unstar" : "Star";
|
||||
favorite_image.attr("title", title_state + " this message");
|
||||
});
|
||||
|
|
@ -1061,24 +1057,22 @@ $(function () {
|
|||
|
||||
$("#main_div").on("mousedown", ".messagebox", mousedown);
|
||||
$("#main_div").on("mousemove", ".messagebox", mousemove);
|
||||
$("#main_div").on("mouseover", ".messagebox", function (e) {
|
||||
var row = $(this).closest(".message_row");
|
||||
$("#main_div").on("mouseover", ".message_row", function (e) {
|
||||
var row = $(this);
|
||||
message_hover(row);
|
||||
});
|
||||
|
||||
$("#main_div").on("mouseout", ".messagebox", function (e) {
|
||||
$("#main_div").on("mouseout", ".message_row", function (e) {
|
||||
message_unhover();
|
||||
});
|
||||
|
||||
$("#main_div").on("mouseover", ".actions_hover", function (e) {
|
||||
var row = $(this).closest(".message_row");
|
||||
message_hover(row);
|
||||
row.addClass("actions_hovered");
|
||||
});
|
||||
|
||||
$("#main_div").on("mouseout", ".actions_hover", function (e) {
|
||||
var row = $(this).closest(".message_row");
|
||||
message_unhover();
|
||||
row.removeClass("actions_hovered");
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -155,13 +155,15 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'FontAwesome';
|
||||
src: url('../third/fontawesome/fontawesome2-webfont.eot?v=3.0.1');
|
||||
src: url('../third/fontawesome/fontawesome2-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
|
||||
url('../third/fontawesome/fontawesome2-webfont.woff?v=3.0.1') format('woff'),
|
||||
url('../third/fontawesome/fontawesome2-webfont.ttf?v=3.0.1') format('truetype'),
|
||||
url('../third/fontawesome/fontawesome2-webfont.svg#FontAwesome') format('svg');
|
||||
src: url('../third/fontawesome/fontawesome3-webfont.eot?v=3.0.1');
|
||||
src: url('../third/fontawesome/fontawesome3-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
|
||||
url('../third/fontawesome/fontawesome3-webfont.woff?v=3.0.1') format('woff'),
|
||||
url('../third/fontawesome/fontawesome3-webfont.ttf?v=3.0.1') format('truetype'),
|
||||
url('../third/fontawesome/fontawesome3-webfont.svg#FontAwesome') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -92,6 +92,13 @@ li, .table th, .table td {
|
|||
position: absolute !important;
|
||||
}
|
||||
|
||||
/* Lighter strong */
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
/* Inline and block code */
|
||||
|
||||
code {
|
||||
|
|
@ -287,8 +294,8 @@ ul.filters li.out_of_home_view {
|
|||
|
||||
.message_area_padder {
|
||||
margin-top: 10px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
padding-left: 5px;
|
||||
padding-right: 5px;
|
||||
/* This is needed for the floating recipient bar
|
||||
in Firefox only, for some reason; otherwise it gets
|
||||
a scrollbar */
|
||||
|
|
@ -320,9 +327,13 @@ td.pointer {
|
|||
background-color: #FAFFC7;
|
||||
}
|
||||
|
||||
.selected_message.private-message .message_data, .selected_message .messagebox.private-message,
|
||||
.selected_message .info {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.selected_message.private-message .message_data, .selected_message.private-message .messagebox,
|
||||
.new_private_messages {
|
||||
background-color: #e1ffb2;
|
||||
background-color: #FAFFC7;
|
||||
}
|
||||
|
||||
.new_private_messages, .new_private_messages_fadeout {
|
||||
|
|
@ -332,17 +343,19 @@ td.pointer {
|
|||
transition: all 3s ease-in-out;
|
||||
}
|
||||
|
||||
.selected_message .messagebox.mention {
|
||||
background-color: #FFE0DC;
|
||||
}
|
||||
|
||||
.selected_message .pointer, .selected_message.private-message .pointer {
|
||||
.selected_message .pointer {
|
||||
background-color: #08c;
|
||||
}
|
||||
|
||||
.private-message.selected_message .pointer {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
/*
|
||||
.window_blurred .selected_message .pointer {
|
||||
background-color: #9bc;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Adjust certain message elements so they still
|
||||
stand out against the grey background */
|
||||
|
|
@ -359,10 +372,15 @@ td.pointer {
|
|||
border-left-color: #BBB;
|
||||
}
|
||||
|
||||
.message_controls {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
.message_data {
|
||||
vertical-align: top;
|
||||
text-align: right;
|
||||
padding: 7px 5px 0px 5px;
|
||||
text-align: left;
|
||||
padding: 5px 5px 0px 5px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
|
|
@ -374,11 +392,15 @@ td.pointer {
|
|||
width: 2px;
|
||||
}
|
||||
|
||||
.ztable_col2 { /* sender's gravatar and date */
|
||||
.ztable_col2 { /* subjectname */
|
||||
}
|
||||
|
||||
.ztable_col3 { /* sender's gravatar and date */
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.ztable_col3 { /* subjectname */
|
||||
.ztable_col4 {
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
.message_header {
|
||||
|
|
@ -391,8 +413,7 @@ td.pointer {
|
|||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
line-height: 14px;
|
||||
padding-top: 4px;
|
||||
padding-left: 5px;
|
||||
padding: 3px 0px 2px 5px;
|
||||
}
|
||||
|
||||
.message_header_stream {
|
||||
|
|
@ -404,36 +425,45 @@ td.pointer {
|
|||
}
|
||||
|
||||
.private-message .messagebox, .private-message .message_data, .private-message .pointer {
|
||||
background-color: #E2FFDE;
|
||||
background-color: #C2DBFF;
|
||||
}
|
||||
|
||||
.messagebox.mention {
|
||||
background-color: #FFE4E0;
|
||||
.mention .messagebox, .mention .message_data, .mention .pointer {
|
||||
background-color: #FFE9BA;
|
||||
}
|
||||
|
||||
.selected_message .messagebox.mention {
|
||||
background-color: #FEE4B3;
|
||||
.selected_message.mention .messagebox, .selected_message.mention .message_data {
|
||||
background-color: #FAFFC7;
|
||||
}
|
||||
|
||||
.selected_message.private-message.mention .messagebox, .selected_message.private-message.mention .message_data {
|
||||
background-color: #FAFFC7;
|
||||
}
|
||||
|
||||
.message_sender {
|
||||
line-height: 15px;
|
||||
height: 0px;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sender_name {
|
||||
color: #333;
|
||||
display: inline-block;
|
||||
font-weight: 600;
|
||||
line-height: 14px;
|
||||
font-weight: bold;
|
||||
line-height: 5px;
|
||||
}
|
||||
|
||||
.actions_hover {
|
||||
line-height: 0px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.actions_hovered .sender_name {
|
||||
color: #0088CC;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.actions_hovered .inline_profile_picture {
|
||||
border-color: #0088CC;
|
||||
}
|
||||
|
||||
.message_label_clickable:hover {
|
||||
|
|
@ -464,15 +494,16 @@ td.pointer {
|
|||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.message_right {
|
||||
.message-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.message_time {
|
||||
display: inline-block;
|
||||
font-weight: 300;
|
||||
font-size: 80%;
|
||||
font-weight: normal;
|
||||
font-size: 75%;
|
||||
line-height: 100%;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.small {
|
||||
|
|
@ -481,7 +512,7 @@ td.pointer {
|
|||
|
||||
.actions_hovered .message_time {
|
||||
color: #0088CC;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.actions_link {
|
||||
|
|
@ -495,6 +526,14 @@ td.pointer {
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
.message_hovered .info {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.actions_hovered .info {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.actions_hovered .actions_link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
|
@ -517,6 +556,7 @@ table.focused_table {
|
|||
}
|
||||
|
||||
.message_content {
|
||||
margin-top: 3px;
|
||||
line-height: 17px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
|
|
@ -558,10 +598,20 @@ blockquote p {
|
|||
}
|
||||
|
||||
.messagebox {
|
||||
padding: 5px 10px 5px 5px;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
word-wrap: break-word;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.messagebox p {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.messagebox blockquote {
|
||||
padding-left: 5px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
#send_message_form {
|
||||
|
|
@ -597,10 +647,6 @@ blockquote p {
|
|||
padding-top: 6px;
|
||||
}
|
||||
|
||||
.messagebox p {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.bookend {
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
|
@ -610,7 +656,7 @@ blockquote p {
|
|||
}
|
||||
|
||||
.prev_is_same_sender.message_data {
|
||||
padding-top: 5px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
.next_is_same_sender {
|
||||
|
|
@ -635,14 +681,14 @@ blockquote p {
|
|||
|
||||
.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;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
background-size: 17px 17px;
|
||||
border-radius: 17px;
|
||||
border: 1px solid #CCC;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
left: -1px;
|
||||
}
|
||||
|
||||
#compose {
|
||||
|
|
@ -1299,26 +1345,24 @@ li.expanded_subject {
|
|||
|
||||
.star {
|
||||
display: inline-block;
|
||||
padding-left: 5px;
|
||||
opacity: .7;
|
||||
opacity: 1;
|
||||
font-size: 16px;
|
||||
color: #2c8211;
|
||||
}
|
||||
|
||||
.empty-star {
|
||||
opacity: 0.4;
|
||||
color: #565656;
|
||||
}
|
||||
|
||||
.info {
|
||||
display: inline-block;
|
||||
padding-left: 2px;
|
||||
opacity: .7;
|
||||
font-size: 16px;
|
||||
color: #ccc;
|
||||
color: #0088CC;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.info:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.star:hover {
|
||||
.star:hover, .info:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
<td class="ztable_col1" />
|
||||
<td class="ztable_col2" />
|
||||
<td class="ztable_col3" />
|
||||
<td class="ztable_col4" />
|
||||
</tr>
|
||||
{{/include_layout_row}}
|
||||
|
||||
{{#each messages}}
|
||||
{{#with this}}
|
||||
{{#include_bookend}}
|
||||
<tr class="bookend_tr"><td/>
|
||||
<td /><td class="bookend{{#if subscribed}} sub-unsub-message{{/if}}{{#if unsubscribed}} sub-unsub-message{{/if}}">
|
||||
<tr class="bookend_tr"><td colspan="4" class="bookend{{#if subscribed}} sub-unsub-message{{/if}}{{#if unsubscribed}} sub-unsub-message{{/if}}">
|
||||
{{#if subscribed}}
|
||||
<span>--- Subscribed to stream {{subscribed}} ---</span>
|
||||
{{/if}}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
{{#include_recipient}}
|
||||
{{#if is_stream}}
|
||||
<tr zid="{{id}}" class="recipient_row">
|
||||
<td colspan="3" class="message_header message_header_stream right_part {{color_class}}"
|
||||
<td colspan="4" 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"
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
</tr>
|
||||
{{else}}
|
||||
<tr zid="{{id}}" class="recipient_row">
|
||||
<td colspan="3" class="message_header message_header_private_message right_part dark_background">
|
||||
<td colspan="4" 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>
|
||||
|
|
@ -52,23 +52,9 @@
|
|||
{{/if}}
|
||||
{{/include_recipient}}
|
||||
<tr zid="{{id}}" id="{{dom_id}}"
|
||||
class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}">
|
||||
class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}{{#contains_mention}} mention{{/contains_mention}}">
|
||||
<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}}">
|
||||
<td class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}">
|
||||
<div class="message_top_line">
|
||||
{{#include_sender}}
|
||||
<span class="message_sender actions_hover">
|
||||
|
|
@ -85,13 +71,27 @@
|
|||
<div class="message_expander message_length_controller" title="See the rest of this message">[More...]</div>
|
||||
<div class="message_condenser message_length_controller" title="Make this message take up less space on the screen">[Condense this message]</div>
|
||||
</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">
|
||||
<span class="message_star {{#if starred}}icon-vector-star{{else}}icon-vector-star empty-star{{/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="pointer"><p></p></td>
|
||||
</tr>
|
||||
{{/with}}
|
||||
{{/each}}
|
||||
|
||||
{{#if trailing_bookend}}
|
||||
<tr id="trailing_bookend" class="bookend_tr"><td/>
|
||||
<td /><td class="bookend">
|
||||
<tr id="trailing_bookend" class="bookend_tr"><td colspan="4" class="bookend">
|
||||
<center>{{trailing_bookend}}</center>
|
||||
<span class="tiny"><p></p></span></td>
|
||||
</tr>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
{{! Client-side Mustache template for rendering the trailing bookend.}}
|
||||
|
||||
{{#if trailing_bookend}}
|
||||
<tr id="trailing_bookend" class="bookend_tr"><td/>
|
||||
<td /><td class="bookend">
|
||||
<tr id="trailing_bookend" class="bookend_tr"><td colspan="4" class="bookend">
|
||||
<center>{{trailing_bookend}}</center>
|
||||
<span class="tiny"><p></p></span></td>
|
||||
</tr>
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -2,7 +2,7 @@ var common = require('../common.js').common;
|
|||
|
||||
function star_count() {
|
||||
return casper.evaluate(function () {
|
||||
return $("#zhome .icon-vector-star").length;
|
||||
return $("#zhome .icon-vector-star:not(.empty-star)").length;
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue