Several attachment changes

- Use an "Add File" button at the bottom of the dropzone instead of clicking directly on the dropzone
- Adjust layout to hopefully fix issue with long file names (haven't tested yet)
- Show percentage in percentage bar
- Fix issue where percentage bar would still animate even after upload finished
merge-requests/15/head
Mike Koch 8 years ago
parent 243d72d602
commit fcf54ac9ca

@ -331,4 +331,10 @@ div.setupButtons {
.rate {
margin: 0;
}
.fileinput-button {
width: 100%;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

@ -176,18 +176,22 @@ function output_dropzone_window() {
<div class="table table-striped" class="files" id="previews" style="display:none">
<div id="template" class="file-row">
<!-- This is used as the file preview template -->
<div>
<span class="preview"><img data-dz-thumbnail /></span>
</div>
<div class="row">
<div class="col-md-4 col-sm-12">
<p class="name" data-dz-name></p>
<i class="fa fa-trash fa-2x" style="color: gray; cursor: pointer" title="Remove file" data-dz-remove></i>
<div class="col-md-4">
<span class="preview"><img data-dz-thumbnail></span>
</div>
<div class="col-md-8 col-sm-12">
<p class="size" data-dz-size></p>
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" id="total-progress">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div>
<div class="col-md-8">
<div class="row">
<p class="name" data-dz-name></p>
<i class="fa fa-trash fa-2x" style="color: gray; cursor: pointer" title="Remove file" data-dz-remove></i>
<span class="size" data-dz-size></span>
</div>
<div class="row">
<div class="progress progress-striped active" role="progressbar" id="total-progress">
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress>
<span id="percentage"></span>
</div>
</div>
</div>
</div>
</div>
@ -229,14 +233,19 @@ function display_dropzone_field($url, $id = 'filedrop') {
// Remove the attachment from the database and the filesystem.
removeAttachment(file['databaseId']);
});
this.on('queuecomplete', function(progress) {
this.on('complete', function(file) {
// Stop animating if complete.
$('#total-progress').removeClass('active');
$(file.previewTemplate).find('#total-progress').removeClass('active');
});
this.on('queuecomplete', function() {
$('input[type=\"submit\"]').attr('disabled', false);
});
this.on('processing', function() {
$('input[type=\"submit\"]').attr('disabled', true);
});
this.on('uploadprogress', function(file, percentage) {
$(file.previewTemplate).find('#percentage').text(percentage + '%');
});
},
paramName: 'attachment',
url: '" . $url . "',
@ -253,7 +262,8 @@ function display_dropzone_field($url, $id = 'filedrop') {
dictCancelUpload: ".json_encode($hesklang['attachment_cancel']).",
dictCancelUploadConfirmation: ".json_encode($hesklang['attachment_confirm_cancel']).",
dictRemoveFile: ".json_encode($hesklang['attachment_remove']).",
previewTemplate: $('#previews').html()
previewTemplate: $('#previews').html(),
clickable: '.fileinput-button'
};
</script>
";

@ -990,7 +990,7 @@ function print_add_ticket()
?>
</div>
</div>
<button class="btn btn-default btn-xs fileinput-button"><?php echo $hesklang['add_files']; ?></button><br>
<a href="file_limits.php" target="_blank"
onclick="Javascript:hesk_window('file_limits.php',250,500);return false;"><?php echo $hesklang['ful']; ?></a>
</div>

@ -32,7 +32,7 @@ $hesklang['warning_title_case'] = 'Warning';
$hesklang['logs'] = 'Logs';
$hesklang['view_message_log'] = 'View Message Log';
$hesklang['can_view_logs'] = 'Can view message logs';
$hesklang['attachment_viewer_message'] = 'Drag or click here to select files to upload.';
$hesklang['attachment_viewer_message'] = "Drag files here or click the 'Add File' button below to select files to upload.";
$hesklang['attachment_invalid_type_message'] = 'Sorry, but the file type you tried to upload is not allowed.';
$hesklang['attachment_upload_error'] = 'An error occurred when trying to upload. Please try again later.';
$hesklang['attachment_too_large'] = 'This attachment is larger than the max filesize permitted.';
@ -104,6 +104,7 @@ $hesklang['tickets_and_events'] = 'Tickets and events';
$hesklang['tickets_only'] = 'Tickets only';
$hesklang['events_only'] = 'Events only';
$hesklang['events'] = 'Events';
$hesklang['add_files'] = '<i class="fa fa-plus"></i> Add File';
// ADDED OR MODIFIED IN Mods for HESK 2.5.2
$hesklang['manage_statuses'] = 'Manage Statuses';

Loading…
Cancel
Save