Settings page changes

Bug fixes

Small fix to integrations and api links

(imported from commit 5944b175fbe0fdc4fdb5ecb3cab4e333127ca353)
This commit is contained in:
Allen Rabinovich 2013-10-20 16:04:25 -07:00
parent 286803660f
commit 3a5276aa4e
6 changed files with 551 additions and 214 deletions

View File

@ -48,7 +48,7 @@ $(function () {
});
$('#word-alerts').on('click', '.remove-alert-word', function (event) {
var li = $(event.target).parent();
var li = $(event.currentTarget).parent();
li.remove();
update_word_alerts();

View File

@ -104,12 +104,12 @@ $(function () {
});
$("#bots_list").on("click", "button.delete_bot", function (e) {
var email = $(e.target).data('email');
var email = $(e.currentTarget).data('email');
$.ajax({
url: '/json/users/' + encodeURIComponent(email),
type: 'DELETE',
success: function () {
var row = $(e.target).closest("li");
var row = $(e.currentTarget).closest("li");
row.hide('slow', function () { row.remove(); });
},
error: function (xhr) {
@ -119,17 +119,17 @@ $(function () {
});
$("#bots_list").on("click", "button.regenerate_bot_api_key", function (e) {
var email = $(e.target).data('email');
var email = $(e.currentTarget).data('email');
$.ajax({
url: '/json/bots/' + encodeURIComponent(email) + '/api_key/regenerate',
type: 'POST',
success: function (data) {
var row = $(e.target).closest("li");
var row = $(e.currentTarget).closest("li");
row.find(".api_key").find(".value").text(data.api_key);
row.find("api_key_error").hide();
},
error: function (xhr) {
var row = $(e.target).closest("li");
var row = $(e.currentTarget).closest("li");
row.find(".api_key_error").text(JSON.parse(xhr.responseText).msg).show();
}
});
@ -138,7 +138,7 @@ $(function () {
var image_version = 0;
$("#bots_list").on("click", "button.open_edit_bot_form", function (e) {
var li = $(e.target).closest('li');
var li = $(e.currentTarget).closest('li');
var edit_div = li.find('div.edit_bot');
var form = li.find('.edit_bot_form');
var image = li.find(".image");

View File

@ -2426,8 +2426,9 @@ li.expanded_subject {
/* FIXME: Combine this rule with the one in portico.css somehow? */
#pw_strength {
/* Same width as a Bootstrap default text <input> with padding */
width: 220px;
height: 25px;
margin-bottom: 0px;
}
/* Override padding-top on form labels when they label only text */
@ -2546,12 +2547,40 @@ li.expanded_subject {
#word-alerts {
list-style-type: none;
width: 295px;
margin-left: 0px;
width: 300px;
margin: auto;
}
.alert-word-item {
margin-bottom: 5px;
padding: 8px;
}
#word-alerts li.alert-word-item:nth-child(odd) {
background: #fdfdfd;
}
#word-alerts li.alert-word-item:nth-child(even) {
background: #f9f9f9;
}
#word-alerts li.alert-word-item:first-child {
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
#word-alerts li.alert-word-item:nth-last-child(2) {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
#word-alerts li.alert-word-item:last-child {
background: none;
margin-top: 8px;
}
#word-alert-settings {
margin-top: 15px;
margin-bottom: 30px;
}
.remove-alert-word,
@ -2586,17 +2615,40 @@ input.edit-alert-word::-webkit-input-placeholder {
}
#bots_list .name {
font-weight: bold;
font-size: 130%;
font-weight: 300;
font-size: 18px;
margin-bottom: 20px;
}
#bots_list .field:after {
content: ':';
}
#bots_list .regenerate_bot_api_key {
padding: 2px;
width: 20px;
height: 20px;
background: #e3e3e3;
color: #666;
position: relative;
top: -2px;
}
#bots_list .regenerate_bot_api_key:hover {
color: #000;
}
#bots_list .edit-bot-buttons {
position: absolute;
right: 20px;
top: 20px;
}
.bot_info .field {
width: 7em;
display: inline-block;
width: 4em;
font-weight: 300;
position: absolute;
}
.edit_bot_form {
@ -2604,24 +2656,22 @@ input.edit-alert-word::-webkit-input-placeholder {
}
.edit_bot_email {
font-weight: bold;
font-weight: 300;
font-size: 18px;
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
div.edit_bot {
border: 1px black solid;
display: none;
padding: 10px;
}
.edit_bot_form .control-label,
#create_bot_form .control-label {
width: 10em;
text-align: left;
margin-right: 3px;
}
#create_bot_button {
margin-left: 24em;
text-align: right;
margin-right: 20px;
}
.edit_bot_avatar_clear_button,
@ -2629,11 +2679,6 @@ div.edit_bot {
display: none;
}
.edit_bot_name,
#create_bot_name {
width: 20em;
}
#create_bot_short_name {
width: 7em;
}
@ -2648,9 +2693,16 @@ div.edit_bot {
}
#bots_list .email .value,
#bots_list .api_key .value {
font-family: monospace;
font-size: 85%;
#bots_list .api_key .api-key-value-and-button {
display: inline-block;
margin-left: 4em;
white-space: -moz-pre-wrap !important;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
}
#onboarding-header {
@ -2760,10 +2812,282 @@ div.edit_bot {
}
#settings {
margin-top: 45px;
margin-top: 55px;
margin-left: 15px;
}
#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;
}
#settings .settings-section .account-settings-form,
#settings .settings-section .new-bot-form,
#settings .settings-section .edit-bot-form-box {
width: 400px;
margin: auto;
}
#settings .settings-section .new-bot-form,
#settings .settings-section .edit-bot-form-box {
margin-top: 35px;
}
#settings .settings-section .new-bot-section-title {
top: 20px;
left: 20px;
}
#settings .settings-section .notification-settings-form {
width: 400px;
margin: auto;
}
#settings .settings-section .account-settings-form .control-label,
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
width: 120px;
}
#settings .settings-section .account-settings-form .controls,
#settings .settings-section .new-bot-form .controls,
#settings .settings-section .edit-bot-form-box .controls {
margin-left: 140px;
}
#settings .settings-section .notification-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 .notification-settings-form .controls input[type='checkbox'] {
margin: 0px;
padding: 0px;
vertical-align: middle;
position: relative;
top: -1px;
}
#settings .settings-section .notification-settings-form .control-label {
float: none;
display: inline-block;
vertical-align: middle;
margin: 0px;
padding: 0px;
line-height: 30px;
width: 200px;
}
#settings .settings-section .notification-settings-form .notification-submission {
margin-left: 140px;
}
#settings .notification-settings-form .notification-settings-note {
margin-left: 110px;
width: 250px;
font-size: 13px;
line-height: 14px;
margin-top: 15px;
margin-bottom: 20px;
}
#settings .bot-settings-note {
margin-left: 38px;
font-size: 13px;
}
#settings .bot-information-box,
#settings .add-new-bot-box {
background: #e3e3e3;
padding: 10px;
margin-left: 38px;
margin-right: 38px;
margin-bottom: 15px;
box-shadow: 0px 0px 2px rgba(0,0,0,0.5);
position: relative;
font-size: 14px;
}
#settings .add-new-bot-box {
background: #cbe3cb;
}
#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,
#settings .bot-information-box .api_key {
position: relative;
}
#settings .bot-information-box .image {
border-radius: 20px;
overflow: hidden;
border: 1px solid #676767;
}
#settings .settings-section .api-key-note {
padding: 0px 20px 20px 20px;
}
@media (max-width: 580px) {
#settings .settings-section .new-bot-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 {
margin-left: 110px;
}
}
@media (max-width: 480px) {
#pw_strength {
margin: auto;
}
#settings .settings-section .account-settings-form,
#settings .settings-section .new-bot-form,
#settings .settings-section .notification-settings-form,
#settings .settings-section .edit-bot-form-box {
width: 100%;
}
#settings .settings-section .account-settings-form .control-label,
#settings .settings-section .new-bot-form .control-label,
#settings .settings-section .edit-bot-form-box .control-label {
display: block;
width: 120px;
padding: 0px;
padding-top: 0;
text-align: center;
margin: auto;
float: none;
}
#settings .settings-section .account-settings-form .controls,
#settings .settings-section .new-bot-form .controls,
#settings .settings-section .edit-bot-form-box .controls {
margin: auto;
text-align: center;
}
#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 .edit-bot-form-box .controls button,
#settings .settings-section .new-bot-form .controls input,
#settings .settings-section .edit-bot-form-box .controls input {
margin: auto;
}
#settings .settings-section .new-bot-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;
}
#settings .settings-section .notification-settings-form .notification-submission {
margin: 0px;
width: 100%;
text-align: center;
}
}
#settings .settings-section .settings-section-title {
font-size: 18px;
font-weight: 300;
position: absolute;
left: 12px;
top: 15px;
}
#settings .settings-section .settings-section-icon {
margin-right: 8px;
}
#settings h1 {
font-size: 25px;
font-weight: 300;
}
#settings .settings-icon {
margin-right: 10px;
font-size: 20px;
}
#settings #notification-settings {
margin-top: 15px;
}
#notification-docs {
color: #666666;
font-size: 11px;
position: relative;
top: -6px;
}
#notification-docs:hover {
color: #111111;
}
#settings-status {
text-align: center;
width: 50%;
margin: auto;
margin-bottom: 20px;
}
#home {
margin-top: 41px;
padding-right: 5px;

