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

Change bots actions to sidebar.

Browse Source 
This changes the bot actions to a sidebar that resides in the settings
overlay.
This commit is contained in:
Brock Whittaker
2017-02-28 16:31:33 -08:00
committed by Tim Abbott
parent e9e722d48b
commit b8f2685b18
8 changed files with 195 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
static/js/avatar.js
View File

@@ -25,15 +25,15 @@ exports.build_bot_create_widget = function () {
);
};
exports.build_bot_edit_widget = function (li) {
exports.build_bot_edit_widget = function (target) {
var get_file_input = function () {
return li.find('.edit_bot_avatar_file_input');
return target.find('.edit_bot_avatar_file_input');
};
var file_name_field = li.find('.edit_bot_avatar_file');
var input_error = li.find('.edit_bot_avatar_error');
var clear_button = li.find('.edit_bot_avatar_clear_button');
var upload_button = li.find('.edit_bot_avatar_upload_button');
var file_name_field = target.find('.edit_bot_avatar_file');
var input_error = target.find('.edit_bot_avatar_error');
var clear_button = target.find('.edit_bot_avatar_clear_button');
var upload_button = target.find('.edit_bot_avatar_upload_button');
return upload_widget.build_widget(
get_file_input,

71
static/js/settings.js
View File

@@ -148,6 +148,48 @@ exports.generate_zuliprc_content = function (email, api_key) {
"\n";
};
$("body").ready(function () {
var $sidebar = $(".form-sidebar");
var $targets = $sidebar.find("[data-target]");
var $title = $sidebar.find(".title h1");
var is_open = false;
var close_sidebar = function () {
$sidebar.removeClass("show");
is_open = false;
};
exports.trigger_sidebar = function (target) {
$targets.hide();
var $target = $(".form-sidebar").find("[data-target='" + target + "']");
$title.text($target.attr("data-title"));
$target.show();
$sidebar.addClass("show");
is_open = true;
};
$(".form-sidebar .exit").click(function (e) {
close_sidebar();
e.stopPropagation();
});
$("body").click(function (e) {
if (is_open && !$(e.target).within(".form-sidebar")) {
close_sidebar();
}
});
$("body").on("click", "[data-sidebar-form]", function (e) {
exports.trigger_sidebar($(this).attr("data-sidebar-form"));
e.stopPropagation();
});
$("body").on("click", "[data-sidebar-form-close]", close_sidebar);
});
function _setup_page() {
// To build the edit bot streams dropdown we need both the bot and stream
// API results. To prevent a race streams will be initialized to a promise
@@ -718,34 +760,36 @@ function _setup_page() {
var image_version = 0;
var avatar_widget = avatar.build_bot_edit_widget($("#settings_page"));
$("#bots_list").on("click", "button.open_edit_bot_form", function (e) {
var users_list = people.get_realm_persons().filter(function (person) {
return !person.is_bot;
});
var li = $(e.currentTarget).closest('li');
var edit_div = li.find('div.edit_bot');
var form = li.find('.edit_bot_form');
var form = $('#settings_page .edit_bot_form');
var image = li.find(".image");
var bot_info = li.find(".bot_info");
var bot_info = li;
var reset_edit_bot = li.find(".reset_edit_bot");
var owner_select = $(templates.render("bot_owner_select", {users_list:users_list}));
var old_full_name = bot_info.find(".name").text();
var old_owner = bot_data.get(bot_info.find(".email .value").text()).owner;
form.find(".edit_bot_name").attr('value', old_full_name);
form.find(".edit-bot-owner .select-form").append(owner_select);
form.find(".edit-bot-owner select").val(old_owner);
var bot_email = bot_info.find(".email .value").text();
image.hide();
bot_info.hide();
edit_div.show();
$("#settings_page .edit_bot .edit_bot_name").val(old_full_name);
$("#settings_page .edit_bot .select-form").text("").append(owner_select);
$("#settings_page .edit_bot .edit-bot-owner select").val(old_owner);
$("#settings_page .edit_bot_form").attr("data-email", bot_email);
$(".edit_bot_email").text(bot_email);
avatar_widget.clear();
var avatar_widget = avatar.build_bot_edit_widget(li);
function show_row_again() {
image.show();
bot_info.show();
edit_div.hide();
avatar_widget.close();
}
reset_edit_bot.click(function (event) {
@@ -763,10 +807,10 @@ function _setup_page() {
errors.hide();
},
submitHandler: function () {
var email = form.data('email');
var email = form.attr('data-email');
var full_name = form.find('.edit_bot_name').val();
var bot_owner = form.find('.edit-bot-owner select').val();
var file_input = li.find('.edit_bot_avatar_file_input');
var file_input = $(".edit_bot").find('.edit_bot_avatar_file_input');
var default_sending_stream = form.find('.edit_bot_default_sending_stream').val();
var default_events_register_stream = form.find('.edit_bot_default_events_register_stream').val();
var spinner = form.find('.edit_bot_spinner');
@@ -793,8 +837,9 @@ function _setup_page() {
loading.destroy_indicator(spinner);
errors.hide();
edit_button.show();
owner_select.remove();
show_row_again();
avatar_widget.clear();
bot_info.find('.name').text(full_name);
if (data.avatar_url) {
// Note that the avatar_url won't actually change on the back end

4
static/js/setup.js
View File

@@ -39,6 +39,10 @@ $(function () {
}
return this;
};
$.fn.within = function (sel) {
return ($(this).is(sel) || $(this).closest(sel).length);
};
}
});

5
static/styles/components.css
View File

@@ -251,6 +251,11 @@
opacity: 0.3;
}
.new-style input[type=text] {
border-radius: 5px;
box-shadow: none;
}
.new-style a.no-style {
color: inherit;
}

72
static/styles/settings.css
View File

@@ -568,9 +568,14 @@ input[type=checkbox].inline-block {
color: #aaa;
}
.settings-section .edit_bot_form {
.edit_bot h3 {
margin: 0px;
font-weight: 400;
}
.edit_bot_form {
font-size: 100%;
margin: 0px 10px;
margin: 0px;
padding: 0px;
}
@@ -586,14 +591,14 @@ input[type=checkbox].inline-block {
}
.edit_bot_email {
font-weight: 600;
font-weight: 400;
font-size: 18px;
text-align: left;
margin-top: 10px;
margin-top: 0px;
margin-bottom: 10px;
overflow: hidden;
max-height: 1em;
max-height: 1.1em;
text-overflow: ellipsis;
white-space: pre;
}
@@ -770,6 +775,63 @@ input[type=checkbox].inline-block {
overflow-y: auto;
}
#settings_page .form-sidebar {
position: absolute;
top: 45px;
right: 0px;
transform: translateX(301px);
width: 300px;
height: calc(100% - 45px);
background-color: #fff;
border-left: 1px solid #ddd;
transition: all 0.3s ease;
}
#settings_page .form-sidebar.show {
transform: translateX(0px);
}
#settings_page .form-sidebar input[type=text] {
width: calc(100% - 10px - 4px);
}
#settings_page .form-sidebar input[type=submit],
#settings_page .form-sidebar button {
border-radius: 4px;
outline: none;
}
#settings_page .form-sidebar select {
width: 100%;
}
#settings_page .form-sidebar .title,
#settings_page .form-sidebar .content {
padding: 20px;
}
#settings_page .form-sidebar .title {
background-color: #fafafa;
padding: 10px 20px;
border-bottom: 1px solid #ddd;
}
#settings_page .form-sidebar .title h1 {
display: inline-block;
font-size: 1.3rem;
margin: 0px;
}
#settings_page .form-sidebar .title .exit {
float: right;
font-size: 2rem;
font-weight: 300;
margin-top: 11px;
cursor: pointer;
}
#settings_page .sidebar .header {
height: auto;
position: relative;

