Bug 20217: Make header's catalog search menu into a split button

This patch modifies the markup for the staff client header's catalog
search menu so that it mimics the behavior of a Bootstrap split button
(As seen on the cataloging home page's 'New from Z39.50' button).

To test, apply the patch, run 'yarn build' to regenerate the staff
client's CSS, and clear your browser cache.

- View any page in the staff client.
- Hover your mouse over the "Search" link in the header. It should
  trigger a hover affect on the adjacent menu link.
- Clicking the "Search" link should take you directly to the advanced
  search page.
- Clicking the adjacent menu link should display a menu containing links
  to advanced search and item search.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
index f9b1355..af6bc01 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -4103,6 +4103,27 @@ span {
 
 // ==== MODULE LINKS - End ====
 
+#catalog-search-link {
+    border-right: 1px solid lighten( #E6F0F2, 15% );
+    padding-right: .3em;
+}
+
+#catalog-search-dropdown {
+    padding: 0;
+
+    & > a {
+        border-left: 1px solid darken( #B4D2D8, 5% );
+        margin-right: .6em;
+        padding: .4em .6em;
+
+        &:hover,
+        &.catalog-search-dropdown-hover {
+            background-color: darken( #E6F0F2, 5% );
+            border-left: 1px solid darken( #B4D2D8, 15% );
+        }
+    }
+}
+
 @media (min-width: 200px) {
     .navbar-nav > li {
         float: left;

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc
index 7e3c178..d8d3117 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/header.inc
@@ -5,8 +5,11 @@
         <ul id="toplevelmenu" class="nav navbar-nav">
             [% IF ( CAN_user_circulate_circulate_remaining_permissions ) %]<li><a href="/cgi-bin/koha/circ/circulation-home.pl">Circulation</a></li>[% END %]
             [% IF CAN_user_borrowers_edit_borrowers %]<li><a href="/cgi-bin/koha/members/members-home.pl">Patrons</a></li>[% END %]
-            <li class="dropdown">
-                <a href="/cgi-bin/koha/catalogue/search.pl" class="dropdown-toggle" data-toggle="dropdown">Search <b class="caret"></b></a>
+            <li id="catalog-search-link">
+                <a href="/cgi-bin/koha/catalogue/search.pl">Search</a>
+            </li>
+            <li class="dropdown" id="catalog-search-dropdown">
+                <a href="/cgi-bin/koha/catalogue/search.pl" class="dropdown-toggle" data-toggle="dropdown"><b class="caret"></b></a>
                 <ul class="dropdown-menu dropdown-menu-right">
                     [% IF ( CAN_user_catalogue ) %]<li><a href="/cgi-bin/koha/catalogue/search.pl">Advanced search</a></li>
                     <li><a href="/cgi-bin/koha/catalogue/itemsearch.pl">Item search</a></li>[% END %]

diff --git a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
index 3712e65..57d7521 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
@@ -84,6 +84,9 @@ $.fn.selectTabByID = function (tabID) {
         $("a[href$=\"/" + path + params + "\"]", navmenulist).addClass("current");
     }
 
+    $("#catalog-search-link a").on("hover", function(){
+        $("#catalog-search-dropdown a").toggleClass("catalog-search-dropdown-hover");
+    });
 });
 
 // http://jennifermadden.com/javascript/stringEnterKeyDetector.html