From b9ee1e6c70f8b0cd25e55fbb4371b38aa6ce3a9c Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Thu, 20 Jul 2023 13:03:22 +0000
Subject: [PATCH] Bug 34323: Enhance header search icon for more options

This patch modifies header search forms which have a "more options"
icon, adding a title attribute to the control and "aria-hidden" to the
Font Awesome icons.

I've added a bit of CSS and JS to change the appearance of the icon when
it is clicked to expand the panel of options.

To test, apply the patch and rebuild the staff interface CSS.

- Test pages which have a "more options" icon in the search header:
  - Home -> Catalog search tab, with IntranetCatalogSearchPulldown
    enabled.
  - Acquisitions -> Orders search tab
  - Authorities -> All search tabs
  - Administration -> Budgets
  - Patrons -> Patron search tab
  - Serials -> Subscription search tab
- On all these pages, hovering your mouse over the icon in the search
  form should trigger a "More options" title.
- Clicking the icon should expand the panel, and the icon should be
  now have a highlighted style.
- Clicking the icon to collapse the panel should return the icon to its
  original state.

Signed-off-by: Sam Lau <samalau@gmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
---
 koha-tmpl/intranet-tmpl/prog/css/src/_header.scss        | 9 +++++++++
 .../prog/en/includes/acquisitions-search.inc             | 2 +-
 .../prog/en/includes/authorities-search.inc              | 8 ++++----
 .../prog/en/includes/budgets-admin-search.inc            | 2 +-
 .../prog/en/includes/catalogue-search-box.inc            | 2 +-
 .../intranet-tmpl/prog/en/includes/member-search-box.inc | 2 +-
 .../intranet-tmpl/prog/en/includes/serials-search.inc    | 2 +-
 koha-tmpl/intranet-tmpl/prog/js/staff-global.js          | 2 ++
 8 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
index 8234f8a023c..a3d68cebbc2 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
@@ -186,6 +186,15 @@ a.navbar-toggle {
         &:hover {
             opacity: 1;
         }
+
+        &.extra-content-open {
+            color: $background-color-secondary;
+            opacity: 1;
+
+            .form-extra-content-icon {
+                text-shadow: 0 0 5px #ffe300;
+            }
+        }
     }
 
     input[type="submit"],
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
index bb7cfddd61a..5c798bf599b 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
@@ -23,7 +23,7 @@
                 <div class="form-content">
                     <input type="text" id="title" class="form-control" placeholder="Title" name="title" size="13" value="[% title | html %]" />
                     <input type="text" id="searchsupplier" class="form-control" placeholder="Vendor" name="name" size="13" value="[% name | html %]" />
-                    <button type="button" class="form-extra-content-toggle"><i class="fa-solid fa-sliders"></i></button>
+                    <button type="button" class="form-extra-content-toggle" title="More options"><i class="form-extra-content-icon fa-solid fa-sliders" aria-hidden="true"></i></button>
                     <input type="hidden" id="do_search" name="do_search" value="do" />
                 </div>
                 <button type="submit"><i class="fa fa-arrow-right"></i></button>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc
index e8cffd5e3f4..0aeb8ae88fc 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc
@@ -86,7 +86,7 @@
 
                 <div class="form-content">
                     <input id="value_mainentry" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search main heading ($a only)" />
-                    <button type="button" class="form-extra-content-toggle"><i class="fa-solid fa-sliders"></i></button>
+                    <button type="button" class="form-extra-content-toggle" title="More options"><i class="form-extra-content-icon fa-solid fa-sliders" aria-hidden="true"></i></button>
                 </div>
 
                 <button type="submit"><i class="fa fa-arrow-right"></i></button>
@@ -113,7 +113,7 @@
 
                 <div class="form-content">
                     <input id="value_mainheading" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search main heading" />
-                    <button type="button" class="form-extra-content-toggle"><i class="fa-solid fa-sliders"></i></button>
+                    <button type="button" class="form-extra-content-toggle" title="More options"><i class="form-extra-content-icon fa-solid fa-sliders" aria-hidden="true"></i></button>
                 </div>
 
                 <button type="submit"><i class="fa fa-arrow-right"></i></button>
