Bug 22045

Summary: Cataloging UX enhancement - Improve access to tabs
Product: Koha Reporter: Lucas Gass <lucas>
Component: CatalogingAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Josef Moravec <josef.moravec>
Severity: enhancement    
Priority: P5 - low CC: david, dcook, dpavlin, josef.moravec, katrin.fischer, m.de.rooy, marjorie.barry-vila, martin.renvoize, maryse.simard, mikael.olangcay-brisebois, nick, oleonard
Version: Main   
Hardware: All   
OS: All   
See Also: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=24415
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
This enhancement makes style changes to the standard MARC editor with the goal of making it more responsive and easier to navigate among tabs and tags. Tabs are now part of the page toolbar, which floats as the page scrolls. In addition to the numbered tabs, there is also a section showing in-page links to the MARC tags which are available on that page.
Version(s) released in:
Bug Depends on: 21751    
Bug Blocks: 26623, 22399, 22768, 22980, 24415    
Attachments: vertical displaying tabs
Bug 22045: Cataloging UX enhancement - Improve access to tabs
Bug 22045: Cataloging UX enhancement - Improve access to tabs
Bug 22045: Cataloging UX enhancement - Improve access to tabs
Bug 22045: (follow-up) Revert change to numbering of tabs
Bug 22045: Cataloging UX enhancement - Improve access to tabs
Bug 22045: (follow-up) Revert change to numbering of tabs
Bug 22045: Cataloging UX enhancement - Improve access to tabs
Bug 22045: (follow-up) Revert change to numbering of tabs
Bug 22045: Cataloging UX enhancement - Improve access to tabs
Bug 22045: (follow-up) Revert change to numbering of tabs
Bug 22045: Cataloging UX enhancement - Improve access to tabs
Bug 22045: (follow-up) Revert change to numbering of tabs
Bug 22045: (follow-up) Fix tab-switching when some tab numbers are missing
Bug 22045: Cataloging UX enhancement - Improve access to tabs
Bug 22045: (follow-up) Revert change to numbering of tabs
Bug 22045: (follow-up) Fix tab-switching when some tab numbers are missing
ILL cataloguing framework
Variant of tabs - maybe future enhancement
Bug 22045: Cataloging UX enhancement - Improve access to tabs
Bug 22045: (follow-up) Revert change to numbering of tabs
Bug 22045: (follow-up) Fix tab-switching when some tab numbers are missing

Description Lucas Gass 2018-12-21 22:24:54 UTC
Created attachment 83473 [details]
vertical displaying tabs

it would be nice if on the cat_addbiblio page the ui-tabs-nav (0-9 tabs) were either fixed OR also available at the bottom of the page so catalogers don't have to scroll all the way back up to the top of the page each time they want to switch tabs. 
I have experimented with displaying them vertical instead of horizontal, with a position of fixed.
Comment 1 Katrin Fischer 2018-12-23 09:57:52 UTC
I believe Owen was working on something similar for the cataloguing editor - adding him CC.
Comment 2 Owen Leonard 2019-01-02 15:21:14 UTC
This is what I was playing around with:

https://zivotdesign.com/p/#1/15223413373574

The section links would float along with the toolbar. There were some issues with it that I was still working out, so I'll have to rebase and take another look if it's interesting to folks.
Comment 3 Owen Leonard 2019-01-10 15:16:19 UTC Comment hidden (obsolete)
Comment 4 Maryse Simard 2019-01-11 20:33:34 UTC
I can't apply the patch.

