diff --git a/static/js/avatar.js b/static/js/avatar.js index 5bacb8cf6c..624cb9e2cf 100644 --- a/static/js/avatar.js +++ b/static/js/avatar.js @@ -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, diff --git a/static/js/settings.js b/static/js/settings.js index a56600fc2f..0737fb4c70 100644 --- a/static/js/settings.js +++ b/static/js/settings.js @@ -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 diff --git a/static/js/setup.js b/static/js/setup.js index 4c6c368977..e832737c2b 100644 --- a/static/js/setup.js +++ b/static/js/setup.js @@ -39,6 +39,10 @@ $(function () { } return this; }; + + $.fn.within = function (sel) { + return ($(this).is(sel) || $(this).closest(sel).length); + }; } }); diff --git a/static/styles/components.css b/static/styles/components.css index 801f338421..cd4aaf9892 100644 --- a/static/styles/components.css +++ b/static/styles/components.css @@ -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; } diff --git a/static/styles/settings.css b/static/styles/settings.css index f18ba00788..2713a0b9d8 100644 --- a/static/styles/settings.css +++ b/static/styles/settings.css @@ -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; diff --git a/static/templates/bot_avatar_row.handlebars b/static/templates/bot_avatar_row.handlebars index 846cbc6023..0c08fe0b27 100644 --- a/static/templates/bot_avatar_row.handlebars +++ b/static/templates/bot_avatar_row.handlebars @@ -4,14 +4,14 @@
{{name}}
-
@@ -34,42 +34,4 @@
- diff --git a/templates/zerver/settings-sidebar.html b/templates/zerver/settings-sidebar.html new file mode 100644 index 0000000000..3346ae2056 --- /dev/null +++ b/templates/zerver/settings-sidebar.html @@ -0,0 +1,50 @@ +
+
+

+
×
+
+ +
+
+
+
+
+ +
+
+
+
+ + +
+
+
+ +
+
+
+ + +
+
+ + +
+
+ + +
+ + +
+
+
+ + + +
+
+
+
+
+
diff --git a/templates/zerver/settings_overlay.html b/templates/zerver/settings_overlay.html index 9a9ef8e7ef..c5dcc46b65 100644 --- a/templates/zerver/settings_overlay.html +++ b/templates/zerver/settings_overlay.html @@ -101,5 +101,7 @@ + + {% include "zerver/settings-sidebar.html" %}