@@ -138,7 +138,7 @@
 
                 <div class="form-content">
                     <input id="value_matchheading" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search any heading" />
-                    <button type="button" class="form-extra-content-toggle"><i class="fa-solid fa-sliders"></i></button>
+                    <button type="button" class="form-extra-content-toggle" title="More options"><i class="form-extra-content-icon fa-solid fa-sliders" aria-hidden="true"></i></button>
                 </div>
 
                 <button type="submit"><i class="fa fa-arrow-right"></i></button>
@@ -165,7 +165,7 @@
 
                 <div class="form-content">
                     <input id="value_anywhere" class="form-control head-searchbox" type="text" name="value" value="[% value | html %]" placeholder="Search any authority field" />
-                    <button type="button" class="form-extra-content-toggle"><i class="fa-solid fa-sliders"></i></button>
+                    <button type="button" class="form-extra-content-toggle" title="More options"><i class="form-extra-content-icon fa-solid fa-sliders" aria-hidden="true"></i></button>
                 </div>
 
                 <button type="submit"><i class="fa fa-arrow-right"></i></button>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
index e1703c53cb8..7e901d9a4c7 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
@@ -15,7 +15,7 @@
                 <div class="form-content">
                     <input class="query form-control" type="text" name="filter_budgetname" id="filter_budgetname" value="[% filter_budgetname | html %]" placeholder="Search funds" />
 
-                    <button type="button" class="form-extra-content-toggle"><i class="fa-solid fa-sliders"></i></button>
+                    <button type="button" class="form-extra-content-toggle" title="More options"><i class="form-extra-content-icon fa-solid fa-sliders" aria-hidden="true"></i></button>
                 </div>
 
                 <button type="submit"><i class="fa fa-arrow-right"></i></button>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc
index 33764470a4c..b17571bbb98 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc
@@ -20,7 +20,7 @@
                 [% END %]
 
                 [% IF Koha.Preference('IntranetCatalogSearchPulldown') || Koha.Preference('IntranetAddMastheadLibraryPulldown') %]
-                    <button type="button" class="form-extra-content-toggle"><i class="fa-solid fa-sliders"></i></button>
+                    <button type="button" class="form-extra-content-toggle" title="More options"><i class="form-extra-content-icon fa-solid fa-sliders" aria-hidden="true"></i></button>
                 [% END %]
             </div>
             <button type="submit"><i class="fa fa-arrow-right"></i></button>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc
index 42543b2a1ec..cd4f866dacf 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc
@@ -24,7 +24,7 @@
                     <input name="searchmember" id="searchmember" class="head-searchbox form-control" type="text" placeholder="Enter patron card number or partial name" size="25"/>
                 [% END %]
 
-                <button type="button" class="form-extra-content-toggle"><i class="fa-solid fa-sliders"></i></button>
+                <button type="button" class="form-extra-content-toggle" title="More options"><i class="form-extra-content-icon fa-solid fa-sliders" aria-hidden="true"></i></button>
             </div>
 
             <button type="submit"><i class="fa fa-arrow-right"></i></button>
diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc
index 812387dcf9d..519f79a9537 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc
@@ -21,7 +21,7 @@
                     [% END %]
 
                     <input type="text" class="form-control" placeholder="Title" size="11" name="title_filter" id="title_filter" value="[% title_filter | html %]" />
-                    <button type="button" class="form-extra-content-toggle"><i class="fa fa-sliders"></i></button>
+                    <button type="button" class="form-extra-content-toggle" title="More options"><i class="form-extra-content-icon fa-solid fa-sliders" aria-hidden="true"></i></button>
 
                 </div>
 
diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
index 3fc507e4eeb..29aabe51620 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
@@ -101,8 +101,10 @@ $(document).ready(function() {
         const extraContent = $(this).closest('form').find('.form-extra-content');
         if (extraContent.is(':visible')) {
             extraContent.hide();
+            $(this).removeClass("extra-content-open");
         } else {
             extraContent.show();
+            $(this).addClass("extra-content-open");
         }
     });
 
-- 
2.25.1