Bug 11088 - Patron entry page should use floating toolbar like cataloging interface
Summary: Patron entry page should use floating toolbar like cataloging interface
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Patrons (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Aleisha Amohia
QA Contact: Testopia
URL:
Keywords:
: 9347 (view as bug list)
Depends on:
Blocks: 11089 16395
  Show dependency treegraph
 
Reported: 2013-10-20 19:58 UTC by Owen Leonard
Modified: 2018-12-03 20:03 UTC (History)
9 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Who signed the patch off:
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 11088: Floating toolbar to patron entry page (4.97 KB, patch)
2016-02-12 01:07 UTC, Aleisha Amohia
Details | Diff | Splinter Review
Bug 11088: Floating Save div for Patron entry page (1.89 KB, patch)
2016-04-28 08:06 UTC, Aleisha Amohia
Details | Diff | Splinter Review
Bug 11088 [Follow up] - Patron entry page should use floating toolbar like cataloging interface (2.03 KB, patch)
2016-04-28 13:53 UTC, Arslan Farooq
Details | Diff | Splinter Review
[SIGNED-OFF] Bug 11088: Floating Save div for Patron entry page (1.99 KB, patch)
2016-04-28 18:10 UTC, Owen Leonard
Details | Diff | Splinter Review
[SIGNED-OFF] Bug 11088 [Follow up] - Patron entry page should use floating toolbar like cataloging interface (2.14 KB, patch)
2016-04-28 18:10 UTC, Owen Leonard
Details | Diff | Splinter Review
Screenshot with language chooser hiding part of it (2.77 KB, image/png)
2016-04-28 19:23 UTC, Katrin Fischer
Details
Bug 11088: (QA followup) don't let language chooser obscure toolbar (1.06 KB, patch)
2016-04-28 23:25 UTC, Jesse Weaver
Details | Diff | Splinter Review
[PASSED QA] Bug 11088: Floating Save div for Patron entry page (2.00 KB, patch)
2016-04-28 23:32 UTC, Katrin Fischer
Details | Diff | Splinter Review
[PASSED QA] Bug 11088 [Follow up] - Patron entry page should use floating toolbar like cataloging interface (2.15 KB, patch)
2016-04-28 23:32 UTC, Katrin Fischer
Details | Diff | Splinter Review
[PASSED QA] Bug 11088: (QA followup) don't let language chooser obscure toolbar (1.12 KB, patch)
2016-04-28 23:32 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 11088 [QA Followup] - Add action icon for consistency (1.26 KB, patch)
2016-04-29 11:46 UTC, Kyle M Hall
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2013-10-20 19:58:09 UTC
The floating toolbar, which keeps the "save" button at the top of the screen if the user scrolls down, should be added to the patron entry page so that the user is not required to scroll to the bottom to make changes midway through the page.
Comment 1 Aleisha Amohia 2016-02-12 01:07:51 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2016-04-08 14:45:18 UTC
After way too much time trying to figure this out, I was finally able to identify the problem: The additional patron search fields which are hidden when the page loads (<div id="filter">). Because the filter <div> is shown initially, the toolbar misidentifies where its starting location is on the page.

My initial thought was to make the filter <div> hidden by default, but it's not that simple. I think if we want a floating toolbar on this page we have to re-think how the additional patron search fields are displayed.
Comment 3 Aleisha Amohia 2016-04-28 08:04:56 UTC
The toolbar idea makes things difficult ... so I've come up with an idea that avoids it. How about a floating Save div that scrolls down the page with you?
Comment 4 Aleisha Amohia 2016-04-28 08:06:43 UTC Comment hidden (obsolete)
Comment 5 Arslan Farooq 2016-04-28 09:40:18 UTC
Hi,

I think we can improve it a bit. 

On a small screen resolution, like less than 100px, this floating div will look bad: http://i.imgur.com/VstAlk8.png 

However, this looks better: http://i.imgur.com/WE6k4LC.png

And we can achieve the above (better) look by changing your style sheet to this:

#save {
    background-color: rgba(185, 216, 217, 0.6);
    bottom: 3%;
    position: fixed;
    right: 1%;
    width: 150px;
}
Comment 6 Owen Leonard 2016-04-28 12:23:11 UTC
I think this looks like a good solution. I think we should rename the id something more specific, like "#floating_save" to avoid id duplication in case we want to use this on other pages.

Now we need to think about how this fits into rules for how to design interfaces like this. When to use a floating toolbar and when to use a floating save "panel?" I'd like to have a better guideline than "we use the panel when the toolbar doesn't work."

