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

Use <a> tags for links in the recipient/summary bars.

Browse Source 
The main user-facing feature here is that users can open narrows
in new tabs or windows. Internally, it makes the HTML more semantic.

One consequence of making these elements into actual anchor tags
is that clicking on them no longer triggers this logic to
close the compose box when you click outside of it:

        // Unfocus our compose area if we click out of it. Don't let exits out
        // of modals or selecting text (for copy+paste) trigger cancelling.
        if (compose.composing() && !$(e.target).is("a") &&
            ($(e.target).closest(".modal").length === 0) &&
            window.getSelection().toString() === "") {
            compose.cancel();
        }

Instead of patching the above code, I elected to just call
compose.cancel() explicitly in the click handlers for the links
themselves.

We are gonna try to clean up the compose-box behavior globally soon.

(imported from commit c9a01916f1714fe3dd495d25c78cd5e5532105ef)
This commit is contained in:
Steve Howell
2013-10-03 17:05:46 -04:00
parent e29855e106
commit a78a1ec36c
5 changed files with 90 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
static/js/message_list_view.js
View File

@@ -187,7 +187,7 @@ MessageListView.prototype = {
// the original message, so we make a fake message based on the real one
// that will trigger the right part of the handlebars template and won't
// show the content, date, etc. from the real message.
summary_group[key] = _.extend(_.pick(message,
var fake_message = _.extend(_.pick(message,
'timestamp', 'show_date', 'historical', 'stream',
'is_stream', 'subject', 'display_recipient', 'display_reply_to'), {
is_summary: true,
@@ -197,6 +197,14 @@ MessageListView.prototype = {
summary_adjective: summary_adjective,
messages: [message]
});
if (message.stream) {
fake_message.stream_url = narrow.by_stream_uri(message.stream);
fake_message.topic_url = narrow.by_stream_subject_uri(message.stream, message.subject);
} else {
fake_message.pm_with_url = narrow.pm_with_uri(message.reply_to);
}
summary_group[key] = fake_message;
} else {
summary_group[key].messages.push(message);
}
@@ -231,6 +239,13 @@ MessageListView.prototype = {
message.subscribed = message.stream;
}
}
if (message.stream) {
message.stream_url = narrow.by_stream_uri(message.stream);
message.topic_url = narrow.by_stream_subject_uri(message.stream, message.subject);
} else {
message.pm_with_url = narrow.pm_with_uri(message.reply_to);
}
}
message.include_sender = true;

4
static/js/narrow.js
View File

@@ -407,6 +407,10 @@ exports.hide_empty_narrow_message = function () {
$(".empty_feed_notice").hide();
};
exports.pm_with_uri = function (reply_to) {
return "#narrow/pm-with/" + hashchange.encodeHashComponent(reply_to);
};
exports.by_stream_uri = function (stream) {
return "#narrow/stream/" + hashchange.encodeHashComponent(stream);
};

60
static/js/ui.js
View File

@@ -1195,26 +1195,62 @@ $(function () {
condense(row);
});
$("#home").on("click", ".narrows_by_recipient", function (e) {
var row = rows.get_closest_row(this);
function cancel_compose_and_get_row_id_for_narrowing(narrow_link_elem) {
// This oddly named function exists due to the fragile
// sequencing of operations that needs to happen here.
//
// Calling compose.cancel() has the non-obvious side effect
// of making a clone of the floating recipient bar's biggest <td>
// element and orphaning it from its enclosing <tr>.
//
// You might be asking two questions:
//
// 1) Why would we ever clone td tags in the recipient bar?
// 2) Why does canceling the compose box touch the recipient bar?
//
// For question #1, I don't have a perfect answer, as the decision dates
// back to very early days, but the basic idea is that the floating recipient
// bar does mutate its content as you scroll, so making an assumption
// that a recipient bar element's will stay under the same parent is
// something that we can't simply and reliably guarantee for any
// non-trivial operation.
//
// For question #2, one of the jobs of compose.cancel() is to address
// how we fade messages in the message pane as part of the compose-fade
// feature. Consider the case where the floating recipient's recipient
// doesn't match the compose box's recipient info--we would want to
// unset the fading styles on the floating recipient bar.
//
// Most callers to compose.cancel() don't actually care about the FRB
// side effect details, as it's rightfully encapsulated in that high level
// function, but this code path is sensitive to having the rug pulled
// out from under us, so it's critically important that we grab the
// id of the recipient bar's parent <tr> before we indirectly call
// replace_floating_recipient_bar().
// The order of these two lines is critical. See comment above.
var row = rows.get_closest_row(narrow_link_elem);
compose.cancel();
var nearest = current_msg_list.get(rows.id(row));
var selected = current_msg_list.selected_message();
if (util.same_recipient(nearest, selected)) {
narrow.by_recipient(selected.id, {trigger: 'message header'});
return selected.id;
} else {
narrow.by_recipient(nearest.id, {trigger: 'message header'});
return nearest.id;
}
}
$("#home").on("click", ".narrows_by_recipient", function (e) {
e.preventDefault();
var row_id = cancel_compose_and_get_row_id_for_narrowing(this);
narrow.by_recipient(row_id, {trigger: 'message header'});
});
$("#home").on("click", ".narrows_by_subject", function (e) {
var row = rows.get_closest_row(this);
var nearest = current_msg_list.get(rows.id(row));
var selected = current_msg_list.selected_message();
if (util.same_recipient(nearest, selected)) {
narrow.by_subject(selected.id, {trigger: 'message header'});
} else {
narrow.by_subject(nearest.id, {trigger: 'message header'});
}
e.preventDefault();
var row_id = cancel_compose_and_get_row_id_for_narrowing(this);
narrow.by_subject(row_id, {trigger: 'message header'});
});
$("#userlist-toggle-button").on("click", function (e) {

6
static/styles/zulip.css
View File

@@ -482,6 +482,7 @@ ul.filters {
list-style-type: none;
}
.message_header_stream a.message_label_clickable,
ul.filters a {
color: #333;
}
@@ -1089,7 +1090,7 @@ just a temporary hack.
color: #0088CC;
}
.message_label_clickable:hover {
a.message_label_clickable:hover {
cursor: pointer;
color: #08C;
}
@@ -1128,11 +1129,12 @@ just a temporary hack.
}
/* Brighten text because of the dark background */
.dark_background a,
.dark_background {
color: #ffffff;
}
.dark_background .message_label_clickable:hover {
.dark_background a.message_label_clickable:hover {
color: #3BF;
}

30
static/templates/message.handlebars
View File

@@ -47,9 +47,10 @@
{{/if}}
{{! stream }}
<span class="message_label_clickable narrows_by_recipient stream_label"
<a class="message_label_clickable narrows_by_recipient stream_label"
href="{{stream_url}}"
title="Narrow to stream &quot;{{display_recipient}}&quot;">{{display_recipient}}
</span>
</a>
{{! > }}
&nbsp;
@@ -58,10 +59,11 @@
{{! topic }}
<span class="stream_topic">
<span class="message_label_clickable narrows_by_subject"
<a class="message_label_clickable narrows_by_subject"
href="{{topic_url}}"
title="Narrow to stream &quot;{{display_recipient}}&quot;, topic &quot;{{subject}}&quot;">
{{subject}}
</span>
</a>
{{! exterior links (e.g. to a trac ticket) }}
{{#each subject_links}}
@@ -74,10 +76,11 @@
{{else}}
{{! You and Somebody Else, links to PM narrow}}
<span class="message_label_clickable narrows_by_recipient"
<a class="message_label_clickable narrows_by_recipient"
href="{{pm_with_url}}"
title="Narrow to your private messages with {{display_reply_to}}">
You and {{display_reply_to}}
</span>
</a>
{{/if}}
@@ -107,10 +110,11 @@
{{/if}}
{{! stream link }}
<span class="message_label_clickable narrows_by_recipient stream_label"
<a class="message_label_clickable narrows_by_recipient stream_label"
href="{{stream_url}}"
title="Narrow to stream &quot;{{display_recipient}}&quot;">
{{display_recipient}}
</span>
</a>
{{! > (narrowing icon) }}
&nbsp;
@@ -121,14 +125,15 @@
{{! topic stuff }}
<span class="stream_topic">
{{! topic link }}
<span class="message_label_clickable narrows_by_subject"
<a class="message_label_clickable narrows_by_subject"
href="{{topic_url}}"
title="Narrow to stream &quot;{{display_recipient}}&quot;, topic &quot;{{subject}}&quot;">
{{#if ../../../../../use_match_properties}}
{{{match_subject}}}
{{else}}
{{subject}}
{{/if}}
</span>
</a>
{{! edit subject pencil icon }}
{{#if empty_subject}}
@@ -153,9 +158,10 @@
{{#if collapsible}}
<i class="messages-collapse icon-vector-collapse-alt"></i>
{{/if}}
<span class="message_label_clickable narrows_by_recipient"
<a class="message_label_clickable narrows_by_recipient"
href="{{pm_with_url}}"
title="Narrow to your private messages with {{display_reply_to}}">
You and {{display_reply_to}}</span>
You and {{display_reply_to}}</a>
</td>
{{/if}}
</tr>