From d2e110d8304df0a915d65e8472a079c0170936f6 Mon Sep 17 00:00:00 2001
From: Jared Hancock <jared@osticket.com>
Date: Tue, 26 Aug 2014 12:00:30 -0500
Subject: [PATCH] Add hover preview and several css tweaks
---
css/filedrop.css | 12 +++++++++
include/staff/ticket-open.inc.php | 7 +++--
include/staff/ticket-view.inc.php | 13 +++------
js/filedrop.field.js | 25 ++++++++++++-----
scp/js/scp.js | 45 ++++++++++++++++++++-----------
5 files changed, 66 insertions(+), 36 deletions(-)
diff --git a/css/filedrop.css b/css/filedrop.css
index 29c8e28d0..4fde8f1d7 100644
--- a/css/filedrop.css
+++ b/css/filedrop.css
@@ -55,6 +55,18 @@
float: left;
padding-right: 10px;
}
+.redactor_box + .filedrop .dropzone,
+.redactor_box + div > .filedrop .dropzone,
+.redactor_box + div > .filedrop .files {
+ border-top-width: 0;
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+.tooltip-preview,
+.tooltip-preview img {
+ max-width: 300px;
+ max-height: 300px;
+}
/* Bootstrap 3.2 progress-bar */
@-webkit-keyframes progress-bar-stripes {
diff --git a/include/staff/ticket-open.inc.php b/include/staff/ticket-open.inc.php
index 5c225ff72..ea43caa96 100644
--- a/include/staff/ticket-open.inc.php
+++ b/include/staff/ticket-open.inc.php
@@ -302,18 +302,17 @@ if ($_POST)
placeholder="<?php echo __('Initial response for the ticket'); ?>"
name="response" id="response" cols="21" rows="8"
style="width:80%;"><?php echo $info['response']; ?></textarea>
- <table border="0" cellspacing="0" cellpadding="2" width="100%">
<?php
if($cfg->allowAttachments()) { ?>
- <tr><td class="attachments" colspan="2">
+ <div class="attachments">
<?php
print $response_form->getField('attachments')->render();
?>
- </td>
- </tr>
+ </div>
<?php
} ?>
+ <table border="0" cellspacing="0" cellpadding="2" width="100%">
<tr>
<td width="100"><?php echo __('Ticket Status');?>:</td>
<td>
diff --git a/include/staff/ticket-view.inc.php b/include/staff/ticket-view.inc.php
index f2e6387d2..0c66a9859 100644
--- a/include/staff/ticket-view.inc.php
+++ b/include/staff/ticket-view.inc.php
@@ -577,22 +577,17 @@ $tcount+= $ticket->getNumNotes();
rows="9" wrap="soft"
class="richtext ifhtml draft draft-delete"><?php
echo $info['response']; ?></textarea>
- </td>
- </tr>
<?php
if($cfg->allowAttachments()) { ?>
- <tr>
- <td width="120" style="vertical-align:top">
- <label for="attachment"><?php echo __('Attachments');?>:</label>
- </td>
- <td id="reply_form_attachments" class="attachments">
+ <div id="reply_form_attachments" class="attachments">
<?php
print $response_form->getField('attachments')->render();
?>
- </td>
- </tr>
+ </div>
<?php
}?>
+ </td>
+ </tr>
<tr>
<td width="120">
<label for="signature" class="left"><?php echo __('Signature');?>:</label>
diff --git a/js/filedrop.field.js b/js/filedrop.field.js
index 3d88ccef1..5af121c85 100644
--- a/js/filedrop.field.js
+++ b/js/filedrop.field.js
@@ -13,11 +13,14 @@
dragOver: $.proxy(this.dragOver, this),
drop: $.proxy(this.drop, this),
beforeSend: $.proxy(this.beforeSend, this),
+ beforeEach: $.proxy(this.beforeEach, this),
error: $.proxy(this.handleError, this)
};
this.options = $.extend({}, $.fn.filedropbox.defaults, events, options);
this.$element.filedrop(this.options);
+ if (!window.FileReader)
+ $('input[type=file]', this.$element).attr('name', this.options.name).show();
(this.options.files || []).forEach($.proxy(this.addNode, this));
};
@@ -28,15 +31,23 @@
dragOver: function(box, e) {
this.$element.css('background-color', 'rgba(0, 0, 0, 0.3)');
},
- beforeSend: function (file, i, reader) {
+ beforeEach: function (file) {
var node = this.addNode(file).data('file', file);
node.find('.progress').show();
- node.find('.progress-bar').addClass('progress-bar-striped active')
-
- if (file.type.indexOf('image/') === 0 && file.size < 1e6) {
- node.find('.preview').attr('src', 'data:' + file.type + ';base64,' +
- btoa(reader.result));
- }
+ node.find('.progress-bar').width('100%').addClass('progress-bar-striped active');
+ },
+ beforeSend: function (file, i, reader) {
+ this.uploads.some(function(e) {
+ if (e.data('file') == file) {
+ if (file.type.indexOf('image/') === 0 && file.size < 1e6) {
+ e.find('.preview').attr('src', 'data:' + file.type + ';base64,' +
+ btoa(reader.result)).tooltip({items:'img',
+ tooltipClass: 'tooltip-preview',
+ content:function(){ return $(this).clone().wrap('<div>'); }});
+ }
+ return true;
+ }
+ });
},
speedUpdated: function(i, file, speed) {
var that = this;
diff --git a/scp/js/scp.js b/scp/js/scp.js
index 74a92a23d..76ec812f0 100644
--- a/scp/js/scp.js
+++ b/scp/js/scp.js
@@ -93,12 +93,12 @@ var scp_prep = function() {
$('.dialog#confirm-action').delegate('input.confirm', 'click.confirm', function(e) {
e.preventDefault();
$('.dialog#confirm-action').hide();
- $('#overlay').hide();
+ $.toggleOverlay(false);
$('input#action', formObj).val(action);
formObj.submit();
return false;
});
- $('#overlay').show();
+ $.toggleOverlay(true);
$('.dialog#confirm-action .confirm-action').hide();
$('.dialog#confirm-action p#'+this.name+'-confirm')
.show()
@@ -115,7 +115,7 @@ var scp_prep = function() {
var action = $(this).attr('href').substr(1, $(this).attr('href').length);
$('input#action', $dialog).val(action);
- $('#overlay').show();
+ $.toggleOverlay(true);
$('.confirm-action', $dialog).hide();
$('p'+$(this).attr('href')+'-confirm', $dialog)
.show()
@@ -333,7 +333,7 @@ var scp_prep = function() {
$('.dialog').delegate('input.close, a.close', 'click', function(e) {
e.preventDefault();
$(this).parents('div.dialog').hide()
- $('#overlay').hide();
+ $.toggleOverlay(false);
return false;
});
@@ -353,7 +353,7 @@ var scp_prep = function() {
$('#go-advanced').click(function(e) {
e.preventDefault();
$('#result-count').html('');
- $('#overlay').show();
+ $.toggleOverlay(true);
$('#advanced-search').show();
});
@@ -513,7 +513,7 @@ $(document).keydown(function(e) {
if (e.keyCode == 27 && !$('#overlay').is(':hidden')) {
$('div.dialog').hide();
- $('#overlay').hide();
+ $.toggleOverlay(false);
e.preventDefault();
e.stopPropagation();
@@ -521,6 +521,20 @@ $(document).keydown(function(e) {
}
});
+$.toggleOverlay = function (show) {
+ if (typeof(show) === 'undefined') {
+ return $.toggleOverlay(!$('#overlay').is(':visible'));
+ }
+ if (show) {
+ $('#overlay').fadeIn();
+ $('body').css('overflow', 'hidden');
+ }
+ else {
+ $('#overlay').fadeOut();
+ $('body').css('overflow', 'auto');
+ }
+};
+
$.dialog = function (url, codes, cb, options) {
options = options||{};
@@ -529,19 +543,17 @@ $.dialog = function (url, codes, cb, options) {
var $popup = $('.dialog#popup');
- $('#overlay').show();
+ $.toggleOverlay(true);
$('div.body', $popup).empty().hide();
- $('div#popup-loading', $popup).show()
+ $('div#popup-loading', $popup).slideDown()
.find('h1').css({'margin-top':function() { return $popup.height()/3-$(this).height()/3}});
- $popup.show();
+ $popup.slideDown();
$('div.body', $popup).load(url, function () {
$('div#popup-loading', $popup).hide();
- $('#overlay').show();
- $('div.body', $popup).show({
- duration: 0,
+ $('div.body', $popup).slideDown({
+ duration: 200,
complete: function() { if (options.onshow) options.onshow(); }
});
- $popup.show();
$(document).off('.dialog');
$(document).on('submit.dialog', '.dialog#popup form', function(e) {
e.preventDefault();
@@ -556,12 +568,13 @@ $.dialog = function (url, codes, cb, options) {
success: function(resp, status, xhr) {
if (xhr && xhr.status && codes
&& $.inArray(xhr.status, codes) != -1) {
- $('div.body', $popup).empty();
+ $.toggleOverlay(false);
$popup.hide();
- $('#overlay').hide();
+ $('div.body', $popup).empty();
if(cb) cb(xhr);
} else {
$('div.body', $popup).html(resp);
+ $popup.effect('shake');
$('#msg_notice, #msg_error', $popup).delay(5000).slideUp();
}
}
@@ -579,7 +592,7 @@ $.dialog = function (url, codes, cb, options) {
$.sysAlert = function (title, msg, cb) {
var $dialog = $('.dialog#alert');
if ($dialog.length) {
- $('#overlay').show();
+ $.toggleOverlay(true);
$('#title', $dialog).html(title);
$('#body', $dialog).html(msg);
$dialog.show();
--
GitLab