Attachment 164852 Details for Bug 35511 – Bug 35511: Add visual indicators of patron edit form collapsible sections

[patch] Bug 35511: Add visual indicators of patron edit form collapsible sections

Bug-35511-Add-visual-indicators-of-patron-edit-for.patch (text/plain), 22.51 KB, created by Owen Leonard on 2024-04-12 15:11:14 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2024-04-12 15:11:14 UTC

Size: 22.51 KB

patch

obsolete

>From a3f9ad8ec7b9193612f38d707d065aa592ad1221 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Wed, 6 Dec 2023 17:26:27 +0000
>Subject: [PATCH] Bug 35511: Add visual indicators of patron edit form
> collapsible sections
>
>This patch updates CSS and markup in the patron add/edit form so that
>there is better visual indication that sections can be collapsed by
>clicking headings.
>
>The JS function for showing and hiding sections has also been updated to
>reduce verbosity.
>
>Unrelated markup change for the sake of accessibility: A <label> has
>been added to the "Show collapsed fields" checkbox which is seen when
>CollapseFieldsPatronAddForm is active.
>
>To test, apply the patch and go to Patrons -> New patron.
>
>- Each section of the form should have an arrow indicator by the section
>  heading indicating whether it is expanded or collapsed.
>- Mousing over the heading should show a border to help show the
>  clickable region.
>- Clicking the header should collapse the section and the arrow
>  indicator should change to reflect that the section is collapsed.
>- Go to Administration -> Sytem preferences and search for
>  CollapseFieldsPatronAddForm.
>- Make some selections from the dropdown and save your changes.
>- Return to the patron entry form and confirm that your selections are
>  collapsed by default.
>
>Signed-off-by: David Nind <david@davidnind.com>
>---
> .../en/includes/member-alt-address-style.inc  |   5 +-
> .../en/includes/member-alt-contact-style.inc  |   5 +-
> .../en/includes/member-main-address-style.inc |   5 +-
> .../prog/en/modules/members/memberentrygen.tt | 135 +++++++++++++-----
> 4 files changed, 112 insertions(+), 38 deletions(-)
>
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-address-style.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-address-style.inc
>index f358763c3b7..5d7fd1b78e1 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-address-style.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-address-style.inc
>@@ -2,7 +2,10 @@
> [% USE AuthorisedValues %]
> [% BLOCK 'alt-address-style' %]
>     <fieldset class="rows" id="memberentry_address">
>-        <legend id="alt_address_lgd">Alternate address</legend>
>+        <legend class="expanded" id="alt_address_lgd">
>+            <i class="fa fa-caret-down"></i>
>+            Alternate address
>+        </legend>
>         <ol>
>             [% IF Koha.Preference( 'AddressFormat' ) %]
>                 [% PROCESS "member-alt-address-style-${ Koha.Preference( 'AddressFormat' ) }" %]
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-contact-style.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-contact-style.inc
>index 6211c412af6..c2b3cbb092a 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-contact-style.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/member-alt-contact-style.inc
>@@ -1,7 +1,10 @@
> [% USE Koha %]
> [% BLOCK 'alt-contact-style' %]
>     <fieldset class="rows" id="memberentry_altaddress">
>-        <legend id="alt_contact_lgd">Alternate contact</legend>
>+        <legend class="expanded" id="alt_contact_lgd">
>+            <i class="fa fa-caret-down"></i>
>+            Alternate contact
>+        </legend>
>         <ol>
>             [% IF Koha.Preference( 'AddressFormat' ) %]
>                 [% PROCESS "member-alt-contact-style-${ Koha.Preference( 'AddressFormat' ) }" %]
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/member-main-address-style.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/member-main-address-style.inc
>index a5c95b9c557..9b82d34c04e 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/includes/member-main-address-style.inc
>+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/member-main-address-style.inc
>@@ -2,7 +2,10 @@
> [% USE AuthorisedValues %]
> [% BLOCK 'main-address-style' %]
>     <fieldset class="rows" id="memberentry_mainaddress">
>-        <legend id="main_address_lgd">Main address</legend>
>+        <legend class="expanded" id="main_address_lgd">
>+            <i class="fa fa-caret-down"></i>
>+            Main address
>+        </legend>
>         <ol>
>             [% IF Koha.Preference( 'AddressFormat' ) %]
>                 [% PROCESS "member-main-address-style-${ Koha.Preference( 'AddressFormat' ) }" %]
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
>index 56468946bc3..162496225b0 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
>@@ -25,12 +25,27 @@
>     [% t("Patrons") | html %] &rsaquo;
>     [% t("Koha") | html %]
> [% END %]</title>
>-<style>
>-legend:hover {
>+[% INCLUDE 'doc-head-close.inc' %]
>+<style>[% FILTER collapse %]
>+fieldset legend {
>+    border: 1px solid #FFF;
>+    padding: .7em;
>+}
>+fieldset legend:hover {
>+    border: 1px solid #6FAF44;
>     cursor: pointer;
> }
>-</style>
>-[% INCLUDE 'doc-head-close.inc' %]
>+
>+fieldset legend i {
>+    color: #4C7AA8;
>+    font-size: 80%;
>+    padding-right: .2rem;
>+}
>+
>+legend.collapsed i.fa.fa-caret-down::before {
>+    content: "\f0da";
>+}
>+[% END %]</style>
> </head>
> 
> <body id="pat_memberentrygen" class="pat">
>@@ -200,7 +215,7 @@ legend:hover {
>                         [% SET fieldstohide = Koha.Preference('CollapseFieldsPatronAddForm') %]
>                         [% IF Koha.Preference('CollapseFieldsPatronAddForm') %][% UNLESS step %]
>                             <p id="selections">
>-                                <input type="checkbox" id="toggle_hidden_fields" title="These fields are collapsed by default by the CollapseFieldsPatronAddForm system preference"><strong>Show collapsed fields:</strong>
>+                                <label><input type="checkbox" id="toggle_hidden_fields" title="These fields are collapsed by default by the CollapseFieldsPatronAddForm system preference"><strong>Show collapsed fields:</strong></label>
>                                 [% FOREACH field IN fieldstohide.split(',') %]
>                                     [% SWITCH field %]
>                                         [% CASE 'identity' %] <span>Patron identity</span> |
>@@ -271,7 +286,10 @@ legend:hover {
>                             [% IF ( step_1 ) %]
>                                 [% UNLESS notitle && nosurname && nofirstname && nomiddle_name && nodateofbirth && noinitials && noothernames &&nosex && nopronouns %]
>                                     <fieldset class="rows" id="memberentry_identity">
>-                                        <legend id="identity_lgd">[% IF ( patron_category.category_type == 'I' ) %]<span>Organization [% ELSE %]Patron [% END %]identity</span></legend>
>+                                        <legend class="expanded" id="identity_lgd">
>+                                            <i class="fa fa-caret-down" title="Collapse this section"></i>
>+                                            [% IF ( patron_category.category_type == 'I' ) %]<span>Organization [% ELSE %]Patron [% END %]identity</span>
>+                                        </legend>
>                                         <ol>
>                                             [% UNLESS ( patron_category.category_type == 'I' ) %]
>                                                 [% UNLESS notitle %]
>@@ -466,7 +484,10 @@ legend:hover {
>                                     [% SET possible_relationships = Koha.Preference('borrowerRelationship') %]
>                                     <div id="memberentry_guarantor_anchor">
>                                         <fieldset id="memberentry_guarantor" class="rows">
>-                                            <legend>Patron guarantor</legend>
>+                                            <legend class="expanded" id="patron_guarantor_lgd">
>+                                                <i class="fa fa-caret-down"></i>
>+                                                Patron guarantor
>+                                            </legend>
> 
>                                             <div id="guarantor_relationships">
>                                                 [% FOREACH r IN relationships %]
>@@ -628,7 +649,10 @@ legend:hover {
> 
>                                     [% UNLESS nocontactname && nocontactfirstname && norelationship %]
>                                         <fieldset class="rows" id="non_patron_guarantor">
>-                                            <legend>Non-patron guarantor</legend>
>+                                            <legend class="expanded" id="non_patron_guarantor_lgd">
>+                                                <i class="fa fa-caret-down"></i>
>+                                                Non-patron guarantor
>+                                            </legend>
>                                             <ol>
>                                                 [% UNLESS nocontactname %]
>                                                     <li>
>@@ -692,7 +716,10 @@ legend:hover {
> 
>                                 [% UNLESS nophone && nophonepro && nomobile && noemail && noemailpro && nofax %]
>                                     <fieldset class="rows" id="memberentry_contact">
>-                                        <legend id="contact_lgd">Contact information</legend>
>+                                        <legend class="expanded" id="contact_lgd">
>+                                            <i class="fa fa-caret-down"></i>
>+                                            Contact information
>+                                        </legend>
>                                         <ol>
>                                             [% UNLESS nophone %]
>                                                 <li>
>@@ -881,7 +908,10 @@ legend:hover {
>                             [% IF ( step_3 ) %]
>                                 [% SET autoMemberNum = Koha.Preference('autoMemberNum') %]
>                                 <fieldset class="rows" id="memberentry_library_management">
>-                                    <legend id="library_management_lgd">Library management</legend>
>+                                    <legend class="expanded" id="library_management_lgd">
>+                                        <i class="fa fa-caret-down"></i>
>+                                        Library management
>+                                    </legend>
>                                     <ol>
>                                         [% UNLESS nocardnumber %]
>                                             <li>
>@@ -1112,7 +1142,11 @@ legend:hover {
> 
>                                 [% UNLESS nodateenrolled &&  noopacnote && noborrowernotes %]
>                                     <fieldset class="rows" id="memberentry_subscription">
>-                                        <legend id="library_setup_lgd">Library setup</legend><ol>
>+                                        <legend class="expanded" id="library_setup_lgd">
>+                                            <i class="fa fa-caret-down"></i>
>+                                            Library setup
>+                                        </legend>
>+                                        <ol>
>                                         [% UNLESS nodateenrolled %]
>                                             <li>
>                                                 [% IF ( mandatorydateenrolled ) %]
>@@ -1198,7 +1232,10 @@ legend:hover {
> 
>                                 [% UNLESS nouserid && nopassword && !CanUpdatePasswordExpiration %]
>                                     <fieldset class="rows" id="memberentry_userid">
>-                                        <legend id="opac_staff_login_lgd">OPAC/Staff interface login</legend>
>+                                        <legend class="expanded" id="opac_staff_login_lgd">
>+                                            <i class="fa fa-caret-down"></i>
>+                                            OPAC/Staff interface login
>+                                        </legend>
>                                         <ol>
>                                             [% UNLESS nouserid %]
>                                                 <li>
>@@ -1354,7 +1391,10 @@ legend:hover {
>                                 
>                                 [% UNLESS ( op == 'add_form' || op == 'duplicate' || ( nogonenoaddress && nolost ) ) %]
>                                     <fieldset class="rows" id="memberentry_account_flags">
>-                                        <legend id="account_flags_lgd">Patron account flags</legend>
>+                                        <legend class="expanded" id="account_flags_lgd">
>+                                            <i class="fa fa-caret-down"></i>
>+                                            Patron account flags
>+                                        </legend>
>                                         <p>Setting a value here will prevent patron from circulating materials and placing holds on the OPAC</p>
>                                         <ol class="radio">
>                                             [% UNLESS nogonenoaddress %]
>@@ -1430,7 +1470,10 @@ legend:hover {
>                                     </fieldset> 
>                                 [% END %]
>                                     <fieldset class="rows" id="memberentry_restrictions">
>-                                        <legend id="restrictions_lgd">Patron restrictions</legend>
>+                                        <legend class="expanded" id="restrictions_lgd">
>+                                            <i class="fa fa-caret-down"></i>
>+                                            Patron restrictions
>+                                        </legend>
>                                         [% IF ( patron.restrictions.count ) %]
>                                             <table>
>                                                 <thead>
>@@ -1519,7 +1562,10 @@ legend:hover {
>                             [% IF ( step_7 ) %]
>                                 [% IF Koha.Preference('HouseboundModule') %]
>                                     <fieldset class="rows" id="memberentry_housebound_roles">
>-                                        <legend id="housebound_roles">Housebound roles</legend>
>+                                        <legend class="expanded" id="housebound_roles">
>+                                            <i class="fa fa-caret-down"></i>
>+                                            Housebound roles
>+                                        </legend>
>                                         <ol class="radio">
>                                             <li>
>                                                 <label class="radio" for="housebound_chooser">
>@@ -1560,7 +1606,10 @@ legend:hover {
>                                 [% IF Koha.Preference('ExtendedPatronAttributes') %]
>                                     [% UNLESS ( no_patron_attribute_types ) %]
>                                         <fieldset class="rows" id="memberentry_patron_attributes">
>-                                            <legend id="patron_attributes_lgd">Additional attributes and identifiers</legend>
>+                                            <legend class="expanded" id="patron_attributes_lgd">
>+                                                <i class="fa fa-caret-down"></i>
>+                                                Additional attributes and identifiers
>+                                            </legend>
>                                             <input type="hidden" name="setting_extended_patron_attributes" value="1" />
>                                             [% FOREACH pa_loo IN patron_attributes %]
>                                                 <ol class="attributes_table">
>@@ -1620,7 +1669,10 @@ legend:hover {
>                             [% IF ( step_5 ) %]
>                                 [% IF ( EnhancedMessagingPreferences ) %]
>                                     <fieldset class="rows" id="memberentry_messaging_prefs">
>-                                        <legend id="patron_messaging_prefs_lgd">Patron messaging preferences</legend>
>+                                        <legend class="expanded" id="patron_messaging_prefs_lgd">
>+                                            <i class="fa fa-caret-down"></i>
>+                                            Patron messaging preferences
>+                                        </legend>
>                                         <div id="messaging_prefs_loading" class="form-message" style="display:none">
>                                             <img src="[% interface | html %]/[% theme | html %]/img/spinner-small.gif" alt="" /> Loading new messaging defaults
>                                         </div>
>@@ -1691,92 +1743,105 @@ legend:hover {
>             }
>         }
>         var Sticky;
>+
>         function showHideFields(){
>+            $("#messaging_prefs_loading, #guarantor_template").hide();
>             [% UNLESS step == 1 %]
>                 [% IF fieldstohide.match('identity') %]
>-                    $("#memberentry_identity").find('legend').nextAll().toggle();
>+                    togglePanel( $("#identity_lgd") );
>                 [% END %]
>                 [% IF show_guarantor || guarantor %]
>                     [% IF fieldstohide.match('guarantor') %]
>-                        $("#memberentry_guarantor").find('legend').nextAll().toggle();
>-                        $("#guarantor_template").toggle();
>+                        togglePanel( $("#patron_guarantor_lgd") );
>                     [% END %]
>                     [% IF fieldstohide.match('nonpatron_guarantor') %]
>-                        $("#non_patron_guarantor").find('legend').nextAll().toggle();
>+                        togglePanel( $("#non_patron_guarantor_lgd") );
>                     [% END %]
>                 [% END %]
>                 [% IF fieldstohide.match('primary_address') %]
>-                    $("#memberentry_mainaddress").find('legend').nextAll().toggle();
>+                    togglePanel( $("#main_address_lgd") );
>                 [% END %]
>                 [% IF fieldstohide.match('primary_contact') %]
>-                    $("#memberentry_contact").find('legend').nextAll().toggle();
>+                    togglePanel( $("#contact_lgd") );
>                 [% END %]
>             [% END %]
>             [% UNLESS step == 6 %]
>                 [% IF fieldstohide.match('alt_address') %]
>-                    $("#memberentry_address").find('legend').nextAll().toggle();
>+                    togglePanel( $("#alt_address_lgd") );
>                 [% END %]
>             [% END %]
>             [% UNLESS step == 2 %]
>                 [% IF fieldstohide.match('alt_contact') %]
>-                    $("#memberentry_altaddress").find('legend').nextAll().toggle();
>+                    togglePanel( $("#alt_contact_lgd") );
>                 [% END %]
>             [% END %]
>             [% UNLESS step == 3 %]
>                 [% IF fieldstohide.match('lib_mgmt') %]
>-                        $("#memberentry_library_management").find('legend').nextAll().toggle();
>+                    togglePanel( $("#library_management_lgd") );
>                 [% END %]
>                 [% UNLESS nodateenrolled && noopacnote && noborrowernotes %]
>                     [% IF fieldstohide.match('lib_setup') %]
>-                        $("#memberentry_subscription").find('legend').nextAll().toggle();
>+                        togglePanel( $("#library_setup_lgd") );
>                     [% END %]
>                 [% END %]
>                 [% UNLESS nouserid && nopassword %]
>                     [% IF fieldstohide.match('login') %]
>-                        $("#memberentry_userid").find('legend').nextAll().toggle();
>+                        togglePanel( $("#opac_staff_login_lgd") );
>                     [% END %]
>                 [% END %]
>                 [% UNLESS ( op == 'add_form' || op == 'duplicate' ) %]
>                     [% IF fieldstohide.match('flags') %]
>-                        $("#memberentry_account_flags").find('legend').nextAll().toggle();
>+                        togglePanel( $("#account_flags_lgd") );
>                     [% END %]
>                 [% END %]
>                 [% IF fieldstohide.match('debarments') %]
>-                    $("#memberentry_restrictions").find('legend').nextAll().toggle();
>+                    togglePanel( $("#restrictions_lgd") );
>                 [% END %]
>             [% END %]
>             [% UNLESS step == 7 %]
>                 [% IF Koha.Preference('HouseboundModule') %]
>                     [% IF fieldstohide.match('housebound') %]
>-                        $("#memberentry_housebound_roles").find('legend').nextAll().toggle();
>+                        togglePanel( $("#housebound_roles") );
>                     [% END %]
>                 [% END %]
>             [% END %]
>             [% UNLESS step == 4 %]
>                 [% IF Koha.Preference('ExtendedPatronAttributes') %]
>                     [% IF fieldstohide.match('additional') %]
>-                        $("#memberentry_patron_attributes").find('legend').nextAll().toggle();
>+                        togglePanel( $("#patron_attributes_lgd") );
>                     [% END %]
>                 [% END %]
>             [% END %]
>             [% UNLESS step == 5 %]
>                 [% IF Koha.Preference('EnhancedMessagingPreferences') %]
>                     [% IF fieldstohide.match('messaging') %]
>-                        $("#memberentry_messaging_prefs").find('legend').nextAll().toggle();
>+                        togglePanel( $("#patron_messaging_prefs_lgd") );
>                         $("#messaging_prefs_loading").toggle();
>                     [% END %]
>                 [% END %]
>             [% END %]
>         }
> 
>+        function togglePanel( node ){
>+            var panel = node.nextAll();
>+            if(panel.is(":visible")){
>+                node.addClass("collapsed").removeClass("expanded").attr("title", __("Click to expand this section") );
>+                panel.hide();
>+            } else {
>+                node.addClass("expanded").removeClass("collapsed").attr("title", __("Click to collapse this section") );
>+                panel.show();
>+                panel.find("input, select, textarea").eq(0).focus();
>+            }
>+        }
>+
>         $(document).ready(function() {
>             showHideFields();
>             $("#toggle_hidden_fields").change(function(){
>                 showHideFields();
>             });
> 
>-            $("legend").click(function(){
>-                $(this).nextAll().toggle();
>+            $(".collapsed,.expanded").on("click",function(){
>+                togglePanel( $(this) );
>                 $("#messaging_prefs_loading").hide();
>                 $("#guarantor_template").hide();
>             });
>-- 
>2.30.2

Actions: View | Diff | Splinter Review

Attachments on bug 35511: 160033 | 160087 | 164852 | 164853 | 164873 | 164874