Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

bots: Move "Add a new bot" to its own tab in settings UI. 

"Add a new bot" UI used to be common in "Active bots" and
"Inactive bots". "Add a new bot" UI was below the list of all
active/inactive bots.

If there were more than a few bots was more than four, then the user
had to scroll down the entire list of bots to "Add a new bot", which
was annoying.  This new model makes the UI look cleaner as well.
This commit is contained in:
Abhijeet Kaur 2017-06-28 21:38:53 -08:00 committed by Tim Abbott
parent 155f3d42c8
commit 343cb20d57
2 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
static/js/settings_bots.js
View File

@ -46,10 +46,16 @@ function render_bots() {
});
});
if ($("#bots_lists_navbar .active-bots-tab").hasClass("active")) {
if ($("#bots_lists_navbar .add-a-new-bot-tab").hasClass("active")) {
$("#add-a-new-bot-form").show();
$("#active_bots_list").hide();
$("#inactive_bots_list").hide();
} else if ($("#bots_lists_navbar .active-bots-tab").hasClass("active")) {
$("#add-a-new-bot-form").hide();
$("#active_bots_list").show();
$("#inactive_bots_list").hide();
} else {
$("#add-a-new-bot-form").hide();
$("#active_bots_list").hide();
$("#inactive_bots_list").show();
}
@ -331,12 +337,26 @@ exports.set_up = function () {
));
});
$("#bots_lists_navbar .add-a-new-bot-tab").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#bots_lists_navbar .add-a-new-bot-tab").addClass("active");
$("#bots_lists_navbar .active-bots-tab").removeClass("active");
$("#bots_lists_navbar .inactive-bots-tab").removeClass("active");
$("#add-a-new-bot-form").show();
$("#active_bots_list").hide();
$("#inactive_bots_list").hide();
});
$("#bots_lists_navbar .active-bots-tab").click(function (e) {
e.preventDefault();
e.stopPropagation();
$("#bots_lists_navbar .add-a-new-bot-tab").removeClass("active");
$("#bots_lists_navbar .active-bots-tab").addClass("active");
$("#bots_lists_navbar .inactive-bots-tab").removeClass("active");
$("#add-a-new-bot-form").hide();
$("#active_bots_list").show();
$("#inactive_bots_list").hide();
});
@ -345,8 +365,10 @@ exports.set_up = function () {
e.preventDefault();
e.stopPropagation();
$("#bots_lists_navbar .add-a-new-bot-tab").removeClass("active");
$("#bots_lists_navbar .active-bots-tab").removeClass("active");
$("#bots_lists_navbar .inactive-bots-tab").addClass("active");
$("#add-a-new-bot-form").hide();
$("#active_bots_list").hide();
$("#inactive_bots_list").show();
});

12
static/templates/settings/bot-settings.handlebars
View File

@ -12,7 +12,8 @@
</div>
<ul class="nav nav-tabs nav-justified" id="bots_lists_navbar">
<li class="active active-bots-tab"><a>{{t "Active bots" }}</a></li>
<li class="active add-a-new-bot-tab"><a>{{t "Add a new bot" }}</a></li>
<li class="active-bots-tab"><a>{{t "Active bots" }}</a></li>
<li class="inactive-bots-tab"><a>{{t "Inactive bots" }}</a></li>
</ul>
@ -24,9 +25,8 @@
<div id="bot_table_error" class="alert alert-error hide"></div>
<div class="add-new-bot-box grey-bg">
<div id="add-a-new-bot-form">
<form id="create_bot_form" class="form-horizontal no-padding">
<h4 class="new-bot-section-title light no-margin">{{t "Add a new bot" }}</h4>
<div class="new-bot-form">
<div class="input-group">
<label for="bot_type">
@ -64,13 +64,13 @@
<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="button rounded small btn-danger display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
<button class="button rounded" id="bot_avatar_upload_button">{{t "Customize avatar" }}</button> ({{t "Optional" }})
<button class="button white rounded small btn-danger display-none" id="bot_avatar_clear_button">{{t "Clear avatar" }}</button>
<button class="button white rounded" 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>
<button type="submit" class="button rounded sea-green" id="create_bot_button">
<button type="submit" class="button white rounded sea-green" id="create_bot_button">
{{t 'Create bot' }}
</button>
</div>