diff --git a/css/thread.css b/css/thread.css
index bb02ba597a963606ad29f56d8a742013d77638fd..bb79ede494126d2581bc4bb7ce778e91b117f5c1 100644
--- a/css/thread.css
+++ b/css/thread.css
@@ -110,16 +110,16 @@
-moz-box-sizing: border-box;
box-sizing: border-box;
}
-.thread-body a {
+.thread-body a:not(.button) {
color: #428bca !important;
text-decoration: underline;
}
-.thread-body a:hover,
-.thread-body a:focus {
+.thread-body a:not(.button):hover,
+.thread-body a:not(.button):focus {
color: #2a6496;
text-decoration: underline;
}
-.thread-body a:focus {
+.thread-body a:not(.button):focus {
outline: thin dotted #333;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
@@ -490,23 +490,18 @@ table.thread-entry th .textra {
max-width: 100%; /* Ensure image hovered is resized */
}
.image-hover .caption {
- background-color: rgba(0,0,0,0.5);
- min-width: 20em;
- color: white;
- padding: 1em;
- display: none;
- width: 100%;
position: absolute;
- bottom: 0;
- left: 0;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 14px;
- -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
-}
-.image-hover .caption .filename {
- display: inline-block;
- max-width: 60%;
- overflow: hidden;
+ right: 3px;
+ bottom: 5px;
+
+ visibility: hidden;
+ opacity: 0.5;
+ transition: visibility 0s linear, opacity 0.2s ease-in;
+}
+.image-hover:hover .caption {
+ visibility: visible;
+ opacity: 1;
+ transition-delay: 0.2s;
}
/* Additional style for the mighty Microsoft Office emails "standard" style */
diff --git a/include/staff/templates/thread-entry.tmpl.php b/include/staff/templates/thread-entry.tmpl.php
index 8df932b07640c958f3762217ba50b71322904413..5b9c3b132a04de1efbbe530a8059d6dee1d6e6b3 100644
--- a/include/staff/templates/thread-entry.tmpl.php
+++ b/include/staff/templates/thread-entry.tmpl.php
@@ -35,7 +35,7 @@ if ($user)
</ul>
</div>
<?php } ?>
- <span style="vertical-align:middle;" class="textra">
+ <span class="textra light">
<?php if ($entry->flags & ThreadEntry::FLAG_EDITED) { ?>
<span class="label label-bare" title="<?php
echo sprintf(__('Edited on %s by %s'), Format::datetime($entry->updated),
diff --git a/js/osticket.js b/js/osticket.js
index d885b9216e66a2111639312e7d54ce8f0102618d..95077cdf8e016fb91c7f61633795f0294674ff3f 100644
--- a/js/osticket.js
+++ b/js/osticket.js
@@ -152,21 +152,10 @@ showImagesInline = function(urls, thread_id) {
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 pull-right"><i class="icon-download-alt"></i> ' + __('Download') + '</a>')
+ .append($('<div class="caption">')
+ .append($('<a href="'+info.download_url+'" class="button action-button pull-right no-pjax"><i class="icon-download-alt"></i></a>')
.attr('download', info.filename)
+ .attr('title', __('Download'))
)
);
e.data('wrapped', true);
diff --git a/scp/css/scp.css b/scp/css/scp.css
index 690ebe063ee4eac9b98c19e32dbc825e258cfe95..9014081c9fd20d07e6ecafd6d292209da26b9303 100644
--- a/scp/css/scp.css
+++ b/scp/css/scp.css
@@ -1738,7 +1738,6 @@ input[type="button"],
border-radius: 3px;
font-family: inherit;
font-size: 0.95em;
- text-decoration: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
@@ -1757,13 +1756,25 @@ select + .action-button,
select + .button {
vertical-align: middle;
}
+.dark.button {
+ background-color: rgba(0,0,0,0.5);
+ box-shadow: 0 0 0 1px rgba(255,255,255,0.5) inset;
+ color: white;
+}
+.dark.button:hover {
+ background-color: rgba(0,0,0,0.8);
+ box-shadow: 0 0 0 2px rgba(255,255,255,0.7) inset;
+ color: white;
+}
+.light .button:hover,
.white.button {
- background-color: rgba(255,255,255,0.6);
+ background-color: rgba(255,255,255,0.7);
border-color: #555;
}
+.light .button:hover,
.white.button:hover {
- background-color: rgba(255,255,255,0.8);
+ background-color: rgba(255,255,255,0.9);
border-color: black;
}
diff --git a/scp/js/thread.js b/scp/js/thread.js
index 4b1ce02dc595816c2dd5c682ea710955b44131ff..434c8d05d9ac57360ce742abaa11e5c6e1cd8cc5 100644
--- a/scp/js/thread.js
+++ b/scp/js/thread.js
@@ -60,7 +60,7 @@ var thread = {
// Add Show Images buttons
extra.append($('<a>')
- .addClass("action-button pull-right show-images")
+ .addClass("white button action-button show-images")
.css({'font-weight':'normal'})
.text(' ' + __('Show Images'))
.click(function(ev) {
@@ -117,21 +117,11 @@ var thread = {
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 pull-right no-pjax"><i class="icon-download-alt"></i> '+__('Download')+'</a>')
+ .append($('<div class="caption">')
+ .append($('<a href="'+info.download_url+'" class="dark button pull-right no-pjax"><i class="icon-download-alt"></i></a>')
.attr('download', info.filename)
+ .attr('title', __('Download'))
+ .tooltip()
)
);
e.data('wrapped', true);