gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug 22032: Improve local cover image tab on detail page 

This patch makes a variety of improvements to the images tab of the
staff client's bibliographic detail page.

To test, apply the patch and regenerate the staff client CSS.

 - Enable the LocalCoverImages system preference.
 - Locate a bibliographic record which has no images attached.
   - There should be a "no images" message and an upload button.
     - Upload an image and return to the detail page.
       - The "Images" tab should have a nicely-styled thumbnail of the
         image you uploaded.
         - Test the "Delete image" link: It should ask for a
           confirmation. If you confirm, the image should disappear and
           a "loading" spinner should appear.
           - When the image has been deleted the thumbnail container
             should disappear and the "no images" message should
             reappear.
 - Test this process with AllowMultipleCovers enabled and disabled.

Extra credit: Modify the AJAX url in the removeLocalImage
function in detail.tt. After misspelling a parameter name or the URL
path, clicking the "Delete image" link should trigger an alert and
re-show the image thumbnail.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
This commit is contained in:
Owen Leonard 2018-12-20 16:32:34 +00:00 committed by Nick Clemens
parent 441c64d630
commit 52bceacd82
2 changed files with 56 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
View File

@ -2268,10 +2268,28 @@ li {
.thumbnail {
display: block;
margin: auto;
}
> li {
.thumbnails {
li {
display: inline-block;
list-style-type: none;
}
.remove {
border-top: 1px solid #EEE;
display: block;
font-size: 90%;
margin: 4px -4px 2px -4px;
padding-top: .5em;
text-align: center;
}
& + p {
border-top: 1px solid #eee;
margin-top: 1em;
padding-top: 1em;
}
}
#searchresults {

63
koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt
View File

@ -812,26 +812,31 @@
[% END %]
[% IF ( LocalCoverImages ) %]
<div id="images">
[% IF ( localimages.0 ) %]
<p>Click on an image to view it in the image viewer</p>
<ul class="thumbnails">
[% FOREACH image IN localimages %]
[% IF image %]
<li id="imagenumber-[% image | html %]">
<a class="thumbnail" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&amp;imagenumber=[% image | html %]">
<img alt="remove this image" src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image | html %]" />
[% IF CAN_user_tools_upload_local_cover_images %]
<span class="remove" title="remove this image">Delete image</span>
<div id="images">
[% IF ( localimages.0 ) %]
<p>Click on an image to view it in the image viewer</p>
<ul class="thumbnails">
[% FOREACH image IN localimages %]
[% IF image %]
<li id="imagenumber-[% image | html %]" class="thumbnail">
<a href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image | uri %]">
<img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image | uri %]" />
</a>
[% IF CAN_user_tools_upload_local_cover_images %]
<a href="#" class="remove"><i class="fa fa-trash"></i> Delete image</a>
[% END %]
</li>
[% END %]
[% END %]
</a>
</li>
[% END %]
[% END %]
</ul>
[%# ELSE - No image passed JavaScript takes care %]
[% END %]
</div>
</ul>
[% ELSE # - No image passed JavaScript takes care %]
No images have been uploaded for this bibliographic record yet.
[% END %]
[% IF ( CAN_user_tools_upload_local_cover_images ) %]
<p>Upload an image file: <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&amp;filetype=image"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a>
</p>
[% END %]
</div>
[% END %]
[% IF ( HTML5MediaEnabled ) %]
@ -909,6 +914,8 @@
[% Asset.js("js/catalog.js") | $raw %]
[% INCLUDE 'greybox.inc' %]
<script>
var interface = "[% interface | html %]";
var theme = "[% theme | html %]";
// http://www.oreillynet.com/pub/a/javascript/2003/10/21/amazonhacks.html
function verify_images() {
$("#bookcoverimg").each(function(i){
@ -941,12 +948,18 @@
}
function removeLocalImage(imagenumber) {
var thumbnail = $("#imagenumber-" + imagenumber );
var copy = thumbnail.html();
thumbnail.html("<div><img style='padding:50px' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' /></div>");
$.ajax({
url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
success: function(data) {
$(data).each( function(i) {
if ( this.deleted == 1 ) {
$('#imagenumber-' + this.imagenumber).remove();
thumbnail.remove();
} else {
thumbnail.html( copy );
alert(_("An error occurred on deleting this image"));
}
if ( $('ul.thumbnails > li').length == 0 ) {
showNoImageMessage();
@ -954,6 +967,7 @@
});
},
error: function(data) {
thumbnail.html( copy );
alert(_("An error occurred on deleting this image"));
}
});
@ -963,7 +977,7 @@
var no_images_msg = _("No images have been uploaded for this bibliographic record yet.");
no_images_msg = '<p>' + no_images_msg + '</p>';
[% IF ( CAN_user_tools_upload_local_cover_images ) %]
var please_upload = _("Please select the image file to upload. %sUpload%s").format("<a class='btn btn-default btn-xs' href='/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber + "&amp;filetype=image'><i class='fa fa-upload' aria-hidden='true'></i> ","</a>");
var please_upload = _("Upload an image file: %sUpload%s").format("<a class='btn btn-default btn-xs' href='/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=" + biblionumber + "&amp;filetype=image'><i class='fa fa-upload' aria-hidden='true'></i> ","</a>");
no_images_msg += "<p id='upload_image'>" + please_upload + '</p>';
[% END %]
$('#images').html(no_images_msg);
@ -1046,20 +1060,17 @@
$('#bibliodetails').tabs("option", "active", 3);
[% END %]
$('#search-form').focus();
$('.thumbnails > li > a > span.remove').click(function() {
$('.thumbnails > li > .remove').click(function() {
var result = confirm(_("Are you sure you want to delete this cover image?"));
if ( result == true ) {
var imagenumber = $(this).parent().parent().attr('id').split('-')[1];
var imagenumber = $(this).parent().attr('id').split('-')[1];
removeLocalImage(imagenumber);
}
return false;
});
[%# inject no images message %]
[% IF ( LocalCoverImages && ! localimages.0 ) %]
showNoImageMessage();
[% END %]
[% IF LocalCoverImages %]
KOHA.LocalCover.GetCoverFromBibnumber(true);
[% END %]