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
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('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
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 () {
@@ -146,7 +146,7 @@ casper.then(function () {
'name': 'MouseFace',
'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"
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('form.admin-realm-form input.btn');
casper.click('form.admin-realm-form input.button');
});
casper.then(function () {
@@ -358,7 +358,7 @@ casper.then(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('form.admin-realm-form input.btn');
casper.click('form.admin-realm-form input.button');
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.assertEval(function () {
@@ -410,7 +410,7 @@ casper.then(function () {
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
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');
});
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 () {
@@ -437,7 +437,7 @@ casper.then(function () {
// 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.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 () {
$('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');
});
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 () {
$('#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 () {

8
static/js/admin.js
View File

@@ -349,20 +349,20 @@ function _setup_page() {
$("#id_realm_invite_required").change(function () {
if (this.checked) {
$("#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 {
$("#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 () {
if (this.checked) {
$("#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 {
$("#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 () {
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_events_register_stream = $('#create_bot_default_events_register_stream').val();
var formData = new FormData();

506
static/styles/settings.css
View File

@@ -1,158 +1,245 @@
#settings {
margin-top: 55px;
margin-left: 15px;
}
#administration .settings-section,
#settings .settings-section {
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;
label {
margin: 0;
}
#settings #notify-settings-status,#ui-settings-status,#display-settings-status {
width: 80%;
text-align: center;
margin: auto;
.display-none {
display: none;
}
.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-bottom: 10px;
}
#administration .settings-section .admin-realm-form,
#settings .settings-section .account-settings-form,
#settings .settings-section .new-bot-form,
#settings .settings-section .edit-bot-form-box {
width: 400px;
margin: auto;
.button.small {
min-width: inherit;
padding: 6px 10px;
}
#administration .settings-section .admin-realm-form,
#settings .settings-section .new-bot-form,
#settings .settings-section .new-alert-word-form,
#emoji-settings .new-emoji-form,
#settings .settings-section .edit-bot-form-box {
margin-top: 35px;
.button.btn-danger {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a;
}
#settings .settings-section .new-bot-section-title,
#settings .settings-section .new-alert-word-section-title,
#emoji-settings .new-emoji-section-title {
top: 20px;
left: 20px;
.button.btn-warning {
color: #fff;
background-color: #f0ad4e;
border-color: #eea236;
}
#settings .settings-section .notification-settings-form,.ui-settings-form,.display-settings-form {
width: 400px;
margin: auto;
#user-settings-avatar {
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
#settings .settings-section .account-settings-form .control-label,
#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;
input[type=checkbox].inline-block {
margin: -2px 0px 0px 0px;
}
#settings .settings-section .account-settings-form .controls,
#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;
.list-container {
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,
#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 {
.grey-bg {
background: #e3e3e3;
padding: 10px;
margin-left: 38px;
margin-right: 38px;
margin-bottom: 15px;
width: 90%;
margin: 15px auto;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
position: relative;
font-size: 14px;
}
#settings .add-new-bot-box,
#settings .add-new-alert-word-box,
#emoji-settings .add-new-emoji-box,
#admin-default-streams-list .add-new-default-stream-box {
background: #cbe3cb;
.green-bg {
background-color: #cbe3cb;
}
.new-default-stream-section-title {
@@ -161,69 +248,8 @@
padding-bottom: 10px;
}
#settings #get_api_key_box,
#settings #show_api_key_box,
#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;
}
.remove-alert-word {
margin-top: 1px;
}
@media (max-width: 480px) {
@@ -268,83 +294,24 @@
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,
#settings .settings-section .settings-section-icon {
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 {
text-align: center;
}
form.admin-realm .control-label {
width: 200px;
padding-top: 3px;
padding-right: 20px;
margin-bottom: -20px;
}
.control-label-disabled {
color: #d3d3d3;
}
.disableable {
margin-left: 25px;
}
.admin-realm-message-content-edit-limit-minutes {
width: 5ch;
text-align: right;
@@ -374,11 +341,8 @@ form.admin-realm .control-label {
}
.admin-table-wrapper {
margin: 0 38px;
}
#emoji-settings .new-emoji-form #emoji_url {
width: 60%;
width: 90%;
margin: 0 auto;
}
#bots_list {
@@ -389,7 +353,6 @@ form.admin-realm .control-label {
#bots_list .image,
#bots_list .bot_info {
display: inline-block;
margin: 10px;
}
@@ -404,13 +367,10 @@ form.admin-realm .control-label {
}
#bots_list .regenerate_bot_api_key {
padding: 2px;
width: 20px;
height: 20px;
background: #e3e3e3;
color: #666;
position: relative;
top: -2px;
margin-left: 5px;
color: #666;
}
#bots_list .regenerate_bot_api_key:hover {
@@ -459,10 +419,6 @@ form.admin-realm .control-label {
margin-bottom: 10px;
}
div.edit_bot {
display: none;
}
.edit_bot_form .control-label,
#create_bot_form .control-label,
#create_alert_word_form .control-label,
@@ -478,28 +434,14 @@ div.edit_bot {
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 {
width: 8em;
}
#empty_alert_word_error {
display: none;
margin-left: 38px;
margin-right: 38px;
width: 90%;
margin: 0 auto;
padding: 10px;
}

5
static/styles/zulip.css
View File

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

2
static/templates/admin_default_streams_list.handlebars
View File

@@ -5,7 +5,7 @@
<span class="default_stream_name">{{name}}</span>
</td>
<td>
<button class="btn remove-default-stream btn-danger">
<button class="button remove-default-stream btn-danger">
{{t "Remove from default" }}
</button>
</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>
</td>
<td>
<button class="btn delete btn-danger" data-emoji-name="{{name}}">
<button class="button delete btn-danger" data-emoji-name="{{name}}">
{{t "Delete" }}
</button>
</td>

2
static/templates/admin_streams_list.handlebars
View File

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

133
static/templates/admin_tab.handlebars
View File

@@ -29,7 +29,6 @@
<div class="settings-section-title"><i class="icon-vector-gear settings-section-icon"></i>
{{t "Organization settings" }}</div>
<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-restricted-to-domain-status"></div>
<div class="alert" id="admin-realm-invite-required-status"></div>
@@ -37,98 +36,82 @@
<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-default-language-status"></div>
<label for="realm_name" class="control-label">{{t "Your organization's name" }}</label>
<div class="controls">
<div class="input-group admin-realm">
<label for="realm_name">{{t "Your organization's name" }}</label>
<input type="text" id="id_realm_name" name="realm_name" class="admin-realm-name"
value="{{ realm_name }}" />
</div>
</div>
<div class="control-group">
<label for="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}}"
class="control-label">
<div class="input-group">
<input type="checkbox" class="inline-block" id="id_realm_restricted_to_domain" name="realm_restricted_to_domain"
{{#if realm_restricted_to_domain}}checked="checked"{{/if}} />
<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}}
</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 class="control-group">
<label for="realm_invite_required"
title="{{t 'If checked, users must be invited in order to join your organization.' }}"
class="control-label">
<div class="input-group">
<input type="checkbox" class="inline-block" id="id_realm_invite_required" name="realm_invite_required"
{{#if realm_invite_required}}checked="checked"{{/if}} />
<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" }}
</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 class="control-group">
<label for="realm_invite_by_admins_only"
id="id_realm_invite_by_admins_only_label"
title="{{t 'If checked, only administrators may invite new users.' }}"
class="control-label{{#unless realm_invite_required}} control-label-disabled{{/unless}}">
{{t "Only admins may invite" }}
</label>
<div class="controls">
<input type="checkbox" id="id_realm_invite_by_admins_only" name="realm_invite_by_admins_only"
<div class="input-group disableable {{#unless realm_invite_required}}control-label-disabled{{/unless}}">
<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}} />
</div>
</div>
<div class="control-group">
<label for="realm_create_stream_by_admins_only"
id="id_realm_create_stream_by_admins_only_label"
title="{{t 'If checked, only administrators may create new streams.'}}"
class="control-label">
{{t "Only admins may create streams" }}
<label for="id_realm_invite_by_admins_only"
id="id_realm_invite_by_admins_only_label"
title="{{t 'If checked, only administrators may invite new users.' }}"
class="inline-block">
{{t "Only admins may invite" }}
</label>
<div class="controls">
<input type="checkbox" id="id_realm_create_stream_by_admins_only"
</div>
<div class="input-group">
<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"
title="{{t 'If checked, only administrators may create new streams.'}}">
{{t "Only admins may create streams" }}
</label>
</div>
</div>
<div class="control-group">
<label for="realm_allow_message_editing"
<div class="input-group">
<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.' }}"
class="control-label">
class="inline-block">
{{t "Users can edit old messages" }}
</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 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"
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.' }}"
class="control-label{{#unless realm_allow_message_editing}} control-label-disabled{{/unless}}">
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.' }}">
{{t 'Message edit limit in minutes (0 for no limit)' }}
</label>
<div class="controls">
<input type="text" id="id_realm_message_content_edit_limit_minutes"
name="realm_message_content_edit_limit_minutes"
class="admin-realm-message-content-edit-limit-minutes"
value="{{ realm_message_content_edit_limit_minutes }}"
{{#unless realm_allow_message_editing}}disabled="disabled"{{/unless}} />
</div>
</div>
<div class="control-group">
<label for="realm_default_language" class="control-label">{{t "Default Language" }}:</label>
<div class="controls">
<div class="input-group">
<label for="realm_default_language">{{t "Default Language" }}:</label>
<select name="realm_default_language" id="id_realm_default_language">
{{#each language_list}}
<option value='{{this.code}}'>{{this.name}}</option>
{{/each}}
</select>
</div>
</div>
<div class="controls organization-submission">
<input type="submit" class="btn btn-big btn-primary" value="{{t 'Save changes' }}" />
<div class="input-group organization-submission">
<input type="submit" class="button" value="{{t 'Save changes' }}" />
</div>
</form>
</div>
@@ -146,25 +129,21 @@
</table>
</div>
<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="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="control-group">
<label for="emoji_name" class="control-label">{{t "Emoji name" }}</label>
<div class="input-group">
<label for="emoji_name">{{t "Emoji name" }}</label>
<input type="text" name="name" id="emoji_name" placeholder="{{t 'mouse_face' }}" />
<div class="alert" id="admin-emoji-name-status"></div>
</div>
<div class="control-group">
<label for="emoji_url" class="control-label">{{t "Emoji URL" }}</label>
<div class="input-group">
<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" />
<div class="alert" id="admin-emoji-url-status"></div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-big btn-primary" value="{{t 'Add emoji' }}" />
</div>
</div>
<input type="submit" class="button" value="{{t 'Add emoji' }}" />
</div>
</div>
</form>
@@ -217,7 +196,10 @@
<div id="admin-streams-list" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-exchange settings-section-icon"></i>
{{t "Streams Deletion" }}</div>
<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">
<tbody id="admin_streams_table" class="admin_stream_table">
@@ -232,18 +214,21 @@
<div id="admin-default-streams-list" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-exchange settings-section-icon"></i>
{{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>
</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>
<div id="admin_page_default_streams_loading_indicator"></div>
<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="control-group" id="default_stream_inputs">
<label for="default_stream_name" class="control-label">{{t "Stream Name" }}</label>
@@ -266,7 +251,7 @@
</div>
<div class="modal-footer">
<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 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 class="modal-footer">
<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>

8
static/templates/admin_user_list.handlebars
View File

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

18
static/templates/alert_word_settings_item.handlebars
View File

@@ -2,12 +2,12 @@
<li class="alert-word-item" data-word='{{word}}'>
{{#if editing}}
<div class="alert-word-settings-form">
<form id="create_alert_word_form" class="form-horizontal">
<div class="add-new-alert-word-box">
<div class="settings-section-title new-alert-word-section-title">{{t "Add a New Alert Word"}}</div>
<div class="add-new-alert-word-box grey-bg green-bg">
<form id="create_alert_word_form" class="form-horizontal no-padding">
<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="control-group">
<label for="create_alert_word_name" class="control-label">{{t "New Alert Word" }}</label>
<div class="input-group">
<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"
maxlength=100 placeholder="{{t 'Alert Word' }}" value="" />
</div>
@@ -17,20 +17,20 @@
</button>
<span>{{t "Alert words can't be empty!"}}</span>
</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'}}
</button>
</div>
</div>
</form>
</div>
</div>
{{else}}
<div class="alert-word-information-box">
<div class="alert-word-information-box list-container">
<div class="alert_word_listing">
<span class="value">{{word}}</span>
</div>
<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>
</button>
</div>

12
static/templates/bot_avatar_row.handlebars
View File

@@ -1,8 +1,8 @@
<li class="bot-information-box">
<div class="image">
<li class="bot-information-box grey-bg">
<div class="image inline-block overflow-hidden">
<img src="{{avatar_url}}" class="avatar" />
</div>
<div class="bot_info">
<div class="bot_info inline-block">
<div class="name">{{name}}</div>
<div class="email">
<span class="field">{{t "Username" }}</span>
@@ -13,7 +13,7 @@
<span class="api-key-value-and-button">
<span class="value">{{api_key}}
</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>
</button>
</span>
@@ -29,7 +29,7 @@
</div>
<div id="bot_delete_error{{id_suffix}}" class="alert alert-error hide"></div>
</div>
<div class='edit_bot'>
<div class='edit_bot display-none'>
<form class="edit_bot_form form-horizontal" data-email="{{email}}">
<div class="bot_edit_errors alert alert-error hide"></div>
<div class="edit_bot_email">{{email}}</div>
@@ -55,7 +55,7 @@
<div class="controls">
<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_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><label for="edit_bot_avatar_file{{id_suffix}}" generated="true" class="edit_bot_avatar_error text-error"></label></div>
</div>

291
static/templates/settings_tab.handlebars
View File

@@ -5,80 +5,63 @@
<div class="alert" id="settings-status"></div>
<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">
<form action="/json/settings/change" method="post"
class="form-horizontal your-account-settings">
<div class="control-group" id="name_change_container">
<label for="full_name" class="control-label">{{t "Full name" }}</label>
<div class="controls">
<input type="text" name="full_name" id="full_name"
value="{{ page_params.fullname }}" />
</div>
<div class="input-group" id="name_change_container">
<label for="full_name">{{t "Full name" }}</label>
<input type="text" name="full_name" id="full_name" value="{{ page_params.fullname }}" />
</div>
<!-- password start -->
{{#if page_params.password_auth_enabled}}
<div class="control-group" id="pw_change_link">
<label for="change_password_button" class="control-label">{{t "Password" }}</label>
<div class="controls">
<button class="btn btn-default change_password_button" data-dismiss="modal" aria-hidden="true">{{t "Change Password" }}</button>
</div>
<div class="input-group" id="pw_change_link">
<label for="change_password_button">{{t "Password" }}</label>
<button class="change_password_button button" data-dismiss="modal" aria-hidden="true">{{t "Change Password" }}</button>
</div>
<div id="pw_change_controls">
<div class="control-group">
<label for="old_password" class="control-label">{{t "Old password" }}</label>
<div class="controls">
<input type="password" autocomplete="off"
name="old_password" id="old_password" value="" />
<div class="input-group">
<label for="old_password">{{t "Old password" }}</label>
<input type="password" autocomplete="off" name="old_password" id="old_password" value="" />
(<a href="/accounts/password/reset/" target="_blank">{{t "Forgotten it?" }}</a>)
</div>
<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="control-group">
<label for="new_password" class="control-label">{{t "New password" }}</label>
<div class="controls">
<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="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 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 class="input-group">
<label for="confirm_password">{{t "Confirm password" }}</label>
<input type="password" autocomplete="off" name="confirm_password" id="confirm_password" value="" />
</div>
</div>
{{/if}}
<div class="control-group">
<div class="controls">
<input type="submit" name="change_settings"
value="{{t 'Save changes' }}" class="btn btn-big btn-primary" />
</div>
<div class="input-group">
<input type="submit" class="button green" name="change_settings" value="Save Changes" />
</div>
<div class="user-avatar-section">
<p>
<div class="input-group">
<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"></div>
<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>
<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>
</form>
@@ -88,15 +71,17 @@
<div>
<div id="display-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-time settings-section-icon"></i>
{{t 'Display Settings' }}</div>
<div class="settings-section-title">
<i class="icon-vector-time settings-section-icon"></i>
{{t 'Display Settings' }}
</div>
<div class="alert" id="display-settings-status"></div>
<div class="display-settings-form">
<form class="display-settings-form">
<div class="control-group">
<label for="default_language" class="control-label inline">{{t "Default Language" }}: <span id='default_language_name'>{{page_params.default_language_name}}</span></label>
<div class="input-group">
<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>
</div>
<div id="default_language_modal" class="modal hide" tabindex="-1" role="dialog"
aria-labelledby="default_language_modal_label" aria-hidden="true">
<div class="modal-header">
@@ -146,65 +131,61 @@
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="checkbox" name="left_side_userlist" id="left_side_userlist"
<div class="input-group thinner">
<input type="checkbox" class="inline-block" name="left_side_userlist" id="left_side_userlist"
{{#if page_params.left_side_userlist}}
checked="checked"
{{/if}} />
</div>
<label for="left_side_userlist" class="control-label">{{t "Display user list on left side in narrow windows." }}</label>
<label for="left_side_userlist" class="inline-block">{{t "Display user list on left side in narrow windows." }}</label>
</div>
<div class="control-group">
<div class="controls">
<input type="checkbox" name="twenty_four_hour_time" id="twenty_four_hour_time"
<div class="input-group thinner">
<input type="checkbox" class="inline-block" name="twenty_four_hour_time" id="twenty_four_hour_time"
{{#if page_params.twenty_four_hour_time}}
checked="checked"
{{/if}} />
</div>
<label for="twenty_four_hour_time" class="control-label">
<label for="twenty_four_hour_time" class="inline-block">
{{t "Display time in 24-hour format (17:00 instead of 5:00 PM)" }}
</label>
</div>
</div>
</form>
</div>
</div>
<div>
<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="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>
<div class="settings-section-title">
<i class="icon-vector-warning-sign settings-section-icon"></i>
{{t "Notifications" }}
</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>
<div class="notification-settings-form">
<h4>{{t "Stream messages" }}</h4>
<div class="padded-container">
<p>{{t "Unless I say otherwise for a particular stream, I want:" }}</p>
<div class="control-group">
<div class="controls">
<input type="checkbox" name="enable_stream_desktop_notifications"
<div class="input-group thinner">
<input type="checkbox" class="inline-block" name="enable_stream_desktop_notifications"
id="enable_stream_desktop_notifications"
{{#if page_params.stream_desktop_notifications_enabled}}
checked="checked"
{{/if}} />
</div>
<label for="enable_stream_desktop_notifications" class="control-label">
<label for="enable_stream_desktop_notifications" class="inline-block">
{{t "Desktop notifications" }}
</label>
<div class="propagate_stream_notifications_change"></div>
</div>
<div class="control-group">
<div class="controls">
<input type="checkbox" name="enable_stream_sounds" id="enable_stream_sounds"
<div class="input-group thinner">
<input type="checkbox" class="inline-block" name="enable_stream_sounds" id="enable_stream_sounds"
{{#if page_params.stream_sounds_enabled}}
checked="checked"
{{/if}} />
</div>
<label for="enable_stream_sounds" class="control-label">
<label for="enable_stream_sounds" class="inline-block">
{{t "Audible notifications" }}
</label>
<div class="propagate_stream_notifications_change"></div>
@@ -213,89 +194,83 @@
<p class="notification-settings-note">
{{#tr this}}Change notification settings for individual streams on your <a href="/#subscriptions">Streams page</a>.{{/tr}}
</p>
</div>
<h4>{{t "Private messages and @-mentions" }}</h4>
<div class="padded-container">
<p>{{t "I want:" }}</p>
<div class="control-group">
<div class="controls">
<input type="checkbox" name="enable_desktop_notifications" id="enable_desktop_notifications"
<div class="input-group thinner">
<input type="checkbox" class="inline-block" name="enable_desktop_notifications" id="enable_desktop_notifications"
{{#if page_params.desktop_notifications_enabled}}
checked="checked"
{{/if}} />
</div>
<label for="enable_desktop_notifications" class="control-label">
<label for="enable_desktop_notifications" class="inline-block">
{{t "Desktop notifications" }}
</label>
</div>
<div class="control-group">
<div class="controls">
<input type="checkbox" name="enable_sounds" id="enable_sounds"
<div class="input-group thinner">
<input type="checkbox" class="inline-block" name="enable_sounds" id="enable_sounds"
{{#if page_params.sounds_enabled}}
checked="checked"
{{/if}} />
</div>
<label for="enable_sounds" class="control-label">
<label for="enable_sounds" class="inline-block">
{{t "Audible notifications" }}
</label>
</div>
<div class="control-group">
<div class="controls">
<input type="checkbox" name="enable_offline_email_notifications" id="enable_offline_email_notifications"
<div class="input-group thinner">
<input type="checkbox" class="inline-block" name="enable_offline_email_notifications" id="enable_offline_email_notifications"
{{#if page_params.enable_offline_email_notifications}}
checked="checked"
{{/if}} />
</div>
<label for="enable_offline_email_notifications" class="control-label">
<label for="enable_offline_email_notifications" class="inline-block">
{{t "Email notifications when offline" }}
</label>
</div>
<div class="control-group">
<div class="controls">
<input type="checkbox" name="enable_offline_push_notifications" id="enable_offline_push_notifications"
<div class="input-group thinner">
<input type="checkbox" class="inline-block" name="enable_offline_push_notifications" id="enable_offline_push_notifications"
{{#if page_params.enable_offline_push_notifications}}
checked="checked"
{{/if}} />
</div>
<label for="enable_offline_push_notifications" class="control-label">
<label for="enable_offline_push_notifications" class="inline-block">
{{t "Mobile push notifications when offline" }}
</label>
</div>
</div>
<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="controls">
<input type="checkbox" name="enable_digest_emails" id="enable_digest_emails"
<div class="padded-container">
<div class="input-group no-margin" id="digest_container">
<input type="checkbox" class="inline-block" name="enable_digest_emails" id="enable_digest_emails"
{{#if page_params.enable_digest_emails}}
checked="checked"
{{/if}} />
</div>
<label for="enable_digest_emails" class="control-label">
<label for="enable_digest_emails" class="inline-block">
{{t "Digest emails when I'm away" }}
</label>
</div>
</div>
{{!-- If you add another control group here, make sure to change
$("#other_notifications").hide(); in settings.js to
$("#digest_container").hide();
--}}
</div>
<div class="control-group">
<div class="input-group">
<div class="controls notification-submission">
<input type="submit" id="change_notification_settings"
name="change_notification_settings" value="{{t 'Save changes' }}"
class="btn btn-big btn-primary" />
</div>
name="change_notification_settings" value="{{t 'Save Changes' }}"
class="button green" />
</div>
</div>
</form>
</div>
@@ -304,64 +279,68 @@
<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">
{{#tr this}}
<p class="bot-settings-note">Looking for our <a href="/integrations" target="_blank">Integrations</a>
or <a href="/api" target="_blank">API</a> documentation?</p>
<p class="bot-settings-note padded-container">
Looking for our <a href="/integrations" target="_blank">Integrations</a>
or <a href="{{ server_uri }}/api" target="_blank">API</a> documentation?
</p>
{{/tr}}
<ol id="bots_list">
</ol>
<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="settings-section-title new-bot-section-title">Add a New Bot</div>
<div class="add-new-bot-box grey-bg">
<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="control-group">
<label for="create_bot_name" class="control-label">{{t "Full name" }}</label>
<div class="input-group">
<label for="create_bot_name">{{t "Full name" }}</label>
<input type="text" name="bot_name" id="create_bot_name" class="required"
maxlength=100 placeholder="{{t 'Full Bot Name' }}" value="" />
<div><label for="create_bot_name" generated="true" class="text-error"></label></div>
</div>
<div class="control-group">
<label for="bot_short_name" class="control-label">{{t "Username" }}</label>
<div class="input-group">
<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"
placeholder="{{t 'bot_user_name' }}" value="" />-{{t "bot" }}@{{ page_params.domain }}
<div><label for="create_bot_short_name" generated="true" class="text-error"></label></div>
placeholder="{{t 'bot_user_name' }}" value="" />
-{{t "bot" }}@{{ page_params.domain }}
<div>
<label for="create_bot_short_name" generated="true" class="text-error"></label>
</div>
<div class="control-group new-bot-ui">
<label for="create_bot_default_sending_stream" class="control-label">{{t "Send to stream" }}</label>
</div>
<div class="input-group new-bot-ui">
<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>
</div>
<div class="control-group new-bot-ui">
<label for="create_bot_default_events_register_stream" class="control-label">{{t "Listen on" }}</label>
<div class="input-group new-bot-ui">
<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>
</div>
<div class="control-group">
<div class="controls">
<div class="input-group">
<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' }}" />
<button class="btn btn-default" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
<button class="btn btn-default" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
</div>
<button class="btn btn-default display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
<button class="button white" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
</div>
<p>
<div id="bot_avatar_file_input_error" class="text-error"></div>
</p>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary" id="create_bot_button" value="{{t 'Create Bot' }}" />
</div>
</div>
</div>
<input type="submit" class="button" id="create_bot_button" value="{{t 'Create Bot' }}" />
</div>
</form>
</div>
<hr class="settings_separator" />
<div class="form-horizontal" id="api_key_button_box">
<div class="input-group side-padded-container">
{{#tr this}}
<p class="api-key-note">For most bots using the API, you'll want to give each bot
its own name and API key using the above section. But if you
@@ -369,8 +348,7 @@
messages, you should use your personal API key.
</p>
{{/tr}}
<div class="control-group">
<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 id="get_api_key_box">
@@ -404,54 +382,53 @@
</div>
<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="form-horizontal" id="alert_word_info_box">
<div class="settings-section-title">
<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}}
<p class="alert-word-settings-note">
{{t "Alert words allow you to be notified as if you were @-mentioned
when certain words or phrases are used in Zulip."}}
</p>
{{/tr}}
</div>
<ul id="alert_words_list">
</ul>
</form>
<ul id="alert_words_list"></ul>
</div>
<div class="ui-settings">
<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="alert" id="ui-settings-status"></div>
<div class="ui-settings-form">
<p>
<form class="ui-settings-form">
<p class="input-group">
{{t "Warning: the below features are experimental features and may not work as well as you would like." }}
</p>
<div class="control-group">
<div class="controls">
<input type="checkbox" name="autoscroll_forever" id="autoscroll_forever"
<div class="input-group thinner">
<input type="checkbox" class="inline-block" name="autoscroll_forever" id="autoscroll_forever"
{{#if page_params.autoscroll_forever}}
checked="checked"
{{/if}} />
</div>
<label for="autoscroll_forever" class="control-label">
<label for="autoscroll_forever" class="inline-block">
{{t "Always auto-scroll to new messages" }}
</label>
<div class="controls">
<input type="checkbox" name="default_desktop_notifications" id="default_desktop_notifications"
</div>
<div class="input-group thinner">
<input type="checkbox" class="inline-block" name="default_desktop_notifications" id="default_desktop_notifications"
{{#if page_params.default_desktop_notifications}}
checked="checked"
{{/if}} />
</div>
<label for="default_desktop_notifications" class="control-label">
<label for="default_desktop_notifications" class="inline-block">
{{t "Enable desktop notifications for new streams" }}
</label>
</div>
<div class="control-group">
<div class="controls ui-submission">
<input type="submit" name="change_settings" value="{{t 'Save changes' }}" class="btn btn-big btn-primary" />
</div>
<div class="input-group">
<div class="ui-submission">
<input type="submit" name="change_settings" value="{{t 'Save Changes' }}" class="button green" />
</div>
</div>
</form>
</div>
</div>