44
static/templates/bot_avatar_row.handlebars
View File

@@ -4,14 +4,14 @@
<div class="details">
<div class="name">{{name}}</div>
<div class="edit-bot-buttons">
<button type="submit" class="btn open_edit_bot_form" title="{{t 'Edit bot' }}" data-email="{{email}}">
<i class="icon-vector-pencil danger-red"></i>
<button type="submit" class="btn open_edit_bot_form" data-sidebar-form="edit-bot" title="{{t 'Edit bot' }}" data-email="{{email}}">
<i class="icon-vector-pencil blue"></i>
</button>
<a type="submit" download="{{zuliprc}}" class="btn download_bot_zuliprc" title="{{t 'Download .zuliprc' }}" data-email="{{email}}">
<i class="icon-vector-download-alt sea-green"></i>
</a>
<button type="submit" class="btn delete_bot" title="{{t 'Delete bot' }}" data-email="{{email}}">
<i class="icon-vector-trash blue"></i>
<i class="icon-vector-trash danger-red"></i>
</button>
</div>
</div>
@@ -34,42 +34,4 @@
</div>
<div id="bot_delete_error{{id_suffix}}" class="alert alert-error hide"></div>
</div>
<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>
<div class="edit-bot-form-box">
<div class="">
<label for="edit_bot_name{{id_suffix}}">{{t "Full name" }}</label>
<input type="text" name="bot_name" id="edit_bot_name{{id_suffix}}" class="edit_bot_name required" maxlength=50 />
<div><label for="edit_bot_name{{id_suffix}}" generated="true" class="text-error"></label></div>
</div>
<div class="edit-bot-owner">
<label for="bot_owner_select">{{t "Owner" }}</label>
<div class="select-form"></div>
</div>
<div class=" new-bot-ui">
<label for="edit_bot_default_sending_stream{{id_suffix}}">{{t "Send to stream" }}</label>
<select name="bot_default_sending_stream" class="edit_bot_default_sending_stream" id="edit_bot_default_sending_stream{{id_suffix}}"></select>
</div>
<div class=" new-bot-ui">
<label for="edit_bot_default_events_register_stream{{id_suffix}}">{{t "Listen on" }}</label>
<select name="bot_default_events_register_stream" class="edit_bot_default_events_register_stream" id="edit_bot_default_events_register_stream{{id_suffix}}"></select>
</div>
<div>
<label for="bot_avatar_file_input{{id_suffix}}">Avatar</label>
<input type="file" id="bot_avatar_file_input{{id_suffix}}" name="bot_avatar_file_input" class="notvisible edit_bot_avatar_file_input" value="{{t 'Upload avatar' }}" />
<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 display-none">{{t "Clear avatar" }}</button>
<div><label for="edit_bot_avatar_file{{id_suffix}}" generated="true" class="edit_bot_avatar_error text-error"></label></div>
</div>
<div class="buttons">
<input type="submit" class="btn btn-primary edit_bot_button" value="{{t 'Save' }}" />
<button type="button" class="btn btn-default reset_edit_bot">Cancel</button>
<div class="edit_bot_spinner"></div>
</div>
</div>
</form>
</div>
</li>

