Koha-community/Koha
13
7
Fork 0
Code Issues Releases Wiki Activity

Bug 33525: Use template wrapper for tabs: Basic MARC editor

Browse source 
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 <samalau@gmail.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
This commit is contained in:
Owen Leonard 2023-05-23 16:45:10 +00:00 committed by Tomas Cohen Arazi
parent 3590baa832
commit 61a21e4d82
Signed by: tomascohen
GPG key ID: 0A272EA1B2F3C15F
2 changed files with 34 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
koha-tmpl/intranet-tmpl/prog/css/addbiblio.css
View file

@ -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;

40
koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/addbiblio.tt
View file

@ -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 %]<!-- if innerloo.tag -->
[% END # /FOREACH BIG_LOO.innerloop %]
</ul> <!-- /.sortable_field -->
</div> <!-- /#tabXXX -->
[% END # /tab_panel#tabXXX %]
[% END # /FOREACH BIG_LOOP %]
</div> <!-- /.tab-content -->
</div><!-- /#addbibliotabs -->
[% END # /WRAPPER tab_panels %]
[% END # /WRAPPER tabs %]
[%# Fields for fast cataloging %]
<input type="hidden" name="barcode" value="[% barcode | html %]" />