@@ -, +, @@ - Hover the mouse over the patron image. - If the patron has a previously-defined patron image, should you see an "Edit" button appear. Clicking the button should display a modal dialog titled "Edit patron image." Test that the "Upload," "Delete," and "Cancel" buttons work correctly. - If a patron has no patron image defined, you should see an "Add" button appear. Clicking the button should display a modal dialog titled "Edit patron image." Test that the "Upload," "Delete," and "Cancel" buttons work correctly. --- .../intranet-tmpl/prog/css/staff-global.css | 53 +++++++++++++++---- .../prog/en/includes/circ-menu.inc | 53 +++++++++++++------ .../intranet-tmpl/prog/js/members-menu.js | 15 ++++++ 3 files changed, 95 insertions(+), 26 deletions(-) --- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css +++ a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css @@ -567,22 +567,53 @@ div.patroninfo ul li { list-style-type : none; } -#patronbasics div { - background: transparent url("../img/patron-blank.min.svg") 10px 5px no-repeat; - border: 1px solid #CCCCCC; +/* Patron images */ + +.patroninfo > div { + border-right: 1px solid #b9d8d9; + width: 100%; +} + +.patronimage-container { + padding: .2em; + position: relative; +} + +.patronimage { + opacity: 1; + display: block; + max-width: 160px; + transition: .2s ease; +} + +.patronimage.empty { + background: transparent url("../img/patron-blank.min.svg") center 5px no-repeat; height: 125px; margin: .3em 0 .3em .3em; padding: 0; - width: 105px; + width: 80%; } -#patronimage { - border: 1px solid #CCCCCC; - max-width : 140px; - margin: .3em 0 .3em .3em; - padding: .2em; - width:auto !important; - width:130px; +.patronimage-controls { + transition: .5s ease; + opacity: 0; + position: absolute; + top: 80%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; +} + +.patronimage-container:hover .patronimage { + opacity: 0.8; +} + +.patronimage-container:hover .patronimage-controls { + opacity: 1; +} + +.patronimage-control { + padding: 1em 2em; } div.patronviews { --- a/koha-tmpl/intranet-tmpl/prog/en/includes/circ-menu.inc +++ a/koha-tmpl/intranet-tmpl/prog/en/includes/circ-menu.inc @@ -1,22 +1,26 @@ [% USE Koha %] [% IF ( patron.borrowernumber ) %]
[% INCLUDE 'patron-title.inc' %]
- + +[% IF ( patronimages ) %] +
+
+ [% IF ( patron.image ) %] + [% patron.firstname | html %] [% patron.surname | html %] ([% patron.cardnumber | html %]) +
+ +
+ [% ELSE %] +
+
+ +
+ [% END %] +
+
+[% END %] +
+ + + + [% END %] --- a/koha-tmpl/intranet-tmpl/prog/js/members-menu.js +++ a/koha-tmpl/intranet-tmpl/prog/js/members-menu.js @@ -100,6 +100,21 @@ $(document).ready(function(){ $("#select_patron_messages").on("change",function(){ $("#borrower_message").val( $(this).val() ); }); + + $(".edit-patronimage").on("click", function(e){ + e.preventDefault(); + var borrowernumber = $(this).data("borrowernumber"); + var url = "/cgi-bin/koha/members/moremember.pl?borrowernumber=" + borrowernumber; + $.get("/cgi-bin/koha/members/moremember.pl", { borrowernumber : borrowernumber }, function( data ){ + image_form = $(data).find("#picture-upload"); + image_form.show().find(".cancel").remove(); + $("#patronImageEdit .modal-body").html( image_form ); + }); + var modalTitle = $(this).attr("title"); + $("#patronImageEdit .modal-title").text(modalTitle); + $("#patronImageEdit").modal("show"); + }); + }); function confirm_local_deletion() { var is_confirmed = window.confirm(_("Are you sure you want to delete this patron from the local database? This cannot be undone.")); --