Bug 22045 - Cataloging UX enhancement - Improve access to tabs
Summary: Cataloging UX enhancement - Improve access to tabs
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Cataloging (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement
Assignee: Owen Leonard
QA Contact: Josef Moravec
URL:
Keywords:
: 17148 (view as bug list)
Depends on: 21751
Blocks: 26623 22399 22768 22980 24415
  Show dependency tree / graph
 
Reported: 2018-12-21 22:24 UTC by Lucas Gass (lukeg)
Modified: 2021-06-14 21:29 UTC (History)
11 users (show)

See Also:
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:
Circulation function:

Attachments
vertical displaying tabs (257.74 KB, image/png)
2018-12-21 22:24 UTC, Lucas Gass (lukeg) 		Details
Bug 22045: Cataloging UX enhancement - Improve access to tabs (9.10 KB, patch)
2019-01-10 15:16 UTC, Owen Leonard 		Details | Diff | Splinter Review
Bug 22045: Cataloging UX enhancement - Improve access to tabs (9.10 KB, patch)
2019-02-04 14:54 UTC, Owen Leonard 		Details | Diff | Splinter Review
Bug 22045: Cataloging UX enhancement - Improve access to tabs (9.27 KB, patch)
2019-02-08 20:09 UTC, Mikaël Olangcay Brisebois 		Details | Diff | Splinter Review
Bug 22045: (follow-up) Revert change to numbering of tabs (3.05 KB, patch)
2019-02-11 17:32 UTC, Owen Leonard 		Details | Diff | Splinter Review
Bug 22045: Cataloging UX enhancement - Improve access to tabs (9.37 KB, patch)
2019-02-11 17:33 UTC, Owen Leonard 		Details | Diff | Splinter Review
Bug 22045: (follow-up) Revert change to numbering of tabs (3.05 KB, patch)
2019-02-11 17:33 UTC, Owen Leonard 		Details | Diff | Splinter Review
Bug 22045: Cataloging UX enhancement - Improve access to tabs (9.48 KB, patch)
2019-02-11 18:47 UTC, David Nind 		Details | Diff | Splinter Review
Bug 22045: (follow-up) Revert change to numbering of tabs (3.15 KB, patch)
2019-02-11 18:47 UTC, David Nind 		Details | Diff | Splinter Review
Bug 22045: Cataloging UX enhancement - Improve access to tabs (9.48 KB, patch)
2019-02-11 18:50 UTC, David Nind 		Details | Diff | Splinter Review
Bug 22045: (follow-up) Revert change to numbering of tabs (3.15 KB, patch)
2019-02-11 18:50 UTC, David Nind 		Details | Diff | Splinter Review
Bug 22045: Cataloging UX enhancement - Improve access to tabs (9.48 KB, patch)
2019-02-11 18:51 UTC, David Nind 		Details | Diff | Splinter Review
Bug 22045: (follow-up) Revert change to numbering of tabs (3.15 KB, patch)
2019-02-11 18:51 UTC, David Nind 		Details | Diff | Splinter Review
Bug 22045: (follow-up) Fix tab-switching when some tab numbers are missing (6.71 KB, patch)
2019-02-22 16:50 UTC, Owen Leonard 		Details | Diff | Splinter Review
Bug 22045: Cataloging UX enhancement - Improve access to tabs (9.51 KB, patch)
2019-02-22 21:33 UTC, Maryse Simard 		Details | Diff | Splinter Review
Bug 22045: (follow-up) Revert change to numbering of tabs (3.19 KB, patch)
2019-02-22 21:33 UTC, Maryse Simard 		Details | Diff | Splinter Review
Bug 22045: (follow-up) Fix tab-switching when some tab numbers are missing (6.77 KB, patch)
2019-02-22 21:34 UTC, Maryse Simard 		Details | Diff | Splinter Review
ILL cataloguing framework (15.18 KB, text/csv)
2019-02-25 07:43 UTC, Josef Moravec 		Details
Variant of tabs - maybe future enhancement (34.97 KB, image/png)
2019-02-25 08:09 UTC, Josef Moravec 		Details
Bug 22045: Cataloging UX enhancement - Improve access to tabs (9.59 KB, patch)
2019-02-25 08:18 UTC, Josef Moravec 		Details | Diff | Splinter Review
Bug 22045: (follow-up) Revert change to numbering of tabs (3.26 KB, patch)
2019-02-25 08:18 UTC, Josef Moravec 		Details | Diff | Splinter Review
Bug 22045: (follow-up) Fix tab-switching when some tab numbers are missing (6.84 KB, patch)
2019-02-25 08:18 UTC, Josef Moravec 		Details | Diff | Splinter Review
Show Obsolete (16) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Lucas Gass (lukeg) 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 (kidclamp) 2019-03-11 13:12:05 UTC 
Awesome work all!

Pushed to master for 19.05
Comment 33 Martin Renvoize (ashimema) 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. ***