Bug 20217 - Make header's catalog search menu into a split button
Summary: Make header's catalog search menu into a split button
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 19474
Blocks:
  Show dependency treegraph
 
Reported: 2018-02-15 17:37 UTC by Owen Leonard
Modified: 2019-10-14 19:57 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 20217: Make header's catalog search menu into a split button (85.70 KB, patch)
2018-02-15 17:47 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20217: Make header's catalog search menu into a split button (85.80 KB, patch)
2018-03-12 13:55 UTC, Claire Gravely
Details | Diff | Splinter Review
Bug 20217: Make header's catalog search menu into a split button (4.00 KB, patch)
2018-03-27 16:36 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20217 (follow up) Compiled CSS (82.04 KB, patch)
2018-03-27 16:36 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20217: Make header's catalog search menu into a split button (4.02 KB, patch)
2018-04-24 13:22 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20217: (follow up) Compiled CSS (104.97 KB, patch)
2018-04-24 13:22 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20217: Make header's catalog search menu into a split button (4.08 KB, patch)
2018-05-14 07:53 UTC, Claire Gravely
Details | Diff | Splinter Review
Bug 20217: Make header's catalog search menu into a split button (4.10 KB, patch)
2018-08-10 13:50 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20217: Make header's catalog search menu into a split button (4.19 KB, patch)
2018-08-10 14:09 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2018-02-15 17:37:37 UTC
When we turned the staff client header's search link into a menu, it added an extra click for those who want the advanced search by default. I propose that we turn it into a split-button type menu.

Since the Bootstrap navbar doesn't include a built-in split button, my solution uses a link plus a dropdown menu, with some added JavaScript to tie the links' hover style together:

http://zivotdesign.com/p/#1/15187161792537
Comment 1 Owen Leonard 2018-02-15 17:47:52 UTC Comment hidden (obsolete)
Comment 2 Claire Gravely 2018-03-12 13:55:28 UTC Comment hidden (obsolete)
Comment 3 Katrin Fischer 2018-03-25 16:06:48 UTC
I am not totally persuaded by the usability of this. The way it is now the distance between 'Search' and the arrow is bigger than the distance between the arrow and the next menu item which makes it a little confusing. I'd like to get others people's opinions on this.

Btw: the more direct way to access the item search has been a big hit among our libraries!
Comment 4 Owen Leonard 2018-03-27 16:36:03 UTC Comment hidden (obsolete)
Comment 5 Owen Leonard 2018-03-27 16:36:06 UTC Comment hidden (obsolete)
Comment 6 Séverine Queune 2018-04-23 21:55:21 UTC
Can't apply the dependency :

Apply? [(y)es, (n)o, (i)nteractive] y
Applying: Bug 19474: Convert staff client CSS to SCSS
Applying: Bug 19474: (QA follow-up) Fix sass lint yaml configuration
Applying: Bug 19474: (follow-up) Bring scss up to date with latest CSS changes
Applying: Bug 19474: (follow-up) Compiled CSS
Using index info to reconstruct a base tree...
M       koha-tmpl/intranet-tmpl/prog/css/staff-global.css
Falling back to patching base and 3-way merge...
Auto-merging koha-tmpl/intranet-tmpl/prog/css/staff-global.css
CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/css/staff-global.css
Failed to merge in the changes.
Patch failed at 0001 Bug 19474: (follow-up) Compiled CSS
The copy of the patch that failed is found in:
   /var/repositories/koha/.git/rebase-apply/patch
Comment 7 Owen Leonard 2018-04-24 13:22:24 UTC Comment hidden (obsolete)
Comment 8 Owen Leonard 2018-04-24 13:22:27 UTC Comment hidden (obsolete)
Comment 9 Claire Gravely 2018-05-11 07:06:56 UTC
I cannot get the attached compiled CSS to work - I think something went squiff there?

Tested by applying first patch and running yarn build myself. All looks good. :)
Comment 10 Owen Leonard 2018-05-11 12:19:11 UTC
I think we'll probably need to eliminate the requirement that a compiled CSS patch be included, since they'll fail to apply 99.9% of the time. In my opinion the compiled CSS patch doesn't need a signoff.
Comment 11 Claire Gravely 2018-05-14 07:53:02 UTC Comment hidden (obsolete)
Comment 12 Jonathan Druart 2018-07-23 16:15:48 UTC
Blocked by bug 19474.
Comment 13 Owen Leonard 2018-08-10 13:50:32 UTC Comment hidden (obsolete)
Comment 14 Jonathan Druart 2018-08-10 14:09:56 UTC
Created attachment 77679 [details] [review]
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>
Comment 15 Nick Clemens 2018-08-22 15:16:50 UTC
I really like this bug, but when I tested the hover didn't affect both and they were farther apart than expected
Comment 16 Owen Leonard 2018-08-31 12:46:08 UTC
(In reply to Nick Clemens from comment #15)
> I really like this bug, but when I tested the hover didn't affect both and
> they were farther apart than expected

This is what it looks like to me:

https://zivotdesign.com/p/view.php?p=15357194449806

Do you see something different?
Comment 17 Nick Clemens 2018-09-16 18:24:56 UTC
Awesome work all!

Pushed to master for 18.11
Comment 18 Martin Renvoize 2018-09-17 14:37:12 UTC
Enhancement, will not be backported to 18.05.x series.