Bugzilla – Attachment 88717 Details for
Bug 22035
Improve local cover image browser page
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 22035: Improve local cover image browser page
Bug-22035-Improve-local-cover-image-browser-page.patch (text/plain), 12.30 KB, created by
Claire Gravely
on 2019-04-25 09:00:16 UTC
(
hide
)
Description:
Bug 22035: Improve local cover image browser page
Filename:
MIME Type:
Creator:
Claire Gravely
Created:
2019-04-25 09:00:16 UTC
Size:
12.30 KB
patch
obsolete
>From 1a7e5f66e4ca7e2fd41812f75ea997ce1908b7ae Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Wed, 16 Jan 2019 18:27:54 +0000 >Subject: [PATCH] Bug 22035: Improve local cover image browser page > >This patch makes changes to the way local cover images are handled on >the image viewer page in the staff client. From this page you can now >delete images or reach the upload images page. > >The patch also modifies slightly the process for deleting an image from >the images tab on the bibliographic detail page. > >To test, apply the patch and regenerate the staff client CSS. >LocalCoverImages and AllowMultipleCovers should be enabled. > > - Open the detail view for a record which has multiple cover images > attached. On the Images tab, click the "Delete image" link for an > image. After confirming, the link should change to a spinner icon and > image should fade out. > - Click one of the cover images to open the image viewer page. The > thumbnails should each have a delete link which looks like and > behaves like the delete links on the biblio detail page. > - Clicking an image thumbnail should load a spinner icon into the area > where the full-sized image was, which should be replaced by the image > you chose. > - There should be a button for uploading images which takes you to the > correct page for adding images to that record. > - The page title and breadcrumbs should show the title of the record. > >Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de> >--- > .../intranet-tmpl/prog/css/src/staff-global.scss | 1 + > .../prog/en/modules/catalogue/detail.tt | 3 +- > .../prog/en/modules/catalogue/imageviewer.tt | 133 ++++++++++++++------- > 3 files changed, 93 insertions(+), 44 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >index 2844424..7327eb3 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >@@ -2280,6 +2280,7 @@ li { > li { > display: inline-block; > list-style-type: none; >+ margin: 4px; > } > > .remove { >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt >index 0ffe432..cc28463 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/detail.tt >@@ -792,7 +792,8 @@ > 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>"); >+ thumbnail.find("img").css("opacity", ".2"); >+ thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />"); > $.ajax({ > url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber, > success: function(data) { >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt >index 73af2f0..b5d95e7 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/imageviewer.tt >@@ -2,36 +2,24 @@ > [% USE Asset %] > [% SET footerjs = 1 %] > [% INCLUDE 'doc-head-open.inc' %] >-<title>Koha › Catalog › Details for [% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</title> >+<title>Koha › Catalog › [% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %] › Images</title> > [% INCLUDE 'doc-head-close.inc' %] >-[% IF ( LocalCoverImages == 1 ) %] > <style> >+#largeCover { >+ background: transparent url("[% interface | html %]/[% theme | html %]/img/spinner-small.gif") center center no-repeat; >+} > #largeCoverImg { > border : 1px solid #CCCCCC; > display : block; > margin : auto; > padding : 1em; > } >-#thumbnails { >- text-align : center; >-} >-#thumbnails a img { >- border : 1px solid #0000CC; >-} >-img.thumbnail { >- display : block; >- float : none; >- margin: 0 5px 5px 0; >- padding : .5em; >-} > >-#thumbnails a img.selected { >- border-color: black; >+.thumbnails img.selected { > cursor : default; > opacity:0.4; >- filter:alpha(opacity=40); /* For IE8 and earlier */ > } >-</style>[% END %] >+</style> > </head> > > <body id="catalog_imageviewer" class="catalog"> >@@ -39,7 +27,7 @@ img.thumbnail { > [% INCLUDE 'header.inc' %] > [% INCLUDE 'cat-search.inc' %] > >-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> › <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a> › Images for <i>[% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</i></div> >+<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> › <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a> › <a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% biblionumber | uri %]"><i>[% biblio.title | html %] [% FOREACH subtitl IN subtitle %] [% subtitl.subfield | html %][% END %]</i></a> › Images</div> > > <div class="main container-fluid"> > <div class="row"> >@@ -54,28 +42,45 @@ img.thumbnail { > [% IF ( LocalCoverImages == 1 ) %] > [% IF ( images.size > 0 ) %] > <div class="row"> >- <div class="col-md-8"> >- <div id="largeCover"> >- <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" /> >- </div></div> >- >- <div class="col-md-4"><div id="thumbnails"> >- >- [% FOREACH img IN images %] >- [% IF img %] >- <a class="show_cover" data-coverimg="[% img | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&imagenumber=[% img | html %]"> >- [% IF ( imagenumber == img ) %] >- <img class="thumbnail selected" id="[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" /> >- [% ELSE %] >- <img class="thumbnail" id="[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" /> >- [% END %] >- </a> >+ <div class="col-md-8"> >+ <div id="largeCover"> >+ <img id="largeCoverImg" alt="" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% imagenumber | html %]" /> >+ </div> >+ [% IF ( CAN_user_tools_upload_local_cover_images ) %] >+ <hr /> >+ <p>Upload an image file: <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&filetype=image"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a> >+ </p> > [% END %] >- [% END %] >- </div></div> >- </div> >+ </div> >+ >+ <div class="col-md-4"> >+ <ul class="thumbnails"> >+ [% FOREACH img IN images %] >+ [% IF img %] >+ <li id="imagenumber-[% img | html %]" class="thumbnail"> >+ <a class="show_cover" data-coverimg="[% img | html %]" href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | html %]&imagenumber=[% img | html %]"> >+ [% IF ( imagenumber == img ) %] >+ <img class="selected" id="thumbnail_[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" /> >+ [% ELSE %] >+ <img id="thumbnail_[% img | html %]" src="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% img | html %]&thumbnail=1" alt="Thumbnail" /> >+ [% END %] >+ </a> >+ [% IF CAN_user_tools_upload_local_cover_images %] >+ <a href="#" class="remove" data-coverimg="[% img | html %]"><i class="fa fa-trash"></i> Delete image</a> >+ [% END %] >+ </li> >+ [% END # /IF img %] >+ [% END # /FOREACH img %] >+ </ul> <!-- /ul.thumbnails --> >+ </div> <!-- /.col-md-4 --> >+ </div> <!-- /.row --> > [% ELSE %] > <div class="dialog message">There are no images for this record.</div> >+ [% IF ( CAN_user_tools_upload_local_cover_images ) %] >+ <hr /> >+ <p>Upload an image file: <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/upload-cover-image.pl?biblionumber=[% biblionumber | uri %]&filetype=image"><i class="fa fa-upload" aria-hidden="true"></i> Upload</a> >+ </p> >+ [% END %] > [% END %] > [% ELSE %] > <div class="dialog message">Local images have not been enabled by your system administrator.</div> >@@ -95,19 +100,61 @@ img.thumbnail { > [% INCLUDE 'catalog-strings.inc' %] > [% Asset.js("js/catalog.js") | $raw %] > <script> >+ var interface = "[% interface | html %]"; >+ var theme = "[% theme | html %]"; > $(document).ready(function(){ > showCover([% imagenumber | html %]); > $(".show_cover").on("click",function(e){ > e.preventDefault(); >- var coverimg = $(this).data("coverimg"); >- showCover(coverimg); >+ if( $(this).find("img").hasClass("selected") ){ >+ return false; >+ } else { >+ $("#largeCoverImg").attr( "src", interface + "/" + theme + "/img/spinner-small.gif"); >+ var imagenumber = $(this).data("coverimg"); >+ showCover( imagenumber ); >+ } > }); >+ >+ $('.thumbnails .remove').on("click", function(e) { >+ e.preventDefault(); >+ var result = confirm(_("Are you sure you want to delete this cover image?")); >+ var imagenumber = $(this).data("coverimg"); >+ if ( result == true ) { >+ removeLocalImage(imagenumber); >+ } >+ }); >+ > }); > >+ function removeLocalImage(imagenumber) { >+ var thumbnail = $("#imagenumber-" + imagenumber ); >+ var copy = thumbnail.html(); >+ thumbnail.find("img").css("opacity", ".2"); >+ thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />"); >+ >+ $.ajax({ >+ url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber, >+ success: function(data) { >+ $(data).each( function() { >+ if ( this.deleted == 1 ) { >+ location.href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=" + biblionumber; >+ } else { >+ thumbnail.html( copy ); >+ alert(_("An error occurred on deleting this image")); >+ } >+ }); >+ }, >+ error: function(data) { >+ thumbnail.html( copy ); >+ alert(_("An error occurred on deleting this image")); >+ } >+ }); >+ } >+ > function showCover(img) { >- $('.thumbnail').attr('class', 'thumbnail'); >- $('#largeCoverImg').attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img); >- $('#' + img + '.thumbnail').attr('class', 'thumbnail selected'); >+ $('.thumbnail img').removeClass("selected"); >+ $('#largeCoverImg').attr("src","").attr('src', '/cgi-bin/koha/catalogue/image.pl?imagenumber=' + img); >+ $('#thumbnail_' + img).addClass("selected"); > } > </script> > [% END %] >-- >2.1.4
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 22035
:
88390
|
88717
|
88843