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

Massively refactor settings page templates and styling.

Browse Source 
This restructures the styling for the Zulip settings and
administration pages to minimize use of Bootstrap and use a consistent
styling library for similar elements.

While it is basically a wash in terms of the page's visuals, it will
make our life a lot easier for future work on improving the settings
pages section of the site.
This commit is contained in:
Brock Whittaker
2016-09-13 17:20:13 -07:00
committed by Tim Abbott
parent 68c51912c9
commit 706f422c3a
13 changed files with 608 additions and 709 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend_tests/casper_tests/10-admin.js
View File

@@ -17,7 +17,7 @@ casper.waitForSelector('#administration.tab-pane.active', function () {
// Test only admins may create streams Setting // Test only admins may create streams Setting
casper.waitForSelector('input[type="checkbox"][id="id_realm_create_stream_by_admins_only"]', function () { casper.waitForSelector('input[type="checkbox"][id="id_realm_create_stream_by_admins_only"]', function () {
casper.click('input[type="checkbox"][id="id_realm_create_stream_by_admins_only"]'); casper.click('input[type="checkbox"][id="id_realm_create_stream_by_admins_only"]');
casper.click('form.admin-realm-form input.btn'); casper.click('form.admin-realm-form input.button');
}); });
@@ -47,7 +47,7 @@ casper.waitForSelector('input[type="checkbox"][id="id_realm_create_stream_by_adm
// Deactivate setting // Deactivate setting
casper.click('input[type="checkbox"][id="id_realm_create_stream_by_admins_only"]'); casper.click('input[type="checkbox"][id="id_realm_create_stream_by_admins_only"]');
casper.click('form.admin-realm-form input.btn'); casper.click('form.admin-realm-form input.button');
}); });
casper.then(function () { casper.then(function () {
@@ -146,7 +146,7 @@ casper.then(function () {
'name': 'MouseFace', 'name': 'MouseFace',
'url': 'http://127.0.0.1:9991/static/images/integrations/logos/jenkins.png' 'url': 'http://127.0.0.1:9991/static/images/integrations/logos/jenkins.png'
}); });
casper.click('form.admin-emoji-form input.btn'); casper.click('form.admin-emoji-form input.button');
}); });
}); });
@@ -300,7 +300,7 @@ casper.then(function () {
// deactivate "allow message editing" // deactivate "allow message editing"
casper.waitForSelector('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () { casper.waitForSelector('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () {
casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]'); casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]');
casper.click('form.admin-realm-form input.btn'); casper.click('form.admin-realm-form input.button');
}); });
casper.then(function () { casper.then(function () {
@@ -358,7 +358,7 @@ casper.then(function () {
}); });
casper.waitForSelector('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () { casper.waitForSelector('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () {
casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]'); casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]');
casper.click('form.admin-realm-form input.btn'); casper.click('form.admin-realm-form input.button');
casper.waitUntilVisible('#admin-realm-message-editing-status', function () { casper.waitUntilVisible('#admin-realm-message-editing-status', function () {
casper.test.assertSelectorHasText('#admin-realm-message-editing-status', 'Users can now edit topics for all their messages, and the content of messages which are less than 10 minutes old.'); casper.test.assertSelectorHasText('#admin-realm-message-editing-status', 'Users can now edit topics for all their messages, and the content of messages which are less than 10 minutes old.');
casper.test.assertEval(function () { casper.test.assertEval(function () {
@@ -410,7 +410,7 @@ casper.then(function () {
casper.test.assertExists('#administration.tab-pane.active', 'Administration page is active'); casper.test.assertExists('#administration.tab-pane.active', 'Administration page is active');
}); });
casper.waitForSelector('form.admin-realm-form input.btn'); casper.waitForSelector('form.admin-realm-form input.button');
// deactivate message editing // deactivate message editing
casper.waitForSelector('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () { casper.waitForSelector('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () {
@@ -418,7 +418,7 @@ casper.waitForSelector('input[type="checkbox"][id="id_realm_allow_message_editin
$('input[type="text"][id="id_realm_message_content_edit_limit_minutes"]').val('4'); $('input[type="text"][id="id_realm_message_content_edit_limit_minutes"]').val('4');
}); });
casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]'); casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]');
casper.click('form.admin-realm-form input.btn'); casper.click('form.admin-realm-form input.button');
}); });
casper.then(function () { casper.then(function () {
@@ -437,7 +437,7 @@ casper.then(function () {
// allow message editing again, and check that the old edit limit is still there // allow message editing again, and check that the old edit limit is still there
casper.waitForSelector('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () { casper.waitForSelector('input[type="checkbox"][id="id_realm_allow_message_editing"]', function () {
casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]'); casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]');
casper.click('form.admin-realm-form input.btn'); casper.click('form.admin-realm-form input.button');
}); });
}); });
@@ -459,7 +459,7 @@ casper.then(function () {
casper.evaluate(function () { casper.evaluate(function () {
$('input[type="text"][id="id_realm_message_content_edit_limit_minutes"]').val('0'); $('input[type="text"][id="id_realm_message_content_edit_limit_minutes"]').val('0');
}); });
casper.click('form.admin-realm-form input.btn'); casper.click('form.admin-realm-form input.button');
}); });
}); });
@@ -482,7 +482,7 @@ casper.then(function () {
$('input[type="text"][id="id_realm_message_content_edit_limit_minutes"]').val('moo'); $('input[type="text"][id="id_realm_message_content_edit_limit_minutes"]').val('moo');
}); });
casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]'); casper.click('input[type="checkbox"][id="id_realm_allow_message_editing"]');
casper.click('form.admin-realm-form input.btn'); casper.click('form.admin-realm-form input.button');
}); });
}); });
@@ -503,7 +503,7 @@ casper.then(function () {
casper.evaluate(function () { casper.evaluate(function () {
$('#id_realm_default_language').val('de').change(); $('#id_realm_default_language').val('de').change();
}); });
casper.click('form.admin-realm-form input.btn'); casper.click('form.admin-realm-form input.button');
}); });
casper.waitUntilVisible('#admin-realm-default-language-status', function () { casper.waitUntilVisible('#admin-realm-default-language-status', function () {

8
static/js/admin.js
View File

@@ -349,20 +349,20 @@ function _setup_page() {
$("#id_realm_invite_required").change(function () { $("#id_realm_invite_required").change(function () {
if (this.checked) { if (this.checked) {
$("#id_realm_invite_by_admins_only").removeAttr("disabled"); $("#id_realm_invite_by_admins_only").removeAttr("disabled");
$("#id_realm_invite_by_admins_only_label").removeClass("control-label-disabled"); $("#id_realm_invite_by_admins_only_label").parent().removeClass("control-label-disabled");
} else { } else {
$("#id_realm_invite_by_admins_only").attr("disabled", true); $("#id_realm_invite_by_admins_only").attr("disabled", true);
$("#id_realm_invite_by_admins_only_label").addClass("control-label-disabled"); $("#id_realm_invite_by_admins_only_label").parent().addClass("control-label-disabled");
} }
}); });
$("#id_realm_allow_message_editing").change(function () { $("#id_realm_allow_message_editing").change(function () {
if (this.checked) { if (this.checked) {
$("#id_realm_message_content_edit_limit_minutes").removeAttr("disabled"); $("#id_realm_message_content_edit_limit_minutes").removeAttr("disabled");
$("#id_realm_message_content_edit_limit_minutes_label").removeClass("control-label-disabled"); $("#id_realm_message_content_edit_limit_minutes_label").parent().removeClass("control-label-disabled");
} else { } else {
$("#id_realm_message_content_edit_limit_minutes").attr("disabled", true); $("#id_realm_message_content_edit_limit_minutes").attr("disabled", true);
$("#id_realm_message_content_edit_limit_minutes_label").addClass("control-label-disabled"); $("#id_realm_message_content_edit_limit_minutes_label").parent().addClass("control-label-disabled");
} }
}); });

2
static/js/settings.js
View File

@@ -527,7 +527,7 @@ function _setup_page() {
}, },
submitHandler: function () { submitHandler: function () {
var full_name = $('#create_bot_name').val(); var full_name = $('#create_bot_name').val();
var short_name = $('#create_bot_short_name').val(); var short_name = $('#create_bot_short_name').val() || $('#create_bot_short_name').text();
var default_sending_stream = $('#create_bot_default_sending_stream').val(); var default_sending_stream = $('#create_bot_default_sending_stream').val();
var default_events_register_stream = $('#create_bot_default_events_register_stream').val(); var default_events_register_stream = $('#create_bot_default_events_register_stream').val();
var formData = new FormData(); var formData = new FormData();

578
static/styles/settings.css
View File

@@ -1,158 +1,245 @@
#settings { #settings {
margin-top: 55px; margin-top: 55px;
margin-left: 15px; margin-left: 15px;
} }
#administration .settings-section, label {
#settings .settings-section { margin: 0;
background-color: #f1f1f1;
border: 1px solid #e3e3e3;
border-top: 6px solid #e3e3e3;
padding: 45px 0px 15px 0px;
margin-right: 5px;
position: relative;
margin-top: 15px;
margin-bottom: 15px;
} }
#settings #notify-settings-status,#ui-settings-status,#display-settings-status { .display-none {
width: 80%; display: none;
text-align: center; }
margin: auto;
.inline-block {
display: inline-block;
}
.center-block {
margin: 0 auto;
}
.w-70 {
width: 70%;
}
.light {
font-weight: 300;
}
.padded-container {
padding: 20px;
}
.side-padded-container {
padding: 0px 20px;
}
.table tbody {
border-bottom: 1px solid #ddd;
}
.table-condensed td {
vertical-align: middle;
}
td .button {
margin: 2px 0px;
box-shadow: none;
}
.settings-section {
background-color: #fafafa;
border-radius: 2px;
margin: 20px;
overflow: hidden;
border: 1px solid #dfdfdf;
border-top: 5px solid #dfdfdf;
}
.settings-section .settings-section-title {
font-size: 1.2em;
font-weight: 300;
padding: 10px;
}
.settings-section .settings-section-title.transparent {
background-color: transparent;
color: inherit;
}
.settings-section form {
padding: 0px 20px;
margin: 0;
}
.settings-section .no-padding {
padding: 0;
}
.dynamic-input {
display: inline-block;
padding: 5px;
background-color: #FFF;
border: 1px solid #CCC;
border-radius: 3px;
transition: box-shadow 0.3s ease;
min-width: 208px;
}
.dynamic-input:hover {
outline: none;
box-shadow: 0px 0px 4px rgba(56,177,232,1);
}
.dynamic-input div, .dynamic-input label {
display: inline-block;
margin: 0;
}
.dynamic-input div {
margin-right: -2px;
}
.dynamic-input [contenteditable=true] {
outline: none;
}
.dynamic-input div:empty::after {
content: "username";
color: #aaa;
}
.dynamic-input.bot_user_name div:empty::after {
content: "bot_user_name";
color: #aaa;
}
.button, .input-group {
margin: 20px 0px;
}
.input-group.thinner {
margin: 10px 0px;
}
.no-margin {
margin: 0px;
}
input[type=checkbox] + .inline-block {
margin-left: 10px;
}
/* -- base button styling -- */
.button {
padding: 8px 15px;
margin: 0;
min-width: 130px;
font-weight: 400;
background-color: #478fca;
color: #FFF;
outline: none;
border: none;
border-radius: 2px;
cursor: pointer;
transition: all 0.3s ease;
}
/* -- button states -- */
.button:hover {
-webkit-filter: brightness(1.1);
-moz-filter: brightness(1.1);
filter: brightness(1.1);
}
.button:active {
-webkit-filter: brightness(0.9);
-moz-filter: brightness(0.9);
filter: brightness(0.9);
}
/* -- button style variations -- */
.button.no-style {
padding: 0px;
background-color: transparent;
border: none;
min-width: 0px;
width: auto;
outline: none;
box-shadow: none !important;
}
.button.green {
background-color: #64ad89;
}
.button.grey {
background-color: #aaa;
}
.button.white {
background-color: #fff;
color: inherit;
border: 1px solid #CCC;
box-shadow: none;
}
.button.standalone {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px;
} }
#administration .settings-section .admin-realm-form, .button.small {
#settings .settings-section .account-settings-form, min-width: inherit;
#settings .settings-section .new-bot-form, padding: 6px 10px;
#settings .settings-section .edit-bot-form-box {
width: 400px;
margin: auto;
} }
#administration .settings-section .admin-realm-form, .button.btn-danger {
#settings .settings-section .new-bot-form, color: #fff;
#settings .settings-section .new-alert-word-form, background-color: #d9534f;
#emoji-settings .new-emoji-form, border-color: #d43f3a;
#settings .settings-section .edit-bot-form-box {
margin-top: 35px;
} }
#settings .settings-section .new-bot-section-title, .button.btn-warning {
#settings .settings-section .new-alert-word-section-title, color: #fff;
#emoji-settings .new-emoji-section-title { background-color: #f0ad4e;
top: 20px; border-color: #eea236;
left: 20px;
} }
#settings .settings-section .notification-settings-form,.ui-settings-form,.display-settings-form { #user-settings-avatar {
width: 400px; border-radius: 5px;
margin: auto; box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
} }
input[type=checkbox].inline-block {
#settings .settings-section .account-settings-form .control-label, margin: -2px 0px 0px 0px;
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .new-alert-word-form .control-label,
#emoji-settings .new-emoji-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
width: 120px;
} }
#settings .settings-section .account-settings-form .controls, .list-container {
#settings .settings-section .new-bot-form .controls,
#settings .settings-section .new-alert-word-form button,
#emoji-settings .new-emoji-form .controls,
#settings .settings-section .edit-bot-form-box .controls {
margin-left: 140px;
}
#settings .settings-section .notification-settings-form .controls,
#settings .settings-section .display-settings-form .controls,
#settings .settings-section .ui-settings-form .controls {
display: inline-block;
vertical-align: middle;
margin: 0px;
margin-left: 110px;
padding-top: 0px;
padding-bottom: 0px;
line-height: 30px;
margin-right: 12px;
}
#settings .settings-section .display-settings-form .controls {
margin-left: 0;
}
#settings .settings-section .notification-settings-form .controls input[type='checkbox'],
#settings .settings-section .display-settings-form .controls input[type='checkbox'],
#settings .settings-section .ui-settings-form .controls input[type='checkbox'] {
margin: 0px;
padding: 0px;
vertical-align: middle;
position: relative; position: relative;
top: -1px; background-color: #e2e2e2;
padding: 10px;
width: 90%;
margin: 10px auto;
border: 1px solid #ccc;
border-radius: 2px;
} }
#settings .settings-section .notification-settings-form .control-label, .grey-bg {
#settings .settings-section .ui-settings-form .control-label,
#settings .settings-section .display-settings-form .control-label {
float: none;
display: inline-block;
vertical-align: middle;
margin: 0px;
padding: 0px;
width: 240px;
}
#settings .settings-section .display-settings-form .control-label {
width: 360px;
}
#settings .settings-section .notification-settings-form .notification-submission,
#administration .settings-section .organization-submission,
#settings .settings-section .ui-settings-form .ui-submission {
margin-left: 140px;
}
#settings .notification-settings-form .notification-settings-note,
#settings .ui-settings-form .ui-settings-note {
margin-left: 110px;
width: 250px;
font-size: 13px;
line-height: 14px;
}
#administration .admin-streams-note,
#settings .bot-settings-note,
#settings .alert-word-settings-note {
margin-left: 38px;
font-size: 13px;
}
#settings .bot-information-box,
#settings .add-new-bot-box,
#alert_words_list .add-new-alert-word-box,
#alert_words_list .alert-word-information-box,
#emoji-settings .add-new-emoji-box,
#admin-default-streams-list .add-new-default-stream-box {
background: #e3e3e3; background: #e3e3e3;
padding: 10px; padding: 10px;
margin-left: 38px; width: 90%;
margin-right: 38px; margin: 15px auto;
margin-bottom: 15px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5); box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
position: relative; position: relative;
font-size: 14px; font-size: 14px;
} }
#settings .add-new-bot-box, .green-bg {
#settings .add-new-alert-word-box, background-color: #cbe3cb;
#emoji-settings .add-new-emoji-box,
#admin-default-streams-list .add-new-default-stream-box {
background: #cbe3cb;
} }
.new-default-stream-section-title { .new-default-stream-section-title {
@@ -161,190 +248,70 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
#settings #get_api_key_box, .remove-alert-word {
#settings #show_api_key_box, margin-top: 1px;
#settings #api_key_button_box .control-group {
text-align: center;
}
#settings #get_api_key_box .control-group {
margin: 0px;
width: 100%;
}
#settings #get_api_key_box .control-group .control-label {
float: none;
width: auto;
margin: 0px;
display: inline-block;
margin-right: 15px;
}
#settings #get_api_key_box .control-group input {
width: auto;
margin: 0px;
display: inline-block;
}
#settings #get_api_key_box .control-group .btn {
margin-top: 20px;
}
#settings .bot-information-box .email,
#alert_words_list .alert-word-information-box .alert_word_listing,
#settings .bot-information-box .api_key {
position: relative;
}
#settings .bot-information-box .image {
overflow: hidden;
}
#settings .settings-section .api-key-note,
#settings .settings-section .alert-word-note {
padding: 0px 20px 20px 20px;
}
@media (max-width: 580px) {
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .new-alert-word-form .control-label,
#emoji-settings .new-emoji-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
float: left;
width: 120px;
padding-top: 0;
text-align: right;
}
#settings .settings-section .new-bot-form .controls,
#settings .settings-section .new-alert-word-form button,
#emoji-settings .new-emoji-form .controls {
margin-left: 110px;
}
} }
@media (max-width: 480px) { @media (max-width: 480px) {
#pw_strength { #pw_strength {
margin: auto; margin: auto;
} }
#administration .settings-section .organization-settings .admin-realm-form, #administration .settings-section .organization-settings .admin-realm-form,
#settings .settings-section .account-settings-form, #settings .settings-section .account-settings-form,
#settings .settings-section .new-bot-form, #settings .settings-section .new-bot-form,
#settings .settings-section .new-alert-word-form, #settings .settings-section .new-alert-word-form,
#emoji-settings .new-emoji-form, #emoji-settings .new-emoji-form,
#settings .settings-section .notification-settings-form, #settings .settings-section .notification-settings-form,
#settings .settings-section .display-settings-form, #settings .settings-section .display-settings-form,
#settings .settings-section .edit-bot-form-box { #settings .settings-section .edit-bot-form-box {
width: 100%; width: 100%;
} }
#administration .settings-section .admin-realm-form .control-label, #administration .settings-section .admin-realm-form .control-label,
#settings .settings-section .account-settings-form .control-label, #settings .settings-section .account-settings-form .control-label,
#settings .settings-section .new-bot-form .control-label, #settings .settings-section .new-bot-form .control-label,
#settings .settings-section .new-alert-word-form .control-label, #settings .settings-section .new-alert-word-form .control-label,
#emoji-settings .new-emoji-form .control-label, #emoji-settings .new-emoji-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label { #settings .settings-section .edit-bot-form-box .control-label {
display: block; display: block;
width: 120px; width: 120px;
padding: 0px; padding: 0px;
padding-top: 0; padding-top: 0;
text-align: center; text-align: center;
margin: auto; margin: auto;
float: none; float: none;
} }
#administration .settings-section .admin-realm-form .controls, #administration .settings-section .admin-realm-form .controls,
#settings .settings-section .account-settings-form .controls, #settings .settings-section .account-settings-form .controls,
#settings .settings-section .new-bot-form .controls, #settings .settings-section .new-bot-form .controls,
#settings .settings-section .new-alert-word-form button, #settings .settings-section .new-alert-word-form button,
#emoji-settings .new-emoji-form .controls, #emoji-settings .new-emoji-form .controls,
#settings .settings-section .edit-bot-form-box .controls { #settings .settings-section .edit-bot-form-box .controls {
margin: auto; margin: auto;
text-align: center; text-align: center;
} }
#administration .settings-section .admin-realm-form .controls button,
#administration .settings-section .admin-realm-form .controls input,
#settings .settings-section .account-settings-form .controls button,
#settings .settings-section .account-settings-form .controls input,
#settings .settings-section .new-bot-form .controls button,
#settings .settings-section .new-alert-word-form button,
#emoji-settings .new-emoji-form .controls button,
#settings .settings-section .edit-bot-form-box .controls button,
#settings .settings-section .new-bot-form .controls input,
#settings .settings-section .new-alert-word-form input,
#emoji-settings .new-emoji-form .controls input,
#settings .settings-section .edit-bot-form-box .controls input {
margin: auto;
}
#settings .settings-section .new-bot-form,
#settings .settings-section .new-alert-word-form,
#emoji-settings .new-emoji-form {
padding: 0px;
width: 100%;
text-align: center;
}
#settings .settings-section .notification-settings-form .controls,
#settings .notification-settings-form .notification-settings-note {
margin-left: 80px;
}
#administration .settings-section .organization-submission,
#settings .settings-section .notification-settings-form .notification-submission {
margin: 0px;
width: 100%;
text-align: center;
}
}
#administration .settings-section .settings-section-title,
#settings .settings-section .settings-section-title {
font-size: 18px;
font-weight: 300;
position: absolute;
left: 12px;
top: 15px;
} }
#administration .settings-section .settings-section-icon, #administration .settings-section .settings-section-icon,
#settings .settings-section .settings-section-icon { #settings .settings-section .settings-section-icon {
margin-right: 8px; margin-right: 8px;
} }
#notification-settings .control-group,
#ui-settings .control-group {
margin-bottom: 5px;
}
#notification-settings .control-label,
#ui-settings .control-label {
width: 280px;
text-align: left;
}
#notification-settings .notification-reminder { #notification-settings .notification-reminder {
text-align: center; text-align: center;
} }
form.admin-realm .control-label {
width: 200px;
padding-top: 3px;
padding-right: 20px;
margin-bottom: -20px;
}
.control-label-disabled { .control-label-disabled {
color: #d3d3d3; color: #d3d3d3;
} }
.disableable {
margin-left: 25px;
}
.admin-realm-message-content-edit-limit-minutes { .admin-realm-message-content-edit-limit-minutes {
width: 5ch; width: 5ch;
text-align: right; text-align: right;
@@ -374,11 +341,8 @@ form.admin-realm .control-label {
} }
.admin-table-wrapper { .admin-table-wrapper {
margin: 0 38px; width: 90%;
} margin: 0 auto;
#emoji-settings .new-emoji-form #emoji_url {
width: 60%;
} }
#bots_list { #bots_list {
@@ -389,7 +353,6 @@ form.admin-realm .control-label {
#bots_list .image, #bots_list .image,
#bots_list .bot_info { #bots_list .bot_info {
display: inline-block;
margin: 10px; margin: 10px;
} }
@@ -404,13 +367,10 @@ form.admin-realm .control-label {
} }
#bots_list .regenerate_bot_api_key { #bots_list .regenerate_bot_api_key {
padding: 2px;
width: 20px;
height: 20px;
background: #e3e3e3;
color: #666;
position: relative; position: relative;
top: -2px; top: -2px;
margin-left: 5px;
color: #666;
} }
#bots_list .regenerate_bot_api_key:hover { #bots_list .regenerate_bot_api_key:hover {
@@ -459,10 +419,6 @@ form.admin-realm .control-label {
margin-bottom: 10px; margin-bottom: 10px;
} }
div.edit_bot {
display: none;
}
.edit_bot_form .control-label, .edit_bot_form .control-label,
#create_bot_form .control-label, #create_bot_form .control-label,
#create_alert_word_form .control-label, #create_alert_word_form .control-label,
@@ -478,28 +434,14 @@ div.edit_bot {
margin: auto; margin: auto;
} }
.user-avatar-section {
text-align: center;
}
.edit_bot_avatar_clear_button,
#user_avatar_clear_button,
#bot_avatar_clear_button {
display: none;
}
#create_bot_short_name {
width: 7em;
}
.bot_name_header { .bot_name_header {
width: 8em; width: 8em;
} }
#empty_alert_word_error { #empty_alert_word_error {
display: none; display: none;
margin-left: 38px; width: 90%;
margin-right: 38px; margin: 0 auto;
padding: 10px; padding: 10px;
} }

