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

Use our own buttons and text field for uploading bot avatars.

Browse Source 
(The file-input widgets that come with browsers are ugly and
nonstandard across browsers, so it is a common technique to
have your own button that controls the file upload, and it
delegates to a hidden copy of the browser file-input widget.
We also allow you to clear the file.)

(imported from commit b55ef655e75746330dc3cc396cb908670e5019cc)
This commit is contained in:
Steve Howell
2013-06-28 11:41:18 -04:00
parent b04bd4a1ad
commit 1e246ba32d
3 changed files with 32 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
templates/zephyr/settings.html
View File

@@ -158,7 +158,10 @@
</p> </p>
<p> <p>
<label for="bot_avatar_file_input" class="control-label">Optional avatar</label> <label for="bot_avatar_file_input" class="control-label">Optional avatar</label>
<input type="file" name="bot_avatar_file_input" id="bot_avatar_file_input" value="Upload avatar" /> <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">Choose avatar</button>
<span id="bot_avatar_file"></span>
</p> </p>
<p> <p>
<div id="bot_avatar_file_input_error" class="text-error"></div> <div id="bot_avatar_file_input_error" class="text-error"></div>

27
zephyr/static/js/settings.js
View File

@@ -47,18 +47,34 @@ $(function () {
}, },
"Please only use characters that are valid in an email address"); "Please only use characters that are valid in an email address");
function accept_bot_avatar_file_input(file) {
$('#bot_avatar_file').text(file.name);
$('#bot_avatar_file_input_error').hide();
$('#bot_avatar_clear_button').show();
$('#bot_avatar_upload_button').hide();
}
function clear_bot_avatar_file_input() { function clear_bot_avatar_file_input() {
var control = $('#bot_avatar_file_input'); var control = $('#bot_avatar_file_input');
var new_control = control.clone(true); var new_control = control.clone(true);
control.replaceWith(new_control); control.replaceWith(new_control);
$('#bot_avatar_file').text('');
$('#bot_avatar_clear_button').hide();
$('#bot_avatar_upload_button').show();
} }
$('#bot_avatar_file_input').on('drop', function(e) { $('#bot_avatar_clear_button').click(function(e) {
clear_bot_avatar_file_input();
e.preventDefault();
});
$('#bot_avatar_upload_button').on('drop', function(e) {
var files = e.dataTransfer.files; var files = e.dataTransfer.files;
if (files === null || files === undefined || files.length === 0) { if (files === null || files === undefined || files.length === 0) {
return false; return false;
} }
this.files = files; $('#bot_avatar_file_input').get(0).files = files;
e.preventDefault(); e.preventDefault();
return false; return false;
}); });
@@ -91,7 +107,7 @@ $(function () {
$('#bot_avatar_file_input_error').show(); $('#bot_avatar_file_input_error').show();
clear_bot_avatar_file_input(); clear_bot_avatar_file_input();
} else { } else {
$('#bot_avatar_file_input_error').hide(); accept_bot_avatar_file_input(file);
} }
} }
else { else {
@@ -99,6 +115,11 @@ $(function () {
} }
}); });
$('#bot_avatar_upload_button').click(function(e) {
$('#bot_avatar_file_input').trigger('click');
e.preventDefault();
});
$('#create_bot_form').validate({ $('#create_bot_form').validate({
errorClass: 'text-error', errorClass: 'text-error',
success: function () { success: function () {

4
zephyr/static/styles/zephyr.css
View File

@@ -1822,6 +1822,10 @@ li.expanded_subject {
margin-left: 24em; margin-left: 24em;
} }
#bot_avatar_clear_button {
display: none;
}
#create_bot_name { #create_bot_name {
width: 20em; width: 20em;
} }