From 1ad3d2817d017a723d55e460cab8d4c764d2e53b Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Tue, 29 Mar 2022 14:37:30 +0000
Subject: [PATCH] Bug 29066: (follow-up) Use tooltip when SearchMyLibraryFirst
 in effect

This patch proposes to add a Bootstrap tooltip to the OPAC masthead's
search field to indicate to the user when SearchMyLibraryFirst is in
effect. I think this lets the form layout stay clean-looking and is more
informative to the user because they don't have to look for the HTML
title tag tooltip.

To test, apply the patch and rebuild the OPAC CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

- Go to Administration -> Global system preferences.
- Set the OpacAddMastheadLibraryPulldown preference to "Don't add."
- Set the SearchMyLibraryFirst preference to "Limit."
- Go to the OPAC and confirm that the main search field in the masthead
  has a filter icon in the background, indicating that searches will be
  limited.
- Hover your mouse over the search field and a tooltip should pop up,
  "Searching in <library> only"
- The message should also be triggered when you click inside the form
  field.
- Change the OpacAddMastheadLibraryPulldown and SearchMyLibraryFirst
  preferences again and the form should return to its normal behavior.

Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
---
 koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss   |  8 ++++++++
 .../opac-tmpl/bootstrap/en/includes/masthead.inc  | 15 +++------------
 koha-tmpl/opac-tmpl/bootstrap/js/global.js        |  2 ++
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index 062752a2e7..746c3adce8 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -455,6 +455,14 @@ th {
     }
 }
 
+.form-control-filtered {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-funnel-fill'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5v-2z' fill='%23acacac'/%3E%3C/svg%3E");
+    background-position-x: 6px;
+    background-position-y: center;
+    background-repeat: no-repeat;
+    padding-left: 1.7rem;
+}
+
 #numresults {
     color: #727272;
 }
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
index 85c929adb7..407e87d4b7 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/masthead.inc
@@ -163,15 +163,6 @@
                                 [% ELSE %]
                                     <form name="searchform" method="get" action="/cgi-bin/koha/opac-search.pl" id="searchform">
                                         <div class="form-row align-items-center">
-                                            <div class="col-sm-auto order-1 order-sm-1">
-                                                [% UNLESS ( Koha.Preference( 'OpacAddMastheadLibraryPulldown' ) == 1 ) %]
-                                                    [% IF ( mylibraryfirst ) %]
-                                                        <span title="Search in [% Branches.GetName( mylibraryfirst ) | html %] only">
-                                                            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
-                                                        </span>
-                                                    [% END %]
-                                                [% END %]
-                                            </div>
                                             <div class="col-sm-auto order-2 order-sm-2">
                                                 <select name="idx" id="masthead_search" class="form-control">
                                                     [% IF ( ms_kw ) %]
@@ -226,10 +217,10 @@
                                             </div> <!-- /.col-sm-auto -->
 
                                             <div class="col order-4 order-sm-3">
-                                                [% IF ( ms_value ) %]
-                                                    <input type="text" title="Type search term" class="transl1 form-control" id="translControl1" name="q" value="[% ms_value | html %]" /><span id="translControl"></span>
+                                                [% IF ( !Koha.Preference( 'OpacAddMastheadLibraryPulldown' ) == 1 && mylibraryfirst ) %]
+                                                    <input type="text" class="transl1 form-control form-control-filtered" id="translControl1" name="q" value="[% ms_value | html %]" data-toggle="tooltip" data-placement="top" title="Searching in [% Branches.GetName( mylibraryfirst ) | html %] only" /><span id="translControl"></span>
                                                 [% ELSE %]
-                                                    <input type="text" title="Type search term" class="transl1 form-control" id="translControl1" name="q" /><span id="translControl"></span>
+                                                    <input type="text" class="transl1 form-control" id="translControl1" name="q" value="[% ms_value | html %]" /><span id="translControl"></span>
                                                 [% END # /ms_value %]
                                             </div> <!-- /.col -->
 
diff --git a/koha-tmpl/opac-tmpl/bootstrap/js/global.js b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
index 37fbabe88a..03882079ce 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/js/global.js
+++ b/koha-tmpl/opac-tmpl/bootstrap/js/global.js
@@ -229,4 +229,6 @@ $(document).ready(function(){
             content.first().find(':focusable').eq(0).focus();
         }
     });
+
+    $('[data-toggle="tooltip"]').tooltip();
 });