5
static/styles/zulip.css
View File

@@ -3099,11 +3099,6 @@ li.expanded_private_message {
color: #0d7245; color: #0d7245;
} }
.settings_separator {
margin-top: 2em;
margin-bottom: 2em;
}
/* FIXME: Combine this rule with the one in portico.css somehow? */ /* FIXME: Combine this rule with the one in portico.css somehow? */
#pw_strength { #pw_strength {
width: 220px; width: 220px;

2
static/templates/admin_default_streams_list.handlebars
View File

@@ -5,7 +5,7 @@
<span class="default_stream_name">{{name}}</span> <span class="default_stream_name">{{name}}</span>
</td> </td>
<td> <td>
<button class="btn remove-default-stream btn-danger"> <button class="button remove-default-stream btn-danger">
{{t "Remove from default" }} {{t "Remove from default" }}
</button> </button>
</td> </td>

2
static/templates/admin_emoji_list.handlebars
View File

@@ -7,7 +7,7 @@
<span class="emoji_image"><a href="{{source_url}}"><img src="{{display_url}}" alt="{{name}}" /></a></span> <span class="emoji_image"><a href="{{source_url}}"><img src="{{display_url}}" alt="{{name}}" /></a></span>
</td> </td>
<td> <td>
<button class="btn delete btn-danger" data-emoji-name="{{name}}"> <button class="button delete btn-danger" data-emoji-name="{{name}}">
{{t "Delete" }} {{t "Delete" }}
</button> </button>
</td> </td>

