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> Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com> Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
Owen Leonard
Katrin Fischer
parent
dfd4894acb
commit
40560b571d
|
|
@ -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' ) }" %]
|
||||
|
|
|
|||
|
|
@ -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' ) }" %]
|
||||
|
|
|
|||
|
|
@ -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' ) }" %]
|
||||
|
|
|
|||
|
|
@ -25,12 +25,27 @@
|
|||
[% t("Patrons") | html %] ›
|
||||
[% 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>
|
||||
|
|
@ -698,7 +722,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>
|
||||
|
|
@ -887,7 +914,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>
|
||||
|
|
@ -1118,7 +1148,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 ) %]
|
||||
|
|
@ -1204,7 +1238,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>
|
||||
|
|
@ -1360,7 +1397,10 @@ legend:hover {
|
|||
<!--this zones are not necessary in modif mode -->
|
||||
[% 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 %]
|
||||
|
|
@ -1436,7 +1476,10 @@ legend:hover {
|
|||
</fieldset> <!-- /#memberentry_account_flags -->
|
||||
[% 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>
|
||||
|
|
@ -1525,7 +1568,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">
|
||||
|
|
@ -1566,7 +1612,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">
|
||||
|
|
@ -1626,7 +1675,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>
|
||||
|
|
@ -1697,92 +1749,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();
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue