diff --git a/css/osticket.css b/css/osticket.css
index 5ec2e8e295a2dd2c6d555e62f0c162c63a838b29..33df7f638bbca94cc17faf22d9cbe2c7577afb68 100644
--- a/css/osticket.css
+++ b/css/osticket.css
@@ -30,11 +30,12 @@
.non-local-image {
display: inline-block;
- border: 5px dashed #eee;
+ border: 3px dashed #eee;
+ border-radius: 5px;
}
.non-local-image:after {
- background: url(../assets/default/images/logo.png) center left no-repeat;
+ background: url(../logo.php) center center no-repeat;
background-size: cover;
content: "";
z-index: -1;
diff --git a/include/class.format.php b/include/class.format.php
index 96fe09d94ba7751ae037a50138c5ddb7fe7b003d..c77ff0f2817d81265d17f75600d22b59454f2820 100644
--- a/include/class.format.php
+++ b/include/class.format.php
@@ -280,7 +280,7 @@ class Format {
function($match) {
// Drop embedded classes -- they don't refer to ours
$match = preg_replace('/class="[^"]*"/', '', $match);
- return sprintf('<div %s class="non-local-image" data-%s %s></div>',
+ return sprintf('<span %s class="non-local-image" data-%s %s></span>',
$match[1], $match[2], $match[3]);
},
$text);
@@ -354,7 +354,7 @@ class Format {
}
// Images which are external are rewritten to <div
// data-src='url...'/>
- elseif ($e == 'div' && $a && isset($a['data-src']))
+ elseif ($e == 'span' && $a && isset($a['data-src']))
$a['data-src'] = 'l.php?url='.urlencode($a['data-src'])
.'&auth='.$token;
// URLs for videos need to route too
@@ -373,7 +373,7 @@ class Format {
},
'schemes' => 'href: aim, feed, file, ftp, gopher, http, https, irc, mailto, news, nntp, sftp, ssh, telnet; *:file, http, https; src: cid, http, https, data',
'elements' => '*+iframe',
- 'spec' => 'div=data-src,width,height',
+ 'spec' => 'span=data-src,width,height',
);
return Format::html($text, $config);
}
diff --git a/include/client/view.inc.php b/include/client/view.inc.php
index 8e703306c1792a546d3d5de551504bbf7926ed3b..fc0784d9e0ed67a5e22bca80e639877a537c0853 100644
--- a/include/client/view.inc.php
+++ b/include/client/view.inc.php
@@ -100,7 +100,12 @@ if($ticket->getThreadCount() && ($thread=$ticket->getClientThread())) {
$poster = ' ';
?>
<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><th><div>
+<?php echo Format::db_datetime($entry['created']); ?>
+ <span class="textra"></span>
+ <span><?php echo $poster; ?></span>
+ </div>
+ </th></tr>
<tr><td class="thread-body"><div><?php echo Format::viewableImages(Format::display($entry['body'])); ?></div></td></tr>
<?php
if($entry['attachments']
diff --git a/js/osticket.js b/js/osticket.js
index f7d956e51202ebfec06a7d65ed0e1907c8e29415..e3089ab2b25ab18b81439d2253715ee94793073d 100644
--- a/js/osticket.js
+++ b/js/osticket.js
@@ -124,38 +124,6 @@ $(document).ready(function(){
});
return str;
};
-});
-
-showImagesInline = function(urls, thread_id) {
- var selector = (thread_id == undefined)
- ? '.thread-body img[data-cid]'
- : '.thread-body#thread-id-'+thread_id+' img[data-cid]';
- $(selector).each(function(i, el) {
- var cid = $(el).data('cid').toLowerCase(),
- info = urls[cid],
- e = $(el);
- if (info) {
- // Add a hover effect with the filename
- var timeout, caption = $('<div class="image-hover">')
- .css({'float':e.css('float')});
- e.wrap(caption).parent()
- .hover(
- function() {
- var self = this;
- timeout = setTimeout(
- function() { $(self).find('.caption').slideDown(250); },
- 500);
- },
- function() {
- clearTimeout(timeout);
- $(this).find('.caption').slideUp(250);
- }
- ).append($('<div class="caption">')
- .append('<span class="filename">'+info.filename+'</span>')
- .append('<a href="'+info.download_url+'" class="action-button"><i class="icon-download-alt"></i> Download</a>')
- );
- }
- });
var showNonLocalImage = function(div) {
var $div = $(div),
@@ -174,7 +142,7 @@ showImagesInline = function(urls, thread_id) {
// Optionally show external images
$('.thread-entry').each(function(i, te) {
var extra = $(te).find('.textra'),
- imgs = $(te).find('div.non-local-image[data-src]');
+ imgs = $(te).find('.non-local-image[data-src]');
if (!extra) return;
if (!imgs.length) return;
extra.append($('<a>')
@@ -212,4 +180,37 @@ showImagesInline = function(urls, thread_id) {
// TODO: Add a hover-button to show just one image
});
});
+});
+
+showImagesInline = function(urls, thread_id) {
+ var selector = (thread_id == undefined)
+ ? '.thread-body img[data-cid]'
+ : '.thread-body#thread-id-'+thread_id+' img[data-cid]';
+ $(selector).each(function(i, el) {
+ var cid = $(el).data('cid').toLowerCase(),
+ info = urls[cid],
+ e = $(el);
+ if (info && !e.data('wrapped')) {
+ // Add a hover effect with the filename
+ var timeout, caption = $('<div class="image-hover">')
+ .css({'float':e.css('float')});
+ e.wrap(caption).parent()
+ .hover(
+ function() {
+ var self = this;
+ timeout = setTimeout(
+ function() { $(self).find('.caption').slideDown(250); },
+ 500);
+ },
+ function() {
+ clearTimeout(timeout);
+ $(this).find('.caption').slideUp(250);
+ }
+ ).append($('<div class="caption">')
+ .append('<span class="filename">'+info.filename+'</span>')
+ .append('<a href="'+info.download_url+'" class="action-button"><i class="icon-download-alt"></i> Download</a>')
+ );
+ e.data('wrapped', true);
+ }
+ });
}
diff --git a/scp/css/scp.css b/scp/css/scp.css
index db69355772e25bb1bed7fc5c7f7deabe541cff7e..458bb5c435418fe49070ce6a31473834942ea91b 100644
--- a/scp/css/scp.css
+++ b/scp/css/scp.css
@@ -1506,15 +1506,20 @@ ul.progress li.no small {color:red;}
#loading h4, #upgrading h4 { margin: 3px 0 0 0; padding: 0; color: #d80; }
+.non-local-image {
+ display: inline-block;
+ border: 3px dashed #eee;
+ border-radius: 5px;
+}
.non-local-image:after {
- background: url(../images/ost-logo.png) center center no-repeat;
+ background: url(../../logo.php) center center no-repeat;
background-size: cover;
content: "";
z-index: -1;
width: 100%;
height: 100%;
- display: block;
opacity: 0.3;
+ display: block;
}
input[type=text]:disabled, input[type=checkbox]:disabled {
diff --git a/scp/js/ticket.js b/scp/js/ticket.js
index 357031c9e00f4dd506c1d93346f7c0bea3e901df..0932616be2468b7de1130f854d81a2e97b7f7a4c 100644
--- a/scp/js/ticket.js
+++ b/scp/js/ticket.js
@@ -388,7 +388,7 @@ jQuery(function($) {
// Optionally show external images
$('.thread-entry').each(function(i, te) {
var extra = $(te).find('.textra'),
- imgs = $(te).find('div.non-local-image[data-src]');
+ imgs = $(te).find('.non-local-image[data-src]');
if (!extra) return;
if (!imgs.length) return;
extra.append($('<a>')