2
static/templates/admin_streams_list.handlebars
View File

@@ -5,7 +5,7 @@
<span class="stream_name">{{name}}</span> <span class="stream_name">{{name}}</span>
</td> </td>
<td> <td>
<button class="btn deactivate btn-danger"> <button class="button deactivate btn-danger">
{{t "Delete stream" }} {{t "Delete stream" }}
</button> </button>
</td> </td>

177
static/templates/admin_tab.handlebars
View File

@@ -29,106 +29,89 @@
<div class="settings-section-title"><i class="icon-vector-gear settings-section-icon"></i> <div class="settings-section-title"><i class="icon-vector-gear settings-section-icon"></i>
{{t "Organization settings" }}</div> {{t "Organization settings" }}</div>
<form class="form-horizontal admin-realm-form"> <form class="form-horizontal admin-realm-form">
<div class="control-group admin-realm"> <div class="alert" id="admin-realm-name-status"></div>
<div class="alert" id="admin-realm-name-status"></div> <div class="alert" id="admin-realm-restricted-to-domain-status"></div>
<div class="alert" id="admin-realm-restricted-to-domain-status"></div> <div class="alert" id="admin-realm-invite-required-status"></div>
<div class="alert" id="admin-realm-invite-required-status"></div> <div class="alert" id="admin-realm-invite-by-admins-only-status"></div>
<div class="alert" id="admin-realm-invite-by-admins-only-status"></div> <div class="alert" id="admin-realm-create-stream-by-admins-only-status"></div>
<div class="alert" id="admin-realm-create-stream-by-admins-only-status"></div> <div class="alert" id="admin-realm-message-editing-status"></div>
<div class="alert" id="admin-realm-message-editing-status"></div> <div class="alert" id="admin-realm-default-language-status"></div>
<div class="alert" id="admin-realm-default-language-status"></div>
<label for="realm_name" class="control-label">{{t "Your organization's name" }}</label> <div class="input-group admin-realm">
<div class="controls"> <label for="realm_name">{{t "Your organization's name" }}</label>
<input type="text" id="id_realm_name" name="realm_name" class="admin-realm-name" <input type="text" id="id_realm_name" name="realm_name" class="admin-realm-name"
value="{{ realm_name }}" /> value="{{ realm_name }}" />
</div>
</div> </div>
<div class="control-group"> <div class="input-group">
<label for="realm_restricted_to_domain" <input type="checkbox" class="inline-block" id="id_realm_restricted_to_domain" name="realm_restricted_to_domain"
title="{{#tr this}}If checked, only users with an @__domain__ e-mail address will be able to join the organization.{{/tr}}" {{#if realm_restricted_to_domain}}checked="checked"{{/if}} />
class="control-label"> <label for="id_realm_restricted_to_domain" class="inline-block"
title="{{#tr this}}If checked, only users with an @__domain__ e-mail address will be able to join the organization.{{/tr}}">
{{#tr this}}Users restricted to __domain__{{/tr}} {{#tr this}}Users restricted to __domain__{{/tr}}
</label> </label>
<div class="controls">
<input type="checkbox" id="id_realm_restricted_to_domain" name="realm_restricted_to_domain"
{{#if realm_restricted_to_domain}}checked="checked"{{/if}} />
</div>
</div> </div>
<div class="control-group"> <div class="input-group">
<label for="realm_invite_required" <input type="checkbox" class="inline-block" id="id_realm_invite_required" name="realm_invite_required"
title="{{t 'If checked, users must be invited in order to join your organization.' }}" {{#if realm_invite_required}}checked="checked"{{/if}} />
class="control-label"> <label for="id_realm_invite_required" class="inline-block"
title="{{t 'If checked, users must be invited in order to join your organization.' }}">
{{t "E-mail invitation required" }} {{t "E-mail invitation required" }}
</label> </label>
<div class="controls">
<input type="checkbox" id="id_realm_invite_required" name="realm_invite_required"
{{#if realm_invite_required}}checked="checked"{{/if}} />
</div>
</div> </div>
<div class="control-group"> <div class="input-group disableable {{#unless realm_invite_required}}control-label-disabled{{/unless}}">
<label for="realm_invite_by_admins_only" <input type="checkbox" class="inline-block" id="id_realm_invite_by_admins_only" name="realm_invite_by_admins_only"
{{#unless realm_invite_required}}disabled="disabled"{{/unless}}
{{#if realm_invite_by_admins_only}}checked="checked"{{/if}} />
<label for="id_realm_invite_by_admins_only"
id="id_realm_invite_by_admins_only_label" id="id_realm_invite_by_admins_only_label"
title="{{t 'If checked, only administrators may invite new users.' }}" title="{{t 'If checked, only administrators may invite new users.' }}"
class="control-label{{#unless realm_invite_required}} control-label-disabled{{/unless}}"> class="inline-block">
{{t "Only admins may invite" }} {{t "Only admins may invite" }}
</label> </label>
<div class="controls">
<input type="checkbox" id="id_realm_invite_by_admins_only" name="realm_invite_by_admins_only"
{{#unless realm_invite_required}}disabled="disabled"{{/unless}}
{{#if realm_invite_by_admins_only}}checked="checked"{{/if}} />
</div>
</div> </div>
<div class="control-group"> <div class="input-group">
<label for="realm_create_stream_by_admins_only" <input type="checkbox" class="inline-block" id="id_realm_create_stream_by_admins_only"
name="realm_create_stream_by_admins_only"
{{#if realm_create_stream_by_admins_only}}checked="checked"{{/if}} />
<label for="id_realm_create_stream_by_admins_only" class="inline-block"
id="id_realm_create_stream_by_admins_only_label" id="id_realm_create_stream_by_admins_only_label"
title="{{t 'If checked, only administrators may create new streams.'}}" title="{{t 'If checked, only administrators may create new streams.'}}">
class="control-label">
{{t "Only admins may create streams" }} {{t "Only admins may create streams" }}
</label> </label>
<div class="controls">
<input type="checkbox" id="id_realm_create_stream_by_admins_only"
name="realm_create_stream_by_admins_only"
{{#if realm_create_stream_by_admins_only}}checked="checked"{{/if}} />
</div>
</div> </div>
<div class="control-group"> <div class="input-group">
<label for="realm_allow_message_editing" <input type="checkbox" class="inline-block" id="id_realm_allow_message_editing" name="realm_allow_message_editing"
{{#if realm_allow_message_editing}}checked="checked"{{/if}} />
<label for="id_realm_allow_message_editing"
title="{{t 'If checked, users can edit the content and topics of their old messages.' }}" title="{{t 'If checked, users can edit the content and topics of their old messages.' }}"
class="control-label"> class="inline-block">
{{t "Users can edit old messages" }} {{t "Users can edit old messages" }}
</label> </label>
<div class="controls">
<input type="checkbox" id="id_realm_allow_message_editing" name="realm_allow_message_editing"
{{#if realm_allow_message_editing}}checked="checked"{{/if}} />
</div>
</div> </div>
<div class="control-group"> <div class="input-group disableable {{#unless realm_allow_message_editing}}control-label-disabled{{/unless}}">
<label for="realm_message_content_edit_limit_minutes" <label for="realm_message_content_edit_limit_minutes"
id="id_realm_message_content_edit_limit_minutes_label" id="id_realm_message_content_edit_limit_minutes_label"
title="{{t 'If non-zero, users can edit their message for this many minutes after it is sent. If zero, users can edit all their past messages.' }}" title="{{t 'If non-zero, users can edit their message for this many minutes after it is sent. If zero, users can edit all their past messages.' }}">
class="control-label{{#unless realm_allow_message_editing}} control-label-disabled{{/unless}}">
{{t 'Message edit limit in minutes (0 for no limit)' }} {{t 'Message edit limit in minutes (0 for no limit)' }}
</label> </label>
<div class="controls"> <input type="text" id="id_realm_message_content_edit_limit_minutes"
<input type="text" id="id_realm_message_content_edit_limit_minutes" name="realm_message_content_edit_limit_minutes"
name="realm_message_content_edit_limit_minutes" class="admin-realm-message-content-edit-limit-minutes"
class="admin-realm-message-content-edit-limit-minutes" value="{{ realm_message_content_edit_limit_minutes }}"
value="{{ realm_message_content_edit_limit_minutes }}" {{#unless realm_allow_message_editing}}disabled="disabled"{{/unless}} />
{{#unless realm_allow_message_editing}}disabled="disabled"{{/unless}} />
</div>
</div> </div>
<div class="control-group"> <div class="input-group">
<label for="realm_default_language" class="control-label">{{t "Default Language" }}:</label> <label for="realm_default_language">{{t "Default Language" }}:</label>
<div class="controls"> <select name="realm_default_language" id="id_realm_default_language">
<select name="realm_default_language" id="id_realm_default_language"> {{#each language_list}}
{{#each language_list}} <option value='{{this.code}}'>{{this.name}}</option>
<option value='{{this.code}}'>{{this.name}}</option> {{/each}}
{{/each}} </select>
</select>
</div>
</div> </div>
<div class="controls organization-submission"> <div class="input-group organization-submission">
<input type="submit" class="btn btn-big btn-primary" value="{{t 'Save changes' }}" /> <input type="submit" class="button" value="{{t 'Save changes' }}" />
</div> </div>
</form> </form>
</div> </div>
@@ -146,25 +129,21 @@
</table> </table>
</div> </div>
<form class="form-horizontal admin-emoji-form"> <form class="form-horizontal admin-emoji-form">
<div class="add-new-emoji-box"> <div class="add-new-emoji-box grey-bg green-bg">
<div class="new-emoji-form"> <div class="new-emoji-form">
<div class="settings-section-title new-emoji-section-title">{{t "Add a New Emoji" }}</div> <div class="settings-section-title new-emoji-section-title no-padding">{{t "Add a New Emoji" }}</div>
<div class="alert" id="admin-emoji-status"></div> <div class="alert" id="admin-emoji-status"></div>
<div class="control-group"> <div class="input-group">
<label for="emoji_name" class="control-label">{{t "Emoji name" }}</label> <label for="emoji_name">{{t "Emoji name" }}</label>
<input type="text" name="name" id="emoji_name" placeholder="{{t 'mouse_face' }}" /> <input type="text" name="name" id="emoji_name" placeholder="{{t 'mouse_face' }}" />
<div class="alert" id="admin-emoji-name-status"></div> <div class="alert" id="admin-emoji-name-status"></div>
</div> </div>
<div class="control-group"> <div class="input-group">
<label for="emoji_url" class="control-label">{{t "Emoji URL" }}</label> <label for="emoji_url">{{t "Emoji URL" }}</label>
<input type="text" name="url" id="emoji_url" placeholder="http://emojipedia-us.s3.amazonaws.com/cache/46/7f/467fe69069c408e07517621f263ea9b5.png" /> <input type="text" name="url" id="emoji_url" placeholder="http://emojipedia-us.s3.amazonaws.com/cache/46/7f/467fe69069c408e07517621f263ea9b5.png" />
<div class="alert" id="admin-emoji-url-status"></div> <div class="alert" id="admin-emoji-url-status"></div>
</div> </div>
<div class="control-group"> <input type="submit" class="button" value="{{t 'Add emoji' }}" />
<div class="controls">
<input type="submit" class="btn btn-big btn-primary" value="{{t 'Add emoji' }}" />
</div>
</div>
</div> </div>
</div> </div>
</form> </form>
@@ -217,7 +196,10 @@
<div id="admin-streams-list" class="settings-section"> <div id="admin-streams-list" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-exchange settings-section-icon"></i> <div class="settings-section-title"><i class="icon-vector-exchange settings-section-icon"></i>
{{t "Streams Deletion" }}</div> {{t "Streams Deletion" }}</div>
<p class="admin-streams-note">Most stream administration is done on the <a href="/#subscriptions">subscriptions page</a>.</p>
<div class="side-padded-container">
<p class="admin-streams-note">Most stream administration is done on the <a href="/#subscriptions">subscriptions page</a>.</p>
</div>
<table class="table table-condensed table-striped"> <table class="table table-condensed table-striped">
<tbody id="admin_streams_table" class="admin_stream_table"> <tbody id="admin_streams_table" class="admin_stream_table">
@@ -232,18 +214,21 @@
<div id="admin-default-streams-list" class="settings-section"> <div id="admin-default-streams-list" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-exchange settings-section-icon"></i> <div class="settings-section-title"><i class="icon-vector-exchange settings-section-icon"></i>
{{t "Default Streams"}}</div> {{t "Default Streams"}}</div>
<div class="admin-table-wrapper">
<div class="side-padded-container">
<p>{{#tr this}}Configure the default streams new users are subscribed to when joining the {{domain}} organization.{{/tr}}</p> <p>{{#tr this}}Configure the default streams new users are subscribed to when joining the {{domain}} organization.{{/tr}}</p>
<table class="table table-condensed table-striped">
<tbody id="admin_default_streams_table" class="admin_default_stream_table">
<th>{{t "Name" }}</th>
<th class="actions">{{t "Actions" }}</th>
</tbody>
</table>
</div> </div>
<table class="table table-condensed table-striped">
<tbody id="admin_default_streams_table" class="admin_default_stream_table">
<th>{{t "Name" }}</th>
<th class="actions">{{t "Actions" }}</th>
</tbody>
</table>
<div id="admin_page_default_streams_loading_indicator"></div> <div id="admin_page_default_streams_loading_indicator"></div>
<form class="form-horizontal default-stream-form"> <form class="form-horizontal default-stream-form">
<div class="add-new-default-stream-box"> <div class="add-new-default-stream-box grey-bg green-bg">
<div class="new-default-stream-section-title">{{t "Add New Default Stream" }}</div> <div class="new-default-stream-section-title">{{t "Add New Default Stream" }}</div>
<div class="control-group" id="default_stream_inputs"> <div class="control-group" id="default_stream_inputs">
<label for="default_stream_name" class="control-label">{{t "Stream Name" }}</label> <label for="default_stream_name" class="control-label">{{t "Stream Name" }}</label>
@@ -266,7 +251,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{t "Cancel" }}</button> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{t "Cancel" }}</button>
<button class="btn btn-danger" id="do_deactivate_user_button">{{t "Deactivate now" }}</button> <button class="button btn-danger" id="do_deactivate_user_button">{{t "Deactivate now" }}</button>
</div> </div>
</div> </div>
<div id="deactivation_stream_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_stream_modal_label" aria-hidden="true"> <div id="deactivation_stream_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="deactivation_stream_modal_label" aria-hidden="true">
@@ -279,7 +264,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{t "Cancel" }}</button> <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">{{t "Cancel" }}</button>
<button class="btn btn-danger" id="do_deactivate_stream_button">{{t "Yes, delete this stream" }}</button> <button class="button btn-danger" id="do_deactivate_stream_button">{{t "Yes, delete this stream" }}</button>
</div> </div>
</div> </div>
</div> </div>

8
static/templates/admin_user_list.handlebars
View File

@@ -13,22 +13,22 @@
{{/if}} {{/if}}
<td> <td>
{{#if is_active}} {{#if is_active}}
<button class="btn deactivate btn-danger"> <button class="button deactivate btn-danger">
{{t "Deactivate" }} {{t "Deactivate" }}
</button> </button>
{{else}} {{else}}
<button class="btn reactivate btn-warning"> <button class="button reactivate btn-warning">
{{t "Reactivate" }} {{t "Reactivate" }}
</button> </button>
{{/if}} {{/if}}
<span class="user-admin-settings"> <span class="user-admin-settings">
{{#if is_active_human}} {{#if is_active_human}}
{{#if is_admin}} {{#if is_admin}}
<button class="btn remove-admin btn-danger"> <button class="button remove-admin btn-danger">
{{t "Remove admin" }} {{t "Remove admin" }}
</button> </button>
{{else}} {{else}}
<button class="btn make-admin btn-warning"> <button class="button make-admin btn-warning">
{{t "Make admin" }} {{t "Make admin" }}
</button> </button>
{{/if}} {{/if}}

20
static/templates/alert_word_settings_item.handlebars
View File

@@ -2,12 +2,12 @@
<li class="alert-word-item" data-word='{{word}}'> <li class="alert-word-item" data-word='{{word}}'>
{{#if editing}} {{#if editing}}
<div class="alert-word-settings-form"> <div class="alert-word-settings-form">
<form id="create_alert_word_form" class="form-horizontal"> <div class="add-new-alert-word-box grey-bg green-bg">
<div class="add-new-alert-word-box"> <form id="create_alert_word_form" class="form-horizontal no-padding">
<div class="settings-section-title new-alert-word-section-title">{{t "Add a New Alert Word"}}</div> <h4 class="new-alert-word-section-title light no-margin">{{t "Add a New Alert Word"}}</h4>
<div class="new-alert-word-form"> <div class="new-alert-word-form">
<div class="control-group"> <div class="input-group">
<label for="create_alert_word_name" class="control-label">{{t "New Alert Word" }}</label> <label for="create_alert_word_name">{{t "New Alert Word" }}</label>
<input type="text" name="alert_word_name" id="create_alert_word_name" class="required" <input type="text" name="alert_word_name" id="create_alert_word_name" class="required"
maxlength=100 placeholder="{{t 'Alert Word' }}" value="" /> maxlength=100 placeholder="{{t 'Alert Word' }}" value="" />
</div> </div>
@@ -17,20 +17,20 @@
</button> </button>
<span>{{t "Alert words can't be empty!"}}</span> <span>{{t "Alert words can't be empty!"}}</span>
</div> </div>
<button class="btn btn-primary add-alert-word" id="create_alert_word_button" type="button"> <button class="button add-alert-word" id="create_alert_word_button" type="button">
{{t 'Add Alert Word'}} {{t 'Add Alert Word'}}
</button> </button>
</div> </div>
</div> </form>
</form> </div>
</div> </div>
{{else}} {{else}}
<div class="alert-word-information-box"> <div class="alert-word-information-box list-container">
<div class="alert_word_listing"> <div class="alert_word_listing">
<span class="value">{{word}}</span> <span class="value">{{word}}</span>
</div> </div>
<div class="edit-alert-word-buttons"> <div class="edit-alert-word-buttons">
<button type="submit" class="btn btn-small btn-danger remove-alert-word" title="{{t 'Delete Alert Word' }}" data-word="{{word}}"> <button type="submit" class="button small btn-small btn-danger remove-alert-word" title="{{t 'Delete Alert Word' }}" data-word="{{word}}">
<i class="icon-vector-trash"></i> <i class="icon-vector-trash"></i>
</button> </button>
</div> </div>

12
static/templates/bot_avatar_row.handlebars
View File

@@ -1,8 +1,8 @@
<li class="bot-information-box"> <li class="bot-information-box grey-bg">
<div class="image"> <div class="image inline-block overflow-hidden">
<img src="{{avatar_url}}" class="avatar" /> <img src="{{avatar_url}}" class="avatar" />
</div> </div>
<div class="bot_info"> <div class="bot_info inline-block">
<div class="name">{{name}}</div> <div class="name">{{name}}</div>
<div class="email"> <div class="email">
<span class="field">{{t "Username" }}</span> <span class="field">{{t "Username" }}</span>
@@ -13,7 +13,7 @@
<span class="api-key-value-and-button"> <span class="api-key-value-and-button">
<span class="value">{{api_key}} <span class="value">{{api_key}}
</span> </span>
<button type="submit" class="btn btn-secondary regenerate_bot_api_key" title="{{t 'Generate new API key' }}" data-email="{{email}}"> <button type="submit" class="button no-style btn-secondary regenerate_bot_api_key" title="{{t 'Generate new API key' }}" data-email="{{email}}">
<i class="icon-vector-refresh"></i> <i class="icon-vector-refresh"></i>
</button> </button>
</span> </span>
@@ -29,7 +29,7 @@
</div> </div>
<div id="bot_delete_error{{id_suffix}}" class="alert alert-error hide"></div> <div id="bot_delete_error{{id_suffix}}" class="alert alert-error hide"></div>
</div> </div>
<div class='edit_bot'> <div class='edit_bot display-none'>
<form class="edit_bot_form form-horizontal" data-email="{{email}}"> <form class="edit_bot_form form-horizontal" data-email="{{email}}">
<div class="bot_edit_errors alert alert-error hide"></div> <div class="bot_edit_errors alert alert-error hide"></div>
<div class="edit_bot_email">{{email}}</div> <div class="edit_bot_email">{{email}}</div>
@@ -55,7 +55,7 @@
<div class="controls"> <div class="controls">
<div class="edit_bot_avatar_file"></div> <div class="edit_bot_avatar_file"></div>
<button type="button" class="btn btn-default edit_bot_avatar_upload_button">{{t "Choose avatar" }}</button> <button type="button" class="btn btn-default edit_bot_avatar_upload_button">{{t "Choose avatar" }}</button>
<button type="button" class="btn btn-default edit_bot_avatar_clear_button">{{t "Clear avatar" }}</button> <button type="button" class="btn btn-default edit_bot_avatar_clear_button display-none">{{t "Clear avatar" }}</button>
</div> </div>
<div><label for="edit_bot_avatar_file{{id_suffix}}" generated="true" class="edit_bot_avatar_error text-error"></label></div> <div><label for="edit_bot_avatar_file{{id_suffix}}" generated="true" class="edit_bot_avatar_error text-error"></label></div>
</div> </div>

479
static/templates/settings_tab.handlebars
View File

@@ -5,80 +5,63 @@
<div class="alert" id="settings-status"></div> <div class="alert" id="settings-status"></div>
<div id="account-settings" class="settings-section"> <div id="account-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-user settings-section-icon"></i>{{t "Your Account" }}</div> <div class="settings-section-title">
<i class="icon-vector-user settings-section-icon"></i>
{{t "Your Account" }}
</div>
<div class="account-settings-form"> <div class="account-settings-form">
<form action="/json/settings/change" method="post" <form action="/json/settings/change" method="post"
class="form-horizontal your-account-settings"> class="form-horizontal your-account-settings">
<div class="control-group" id="name_change_container"> <div class="input-group" id="name_change_container">
<label for="full_name" class="control-label">{{t "Full name" }}</label> <label for="full_name">{{t "Full name" }}</label>
<div class="controls"> <input type="text" name="full_name" id="full_name" value="{{ page_params.fullname }}" />
<input type="text" name="full_name" id="full_name"
value="{{ page_params.fullname }}" />
</div>
</div> </div>
<!-- password start -->
{{#if page_params.password_auth_enabled}} {{#if page_params.password_auth_enabled}}
<div class="control-group" id="pw_change_link"> <div class="input-group" id="pw_change_link">
<label for="change_password_button" class="control-label">{{t "Password" }}</label> <label for="change_password_button">{{t "Password" }}</label>
<div class="controls"> <button class="change_password_button button" data-dismiss="modal" aria-hidden="true">{{t "Change Password" }}</button>
<button class="btn btn-default change_password_button" data-dismiss="modal" aria-hidden="true">{{t "Change Password" }}</button>
</div>
</div> </div>
<div id="pw_change_controls"> <div id="pw_change_controls">
<div class="control-group"> <div class="input-group">
<label for="old_password" class="control-label">{{t "Old password" }}</label> <label for="old_password">{{t "Old password" }}</label>
<div class="controls"> <input type="password" autocomplete="off" name="old_password" id="old_password" value="" />
<input type="password" autocomplete="off" (<a href="/accounts/password/reset/" target="_blank">{{t "Forgotten it?" }}</a>)
name="old_password" id="old_password" value="" /> </div>
(<a href="/accounts/password/reset/" target="_blank">{{t "Forgotten it?" }}</a>)
<div class="input-group">
<label for="new_password">{{t "New password" }}</label>
<input type="password" autocomplete="off" name="new_password" id="new_password" value="" />
</div>
<div class="input-group">
<label>{{t "Password strength" }}</label>
<div class="progress" id="pw_strength">
<div class="bar bar-danger fade" style="width: 10%;"></div>
</div> </div>
</div> </div>
<div class="control-group"> <div class="input-group">
<label for="new_password" class="control-label">{{t "New password" }}</label> <label for="confirm_password">{{t "Confirm password" }}</label>
<div class="controls"> <input type="password" autocomplete="off" name="confirm_password" id="confirm_password" value="" />
<input type="password" autocomplete="off"
name="new_password" id="new_password" value="" />
</div>
</div>
<div class="control-group">
<label class="control-label">{{t "Password strength" }}</label>
<div class="controls">
<div class="progress" id="pw_strength">
<div class="bar bar-danger fade" style="width: 10%;"></div>
</div>
</div>
</div>
<div class="control-group">
<label for="confirm_password" class="control-label">{{t "Confirm password" }}</label>
<div class="controls">
<input type="password" autocomplete="off"
name="confirm_password" id="confirm_password" value="" />
</div>
</div> </div>
</div> </div>
{{/if}} {{/if}}
<div class="control-group"> <div class="input-group">
<div class="controls"> <input type="submit" class="button green" name="change_settings" value="Save Changes" />
<input type="submit" name="change_settings"
value="{{t 'Save changes' }}" class="btn btn-big btn-primary" />
</div>
</div> </div>
<div class="user-avatar-section"> <div class="input-group">
<p> <img id="user-settings-avatar" src="{{ page_params.avatar_url }}" />
<img id="user-settings-avatar" src="{{ page_params.avatar_url }}" />
</p>
<div id="user_avatar_file_input_error" class="text-error"></div> <div id="user_avatar_file_input_error" class="text-error"></div>
<div id="user_avatar_file"></div> <div id="user_avatar_file"></div>
<input type="file" name="user_avatar_file_input" class="notvisible" id="user_avatar_file_input" value="{{t 'Upload avatar' }}" /> <input type="file" name="user_avatar_file_input" class="notvisible" id="user_avatar_file_input" value="{{t 'Upload avatar' }}" />
<div id="upload_avatar_spinner"></div> <div id="upload_avatar_spinner"></div>
<button class="btn btn-default" id="user_avatar_upload_button">{{t 'Customize avatar' }}</button> <button class="button standalone" id="user_avatar_upload_button">{{t 'Customize avatar' }}</button>
</div> </div>
</form> </form>
@@ -88,199 +71,191 @@
<div> <div>
<div id="display-settings" class="settings-section"> <div id="display-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-time settings-section-icon"></i> <div class="settings-section-title">
{{t 'Display Settings' }}</div> <i class="icon-vector-time settings-section-icon"></i>
{{t 'Display Settings' }}
</div>
<div class="alert" id="display-settings-status"></div> <div class="alert" id="display-settings-status"></div>
<div class="display-settings-form"> <form class="display-settings-form">
<div class="control-group"> <div class="input-group">
<label for="default_language" class="control-label inline">{{t "Default Language" }}: <span id='default_language_name'>{{page_params.default_language_name}}</span></label> <label for="default_language" class="inline-block"> {{t "Default Language" }}: <span id='default_language_name'>{{page_params.default_language_name}}</span></label>
<a id="default_language" href="#default_language" title='Change default language'>[Change]</a> <a id="default_language" href="#default_language" title='Change default language'>[Change]</a>
</div>
<div id="default_language_modal" class="modal hide" tabindex="-1" role="dialog" <div id="default_language_modal" class="modal hide" tabindex="-1" role="dialog"
aria-labelledby="default_language_modal_label" aria-hidden="true"> aria-labelledby="default_language_modal_label" aria-hidden="true">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="default_language_modal_label">{{t "Select Default Language" }}</h3> <h3 id="default_language_modal_label">{{t "Select Default Language" }}</h3>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<p> <p>
The following is a few of the languages we have started to The following is a few of the languages we have started to
support or are hoping to support in the near future. We would support or are hoping to support in the near future. We would
love help translating; if you're interested in helping, make an love help translating; if you're interested in helping, make an
account at <a href='https://www.transifex.com/zulip/zulip/'> account at <a href='https://www.transifex.com/zulip/zulip/'>
https://www.transifex.com/zulip/zulip/</a>, and sign up for a https://www.transifex.com/zulip/zulip/</a>, and sign up for a
language! You can also request any language we don't currently language! You can also request any language we don't currently
have. It only takes a few hours to translate the most important have. It only takes a few hours to translate the most important
parts of the app. parts of the app.
</p> </p>
<div> <div>
<table> <table>
{{#each page_params.language_list_dbl_col}} {{#each page_params.language_list_dbl_col}}
<tr> <tr>
<td> <td>
<a class="language" data-code="{{this.first.code}}" data-name="{{this.first.name}}"> <a class="language" data-code="{{this.first.code}}" data-name="{{this.first.name}}">
{{#if this.first.selected}} {{#if this.first.selected}}
<b>{{this.first.percent}}</b> <b>{{this.first.percent}}</b>
{{else}} {{else}}
{{this.first.percent}} {{this.first.percent}}
{{/if}} {{/if}}
</a> </a>
</td> </td>
<td> <td>
<a class="language" data-code="{{this.second.code}}" data-name="{{this.second.name}}"> <a class="language" data-code="{{this.second.code}}" data-name="{{this.second.name}}">
{{#if this.second.selected}} {{#if this.second.selected}}
<b>{{this.second.percent}}</b> <b>{{this.second.percent}}</b>
{{else}} {{else}}
{{this.second.percent}} {{this.second.percent}}
{{/if}} {{/if}}
</a> </a>
</td> </td>
</tr> </tr>
{{/each}} {{/each}}
</table> </table>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{t "Close" }}</button>
</div> </div>
</div> </div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">{{t "Close" }}</button>
</div>
</div> </div>
<div class="control-group"> <div class="input-group thinner">
<div class="controls"> <input type="checkbox" class="inline-block" name="left_side_userlist" id="left_side_userlist"
<input type="checkbox" name="left_side_userlist" id="left_side_userlist" {{#if page_params.left_side_userlist}}
{{#if page_params.left_side_userlist}} checked="checked"
checked="checked" {{/if}} />
{{/if}} /> <label for="left_side_userlist" class="inline-block">{{t "Display user list on left side in narrow windows." }}</label>
</div>
<label for="left_side_userlist" class="control-label">{{t "Display user list on left side in narrow windows." }}</label>
</div> </div>
<div class="control-group"> <div class="input-group thinner">
<div class="controls"> <input type="checkbox" class="inline-block" name="twenty_four_hour_time" id="twenty_four_hour_time"
<input type="checkbox" name="twenty_four_hour_time" id="twenty_four_hour_time" {{#if page_params.twenty_four_hour_time}}
{{#if page_params.twenty_four_hour_time}} checked="checked"
checked="checked" {{/if}} />
{{/if}} /> <label for="twenty_four_hour_time" class="inline-block">
</div>
<label for="twenty_four_hour_time" class="control-label">
{{t "Display time in 24-hour format (17:00 instead of 5:00 PM)" }} {{t "Display time in 24-hour format (17:00 instead of 5:00 PM)" }}
</label> </label>
</div> </div>
</div> </form>
</div> </div>
</div> </div>
<div> <div>
<div id="notification-settings" class="settings-section"> <div id="notification-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-warning-sign settings-section-icon"></i>{{t "Notifications" }}</div> <div class="settings-section-title">
<div class="notification-reminder">{{#tr this }}You'll receive notifications when a message arrives and __page_params.product_name__ isn't in focus or the message is offscreen.{{/tr}}</div> <i class="icon-vector-warning-sign settings-section-icon"></i>
<div class="alert" id="notify-settings-status"></div> {{t "Notifications" }}
<div class="notification-settings-form"> </div>
<form class="notification-settings-form">
<div class="notification-reminder w-70 padded-container center-block">{{#tr this }}You'll receive notifications when a message arrives and __page_params.product_name__ isn't in focus or the message is offscreen.{{/tr}}</div>
<div class="alert" id="notify-settings-status"></div>
<h4>{{t "Stream messages" }}</h4> <h4>{{t "Stream messages" }}</h4>
<p>{{t "Unless I say otherwise for a particular stream, I want:" }}</p> <div class="padded-container">
<p>{{t "Unless I say otherwise for a particular stream, I want:" }}</p>
<div class="control-group"> <div class="input-group thinner">
<div class="controls"> <input type="checkbox" class="inline-block" name="enable_stream_desktop_notifications"
<input type="checkbox" name="enable_stream_desktop_notifications"
id="enable_stream_desktop_notifications" id="enable_stream_desktop_notifications"
{{#if page_params.stream_desktop_notifications_enabled}} {{#if page_params.stream_desktop_notifications_enabled}}
checked="checked" checked="checked"
{{/if}} /> {{/if}} />
<label for="enable_stream_desktop_notifications" class="inline-block">
{{t "Desktop notifications" }}
</label>
<div class="propagate_stream_notifications_change"></div>
</div> </div>
<label for="enable_stream_desktop_notifications" class="control-label">
{{t "Desktop notifications" }}
</label>
<div class="propagate_stream_notifications_change"></div>
</div>
<div class="control-group"> <div class="input-group thinner">
<div class="controls"> <input type="checkbox" class="inline-block" name="enable_stream_sounds" id="enable_stream_sounds"
<input type="checkbox" name="enable_stream_sounds" id="enable_stream_sounds"
{{#if page_params.stream_sounds_enabled}} {{#if page_params.stream_sounds_enabled}}
checked="checked" checked="checked"
{{/if}} /> {{/if}} />
<label for="enable_stream_sounds" class="inline-block">
{{t "Audible notifications" }}
</label>
<div class="propagate_stream_notifications_change"></div>
</div> </div>
<label for="enable_stream_sounds" class="control-label">
{{t "Audible notifications" }}
</label>
<div class="propagate_stream_notifications_change"></div>
</div>
<p class="notification-settings-note"> <p class="notification-settings-note">
{{#tr this}}Change notification settings for individual streams on your <a href="/#subscriptions">Streams page</a>.{{/tr}} {{#tr this}}Change notification settings for individual streams on your <a href="/#subscriptions">Streams page</a>.{{/tr}}
</p> </p>
</div>
<h4>{{t "Private messages and @-mentions" }}</h4> <h4>{{t "Private messages and @-mentions" }}</h4>
<p>{{t "I want:" }}</p> <div class="padded-container">
<p>{{t "I want:" }}</p>
<div class="control-group"> <div class="input-group thinner">
<div class="controls"> <input type="checkbox" class="inline-block" name="enable_desktop_notifications" id="enable_desktop_notifications"
<input type="checkbox" name="enable_desktop_notifications" id="enable_desktop_notifications"
{{#if page_params.desktop_notifications_enabled}} {{#if page_params.desktop_notifications_enabled}}
checked="checked" checked="checked"
{{/if}} /> {{/if}} />
<label for="enable_desktop_notifications" class="inline-block">
{{t "Desktop notifications" }}
</label>
</div> </div>
<label for="enable_desktop_notifications" class="control-label">
{{t "Desktop notifications" }}
</label>
</div>
<div class="control-group"> <div class="input-group thinner">
<div class="controls"> <input type="checkbox" class="inline-block" name="enable_sounds" id="enable_sounds"
<input type="checkbox" name="enable_sounds" id="enable_sounds"
{{#if page_params.sounds_enabled}} {{#if page_params.sounds_enabled}}
checked="checked" checked="checked"
{{/if}} /> {{/if}} />
<label for="enable_sounds" class="inline-block">
{{t "Audible notifications" }}
</label>
</div> </div>
<label for="enable_sounds" class="control-label">
{{t "Audible notifications" }}
</label>
</div>
<div class="control-group"> <div class="input-group thinner">
<div class="controls"> <input type="checkbox" class="inline-block" name="enable_offline_email_notifications" id="enable_offline_email_notifications"
<input type="checkbox" name="enable_offline_email_notifications" id="enable_offline_email_notifications"
{{#if page_params.enable_offline_email_notifications}} {{#if page_params.enable_offline_email_notifications}}
checked="checked" checked="checked"
{{/if}} /> {{/if}} />
<label for="enable_offline_email_notifications" class="inline-block">
{{t "Email notifications when offline" }}
</label>
</div> </div>
<label for="enable_offline_email_notifications" class="control-label">
{{t "Email notifications when offline" }}
</label>
</div>
<div class="control-group"> <div class="input-group thinner">
<div class="controls"> <input type="checkbox" class="inline-block" name="enable_offline_push_notifications" id="enable_offline_push_notifications"
<input type="checkbox" name="enable_offline_push_notifications" id="enable_offline_push_notifications"
{{#if page_params.enable_offline_push_notifications}} {{#if page_params.enable_offline_push_notifications}}
checked="checked" checked="checked"
{{/if}} /> {{/if}} />
<label for="enable_offline_push_notifications" class="inline-block">
{{t "Mobile push notifications when offline" }}
</label>
</div> </div>
<label for="enable_offline_push_notifications" class="control-label">
{{t "Mobile push notifications when offline" }}
</label>
</div> </div>
<div id="other_notifications"> <div id="other_notifications">
<h4>{{t "Other notifications" }}</h4>
<p>{{t "I want:" }}</p> <h4>{{t "Other notifications" }} {{t "I want" }}:</h4>
<div class="control-group" id="digest_container"> <div class="padded-container">
<div class="controls"> <div class="input-group no-margin" id="digest_container">
<input type="checkbox" name="enable_digest_emails" id="enable_digest_emails" <input type="checkbox" class="inline-block" name="enable_digest_emails" id="enable_digest_emails"
{{#if page_params.enable_digest_emails}} {{#if page_params.enable_digest_emails}}
checked="checked" checked="checked"
{{/if}} /> {{/if}} />
<label for="enable_digest_emails" class="inline-block">
{{t "Digest emails when I'm away" }}
</label>
</div> </div>
<label for="enable_digest_emails" class="control-label">
{{t "Digest emails when I'm away" }}
</label>
</div> </div>
{{!-- If you add another control group here, make sure to change {{!-- If you add another control group here, make sure to change
$("#other_notifications").hide(); in settings.js to $("#other_notifications").hide(); in settings.js to
@@ -288,14 +263,14 @@
--}} --}}
</div> </div>
<div class="control-group"> <div class="input-group">
<div class="controls notification-submission"> <div class="controls notification-submission">
<input type="submit" id="change_notification_settings" <input type="submit" id="change_notification_settings"
name="change_notification_settings" value="{{t 'Save changes' }}" name="change_notification_settings" value="{{t 'Save Changes' }}"
class="btn btn-big btn-primary" /> class="button green" />
</div> </div>
</div> </div>
</div> </form>
</div> </div>
@@ -304,73 +279,76 @@
<div id="bot-settings" class="settings-section"> <div id="bot-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-github settings-section-icon"></i>{{t "Your Bots" }}</div> <div class="settings-section-title">
<i class="icon-vector-github settings-section-icon"></i>
{{t "Your Bots" }}
</div>
<div class="bot-settings-form"> <div class="bot-settings-form">
{{#tr this}} {{#tr this}}
<p class="bot-settings-note">Looking for our <a href="/integrations" target="_blank">Integrations</a> <p class="bot-settings-note padded-container">
or <a href="/api" target="_blank">API</a> documentation?</p> Looking for our <a href="/integrations" target="_blank">Integrations</a>
or <a href="{{ server_uri }}/api" target="_blank">API</a> documentation?
</p>
{{/tr}} {{/tr}}
<ol id="bots_list"> <ol id="bots_list">
</ol> </ol>
<div id="bot_table_error" class="alert alert-error hide"></div> <div id="bot_table_error" class="alert alert-error hide"></div>
<form id="create_bot_form" class="form-horizontal">
<div class="add-new-bot-box"> <div class="add-new-bot-box grey-bg">
<div class="settings-section-title new-bot-section-title">Add a New Bot</div> <form id="create_bot_form" class="form-horizontal no-padding">
<h4 class="new-bot-section-title light no-margin">Add a New Bot</h4>
<div class="new-bot-form"> <div class="new-bot-form">
<div class="control-group"> <div class="input-group">
<label for="create_bot_name" class="control-label">{{t "Full name" }}</label> <label for="create_bot_name">{{t "Full name" }}</label>
<input type="text" name="bot_name" id="create_bot_name" class="required" <input type="text" name="bot_name" id="create_bot_name" class="required"
maxlength=100 placeholder="{{t 'Full Bot Name' }}" value="" /> maxlength=100 placeholder="{{t 'Full Bot Name' }}" value="" />
<div><label for="create_bot_name" generated="true" class="text-error"></label></div> <div><label for="create_bot_name" generated="true" class="text-error"></label></div>
</div> </div>
<div class="control-group"> <div class="input-group">
<label for="bot_short_name" class="control-label">{{t "Username" }}</label> <label for="bot_short_name">{{t "Username" }}</label>
<input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part" <input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part"
placeholder="{{t 'bot_user_name' }}" value="" />-{{t "bot" }}@{{ page_params.domain }} placeholder="{{t 'bot_user_name' }}" value="" />
<div><label for="create_bot_short_name" generated="true" class="text-error"></label></div> -{{t "bot" }}@{{ page_params.domain }}
<div>
<label for="create_bot_short_name" generated="true" class="text-error"></label>
</div>
</div> </div>
<div class="control-group new-bot-ui"> <div class="input-group new-bot-ui">
<label for="create_bot_default_sending_stream" class="control-label">{{t "Send to stream" }}</label> <label for="create_bot_default_sending_stream">{{t "Send to stream" }}</label>
<select name="bot_default_sending_stream" id="create_bot_default_sending_stream"></select> <select name="bot_default_sending_stream" id="create_bot_default_sending_stream"></select>
</div> </div>
<div class="control-group new-bot-ui"> <div class="input-group new-bot-ui">
<label for="create_bot_default_events_register_stream" class="control-label">{{t "Listen on" }}</label> <label for="create_bot_default_events_register_stream">{{t "Listen on" }}</label>
<select name="bot_default_events_register_stream" id="create_bot_default_events_register_stream"></select> <select name="bot_default_events_register_stream" id="create_bot_default_events_register_stream"></select>
</div> </div>
<div class="control-group"> <div class="input-group">
<div class="controls"> <div id="bot_avatar_file"></div>
<div id="bot_avatar_file"></div> <input type="file" name="bot_avatar_file_input" class="notvisible" id="bot_avatar_file_input" value="{{t 'Upload avatar' }}" />
<input type="file" name="bot_avatar_file_input" class="notvisible" id="bot_avatar_file_input" value="{{t 'Upload avatar' }}" /> <button class="btn btn-default display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
<button class="btn btn-default" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button> <button class="button white" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
<button class="btn btn-default" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
</div>
</div> </div>
<p> <p>
<div id="bot_avatar_file_input_error" class="text-error"></div> <div id="bot_avatar_file_input_error" class="text-error"></div>
</p> </p>
<div class="control-group"> <input type="submit" class="button" id="create_bot_button" value="{{t 'Create Bot' }}" />
<div class="controls">
<input type="submit" class="btn btn-primary" id="create_bot_button" value="{{t 'Create Bot' }}" />
</div>
</div>
</div> </div>
</div> </form>
</form> </div>
<hr class="settings_separator" /> <hr class="settings_separator" />
<div class="form-horizontal" id="api_key_button_box"> <div class="form-horizontal" id="api_key_button_box">
{{#tr this}} <div class="input-group side-padded-container">
<p class="api-key-note">For most bots using the API, you'll want to give each bot {{#tr this}}
its own name and API key using the above section. But if you <p class="api-key-note">For most bots using the API, you'll want to give each bot
want to write a bot that can access your own private its own name and API key using the above section. But if you
messages, you should use your personal API key. want to write a bot that can access your own private
</p> messages, you should use your personal API key.
{{/tr}} </p>
<div class="control-group"> {{/tr}}
<button class="btn btn-default" id="api_key_button">{{t "Show/change your API key" }}</button> <button class="button white" id="api_key_button">{{t "Show/change your API key" }}</button>
</div> </div>
</div> </div>
<div id="get_api_key_box"> <div id="get_api_key_box">
@@ -404,54 +382,53 @@
</div> </div>
<div id="alert-word-settings" class="settings-section"> <div id="alert-word-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-book settings-section-icon"></i>{{t "Custom Alert Words" }}</div> <div class="settings-section-title">
<div class="form-horizontal" id="alert_word_info_box"> <i class="icon-vector-book settings-section-icon"></i>
{{t "Custom Alert Words" }}
</div>
<form class="form-horizontal" id="alert_word_info_box">
{{#tr this}} {{#tr this}}
<p class="alert-word-settings-note"> <p class="alert-word-settings-note">
{{t "Alert words allow you to be notified as if you were @-mentioned {{t "Alert words allow you to be notified as if you were @-mentioned
when certain words or phrases are used in Zulip."}} when certain words or phrases are used in Zulip."}}
</p> </p>
{{/tr}} {{/tr}}
</div> </form>
<ul id="alert_words_list"> <ul id="alert_words_list"></ul>
</ul>
</div> </div>
<div class="ui-settings"> <div class="ui-settings">
<div id="ui-settings" class="settings-section"> <div id="ui-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-beaker settings-section-icon"></i>{{#tr this}}__page_params.product_name__ Labs{{/tr}}</div> <div class="settings-section-title"><i class="icon-vector-beaker settings-section-icon"></i>{{#tr this}}__page_params.product_name__ Labs{{/tr}}</div>
<div class="alert" id="ui-settings-status"></div> <div class="alert" id="ui-settings-status"></div>
<div class="ui-settings-form"> <form class="ui-settings-form">
<p> <p class="input-group">
{{t "Warning: the below features are experimental features and may not work as well as you would like." }} {{t "Warning: the below features are experimental features and may not work as well as you would like." }}
</p> </p>
<div class="control-group"> <div class="input-group thinner">
<div class="controls"> <input type="checkbox" class="inline-block" name="autoscroll_forever" id="autoscroll_forever"
<input type="checkbox" name="autoscroll_forever" id="autoscroll_forever" {{#if page_params.autoscroll_forever}}
{{#if page_params.autoscroll_forever}} checked="checked"
checked="checked" {{/if}} />
{{/if}} /> <label for="autoscroll_forever" class="inline-block">
</div>
<label for="autoscroll_forever" class="control-label">
{{t "Always auto-scroll to new messages" }} {{t "Always auto-scroll to new messages" }}
</label> </label>
</div>
<div class="controls"> <div class="input-group thinner">
<input type="checkbox" name="default_desktop_notifications" id="default_desktop_notifications" <input type="checkbox" class="inline-block" name="default_desktop_notifications" id="default_desktop_notifications"
{{#if page_params.default_desktop_notifications}} {{#if page_params.default_desktop_notifications}}
checked="checked" checked="checked"
{{/if}} /> {{/if}} />
</div> <label for="default_desktop_notifications" class="inline-block">
<label for="default_desktop_notifications" class="control-label">
{{t "Enable desktop notifications for new streams" }} {{t "Enable desktop notifications for new streams" }}
</label> </label>
</div> </div>
<div class="control-group"> <div class="input-group">
<div class="controls ui-submission"> <div class="ui-submission">
<input type="submit" name="change_settings" value="{{t 'Save changes' }}" class="btn btn-big btn-primary" /> <input type="submit" name="change_settings" value="{{t 'Save Changes' }}" class="button green" />
</div> </div>
</div> </div>
</div> </form>
</div> </div>
</div> </div>