Attachment 151651 Details for Bug 33525 – Bug 33525: Use template wrapper for tabs: Basic MARC editor

[patch] Bug 33525: Use template wrapper for tabs: Basic MARC editor

Bug-33525-Use-template-wrapper-for-tabs-Basic-MARC.patch (text/plain), 8.61 KB, created by Owen Leonard on 2023-05-24 19:26:39 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2023-05-24 19:26:39 UTC

Size: 8.61 KB

patch

obsolete

>From 1651508f4b84f0cc002b1a991a12091c63c5e19e Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>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.
>---
> .../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 %]
>                     <div class="toolbar-tabs-container">
>                         [% IF ( BIG_LOOP && BIG_LOOP.size > 1 ) %]
>-                            <ul class="toolbar-tabs" role="tablist">
>+                            [% WRAPPER tabs_nav %]
>                                 [%- FOREACH BIG_LOO IN BIG_LOOP -%]
>                                     [% IF loop.first %]
>-                                        <li role="presentation" class="active selected">
>+                                        [% SET bt_active = 1 %]
>                                     [% ELSE %]
>-                                        <li role="presentation">
>+                                        [% SET bt_active = 0 %]
>+                                    [% END %]
>+                                    [% WRAPPER tab_item tabname= "tab${BIG_LOO.number}XX" bt_active= bt_active %]
>+                                        <span>[% BIG_LOO.number | html %]</span>
>                                     [% END %]
>-                                        <a data-tabid="[% BIG_LOO.number | html %]" href="#tab[% BIG_LOO.number | html %]XX" aria-controls="#tab[% BIG_LOO.number | html %]XX" role="tab" data-toggle="tab">[% BIG_LOO.number | html %]</a>
>-                                    </li>
>                                 [%- END -%]
>-                            </ul>
>+                            [% END # /WRAPPER tabs_nav %]
>                         [% END %]
>                         <ul class="tag_anchors_list">
>                             [% FOREACH BIG_LOO IN BIG_LOOP %]
>@@ -995,15 +999,15 @@ function PopupMARCFieldDoc(field) {
>                 <input type="hidden" name="breedingid" value="[% breedingid | html %]" />
>                 <input type="hidden" name="changed_framework" value="" />
> 
>-                <div id="addbibliotabs" class="toptabs numbered">
>-                    <div class="tab-content">
>-
>+                [% WRAPPER tabs id= "addbibliotabs" %]
>+                    [% WRAPPER tab_panels %]
>                         [% FOREACH BIG_LOO IN BIG_LOOP %]
>                             [% IF loop.first %]
>-                                <div id="tab[% BIG_LOO.number | html %]XX" role="tabpanel" class="tab-pane active">
>+                                [% SET bt_active = 1 %]
>                             [% ELSE %]
>-                                <div id="tab[% BIG_LOO.number | html %]XX" role="tabpanel" class="tab-pane">
>+                                [% SET bt_active = 0 %]
>                             [% END %]
>+                            [% WRAPPER tab_panel tabname="tab${BIG_LOO.number}XX" bt_active= bt_active %]
> 
>                                 [% IF ( BIG_LOOP.size > 1 ) %]
>                                     <h3>Section [% BIG_LOO.number | html %]</h3>
>@@ -1204,10 +1208,10 @@ function PopupMARCFieldDoc(field) {
>                                     [% END %]
>                                 [% END # /FOREACH BIG_LOO.innerloop %]
>                                 </ul> 
>-                            </div> 
>+                            [% END # /tab_panel#tabXXX %]
>                         [% END # /FOREACH BIG_LOOP %]
>-                    </div> 
>-                </div>
>+                    [% END # /WRAPPER tab_panels %]
>+                [% END # /WRAPPER tabs %]
> 
>                 [%# Fields for fast cataloging %]
>                 <input type="hidden" name="barcode" value="[% barcode | html %]" />
>-- 
>2.30.2

Actions: View | Diff | Splinter Review

Attachments on bug 33525: 151651 | 151652 | 151783