diff --git a/css/osticket.css b/css/osticket.css index fcf145d59b1b646e5066a9851d773de75c7da524..87e6c6aed4b382095e42199f41a00f35bea32621 100644 --- a/css/osticket.css +++ b/css/osticket.css @@ -27,3 +27,19 @@ .pull-right { float: right; } + +.non-local-image { + display: inline-block; + border: 5px dashed #eee; +} + +.non-local-image:after { + background: url(../assets/default/images/logo.png) center left no-repeat; + background-size: cover; + content: ""; + z-index: -1; + width: 100%; + height: 100%; + display: block; + opacity: 0.3; +} diff --git a/include/client/view.inc.php b/include/client/view.inc.php index 0b6950c395c6356955b98a36ad301d6623c03bb5..f85cff8daeeb59620f5d188978b7aa2ba1a0ba51 100644 --- a/include/client/view.inc.php +++ b/include/client/view.inc.php @@ -71,9 +71,9 @@ if($ticket->getThreadCount() && ($thread=$ticket->getClientThread())) { if($entry['thread_type']=='R' && ($cfg->hideStaffName() || !$entry['staff_id'])) $poster = ' '; ?> - <table class="<?php echo $threadType[$entry['thread_type']]; ?>" cellspacing="0" cellpadding="1" width="800" border="0"> - <tr><th><?php echo Format::db_datetime($entry['created']); ?> <span><?php echo $poster; ?></span></th></tr> - <tr><td class="thread-body"><?php echo Format::display($entry['body']); ?></td></tr> + <table class="thread-entry <?php echo $threadType[$entry['thread_type']]; ?>" cellspacing="0" cellpadding="1" width="800" border="0"> + <tr><th><?php echo Format::db_datetime($entry['created']); ?> <span class="textra"></span><span><?php echo $poster; ?></span></th></tr> + <tr><td class="thread-body"><?php echo Format::viewableImages(Format::display($entry['body'])); ?></td></tr> <?php if($entry['attachments'] && ($tentry=$ticket->getThreadEntry($entry['id'])) @@ -105,7 +105,7 @@ if($ticket->getThreadCount() && ($thread=$ticket->getClientThread())) { <h2>Post a Reply</h2> <input type="hidden" name="id" value="<?php echo $ticket->getExtId(); ?>"> <input type="hidden" name="a" value="reply"> - <table border="0" cellspacing="0" cellpadding="3" width="800"> + <table border="0" cellspacing="0" cellpadding="3" style="width:100%"> <tr> <td colspan="2"> <?php diff --git a/js/osticket.js b/js/osticket.js index 58cb765eb2027ae8a242d2dbc774f14fe2a37e61..1e8db97d4649503770a8f94f7c4f148ecb49bf99 100644 --- a/js/osticket.js +++ b/js/osticket.js @@ -130,4 +130,60 @@ showImagesInline = function(urls, thread_id) { e.appendTo(caption); } }); + + var showNonLocalImage = function(div) { + var $div = $(div), + $img = $div.append($('<img>') + .attr('src', $div.data('src')) + .attr('alt', $div.attr('alt')) + .attr('title', $div.attr('title')) + .attr('style', $div.data('style')) + ); + if ($div.attr('width')) + $img.width($div.attr('width')); + if ($div.attr('height')) + $img.height($div.attr('height')); + }; + + // Optionally show external images + $('.thread-entry').each(function(i, te) { + var extra = $(te).find('.textra'), + imgs = $(te).find('div.non-local-image[data-src]'); + if (!extra) return; + if (!imgs.length) return; + extra.append($('<a>') + .addClass("action-button show-images") + .css({'font-weight':'normal'}) + .text(' Show Images') + .click(function(ev) { + imgs.each(function(i, img) { + showNonLocalImage(img); + $(img).removeClass('non-local-image') + // Remove placeholder sizing + .css({'display':'inline-block'}) + .width('auto') + .height('auto') + .removeAttr('width') + .removeAttr('height'); + extra.find('.show-images').hide(); + }); + }) + .prepend($('<i>') + .addClass('icon-picture') + ) + ); + imgs.each(function(i, img) { + var $img = $(img); + // Save a copy of the original styling + $img.data('style', $img.attr('style')); + $img.removeAttr('style'); + // If the image has a 'height' attribute, use it, otherwise, use + // 40px + $img.height(($img.attr('height') || '40') + 'px'); + // Ensure the image placeholder is visible width-wise + if (!$img.width()) + $img.width(($img.attr('width') || '80') + 'px'); + // TODO: Add a hover-button to show just one image + }); + }); } diff --git a/js/redactor-osticket.js b/js/redactor-osticket.js index 96c8204c66ee97b98e96e2f369d63c33445ce538..8cb4de81737beb78afbc895e8d980b7b7fd39064 100644 --- a/js/redactor-osticket.js +++ b/js/redactor-osticket.js @@ -76,7 +76,6 @@ RedactorPlugins.draft = { var self = this; getConfig().then(function(c) { - console.log(c); if (c.allow_attachments) { self.opts.clipboardUploadUrl = self.opts.imageUpload =