View File

@ -3,6 +3,6 @@
{{#if editing}}
<input class="edit-alert-word input-medium" type="text" placeholder="Alert Word"></input><button class="btn btn-mini add-alert-word" type="button">Add</button>
{{else}}
{{word}}<button class="btn btn-mini remove-alert-word" type="button">Remove</button>
{{word}}<button class="btn btn-mini remove-alert-word" type="button"><i class="icon-vector-remove"></i></button>
{{/if}}
</li>

View File

@ -1,6 +1,6 @@
<li>
<li class="bot-information-box">
<div class="image">
<img src="{{avatar_url}}" class=avatar />
<img src="{{avatar_url}}" class="avatar" />
</div>
<div class="bot_info">
<div class="name">{{name}}</div>
@ -10,49 +10,55 @@
</div>
<div class="api_key">
<span class="field">API Key</span>
<span class="value">{{api_key}}</span>
<button type="submit" class="btn btn-secondary regenerate_bot_api_key" data-email="{{email}}">
Generate new API Key
<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="Generate new API key" data-email="{{email}}">
<i class="icon-vector-refresh"></i>
</button>
</span>
<div class="api_key_error text-error"></div>
</div>
<button type="submit" class="btn btn-primary open_edit_bot_form">
Edit Bot
<div class="edit-bot-buttons">
<button type="submit" class="btn btn-primary open_edit_bot_form" title="Edit bot">
<i class="icon-vector-pencil"></i>
</button>
<button type="submit" class="btn btn-secondary delete_bot" data-email="{{email}}">
Delete Bot
<button type="submit" class="btn btn-danger delete_bot" title="Delete bot" data-email="{{email}}">
<i class="icon-vector-trash"></i>
</button>
</div>
<div id="bot_delete_error" class="alert alert-error hide"></div>
</div>
<div class='edit_bot'>
<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>
<div class="edit-bot-form-box">
<div class="control-group">
<label for="edit_bot_name" class="control-label">Full name</label>
<input type="text" name="bot_name" class="edit_bot_name required"
maxlength=50 />
<div class="controls">
<input type="text" name="bot_name" class="edit_bot_name required" maxlength=50 />
<div><label for="edit_bot_name" generated="true" class="text-error"></label></div>
<br clear="left" />
</div>
</div>
<div class="control-group">
<label for="bot_avatar_file_input" class="control-label">Avatar</label>
<input type="file" name="bot_avatar_file_input" class="notdisplayed edit_bot_avatar_file_input" value="Upload avatar" />
<div class="controls">
<div class="edit_bot_avatar_file"></div>
<button type="button" class="btn edit_bot_avatar_upload_button">Choose avatar</button>
<button type="button" class="btn edit_bot_avatar_clear_button">Clear avatar</button>
<span class="edit_bot_avatar_file"></span>
</div>
<div><label for="edit_bot_avatar_file" generated="true" class="edit_bot_avatar_error text-error"></label></div>
<br clear="left" />
</div>
<div class="control-group">
<div class="controls">
<input type="submit" class="btn btn-primary edit_bot_button" value="Save" />
<button type="submit" class="btn btn-secondary reset_edit_bot">Cancel</button>
</div>
<div class="edit_bot_spinner"></div>
</div>
</div>
</form>
</div>
</li>

View File

@ -1,15 +1,14 @@
{# Settings tab of the app. #}
<h1>Settings</h1>
{# One text line worth of space #}
<div>&nbsp;</div>
<h1><i class="icon-vector-wrench settings-icon"></i>Settings</h1>
<div class="alert" id="settings-status"></div>
<div id="settings-change-box">
<form action="/json/settings/change" method="post"
class="form-horizontal">{% csrf_token %}
<div id="account-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-user settings-section-icon"></i>Your Account</div>
<div class="account-settings-form">
<div class="control-group" id="name_change_container">
<label for="full_name" class="control-label">Full name</label>
<div class="controls">
@ -19,6 +18,7 @@
</div>
<div class="control-group" id="pw_change_link">
<label for="change_password_button" class="control-label">Password</label>
<div class="controls">
<button class="btn change_password_button" data-dismiss="modal" aria-hidden="true">Change Password</button>
</div>
@ -63,7 +63,7 @@
<div class="form-horizontal">
<div class="control-group">
<label class="control-label">Your picture</label>
<label class="control-label">Avatar</label>
<div class="controls">
<a href="https://en.gravatar.com/emails" target="_blank" class="change_gravatar_button">
<p><img class="img-rounded gravatar-profile user-image-settings"
@ -80,104 +80,116 @@
value="Save changes" class="btn btn-big btn-primary" />
</div>
</div>
</div>
</div>
<hr class="settings_separator">
<h3>Notification settings <i class="tiny icon-vector-question-sign" id="notification-docs"></i></h3>
<div id="notification-settings">
<div id="notification-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-warning-sign settings-section-icon"></i>Notifications <i class="tiny icon-vector-question-sign" id="notification-docs"></i></div>
<div class="notification-settings-form">
<div class="control-group">
<label for="enable_desktop_notifications" class="control-label">
Desktop
notifications </label>
<div class="controls">
<input type="checkbox" name="enable_desktop_notifications" id="enable_desktop_notifications"
{% if user_profile.enable_desktop_notifications %}
checked="yes"
{% endif %} />
</div>
<label for="enable_desktop_notifications" class="control-label">
Desktop notifications
</label>
</div>
<p>Change notification settings for individual streams on
your <a href="/#subscriptions">Streams page</a>.</p>
<div class="control-group">
<label for="enable_sounds" class="control-label">
Audible notifications</label>
<div class="controls">
<input type="checkbox" name="enable_sounds" id="enable_sounds"
{% if user_profile.enable_sounds %}
checked="yes"
{% endif %} />
</div>
<label for="enable_sounds" class="control-label">
Audible notifications
</label>
</div>
<div class="control-group">
<label for="enable_offline_email_notifications" class="control-label">
Email notifications when offline</label>
<div class="controls">
<input type="checkbox" name="enable_offline_email_notifications" id="enable_offline_email_notifications"
{% if user_profile.enable_offline_email_notifications %}
checked="yes"
{% endif %} />
</div>
<label for="enable_offline_email_notifications" class="control-label">
Email notifications when offline
</label>
</div>
<p class="notification-settings-note">Change notification settings for individual streams on your <a href="/#subscriptions">Streams page</a>.</p>
<div class="control-group">
<div class="controls">
<div class="controls notification-submission">
<input type="submit" name="change_settings" value="Save changes" class="btn btn-big btn-primary" />
</div>
</div>
</div>
</div>
</form>
</div>
<hr class="settings_separator" />
<h3>Your bots</h3>
<p>Looking for our <a href="/integrations">Integrations</a>
or <a href="/api">API</a> documentation?</p>
<div id="bot-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-github settings-section-icon"></i>Your Bots</div>
<div class="bot-settings-form">
<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>
<ol id="bots_list">
</ol>
<form id="create_bot_form" class="form-horizontal">
<div id="bot_table_error" class="alert alert-error hide"></div>
<h4>Add new bot</h4>
<p>
<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="new-bot-form">
<div class="control-group">
<label for="create_bot_name" class="control-label">Full name</label>
<input type="text" name="bot_name" id="create_bot_name" class="required"
maxlength=100 placeholder="Full Bot Name" value="" />
<div><label for="create_bot_name" generated="true" class="text-error"></label></div>
</p>
<p>
</div>
<div class="control-group">
<label for="bot_short_name" class="control-label">Username</label>
<input type="text" name="bot_short_name" id="create_bot_short_name" class="required bot_local_part"
placeholder="bot_user_name" value="" />-bot@{{ user_profile.realm.domain }}
<div><label for="create_bot_short_name" generated="true" class="text-error"></label></div>
</p>
<p>
<label for="bot_avatar_file_input" class="control-label"></label> <!-- for spacing -->
</div>
<div class="control-group">
<div class="controls">
<div id="bot_avatar_file"></div>
<input type="file" name="bot_avatar_file_input" class="notdisplayed" id="bot_avatar_file_input" value="Upload avatar" />
<button class="btn" id="bot_avatar_clear_button">Clear avatar</button>
<button class="btn" id="bot_avatar_upload_button">Customize avatar</button> (Optional)
<span id="bot_avatar_file"></span>
</div>
</div>
</p>
<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="Create Bot" />
</div>
</div>
<div id="create_bot_spinner"></div>
</div>
</div>
</form>
<hr class="settings_separator" />
<div class="form-horizontal" id="api_key_button_box">
<p class="small">For most bots using the API, you'll want to give each bot
<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
want to write a bot that can e.g. read your own private
want to write a bot that can access your own private
messages, you should use your personal API key.</p>
<div class="controls">
<div class="control-group">
<button class="btn" id="api_key_button">Show/change your API key</button>
</div>
</div>
@ -187,17 +199,13 @@
<form action="/json/fetch_api_key" method="post" class="form-horizontal">{% csrf_token %}
<div class="control-group">
<label for="password" class="control-label">Current password</label>
<div class="controls">
<input type="password" autocomplete="off"
name="password" id="get_api_key_password" value="" />
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" name="view_api_key" value="Get API key"
class="btn btn-primary" />
</div>
</div>
</form>
</div>
<div id="show_api_key_box">
@ -210,13 +218,12 @@
</div>
</div>
</div>
</div>
<hr class="settings_separator">
<div id='word-alert-area'>
<h3>Custom Word Alerts</h3>
<div id="word-alert-settings" class="settings-section">
<div class="settings-section-title"><i class="icon-vector-book settings-section-icon"></i>Custom Word Alerts</div>
<ul id="word-alerts">
</ul>
</div>