Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 34323: Enhance header search icon for more options

Browse source 
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>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Owen Leonard 2023-07-20 13:03:22 +00:00 committed by Tomas Cohen Arazi
parent e433a92d51
commit 99929a7d89
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
8 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
View file

@ -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"],

2
koha-tmpl/intranet-tmpl/prog/en/includes/acquisitions-search.inc
View file

@ -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>

8
koha-tmpl/intranet-tmpl/prog/en/includes/authorities-search.inc
View file

@ -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>

2
koha-tmpl/intranet-tmpl/prog/en/includes/budgets-admin-search.inc
View file

@ -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>

2
koha-tmpl/intranet-tmpl/prog/en/includes/catalogue-search-box.inc
View file

@ -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>

2
koha-tmpl/intranet-tmpl/prog/en/includes/member-search-box.inc
View file

@ -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>

2
koha-tmpl/intranet-tmpl/prog/en/includes/serials-search.inc
View file

@ -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>

2
koha-tmpl/intranet-tmpl/prog/js/staff-global.js
View file

@ -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");
}
});