50
templates/zerver/settings-sidebar.html Normal file
View File

@@ -0,0 +1,50 @@
<div class="form-sidebar">
<div class="title">
<h1></h1>
<div class="exit">&times;</div>
</div>
<div class="content">
<div class='edit_bot'>
<form class="edit_bot_form form-horizontal" data-target="edit-bot" data-title="{{ _('Edit bot') }}">
<div class="bot_edit_errors alert alert-error hide"></div>
<div class="">
<label>{{ _("Bot Email") }}</label>
<div class="edit_bot_email"></div>
</div>
<div class="edit-bot-form-box">
<div class="">
<label for="edit_bot_name">{{ _("Full name") }}</label>
<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>
</div>
<div class="edit-bot-owner">
<label for="bot_owner_select">{{ _("Owner") }}</label>
<div class="select-form"></div>
</div>
<div class=" new-bot-ui">
<label for="edit_bot_default_sending_stream">{{ _("Send to stream") }}</label>
<select name="bot_default_sending_stream" class="edit_bot_default_sending_stream"></select>
</div>
<div class=" new-bot-ui">
<label for="edit_bot_default_events_register_stream">{{ _("Listen on") }}</label>
<select name="bot_default_events_register_stream" class="edit_bot_default_events_register_stream"></select>
</div>
<div class="avatar-section">
<label for="bot_avatar_file_input">Avatar</label>
<input type="file" name="bot_avatar_file_input" class="notvisible edit_bot_avatar_file_input" value="{{ _('Upload avatar') }}" />
<div class="edit_bot_avatar_file"></div>
<button type="button" class="btn btn-default edit_bot_avatar_upload_button">{{ _("Choose avatar") }}</button>
<button type="button" class="btn btn-default edit_bot_avatar_clear_button display-none">{{ _("Clear avatar") }}</button>
<div><label for="edit_bot_avatar_file" generated="true" class="edit_bot_avatar_error text-error"></label></div>
</div>
<div class="buttons">
<input type="submit" class="btn btn-primary edit_bot_button" value="{{ _('Save') }}" />
<button type="button" class="btn btn-default reset_edit_bot" data-sidebar-form-close>Cancel</button>
<div class="edit_bot_spinner"></div>
</div>
</div>
</form>
</div>
</div>
</div>

2
templates/zerver/settings_overlay.html
View File

@@ -101,5 +101,7 @@
</div>
</div>
{% include "zerver/settings-sidebar.html" %}
</div>
</div>