CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-06-24 21:08:25 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Updates to stream list

Browse Source 
(imported from commit 426a8035e9661598f9bbfa6ae83883ca3ac6106e)
This commit is contained in:
Allen Rabinovich 2013-11-08 01:12:05 -08:00
parent 8120382b12
commit ca4e6a0ff8
7 changed files with 292 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
static/js/subs.js
View File

@ -10,6 +10,23 @@ function get_color() {
return color; return color;
} }
function selectText(element) {
var range, sel;
if (window.getSelection) {
sel = window.getSelection();
range = document.createRange();
range.selectNodeContents(element);
sel.removeAllRanges();
sel.addRange(range);
}
else if (document.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
}
}
function should_list_all_streams() { function should_list_all_streams() {
return page_params.domain !== 'mit.edu'; return page_params.domain !== 'mit.edu';
} }
@ -217,11 +234,15 @@ function add_sub_to_table(sub) {
} }
function format_member_list_elem(name, email) { function format_member_list_elem(name, email) {
return name + (email ? ' <' + email + '>' : ''); return "<tr><td class='subscriber-name'>" + name + "</td><td class='subscriber-email'>" + (email || '') + "</td></tr>";
} }
function add_to_member_list(ul, name, email) { function add_element_to_member_list (tb, elem) {
$('<li>').prependTo(ul).text(format_member_list_elem(name, email)); tb.prepend(elem);
}
function add_to_member_list(tb, name, email) {
tb.prepend(format_member_list_elem(name, email));
} }
function mark_subscribed(stream_name, attrs) { function mark_subscribed(stream_name, attrs) {
@ -240,11 +261,11 @@ function mark_subscribed(stream_name, attrs) {
var settings = settings_for_sub(sub); var settings = settings_for_sub(sub);
var button = button_for_sub(sub); var button = button_for_sub(sub);
if (button.length !== 0) { if (button.length !== 0) {
button.text("Unsubscribe").removeClass("btn-primary"); button.text("Subscribed").addClass("subscribed-button").addClass("green-button");
// Add the user to the member list if they're currently // Add the user to the member list if they're currently
// viewing the members of this stream // viewing the members of this stream
if (sub.render_subscribers && settings.hasClass('in')) { if (sub.render_subscribers && settings.hasClass('in')) {
var members = settings.find(".subscriber_list_container ul"); var members = settings.find(".subscriber_list_container .subscriber-list");
add_to_member_list(members, page_params.fullname, page_params.email); add_to_member_list(members, page_params.fullname, page_params.email);
} }
} else { } else {
@ -280,7 +301,7 @@ function mark_unsubscribed(stream_name) {
} else if (sub.subscribed) { } else if (sub.subscribed) {
stream_list.remove_narrow_filter(stream_name, 'stream'); stream_list.remove_narrow_filter(stream_name, 'stream');
sub.subscribed = false; sub.subscribed = false;
button_for_sub(sub).text("Subscribe").addClass("btn-primary"); button_for_sub(sub).removeClass("subscribed-button").removeClass("green-button").removeClass("red-button").text("Subscribe");
var settings = settings_for_sub(sub); var settings = settings_for_sub(sub);
if (settings.hasClass('in')) { if (settings.hasClass('in')) {
settings.collapse('hide'); settings.collapse('hide');
@ -669,6 +690,16 @@ $(function () {
); );
}); });
$("body").on("mouseover", ".subscribed-button", function (e) {
$(e.target).addClass("red-button").text("Unsubscribe");
}).on("mouseout", ".subscribed-button", function (e) {
$(e.target).removeClass("red-button").text("Subscribed");
});
$("#subscriptions_table").on("click", ".email-address", function (e) {
selectText(this);
});
$("#subscriptions_table").on("click", ".sub_unsub_button", function (e) { $("#subscriptions_table").on("click", ".sub_unsub_button", function (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -727,7 +758,7 @@ $(function () {
// TODO: clean up this error handling // TODO: clean up this error handling
var error_elem = sub_row.find('.subscriber_list_container .alert-error'); var error_elem = sub_row.find('.subscriber_list_container .alert-error');
var warning_elem = sub_row.find('.subscriber_list_container .alert-warning'); var warning_elem = sub_row.find('.subscriber_list_container .alert-warning');
var list = sub_row.find('.subscriber_list_container ul'); var list = sub_row.find('.subscriber_list_container .subscriber-list');
function invite_success(data) { function invite_success(data) {
text_box.val(''); text_box.val('');
@ -797,7 +828,7 @@ $(function () {
var stream = sub_row.find('.subscription_name').text(); var stream = sub_row.find('.subscription_name').text();
var warning_elem = sub_row.find('.subscriber_list_container .alert-warning'); var warning_elem = sub_row.find('.subscriber_list_container .alert-warning');
var error_elem = sub_row.find('.subscriber_list_container .alert-error'); var error_elem = sub_row.find('.subscriber_list_container .alert-error');
var list = sub_row.find('.subscriber_list_container ul'); var list = sub_row.find('.subscriber_list_container .subscriber-list');
var indicator_elem = sub_row.find('.subscriber_list_loading_indicator'); var indicator_elem = sub_row.find('.subscriber_list_loading_indicator');
if (!stream_data.get_sub(stream).render_subscribers) { if (!stream_data.get_sub(stream).render_subscribers) {
@ -825,10 +856,10 @@ $(function () {
return format_member_list_elem(people_dict.get(elem).full_name, elem); return format_member_list_elem(people_dict.get(elem).full_name, elem);
}); });
_.each(subscribers.sort().reverse(), function (elem) { _.each(subscribers.sort().reverse(), function (elem) {
// add_to_member_list *prepends* the element, // add_element_to_member_list *prepends* the element,
// so we need to sort in reverse order for it to // so we need to sort in reverse order for it to
// appear in alphabetical order. // appear in alphabetical order.
add_to_member_list(list, elem); add_element_to_member_list(list, elem);
}); });
}, },
error: function (xhr) { error: function (xhr) {

304
static/styles/zulip.css
View File

@ -2061,38 +2061,34 @@ table.floating_recipient {
table-layout: fixed; table-layout: fixed;
} }
.subscription_table_elem {
padding: 2px;
line-height: 25px;
}
.subscription-email-hint-image { .subscription-email-hint-image {
float: right; float: right;
width: 80px; width: 80px;
padding-right: 60px; padding-right: 60px;
} }
.subscription_header.active { .subscription_header.collapsed {
border-color: rgba(82, 168, 236, 0.8); background-color: inherit;
cursor: pointer; }
-webkit-box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6); .subscription_settings,
-moz-box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6); .subscription_header,
box-shadow: inset 0 0 0 1px rgba(82, 168, 236, 0.8), 0 0 8px rgba(82, 168, 236, 0.6); .subscription_header.active {
background-color: #fefefe;
} }
.color_swatch { .color_swatch {
display: inline-block; display: inline-block;
height: 1em; height: 18px;
width: 1em; width: 18px;
border: 1px #666 solid; border-radius: 36px;
padding: 0; padding: 0;
margin: 0 0 0 5px; margin: 0 0 0 10px;
vertical-align: middle; vertical-align: middle;
} }
.subscriptions { .subscriptions {
margin-top: 45px; margin-top: 55px;
padding-left: 15px; padding-left: 15px;
} }
@ -2100,8 +2096,6 @@ table.floating_recipient {
padding-left: 0.5em; padding-left: 0.5em;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
line-height: 14px;
height: 16px;
} }
#stream_filters .subscription_block { #stream_filters .subscription_block {
@ -2124,6 +2118,15 @@ table.floating_recipient {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.subscription-name-row {
line-height: 67px;
height: 60px;
}
#add_new_subscription {
text-align: center;
}
.subject-name { .subject-name {
display: block; display: block;
line-height: 1.3em; line-height: 1.3em;
@ -2149,34 +2152,90 @@ table.floating_recipient {
} }
.subscription_header .subscription_lock { .subscription_header .subscription_lock {
font-size: 12px; font-size: 23px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: middle;
margin-left: 12px;
margin-right: 1px;
} }
.subscription_settings { .subscription_settings {
margin-left: 35px; width: 100%;
margin-right: 35px; position: relative;
clear: right; top: -1px;
} }
.subscription_settings form { .subscription_settings form {
margin: 0; text-align: center;
} }
.subscription_settings ul { .subscription_settings ul {
list-style-type: none; list-style-type: none;
} }
.subscriber_list_settings { .subscription-type {
margin-top: 10px; text-align: center;
padding: 5px;
width: 80%;
margin: auto;
font-weight: 300;
} }
.email-address { .stream-email {
width: 100%; width: 80%;
display: inline-block; margin: auto;
vertical-align: top; margin-top: 5px;
text-align: center;
padding: 5px;
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
}
.subscription-control-label {
display: inline-block;
vertical-align: middle;
line-height: 18px;
padding: 5px;
}
.sp-replacer,
.sp-preview,
.sp-preview-inner {
border-radius: 20px;
}
.sp-preview {
width: 20px;
border: none;
box-shadow: 0px 0px 1px rgba(0,0,0,1);
}
.sp-replacer {
margin-right: 12px;
border: none;
box-shadow: 0px 0px 2px rgba(0,0,0,0.8);
}
.subscription-config {
width: 270px;
margin: auto;
margin-top: 25px;
}
.stream-email-box,
.subscriber_list_settings,
.rename-stream {
margin: 20px 15px 20px 15px;
}
.subscription_row {
border-top: 1px solid #ddd;
}
.stream-email .email-address {
width: 90%;
display: block;
margin: auto;
white-space: -moz-pre-wrap !important; white-space: -moz-pre-wrap !important;
white-space: -pre-wrap; white-space: -pre-wrap;
white-space: -o-pre-wrap; white-space: -o-pre-wrap;
@ -2210,14 +2269,57 @@ table.floating_recipient {
margin-right: 10px; margin-right: 10px;
} }
.zulip-button {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); /* W3C */
background-color: #ddd;
color: #000;
border: 1px solid #fff;
border-radius: 3px;
line-height: 20px;
padding: 5px 8px 5px 8px;
outline: none;
}
.zulip-button:hover {
background-image: -moz-linear-gradient(top, rgba(0,0,0,0.09) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.09)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.09) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top, rgba(0,0,0,0.09) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top, rgba(0,0,0,0.09) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background-image: linear-gradient(to bottom, rgba(0,0,0,0.09) 0%,rgba(0,0,0,0) 100%); /* W3C */
}
.sub_unsub_button { .sub_unsub_button {
min-width: 140px; min-width: 140px;
float: right; float: right;
margin-top: 18px;
margin-right: 10px;
}
.green-button {
background-color: #006e2e; /* Old browsers */
color: #fff;
}
.red-button {
background-color: #cc0000;
color: #ffffff;
}
.blue-button {
background-color: #0000cc;
color: #ffffff;
} }
.sub_arrow { .sub_arrow {
float: right; float: right;
padding: 0 5px 0 10px; line-height: 67px;
padding: 0 15px 0 0;
} }
#create_stream_row td { #create_stream_row td {
@ -2227,34 +2329,80 @@ table.floating_recipient {
} }
#create_stream_name { #create_stream_name {
margin-left: 25px;
width: 220px; width: 220px;
margin-top: 10px;
} }
#create_stream_button { #create_stream_button {
min-width: 140px; min-width: 140px;
float: right; margin-left: 15px;
margin-top: 10px;
} }
.sub_settings_title { .sub_settings_title {
line-height: 30px; line-height: 30px;
margin: 10px 0; margin: 10px 0;
font-weight: bold; font-weight: 300;
font-size: 16px;
}
.new-stream-name,
.stream-rename-button {
margin-top: 10px;
} }
.settings_committed { .settings_committed {
margin: 10px; margin: 10px;
} }
.subscriber-list-box {
text-align: center;
}
.subscriber_list_container { .subscriber_list_container {
max-height: 200px;
overflow: auto;
margin-top: 10px; margin-top: 10px;
clear: right; display: inline-block;
margin: auto;
max-height: 300px;
overflow: auto;
text-align: left;
}
.subscriber-list {
width: auto;
margin: auto;
margin-bottom: 20px;
background: #efefef;
border-radius: 6px;
}
.subscriber-list tr:nth-child(even) {
background: #fafafa;
}
.subscriber-name,
.subscriber-email {
padding: 5px;
}
.subscriber-name {
padding-left: 8px;
}
.subscriber-email {
margin-left: 20px;
padding-right: 8px;
} }
.subscriber_list_add { .subscriber_list_add {
float: right; margin: auto;
text-align: center;
}
.add-subscriber-button,
.stream-rename-button {
margin-left: 5px;
} }
.modal { .modal {
@ -3036,12 +3184,14 @@ div.edit_bot {
margin-right: 8px; margin-right: 8px;
} }
#settings h1 { #settings h1,
#subscriptions h1 {
font-size: 25px; font-size: 25px;
font-weight: 300; font-weight: 300;
} }
#settings .settings-icon { #settings .settings-icon,
#subscriptions .streams-icon {
margin-right: 10px; margin-right: 10px;
font-size: 20px; font-size: 20px;
} }
@ -3442,75 +3592,17 @@ div.edit_bot {
.compose_private_button_label { .compose_private_button_label {
display: none; display: none;
} }
.subscription_name {
max-width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
} }
@media (max-width: 350px) { @media (max-width: 350px) {
html { html {
overflow-x: hidden; overflow-x: hidden;
} }
} }
/*
@media (max-width: 480px) {
body {
padding-right: 5px;
padding-left: 5px;
}
}
@media (max-width: 480px) {
#create_stream_name {
width: 130px;
}
}
@media (min-width: 768px) and (max-width: 979px) {
#create_stream_name {
width: 140px;
}
}
@media (max-width: 767px) {
#search_query {
width: 100%;
margin-left: 40px;
}
#navbar-middle {
padding-right: 75px;
}
#searchbox .input-append .icon-vector-search {
left: 46px;
}
#searchbox .search_button,
#searchbox .search_button[disabled]:hover {
right: -35px;
}
}
@media (max-width: 480px) {
.message_content {
margin-right: 5px;
}
}
@media (max-width: 767px) {
.sidebar-nav {
padding: 0.5em;
margin: 0px;
border: 1px solid black;
}
}
@media (max-width: 979px) {
.header-main .logo {
margin-left: -20px;
}
}
*/

73
static/templates/subscription.handlebars
View File

@ -1,18 +1,20 @@
{{! Client-side Mustache template for rendering subscriptions.}} {{! Client-side Mustache template for rendering subscriptions.}}
{{#with this}} {{#with this}}
<tr class="subscription_row" id="subscription_{{id}}"> <div class="subscription_row" id="subscription_{{id}}">
<td> <div class="subscription_table_elem subscription_header collapsed" data-toggle="collapse" data-target="#subscription_settings_{{id}}">
<div class="subscription_table_elem subscription_header" data-toggle="collapse" data-target="#subscription_settings_{{id}}"> {{#if invite_only}}
<span class="color_swatch fade {{#subscribed}}in{{/subscribed}}" style="background-color: {{color}}"></span> <span class="subscription_lock"><i class="icon-vector-lock" style="color: {{color}}"></i></span>
{{else}}
<span class="color_swatch fade {{#subscribed}}in{{/subscribed}}" style="background-color: {{color}}"></span>
{{/if}}
<span class="subscription_block"> <span class="subscription_block">
<span class="subscription_name">{{name}}</span> <span class="subscription_name subscription-name-row">{{name}}</span>
{{#if invite_only}}<span class="subscription_lock">&nbsp;&nbsp;<i class="icon-vector-lock"></i></span>{{/if}}
</span> </span>
<span class="sub_arrow"><i class="icon-vector-chevron-down"></i></span> <span class="sub_arrow"><i class="icon-vector-chevron-down"></i></span>
<button class="btn sub_unsub_button {{^subscribed}}btn-primary{{/subscribed}}" <button class="zulip-button sub_unsub_button {{^subscribed}}gray-button{{/subscribed}}{{#subscribed}} green-button subscribed-button{{/subscribed}}"
type="button" name="subscription"> type="button" name="subscription">
{{#subscribed}} {{#subscribed}}
Unsubscribe Subscribed
{{/subscribed}} {{/subscribed}}
{{^subscribed}} {{^subscribed}}
Subscribe Subscribe
@ -22,36 +24,40 @@
<div id="subscription_settings_{{id}}" class="collapse subscription_settings"> <div id="subscription_settings_{{id}}" class="collapse subscription_settings">
<div class="regular_subscription_settings collapse {{#subscribed}}in{{/subscribed}}"> <div class="regular_subscription_settings collapse {{#subscribed}}in{{/subscribed}}">
<p>This is <div class="subscription-type">
{{#if invite_only}}an <span class="icon-vector-lock"></span> <b>invite-only stream</b>. Only people who have been invited can access its content, but any member of the stream can invite others. This is
{{#if invite_only}}an <span class="icon-vector-lock"></span> <b>invite-only stream</b>. Only people who have been invited can access its content, but&nbsp;any&nbsp;member&nbsp;of&nbsp;the&nbsp;stream can&nbsp;invite&nbsp;others.
{{else}}a <span class="icon-vector-globe"></span> <b>public stream</b>. Anybody in your organization can join.{{/if}} {{else}}a <span class="icon-vector-globe"></span> <b>public stream</b>. Anybody in your organization can join.{{/if}}
</p> </div>
<span class="sub_settings_title">Settings</span> <div class="subscription-config">
<ul> <ul>
<li> <li>
<div id="sub_setting_not_in_home_view" class="sub_setting_checkbox"> <div id="sub_setting_not_in_home_view" class="sub_setting_checkbox">
<input class="sub_setting_control" type="checkbox" {{#unless in_home_view}}checked{{/unless}} /> <input id="mutestream-{{id}}" class="sub_setting_control" type="checkbox" {{#unless in_home_view}}checked{{/unless}} />
Mute stream <label class="subscription-control-label">Mute stream</label>
</div> </div>
</li> </li>
<li> <li>
<div id="sub_setting_notifications" class="sub_setting_checkbox"> <div id="sub_setting_notifications" class="sub_setting_checkbox">
<input class="sub_setting_control" type="checkbox" {{#if notifications}}checked{{/if}} /> <input id="notifystream-{{id}}" class="sub_setting_control" type="checkbox" {{#if notifications}}checked{{/if}} />
Show desktop notifications for traffic on this stream <label class="subscription-control-label">Show desktop notifications<br/>for traffic on this stream</label>
</div> </div>
</li> </li>
<li> <li>
<span class="sub_setting_control"> <span class="sub_setting_control">
<input stream_name="{{name}}" class="colorpicker" type="text" value="{{color}}" /> <input stream_name="{{name}}" class="colorpicker" id="streamcolor" type="text" value="{{color}}" />
</span> </span>
Stream color <label for="streamcolor" class="subscription-control-label">Stream color</label>
</li> </li>
</ul> </ul>
</div>
</div> </div>
{{#if_and subscribed email_address}} {{#if_and subscribed email_address}}
<div> <div class="stream-email-box">
<p><b>Email address</b> <span class="email-address">{{email_address}} <span class="sub_settings_title">Email address <i class="icon-vector-question-sign stream-email-hint" id="email-address-hint-{{id}}"></i></span>
<i class="icon-vector-question-sign" id="email-address-hint-{{id}}"></i></span></p> <div class="stream-email">
<span class="email-address">{{email_address}}</span>
</div>
</div> </div>
{{/if_and}} {{/if_and}}
@ -59,31 +65,32 @@
<div class="rename-stream"> <div class="rename-stream">
<span class="sub_settings_title">Administrator settings</span> <span class="sub_settings_title">Administrator settings</span>
<form class="form-inline"> <form class="form-inline">
<input type="text" name="new-name" value="" class="input-block" /> <input type="text" name="new-name" value="" class="input-block new-stream-name" />
<input type="submit" name="rename" value="Rename stream" class="btn btn-danger" /> <input type="submit" name="rename" value="Rename stream" class="zulip-button red-button stream-rename-button" />
</form> </form>
</div> </div>
{{/if}} {{/if}}
{{#render_subscribers}} {{#render_subscribers}}
<div class="subscriber_list_settings"> <div class="subscriber_list_settings">
<span class="sub_settings_title">Members</span> <span class="sub_settings_title">Stream membership</span>
<div class="subscriber_list_add"> <div class="subscriber_list_add">
<form class="form-inline"> <form class="form-inline">
<input type="text" name="principal" placeholder="Email address" value="" class="input-block" /> <input type="text" name="principal" placeholder="Email address" value="" class="input-block" />
<input type="submit" name="add_subscriber" value="Add" class="btn btn-primary" /> <input type="submit" name="add_subscriber" value="Add" class="zulip-button blue-button add-subscriber-button" />
</form> </form>
</div> </div>
</div> </div>
<div class="subscriber_list_container"> <div class="subscriber-list-box">
<div class="subscriber_list_loading_indicator"></div> <div class="subscriber_list_container">
<div class="alert alert-error hide"></div> <div class="subscriber_list_loading_indicator"></div>
<div class="alert alert-warning hide"></div> <div class="alert alert-error hide"></div>
<ul> <div class="alert alert-warning hide"></div>
</ul> <table class="subscriber-list">
</table>
</div>
</div> </div>
{{/render_subscribers}} {{/render_subscribers}}
</div> </div>
</td> </div>
</tr>
{{/with}} {{/with}}

13
static/templates/subscription_table_body.handlebars
View File

@ -1,19 +1,14 @@
<tbody> <div id="create_stream_row">
<tr id="create_stream_row">
<td>
<div class="subscription_table_elem"> <div class="subscription_table_elem">
<form id="add_new_subscription" class="form-inline" action=""> <form id="add_new_subscription" class="form-inline" action="">
<input type="text" name="stream_name" id="create_stream_name" <input type="text" name="stream_name" id="create_stream_name"
placeholder="Stream name" value="" /> placeholder="Stream name" value="" />
<input type="submit" class="btn btn-primary" <input type="submit" class="zulip-button blue-button"
id="create_stream_button" value="Create stream" /> id="create_stream_button" value="Create new stream" />
</form> </form>
</div> </div>
</td> </div>
</tr>
{{#each subscriptions}} {{#each subscriptions}}
{{partial "subscription"}} {{partial "subscription"}}
{{/each}} {{/each}}
</tbody>

2
templates/zerver/navbar.html
View File

@ -41,7 +41,7 @@
<li style="display:none;"><a href="#home" data-toggle="tab"></a></li> <li style="display:none;"><a href="#home" data-toggle="tab"></a></li>
<li title="Streams"> <li title="Streams">
<a href="#subscriptions" data-toggle="tab"> <a href="#subscriptions" data-toggle="tab">
<i class="icon-vector-globe"></i> Streams <i class="icon-vector-exchange"></i> Streams
</a> </a>
</li> </li>
<li class="divider"></li> <li class="divider"></li>

6
templates/zerver/subscriptions.html
View File

@ -1,11 +1,11 @@
{# Subscriptions management tab of the app. #} {# Subscriptions management tab of the app. #}
<div class="subscriptions"> <div class="subscriptions">
<h1>Streams</h1> <h1><i class="icon-vector-exchange streams-icon"></i>Streams</h1>
<div class="alert" id="subscriptions-status"></div> <div class="alert" id="subscriptions-status"></div>
<div id="subs_page_loading_indicator"></div> <div id="subs_page_loading_indicator"></div>
<table id="subscriptions_table" class="table table-condensed table-striped"> <div id="subscriptions_table">
</table> </div>
</div> </div>
{% include "zerver/stream_creation_prompt.html" %} {% include "zerver/stream_creation_prompt.html" %}

10
zerver/tests/frontend/tests/04-subscriptions.js
View File

@ -9,12 +9,12 @@ casper.then(function () {
casper.test.assertExists('#subscriptions.tab-pane.active', 'Subscriptions page is active'); casper.test.assertExists('#subscriptions.tab-pane.active', 'Subscriptions page is active');
// subscriptions need to load; if they have *any* subs, // subscriptions need to load; if they have *any* subs,
// the word "Unsubscribe" will appear // the word "Unsubscribe" will appear
casper.waitForText('Unsubscribe'); casper.waitForText('Subscribed');
}); });
casper.then(function () { casper.then(function () {
casper.test.assertTextExists('Unsubscribe', 'Initial subscriptions loaded'); casper.test.assertTextExists('Subscribed', 'Initial subscriptions loaded');
casper.fill('form#add_new_subscription', {stream_name: 'Waseemio'}); casper.fill('form#add_new_subscription', {stream_name: 'Waseemio'});
casper.click('form#add_new_subscription input.btn.btn-primary'); casper.click('form#add_new_subscription input.zulip-button');
casper.waitForText('Waseemio'); casper.waitForText('Waseemio');
}); });
casper.then(function () { casper.then(function () {
@ -29,13 +29,13 @@ casper.then(function () {
casper.then(function () { casper.then(function () {
casper.test.assertSelectorHasText('.subscription_name', 'Waseemio', 'Subscribing to a stream'); casper.test.assertSelectorHasText('.subscription_name', 'Waseemio', 'Subscribing to a stream');
casper.fill('form#add_new_subscription', {stream_name: 'WASeemio'}); casper.fill('form#add_new_subscription', {stream_name: 'WASeemio'});
casper.click('form#add_new_subscription input.btn.btn-primary'); casper.click('form#add_new_subscription input.zulip-button');
casper.waitForText('Already subscribed'); casper.waitForText('Already subscribed');
}); });
casper.then(function () { casper.then(function () {
casper.test.assertTextExists('Already subscribed', "Can't subscribe twice to a stream"); casper.test.assertTextExists('Already subscribed', "Can't subscribe twice to a stream");
casper.fill('form#add_new_subscription', {stream_name: ' '}); casper.fill('form#add_new_subscription', {stream_name: ' '});
casper.click('form#add_new_subscription input.btn.btn-primary'); casper.click('form#add_new_subscription input.zulip-button');
casper.waitForText('Error adding subscription'); casper.waitForText('Error adding subscription');
}); });
casper.then(function () { casper.then(function () {