paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-04 22:13:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Transition from tables to divs for the message list.

Browse Source 
This breaks our casperjs tests.

(imported from commit c63181c73a24eed4a80bfa56966d1f0871c5edb2)
This commit is contained in:
acrefoot
2013-12-09 14:15:33 -05:00
committed by Tim Abbott
parent 91fc3fb7d7
commit 0d08acaa1b
10 changed files with 118 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
static/js/message_list_view.js
View File

@@ -106,7 +106,7 @@ MessageListView.prototype = {
// Delete the leftover recipient label. // Delete the leftover recipient label.
table.find('.recipient_row:first').remove(); table.find('.recipient_row:first').remove();
} else { } else {
var last_row = table.find('tr[zid]:last'); var last_row = table.find('div[zid]:last');
last_message_id = rows.id(last_row); last_message_id = rows.id(last_row);
prev = self.get_message(last_message_id); prev = self.get_message(last_message_id);
@@ -314,7 +314,7 @@ MessageListView.prototype = {
var rendered_elems = $(templates.render('message', { var rendered_elems = $(templates.render('message', {
messages: messages_to_render, messages: messages_to_render,
include_layout_row: (table.find('tr:first').length === 0), include_layout_row: (table.find('div:first').length === 0),
use_match_properties: list.filter.is_search() use_match_properties: list.filter.is_search()
})); }));
@@ -384,7 +384,7 @@ MessageListView.prototype = {
// though, as resizing the window doesn't make them go away). // though, as resizing the window doesn't make them go away).
// So, we add an empty row and then garbage collect them // So, we add an empty row and then garbage collect them
// later when the user is idle. // later when the user is idle.
var dummy = $("<tr></tr>"); var dummy = $("<div></div>");
table.find('.ztable_layout_row').after(dummy); table.find('.ztable_layout_row').after(dummy);
$(document).idle({'idle': 1000*10, $(document).idle({'idle': 1000*10,
'onIdle': function () { 'onIdle': function () {
@@ -453,7 +453,7 @@ MessageListView.prototype = {
_.each(rendered_elems.toArray().reverse(), function (elem) { _.each(rendered_elems.toArray().reverse(), function (elem) {
// Sometimes there are non-DOM elements in rendered_elems; only // Sometimes there are non-DOM elements in rendered_elems; only
// try to get the heights of actual trs. // try to get the heights of actual trs.
if ($(elem).is("tr")) { if ($(elem).is("div")) {
new_messages_height += elem.offsetHeight; new_messages_height += elem.offsetHeight;
// starting from the last message, ignore message heights that weren't sent by me. // starting from the last message, ignore message heights that weren't sent by me.
if(id_of_last_message_sent_by_us > -1) { if(id_of_last_message_sent_by_us > -1) {

2
static/js/rows.js
View File

@@ -56,7 +56,7 @@ exports.get_closest_row = function (element) {
// This gets the closest message row to an element, whether it's // This gets the closest message row to an element, whether it's
// a summary bar, recipient bar, or message. With our current markup, // a summary bar, recipient bar, or message. With our current markup,
// this is the most reliable way to do it. // this is the most reliable way to do it.
return $(element).closest("tr"); return $(element).closest(".message_row");
}; };
return exports; return exports;

2
static/js/search.js
View File

@@ -140,7 +140,7 @@ exports.initiate_search = function () {
exports.clear_search = function () { exports.clear_search = function () {
narrow.deactivate(); narrow.deactivate();
$('table tr').removeHighlight(); $('.message_table').removeHighlight();
$('#search_query').blur(); $('#search_query').blur();
exports.update_button_visibility(); exports.update_button_visibility();
}; };

2
static/js/stream_color.js
View File

@@ -47,7 +47,7 @@ function update_table_stream_color(table, stream_name, color) {
var stream_labels = $("#floating_recipient_bar").add(table).find(".stream_label"); var stream_labels = $("#floating_recipient_bar").add(table).find(".stream_label");
_.each(stream_labels, function (label) { _.each(stream_labels, function (label) {
if ($.trim($(label).text()) === stream_name) { if ($.trim($(label).text()) === stream_name) {
fixup($(label).parent("td").parent("tr").prev("tr") fixup($(label).parent("div.selectable_row").prev("div")
.nextUntil(".bookend_tr") .nextUntil(".bookend_tr")
.children(".messagebox_colorblock,.message_header_colorblock")); .children(".messagebox_colorblock,.message_header_colorblock"));
} }

14
static/js/ui.js
View File

@@ -135,7 +135,7 @@ function copy_handler(e) {
ranges.push(range); ranges.push(range);
startc = $(range.startContainer); startc = $(range.startContainer);
start_data = find_boundary_tr($(startc.parents('tr')[0]), function (row) { start_data = find_boundary_tr($(startc.parents('div.selectable_row')[0]), function (row) {
return row.next(); return row.next();
}); });
if (start_data === undefined) { if (start_data === undefined) {
@@ -147,10 +147,10 @@ function copy_handler(e) {
// If the selection ends in the bottom whitespace, we should act as // If the selection ends in the bottom whitespace, we should act as
// though the selection ends on the final message // though the selection ends on the final message
if (endc.attr('id') === "bottom_whitespace") { if (endc.attr('id') === "bottom_whitespace") {
initial_end_tr = $("tr.message_row:last"); initial_end_tr = $("div.message_row:last");
skip_same_td_check = true; skip_same_td_check = true;
} else { } else {
initial_end_tr = $(endc.parents('tr')[0]); initial_end_tr = $(endc.parents('div.selectable_row')[0]);
} }
end_data = find_boundary_tr(initial_end_tr, function (row) { end_data = find_boundary_tr(initial_end_tr, function (row) {
return row.prev(); return row.prev();
@@ -167,7 +167,7 @@ function copy_handler(e) {
// If the selection starts and ends in the same td, // If the selection starts and ends in the same td,
// we want to let the browser handle the copy-paste mostly on its own // we want to let the browser handle the copy-paste mostly on its own
if (!skip_same_td_check && if (!skip_same_td_check &&
startc.parents('td')[0] === endc.parents('td')[0]) { startc.parents('div.selectable_row>div')[0] === endc.parents('div.selectable_row>div')[0]) {
// If the user is not running the desktop app, let the browser handle // If the user is not running the desktop app, let the browser handle
// the copy entirely on its own // the copy entirely on its own
@@ -585,7 +585,7 @@ function replace_floating_recipient_bar(desired_label) {
other_label = $("#current_label_private_message"); other_label = $("#current_label_private_message");
header = desired_label.children(".message_header_stream.right_part"); header = desired_label.children(".message_header_stream.right_part");
$("#current_label_stream td:first").css( $("#current_label_stream .message_header_colorblock").css(
"background-color", "background-color",
desired_label.children(".message_header_colorblock") desired_label.children(".message_header_colorblock")
.css("background-color")); .css("background-color"));
@@ -594,9 +594,9 @@ function replace_floating_recipient_bar(desired_label) {
other_label = $("#current_label_stream"); other_label = $("#current_label_stream");
header = desired_label.children(".message_header_private_message.right_part"); header = desired_label.children(".message_header_private_message.right_part");
} }
new_label.find("td:last").replaceWith(header.clone()); new_label.find(".right_part").replaceWith(header.clone());
other_label.css('display', 'none'); other_label.css('display', 'none');
new_label.css('display', 'table-row'); new_label.css('display', 'block');
new_label.attr("zid", rows.id(desired_label)); new_label.attr("zid", rows.id(desired_label));
new_label.toggleClass('faded', desired_label.hasClass('faded')); new_label.toggleClass('faded', desired_label.hasClass('faded'));

4
static/js/viewport.js
View File

@@ -158,8 +158,8 @@ exports.visible_messages = function (require_fully_visible) {
// We do this explicitly without merges and without recalculating // We do this explicitly without merges and without recalculating
// the feed bounds to keep this computation as cheap as possible. // the feed bounds to keep this computation as cheap as possible.
var visible_messages = []; var visible_messages = [];
var messages_above_pointer = selected_row.prevAll("tr.message_row[zid]:lt(" + num_neighbors + ")"); var messages_above_pointer = selected_row.prevAll("div.message_row[zid]:lt(" + num_neighbors + ")");
var messages_below_pointer = selected_row.nextAll("tr.message_row[zid]:lt(" + num_neighbors + ")"); var messages_below_pointer = selected_row.nextAll("div.message_row[zid]:lt(" + num_neighbors + ")");
add_to_visible_messages(selected_row, visible_messages, add_to_visible_messages(selected_row, visible_messages,
top_of_feed.get(), bottom_of_feed.get(), require_fully_visible); top_of_feed.get(), bottom_of_feed.get(), require_fully_visible);
add_to_visible_messages(messages_above_pointer, visible_messages, add_to_visible_messages(messages_above_pointer, visible_messages,

108
static/styles/zulip.css
View File

@@ -729,8 +729,7 @@ td.pointer {
white-space: nowrap; white-space: nowrap;
font-weight: 600; font-weight: 600;
line-height: 14px; line-height: 14px;
padding: 3px 0px 2px 5px; border-radius: 3px 3px 0px 0px;
border-radius: 0px 3px 0px 0px;
background: rgb(220,220,220); /* Old browsers */ background: rgb(220,220,220); /* Old browsers */
background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */ background: -moz-linear-gradient(top, rgba(220,220,220,1) 0%, rgba(230,230,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(220,220,220,1)), color-stop(100%,rgba(230,230,230,1))); /* Chrome,Safari4+ */
@@ -739,7 +738,13 @@ td.pointer {
background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */ background: -ms-linear-gradient(top, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* W3C */ background: linear-gradient(to bottom, rgba(220,220,220,1) 0%,rgba(230,230,230,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcdcdc', endColorstr='#e6e6e6',GradientType=0 ); /* IE6-9 */
box-shadow: inset 0px 2px 1px -2px #333, inset -2px 0px 1px -2px #333, inset 0px -2px 1px -2px #ccc; border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
}
.message-header-contents {
padding: 3px 0px 2px 14px;
} }
.summary_row .message_header{ .summary_row .message_header{
@@ -804,14 +809,6 @@ just a temporary hack.
display: none; display: none;
} }
.floating_recipient .message_header {
box-shadow: inset 0px 2px 1px -2px #333, inset -2px 0px 1px -2px #333 !important;
}
.floating_recipient .message_header_colorblock {
box-shadow: inset 0px 2px 1px -2px #333, inset 2px 0px 1px -2px #333 !important;
}
.compose_table .message_header_colorblock, .compose_table .message_header { .compose_table .message_header_colorblock, .compose_table .message_header {
box-shadow: none; box-shadow: none;
background: none; background: none;
@@ -920,27 +917,26 @@ just a temporary hack.
} }
.pointer_icon { .pointer_icon {
width: 100%; visibility: hidden;
text-align: center;
display: none;
color: #000; color: #000;
position: absolute;
left: 2px;
top: 50%;
margin-top: -9px;
} }
/* Round edges on the bottom of each message -- /* Round edges on the bottom of each message --
a necessary evil in the world of tables */ a necessary evil in the world of tables */
.last_message .messagebox { .last_message .messagebox {
height: 3px; border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 0px;
border: none; border: none;
box-shadow: inset -2px 0px 1px -2px #333, inset 0px -2px 1px -2px #333; border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
overflow: hidden;
} }
.last_message .messagebox_colorblock {
border-radius: 0px 0px 0px 3px;
border: none;
box-shadow: inset 2px 0px 1px -2px #333, inset 0px -2px 1px -2px #333;
}
/* Base color backgrounds for messageboxes, /* Base color backgrounds for messageboxes,
private messages, mentions, and unread messages */ private messages, mentions, and unread messages */
@@ -951,6 +947,7 @@ just a temporary hack.
.messagebox { .messagebox {
background-color: #ffffff; background-color: #ffffff;
position: relative;
} }
.private-message .messagebox { .private-message .messagebox {
@@ -1001,33 +998,22 @@ just a temporary hack.
opacity: 1; opacity: 1;
} }
.selected_message .messagebox_colorblock, .selected_message .summary_colorblock {
box-shadow: 0px 0px 5px 0px #3093c3, inset 3px 0px 1px -2px #39afe8, inset 0px -3px 1px -2px #39afe8, inset 0px 3px 1px -2px #39afe8, inset -12px 0px 0px -1px rgba(240,240,240,0.6);
}
.selected_message .messagebox_colorblock.message_header_private_message {
box-shadow: 0px 0px 5px 0px #3093c3, inset 3px 0px 1px -2px #39afe8, inset 0px -3px 1px -2px #39afe8, inset 0px 3px 1px -2px #39afe8, inset -12px 0px 0px -1px rgba(240,240,240,0.6);
}
.selected_message .pointer_icon { .selected_message .pointer_icon {
display: inline-block; visibility: visible;
} }
.selected_message .messagebox, .selected_message .messagebox {
.selected_message.summary_row .message_header{ z-index: 1;
box-shadow: 0px 0px 5px 0px #3093c3, inset 0px -3px 0px -2px #39afe8, inset 0px 3px 0px -2px #39afe8, inset -3px 0px 0px -2px #39afe8; border-color: #3093c3;
} box-shadow: 0px 0px 6px 0px #3093c3;
.selected_message.mention .messagebox,
.selected_message.private-message.mention .messagebox {
box-shadow: 0px 0px 5px 0px #3093c3, inset 0px -3px 0px -2px #39afe8, inset 0px 3px 0px -2px #39afe8, inset -3px 0px 0px -2px #39afe8;
}
.selected_message.private-message .messagebox {
box-shadow: 0px 0px 5px 0px #3093c3, inset 0px -3px 0px -2px #39afe8, inset 0px 3px 0px -2px #39afe8, inset -3px 0px 0px -2px #39afe8;
} }
.selected_message .messagebox-content {
box-shadow: inset 0px 2px 0px -1px #39afe8, inset 0px -2px 0px -1px #39afe8, inset 9px 0px 0px rgba(255,255,255,0.5);
}
.last_message.selected_message .messagebox-content {
box-shadow: inset 0px 2px 0px -1px #39afe8, inset 9px 0px 0px rgba(255,255,255,0.5);
}
.selected_message .inline_profile_picture { .selected_message .inline_profile_picture {
border-color: #AAA; border-color: #AAA;
@@ -1133,6 +1119,10 @@ a.message_label_clickable:hover {
position: relative; position: relative;
} }
.include-sender .message_top_line {
margin-top: 5px;
}
.message-right { .message-right {
float: right; float: right;
} }
@@ -1160,8 +1150,7 @@ a.message_label_clickable:hover {
text-decoration: underline; text-decoration: underline;
} }
table.message_table { div.message_table {
table-layout: fixed;
border-collapse: separate; border-collapse: separate;
margin-left: auto; margin-left: auto;
display: none; display: none;
@@ -1174,7 +1163,7 @@ table.compose_table {
width: 100%; width: 100%;
} }
table.focused_table { div.focused_table {
display: table; display: table;
} }
@@ -1185,6 +1174,7 @@ table.focused_table {
.message_content { .message_content {
line-height: 18px; line-height: 18px;
padding-left: 35px; /* Also edit #message_edit_form .edit-controls */ padding-left: 35px; /* Also edit #message_edit_form .edit-controls */
display: block;
} }
.message_edit_content { .message_edit_content {
line-height: 18px; line-height: 18px;
@@ -1227,18 +1217,18 @@ div.message_content thead {
background-color: #EFEFEF; background-color: #EFEFEF;
} }
div.message_content tr { div.message_content div {
display: table-row; display: table-row;
vertical-align: inherit; vertical-align: inherit;
} }
div.message_content tr th { div.message_content div {
border: 1px solid #cccccc; border: 1px solid #cccccc;
padding: 4px; padding: 4px;
text-align: left; text-align: left;
} }
div.message_content tr td { div.message_content div {
border: 1px solid #cccccc; border: 1px solid #cccccc;
padding: 4px; padding: 4px;
} }
@@ -1253,17 +1243,16 @@ blockquote p {
} }
.messagebox { .messagebox {
padding: 7px 85px 0px 7px;
word-wrap: break-word; word-wrap: break-word;
cursor: pointer; cursor: pointer;
vertical-align: top; vertical-align: top;
border: none; border: none;
box-shadow: inset -2px 0px 1px -2px #333; border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
} }
.messagebox_colorblock { .messagebox-content {
border: none; padding: 1px 85px 1px 15px;
box-shadow: inset 2px 0px 1px -2px #333;
} }
.messagebox p { .messagebox p {
@@ -1358,7 +1347,7 @@ blockquote p {
position: fixed; position: fixed;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
z-index: 1; z-index: 2;
width: 100%; width: 100%;
} }
@@ -1948,8 +1937,7 @@ input.recipient_box {
margin-right: 210px; margin-right: 210px;
} }
table.floating_recipient { div.floating_recipient {
table-layout: fixed;
border-collapse: separate; border-collapse: separate;
width: 100%; width: 100%;
@@ -2010,6 +1998,8 @@ table.floating_recipient {
margin-bottom: 5px; margin-bottom: 5px;
margin-left: 5px; margin-left: 5px;
height: 100px; height: 100px;
display: block !important;
border: none !important;
} }
.message_inline_image img { .message_inline_image img {

71
static/templates/message.handlebars
View File

@@ -5,37 +5,32 @@
these CSS classes specify the widths for that first, these CSS classes specify the widths for that first,
collapsed row. (Otherwise, colspan breaks everything).}} collapsed row. (Otherwise, colspan breaks everything).}}
{{#include_layout_row}} {{#include_layout_row}}
<tr class="ztable_layout_row"> <div class="ztable_layout_row">
<td class="ztable_col1"></td> </div>
<td class="ztable_col2"></td>
</tr>
{{/include_layout_row}} {{/include_layout_row}}
{{#each messages}} {{#each messages}}
{{#with this}} {{#with this}}
{{#include_bookend}} {{#include_bookend}}
<tr class="bookend_tr"> <div class="bookend_tr">
<td colspan="2" class="bookend{{#if subscribed}} sub-unsub-message{{/if}}{{#if unsubscribed}} sub-unsub-message{{/if}}"> <div class="bookend{{#if subscribed}} sub-unsub-message{{/if}}{{#if unsubscribed}} sub-unsub-message{{/if}}">
{{#if subscribed}} {{#if subscribed}}
<span>--- Subscribed to stream {{subscribed}} ---</span> <span>--- Subscribed to stream {{subscribed}} ---</span>
{{/if}} {{/if}}
{{#if unsubscribed}} {{#if unsubscribed}}
<span>--- Unsubscribed from stream {{unsubscribed}} ---</span> <span>--- Unsubscribed from stream {{unsubscribed}} ---</span>
{{/if}} {{/if}}
</td> </div>
</tr> </div>
{{/include_bookend}} {{/include_bookend}}
{{#if show_date}} {{#if show_date}}
<tr class="date_row" data-zid="{{id}}"><td colspan="4">{{{show_date}}}</td></tr> <div class="date_row" data-zid="{{id}}"><div colspan="4">{{{show_date}}}</div></div>
{{/if}} {{/if}}
{{#if is_summary}} {{#if is_summary}}
<tr zid="{{first_message_id}}" data-messages="{{message_ids}}" class="summary_row selectable_row{{#include_footer}} last_message{{/include_footer}}{{^is_stream}} summary_row_private_message{{/is_stream}}"> <div zid="{{first_message_id}}" data-messages="{{message_ids}}" class="summary_row selectable_row{{#include_footer}} last_message{{/include_footer}}{{^is_stream}} summary_row_private_message{{/is_stream}}">
<td class="summary_colorblock" style="background-color: {{background_color}};"> <div class="message_header message_header_stream right_part" style="box-shadow:inset 9px 0px {{background_color}};">
<span class="pointer_icon"><i class="icon-vector-caret-right"></i></span>
</td>
<td class="message_header message_header_stream right_part">
{{! [+] }} {{! [+] }}
<i class="messages-expand icon-vector-expand-alt"></i> <i class="messages-expand icon-vector-expand-alt"></i>
@@ -88,18 +83,15 @@
{{! "(5 read)" or something similar}} {{! "(5 read)" or something similar}}
({{count}} {{summary_adjective}}) ({{count}} {{summary_adjective}})
</td> </div>
</tr> </div>
{{else}} {{else}}
{{#include_recipient}} {{#include_recipient}}
<tr zid="{{id}}" class="recipient_row" data-messages="{{message_ids}}"> <div zid="{{id}}" class="recipient_row" data-messages="{{message_ids}}">
{{#if is_stream}} {{#if is_stream}}
{{! color strip on the left }} <div class="message_header message_header_stream right_part">
<td class="message_header_colorblock" style="background-color: {{background_color}};"> <div class="message-header-contents" style="box-shadow:inset 9px 0px {{background_color}};">
</td>
<td class="message_header message_header_stream right_part">
{{! [-] }} {{! [-] }}
{{#if collapsible}} {{#if collapsible}}
<i class="messages-collapse icon-vector-collapse-alt"></i> <i class="messages-collapse icon-vector-collapse-alt"></i>
@@ -156,10 +148,11 @@
<span class="topic_edit"> <span class="topic_edit">
<span class="topic_edit_form" id="{{id}}"></span> <span class="topic_edit_form" id="{{id}}"></span>
</span> </span>
</td> </div>
</div>
{{else}} {{else}}
<td class="message_header_colorblock message_header_private_message" style="background-color: {{background_color}};"></td> <div class="message_header message_header_private_message right_part dark_background">
<td class="message_header message_header_private_message right_part dark_background"> <div class="message-header-contents">
{{#if collapsible}} {{#if collapsible}}
<i class="messages-collapse icon-vector-collapse-alt"></i> <i class="messages-collapse icon-vector-collapse-alt"></i>
{{/if}} {{/if}}
@@ -168,14 +161,18 @@
title="Narrow to your private messages with {{display_reply_to}}"> title="Narrow to your private messages with {{display_reply_to}}">
You and {{display_reply_to}} You and {{display_reply_to}}
</a> </a>
</td> </div>
</div>
{{/if}} {{/if}}
</tr> </div>
{{/include_recipient}} {{/include_recipient}}
<tr zid="{{id}}" id="{{dom_id}}" <div zid="{{id}}" id="{{dom_id}}"
class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}{{#contains_mention}} mention{{/contains_mention}}{{#include_footer}} last_message{{/include_footer}}{{#unread}} unread{{/unread}} selectable_row"> class="message_row{{^is_stream}} private-message{{/is_stream}}{{#include_sender}} include-sender{{/include_sender}}{{#contains_mention}} mention{{/contains_mention}}{{#include_footer}} last_message{{/include_footer}}{{#unread}} unread{{/unread}} selectable_row">
<td class="messagebox_colorblock{{^is_stream}} message_header_private_message{{/is_stream}}" style="background-color: {{background_color}};"><span class="pointer_icon"><i class="icon-vector-caret-right"></i></span></td>
<td class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}"> <div class="messagebox{{^include_sender}} prev_is_same_sender{{/include_sender}}{{^is_stream}} private-message{{/is_stream}}">
<div class="messagebox-border" style="box-shadow:inset 9px 0px {{background_color}};">
<div class="messagebox-content">
<span class="pointer_icon"><i class="icon-vector-caret-right"></i></span>
<div class="message_top_line"> <div class="message_top_line">
<div class="unread_marker"></div> <div class="unread_marker"></div>
{{#include_sender}} {{#include_sender}}
@@ -213,18 +210,20 @@
{{#if last_edit_timestr}} {{#if last_edit_timestr}}
<div class="message_edit_notice">Last edited: {{{last_edit_timestr}}}</div> <div class="message_edit_notice">Last edited: {{{last_edit_timestr}}}</div>
{{/if}} {{/if}}
</td> </div>
</tr> </div>
</div>
</div>
{{/if}} {{/if}}
{{/with}} {{/with}}
{{/each}} {{/each}}
{{#if trailing_bookend}} {{#if trailing_bookend}}
<tr id="trailing_bookend" class="bookend_tr"> <div id="trailing_bookend" class="bookend_tr">
<td colspan="2" class="bookend"> <div colspan="2" class="bookend">
<center>{{trailing_bookend}}</center> <center>{{trailing_bookend}}</center>
<span class="tiny"><p></p></span> <span class="tiny"><p></p></span>
</td> </div>
</tr> </div>
{{/if}} {{/if}}

38
templates/zerver/home.html
View File

@@ -16,20 +16,18 @@
<div id="floating_recipient_bar"> <div id="floating_recipient_bar">
<div class="recipient-bar-content"> <div class="recipient-bar-content">
<div class="recipient-bar-main"> <div class="recipient-bar-main">
<table class="floating_recipient"> <div class="floating_recipient">
<tr id="floating_recipient_layout_row" class="ztable_layout_row"> <div id="floating_recipient_layout_row" class="ztable_layout_row">
<td class="ztable_col1" /> </div>
<td class="ztable_col2" /> <div style="display: none;" id="current_label_stream" class="recipient_row">
</tr> <div class="message_header_colorblock"></div>
<tr style="display: none;" id="current_label_stream" class="recipient_row"> <div class="message_label_clickable message_header message_header_stream right_part"></div>
<td class="message_header_colorblock"></td> </div>
<td class="message_label_clickable message_header message_header_stream right_part"></td> <div style="display: none;" id="current_label_private_message" class="recipient_row">
</tr> <div class="message_header_colorblock message_header_private_message"></div>
<tr style="display: none;" id="current_label_private_message" class="recipient_row"> <div class="message_label_clickable message_header message_header_private_message right_part"></div>
<td class="message_header_colorblock message_header_private_message"></td> </div>
<td class="message_label_clickable message_header message_header_private_message right_part"></td> </div>
</tr>
</table>
</div> </div>
</div> </div>
</div> </div>
@@ -85,14 +83,10 @@
<div id="empty_search_narrow_message" class="empty_feed_notice"> <div id="empty_search_narrow_message" class="empty_feed_notice">
<h4>Nobody has talked about that yet!</h4> <h4>Nobody has talked about that yet!</h4>
</div> </div>
<table class="message_table focused_table" id="zhome"> <div class="message_table focused_table" id="zhome">
<tbody> </div>
</tbody> <div class="message_table" id="zfilt">
</table> </div>
<table class="message_table" id="zfilt">
<tbody>
</tbody>
</table>
<div id="bottom_whitespace"></div> <div id="bottom_whitespace"></div>
</div> </div>

4
zerver/tests/frontend/node/templates.js
View File

@@ -218,11 +218,11 @@ function render(template_name, args) {
include_layout_row: true include_layout_row: true
}; };
var html = render('message', args); var html = render('message', args);
html = '<table class="message_table focused_table" id="zfilt">' + html + '</table>'; html = '<div class="message_table focused_table" id="zfilt">' + html + '</div>';
global.write_test_output("message.handlebars.handlebars", html); global.write_test_output("message.handlebars.handlebars", html);
var first_message = $(html).find("td.messagebox:first"); var first_message = $(html).find("div.messagebox:first");
var first_message_text = first_message.find(".message_content").text().trim(); var first_message_text = first_message.find(".message_content").text().trim();
assert.equal(first_message_text, "This is message one."); assert.equal(first_message_text, "This is message one.");