Applying: Bug 22045: Cataloging UX enhancement - Improve access to tabs
fatal: sha1 information is lacking or useless (koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss).
error: could not build fake ancestor
Patch failed at 0001 Bug 22045: Cataloging UX enhancement - Improve access to tabs
Comment 5 Katrin Fischer 2019-01-11 20:36:29 UTC
Hi Maryse, this bug depends on bug 21751, it needs to be applied and tested first.
Comment 6 Owen Leonard 2019-02-04 14:54:59 UTC Comment hidden (obsolete)
Comment 7 Mikaël Olangcay Brisebois 2019-02-08 20:09:12 UTC Comment hidden (obsolete)
Comment 8 Mikaël Olangcay Brisebois 2019-02-08 20:10:08 UTC
It's a really nice UX enhancement, only thing I would modify is the numbering. It should start from 0 instead of 1.
Comment 9 Owen Leonard 2019-02-11 13:51:44 UTC
(In reply to Mikaël Olangcay Brisebois from comment #8)
> It's a really nice UX enhancement, only thing I would modify is the
> numbering. It should start from 0 instead of 1.

My intention was to make the number more user-friendly, since normal people don't start counting at zero. However, I didn't consider that the MARC framework editor would have to be changed at the same time, so I'll have to save that for another bug.
Comment 10 Owen Leonard 2019-02-11 17:32:15 UTC Comment hidden (obsolete)
Comment 11 Owen Leonard 2019-02-11 17:33:40 UTC Comment hidden (obsolete)
Comment 12 Owen Leonard 2019-02-11 17:33:44 UTC Comment hidden (obsolete)
Comment 13 David Nind 2019-02-11 18:47:18 UTC Comment hidden (obsolete)
Comment 14 David Nind 2019-02-11 18:47:22 UTC Comment hidden (obsolete)
Comment 15 David Nind 2019-02-11 18:50:19 UTC Comment hidden (obsolete)
Comment 16 David Nind 2019-02-11 18:50:23 UTC Comment hidden (obsolete)
Comment 17 David Nind 2019-02-11 18:51:35 UTC Comment hidden (obsolete)
Comment 18 David Nind 2019-02-11 18:51:39 UTC Comment hidden (obsolete)
Comment 19 David Nind 2019-02-11 19:34:18 UTC
Apologies, I couldn't figure out how to git rid of "John Doe" for attachment 84998 [details] [review].
Comment 20 Josef Moravec 2019-02-12 21:59:35 UTC
Sometimes we have frameworks with some sections empty, this UI adapts well, but I can't change the tabs on biblio with such framework.

Otherwise it looks good and much cleaner the before. I like it
Comment 21 Owen Leonard 2019-02-22 16:50:08 UTC Comment hidden (obsolete)
Comment 22 Maryse Simard 2019-02-22 21:33:19 UTC Comment hidden (obsolete)
Comment 23 Maryse Simard 2019-02-22 21:33:23 UTC Comment hidden (obsolete)
Comment 24 Maryse Simard 2019-02-22 21:34:28 UTC Comment hidden (obsolete)
Comment 25 Josef Moravec 2019-02-25 07:43:48 UTC
Created attachment 85581 [details]
ILL cataloguing framework

This is framework we are using for ILL records, it has only two tabs ;)
This is the one I used to testing. But it is only in Czech
Comment 26 Josef Moravec 2019-02-25 08:09:17 UTC
Created attachment 85582 [details]
Variant of tabs - maybe future enhancement

I just try this, now I generated it by adding this code to intranetuserjs:

$(document).ready(function() {
  $(".toolbar-tabs-container a[href='#tab0XX'], #tab0XX h3").text("Control and coded fields");
  $(".toolbar-tabs-container a[href='#tab1XX'], #tab1XX h3").text("Main entry");
  $(".toolbar-tabs-container a[href='#tab2XX'], #tab2XX h3").text("Title and edition");
  $(".toolbar-tabs-container a[href='#tab3XX'], #tab3XX h3").text("Physical description");
  $(".toolbar-tabs-container a[href='#tab4XX'], #tab4XX h3").text("Series");
  $(".toolbar-tabs-container a[href='#tab5XX'], #tab5XX h3").text("Notes");
  $(".toolbar-tabs-container a[href='#tab6XX'], #tab6XX h3").text("Subject Access");
  $(".toolbar-tabs-container a[href='#tab7XX'], #tab7XX h3").text("Added and linking entry");
  $(".toolbar-tabs-container a[href='#tab8XX'], #tab8XX h3").text("Series added entry and electronic access");
  $(".toolbar-tabs-container a[href='#tab9XX'], #tab9XX h3").text("Koha related");
});
Comment 27 Josef Moravec 2019-02-25 08:18:16 UTC
Created attachment 85583 [details] [review]
Bug 22045: Cataloging UX enhancement - Improve access to tabs

This patch makes style changes to the standard MARC editor with the goal
of both making it more responsive and making it easier to navigate among
tabs and tags.

