From e0e2877382c9ef9f3ce5a91bbd701b01d013edff Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Tue, 23 May 2023 16:45:10 +0000 Subject: [PATCH] Bug 33525: Use template wrapper for tabs: Basic MARC editor This patch updates the basic MARC editor template to replace tab markup with the use of WRAPPERs. Some CSS and JS has been modified in order to make the custom style and behavior of the tabs on this page work correctly with standard Bootstrap tab markup. To test, apply the patch and go to Cataloging -> New record. - Confirm that the tabs look correct, with the same style they had before the template change. - The first tab ("0") should be selected by default. - Confirm that tab-switching works correctly: The tab color should change and the list of numbered tags in the menu just below should change to match the section. - Confirm that these tag number links still work correctly to jump you down the page to the corresponding tag. - Without filling in any mandatory fields, click the "Save" button. - You should get an error message about missing mandatory fields. - Clicking the "Go to field" link should take you to the correct tab and the correct tag. - Append a hash to the URL to pre-select a tab other than the first one, e.g. "/cgi-bin/koha/cataloguing/addbiblio.pl#tab5XX_panel" The correct tab should be selected upon page load. Signed-off-by: Sam Lau --- .../intranet-tmpl/prog/css/addbiblio.css | 18 ++++++--- .../prog/en/modules/cataloguing/addbiblio.tt | 40 ++++++++++--------- 2 files changed, 34 insertions(+), 24 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css index c2b4aef1ef..458c1d2c33 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css +++ b/koha-tmpl/intranet-tmpl/prog/css/addbiblio.css @@ -321,12 +321,16 @@ tbody tr.active td { width: 15em; } +#toolbar { + padding: 5px 0; +} + .toolbar-tabs-container { flex-basis: 100%; margin-top: .5em; } -.toolbar-tabs { +.toolbar-tabs-container .nav-tabs { background-color: #FFF; clear: both; display: flex; @@ -336,7 +340,7 @@ tbody tr.active td { padding-left: 0; } -.toolbar-tabs li { +.toolbar-tabs-container .nav-tabs li { background-color: #FFF; display: flex; flex-grow: 1; @@ -345,7 +349,7 @@ tbody tr.active td { text-align: center; } -.toolbar-tabs li a { +.toolbar-tabs-container .nav-tabs li a { background-color: #71B443; border: 1px solid #71B443; border-left: 0; @@ -359,7 +363,7 @@ tbody tr.active td { width: 100%; } -.toolbar-tabs li.selected a { +.toolbar-tabs-container .nav-tabs li.selected a { background-color: #418940; border-bottom: 1px solid #418940; border-right: 1px solid #418940; @@ -372,11 +376,13 @@ tbody tr.active td { width: 100%; } -.toolbar-tabs li.selected a:hover { +.toolbar-tabs-container .nav-tabs li.selected a:hover { background-color: #418940; + border: 1px solid #418940; + border-left: 0; } -.toolbar-tabs li a:hover { +.toolbar-tabs-container .nav-tabs li a:hover { background-color: #418940; border-bottom: 1px solid #418940; border-right: 1px solid #418940; diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt index 6eba842bc3..1cff66c922 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt @@ -44,6 +44,8 @@ if( hashPieces[0] !== "" ){ selectTab( hashPieces[0] ); window.scrollTo( 0, 0 ); + } else { + selectTab( "#tab0XX_panel" ); } $( "ul.sortable_field", "#addbibliotabs" ).sortable({ @@ -159,7 +161,7 @@ Changefwk(); }); - $(".toolbar-tabs a").on("click",function(e){ + $(".toolbar-tabs-container .nav-tabs a").on("click",function(e){ e.preventDefault(); selectTab( this.hash ); }); @@ -177,7 +179,7 @@ e.preventDefault(); var tab = $(this).data("tab"); var field = $(this).data("field"); - var tablink = $("a[data-tabid='" + tab + "']" ).get(0).hash; + var tablink = $("a[data-tabname='tab" + tab + "XX']" ).get(0).hash; selectTab( tablink ); window.scrollTo( 0, getScrollto( field, "toolbar" ) ); }); @@ -190,9 +192,10 @@ function selectTab( tablink ){ let a = $("a[href='" + tablink + "']"); - $(".toolbar-tabs li").removeClass("selected"); + $(".toolbar-tabs-container .nav-tabs li").removeClass("selected"); a.tab("show").parent().addClass("selected"); - var tabid = a.data("tabid"); + /* Get number from string like "tab9XX" */ + var tabid = a.data("tabname").substring(3, 4); $(".tag_anchors").removeClass("tab_selected").hide(); $(".tag_anchors_" + tabid ).addClass("tab_selected").show(); } @@ -951,17 +954,18 @@ function PopupMARCFieldDoc(field) { [% END # /UNLESS circborrowernumber %]
[% IF ( BIG_LOOP && BIG_LOOP.size > 1 ) %] -
    + [% WRAPPER tabs_nav %] [%- FOREACH BIG_LOO IN BIG_LOOP -%] [% IF loop.first %] -
  • + [% SET bt_active = 0 %] + [% END %] + [% WRAPPER tab_item tabname= "tab${BIG_LOO.number}XX" bt_active= bt_active %] + [% BIG_LOO.number | html %] [% END %] - [% BIG_LOO.number | html %] -
    • [%- END -%] -
+ [% END # /WRAPPER tabs_nav %] [% END %]
    [% FOREACH BIG_LOO IN BIG_LOOP %] @@ -995,15 +999,15 @@ function PopupMARCFieldDoc(field) { -
    -
    - + [% WRAPPER tabs id= "addbibliotabs" %] + [% WRAPPER tab_panels %] [% FOREACH BIG_LOO IN BIG_LOOP %] [% IF loop.first %] -
    + [% SET bt_active = 1 %] [% ELSE %] -
    + [% SET bt_active = 0 %] [% END %] + [% WRAPPER tab_panel tabname="tab${BIG_LOO.number}XX" bt_active= bt_active %] [% IF ( BIG_LOOP.size > 1 ) %]

    Section [% BIG_LOO.number | html %]

    @@ -1204,10 +1208,10 @@ function PopupMARCFieldDoc(field) { [% END %] [% END # /FOREACH BIG_LOO.innerloop %]
-
+ [% END # /tab_panel#tabXXX %] [% END # /FOREACH BIG_LOOP %] - - + [% END # /WRAPPER tab_panels %] + [% END # /WRAPPER tabs %] [%# Fields for fast cataloging %] -- 2.30.2