One possible way of thinking about it: The floating save panel is used when there are no other controls which need to be displayed in a toolbar.

Arlsan do you want to submit a follow-up patch with your change?
Comment 7 Arslan Farooq 2016-04-28 13:53:57 UTC Comment hidden (obsolete)
Comment 8 Bernardo Gonzalez Kriegel 2016-04-28 14:20:37 UTC
There is a conflic after applying first patch, and again on second patch.

CONFLICT (content): Merge conflict in koha-tmpl/intranet-tmpl/prog/en/modules/members/memberentrygen.tt
Comment 9 Owen Leonard 2016-04-28 18:10:25 UTC Comment hidden (obsolete)
Comment 10 Owen Leonard 2016-04-28 18:10:35 UTC Comment hidden (obsolete)
Comment 11 Owen Leonard 2016-04-28 18:11:54 UTC
Conflict was due to the old patch not being made obsolete. Thanks Aleisha and  Arslan, this looks really good.
Comment 12 Katrin Fischer 2016-04-28 19:20:39 UTC
Please try it with 2 active languages in the staff interface - the new area than is partially hidden behind the language chooser!
Comment 13 Katrin Fischer 2016-04-28 19:23:21 UTC
Created attachment 50951 [details]
Screenshot with language chooser hiding part of it
Comment 14 Katrin Fischer 2016-04-28 19:30:12 UTC
Sorry, not sure how best to fix it - failing for now and hoping for a speedy follow up - 11,5 hours left!
Comment 15 Jesse Weaver 2016-04-28 23:25:24 UTC Comment hidden (obsolete)
Comment 16 Katrin Fischer 2016-04-28 23:32:47 UTC
Created attachment 50967 [details] [review]
[PASSED QA] Bug 11088: Floating Save div for Patron entry page

To test:
1) Go to add a new patron
2) Confirm floating save div scrolls down page with you and works as
   expected
3) Go to edit an existing patron
4) Repeat Step 2

Sponsored-by: Catalyst IT
Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 17 Katrin Fischer 2016-04-28 23:32:50 UTC
Created attachment 50968 [details] [review]
[PASSED QA] Bug 11088 [Follow up] - Patron entry page should use floating toolbar like cataloging interface

To test:
1) Go to add a new patron
2) Confirm floating 'Save' button stays fixed at bottom right corner of
   the page as you scroll the page up/down
3) Resize the browser window to s smaller size, and see the 'Save'
   button stays fixed in place
3) Go to edit an existing patron
4) Repeat Step 2 and 3

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 18 Katrin Fischer 2016-04-28 23:32:53 UTC
Created attachment 50969 [details] [review]
[PASSED QA] Bug 11088: (QA followup) don't let language chooser obscure toolbar

This uses a similar JS trick to the cataloging interface to change the
location of the toolbar if the language picker is shown.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 19 Aleisha Amohia 2016-04-29 00:21:09 UTC
*** Bug 9347 has been marked as a duplicate of this bug. ***
Comment 20 Kyle M Hall 2016-04-29 11:46:33 UTC
Created attachment 50984 [details] [review]
Bug 11088 [QA Followup] - Add action icon for consistency

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Comment 21 Kyle M Hall 2016-04-29 11:47:22 UTC
Pushed to master! Should be in the May 2016 release. Takk Aleisha!
Comment 22 Jonathan Druart 2016-04-29 15:07:40 UTC
In the cataloguing module we have the entire toolbar moving, and the save is at the top.
When saving a patron, it will be at the bottom right.
Should not we keep a consistency?
Comment 23 Owen Leonard 2016-04-29 15:20:54 UTC
(In reply to Jonathan Druart from comment #22)
> When saving a patron, it will be at the bottom right.
> Should not we keep a consistency?

Aleisha and I both tried to implement the floating toolbar for this bug in the same way that it is implemented elsewhere, but the hidden form fields in the search header make it difficult to implement the fixfloat() functionality correctly (See Comment 2).

See Comment 6 for more comments on how this style of floating panel might fit into our guidelines.
Comment 24 Jonathan Druart 2016-05-02 09:04:45 UTC
(In reply to Owen Leonard from comment #23)
> (In reply to Jonathan Druart from comment #22)
> > When saving a patron, it will be at the bottom right.
> > Should not we keep a consistency?
> 
> Aleisha and I both tried to implement the floating toolbar for this bug in
> the same way that it is implemented elsewhere, but the hidden form fields in
> the search header make it difficult to implement the fixfloat()
> functionality correctly (See Comment 2).

I think I have managed to fix the issue on bug 16400, please have a look.