Tabs are now part of the page's toolbar, which floats as the page
scrolls. In addition to the numbered tabs, there is also a section
showing in-page links to the MARC tags which are available on that page.

To test, apply the patch, regenerate the staff client CSS, and clear
your browser cache if necessary.

Open a blank or existing record in the standard cataloging editor. Test
the redesigned tabs, the floating toolbar, and the in-page tag links.
Confirm that everything works well at various browser widths.

Signed-off-by: Mikaël Olangcay Brisebois <mikael.olangcay-brisebois@inLibro.com>

Signed-off-by: John Doe <you@example.com>

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Maryse Simard <maryse.simard@inlibro.com>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Comment 28 Josef Moravec 2019-02-25 08:18:20 UTC
Created attachment 85584 [details] [review]
Bug 22045: (follow-up) Revert change to numbering of tabs

I wanted the tabs to be numbered like humans count, starting from 1.
But if the MARC framework setup isn't changed as well it doesn't make
sense. This patch removes the change.

Also fixed: Some missing template filters, an errant console.log()
removed.

To test, apply the patch and open a new or existing record for
editing. The tabs (now "Sections") should be labeled from 0-9.

Signed-off-by: John Doe <you@example.com>

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Maryse Simard <maryse.simard@inlibro.com>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Comment 29 Josef Moravec 2019-02-25 08:18:23 UTC
Created attachment 85585 [details] [review]
Bug 22045: (follow-up) Fix tab-switching when some tab numbers are missing

This patch changes the way tab-switching is done so that it switching
tabs based on tab id rather than tab index. Using tab index doesn't work
when the tab number doesn't match the tab index.

To test, apply the patch and load a record or blank editor using a MARC
framework which doesn't include one or more tabs (for instance, by
deleting the entries in the framework for one tab:

DELETE FROM marc_subfield_structure WHERE frameworkcode = 'KT' AND tab = 4;

...backup first). In the MARC editor the numbered tabs should exclude
that number. Tab-switching should work correctly.

Signed-off-by: Maryse Simard <maryse.simard@inlibro.com>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Comment 30 Owen Leonard 2019-02-25 12:48:05 UTC
(In reply to Josef Moravec from comment #26)
> I just try this, now I generated it by adding this code to intranetuserjs:
> 
> $(document).ready(function() {
>   $(".toolbar-tabs-container a[href='#tab0XX'], #tab0XX h3").text("Control
> and coded fields");
> ....

It would be nice to be able to add these custom labels directly in the MARC framework configuration.
Comment 31 Josef Moravec 2019-02-25 15:55:00 UTC
(In reply to Owen Leonard from comment #30)
> (In reply to Josef Moravec from comment #26)
> > I just try this, now I generated it by adding this code to intranetuserjs:
> > 
> > $(document).ready(function() {
> >   $(".toolbar-tabs-container a[href='#tab0XX'], #tab0XX h3").text("Control
> > and coded fields");
> > ....
> 
> It would be nice to be able to add these custom labels directly in the MARC
> framework configuration.

That is what I have in mind... ;)
Comment 32 Nick Clemens 2019-03-11 13:12:05 UTC
Awesome work all!

Pushed to master for 19.05
Comment 33 Martin Renvoize 2019-03-12 09:28:11 UTC
Enhancement will not be backported to 18.11.x series.
Comment 34 Dobrica Pavlinusic 2019-03-28 15:40:45 UTC
This bug broke keyboard shortcuts because of following change:

--- a/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/staff-global.js
@@ -31,7 +31,7 @@ $.fn.tabIndex = function () {
     return $(this).parent().children('div').index(this);
 };
 $.fn.selectTabByID = function (tabID) {
-    $(this).tabs("option", "active", $(tabID).tabIndex());
+    $(this).tabs("option", "active", $( "#" + tabID ).tabIndex());
 };

  $(document).ready(function() {

without modification to calling which also prefix tabID with #, thus creating invalid ##tabID
Comment 35 Owen Leonard 2019-06-19 14:24:00 UTC
Changing the status of this to reflect that it has been pushed to master and won't be backported. Bug 22768 will address Comment 34.
Comment 36 Marjorie Barry-Vila 2019-06-20 14:38:23 UTC
*** Bug 17148 has been marked as a duplicate of this bug. ***