Bug 32571 - Use template wrapper to build tabbed components
Summary: Use template wrapper to build tabbed components
Status: REOPENED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Katrin Fischer
URL:
Keywords:
Depends on: 32562 33891 33892 33893 33894 33895 33897 34012
Blocks: 33178 33186 33524 33526 35838 35850 32649 32658 32660 32661 32662 32698 32912 32914 32956 33126 33154 33157 33158 33180 33181 33185 33187 33293 33294 33307 33310 33324 33332 33333 33525 33527 33528 33590 33591
  Show dependency treegraph
 
Reported: 2023-01-05 12:53 UTC by Owen Leonard
Modified: 2024-01-19 13:42 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:
23.05.00,22.11.03


Attachments
Bug 32571: Use template wrapper to build tabbed components (3.08 KB, patch)
2023-01-05 13:12 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32571: (follow-up) Implement abstracted tabs on About page (9.74 KB, patch)
2023-01-05 13:12 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32571: Use template wrapper to build tabbed components (3.13 KB, patch)
2023-01-05 23:21 UTC, David Nind
Details | Diff | Splinter Review
Bug 32571: (follow-up) Implement abstracted tabs on About page (9.79 KB, patch)
2023-01-05 23:21 UTC, David Nind
Details | Diff | Splinter Review
Bug 32571: Use template wrapper to build tabbed components (3.18 KB, patch)
2023-01-06 16:08 UTC, Kyle M Hall
Details | Diff | Splinter Review
Bug 32571: Use template wrapper to build tabbed components (3.18 KB, patch)
2023-01-20 15:52 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32571: (follow-up) Implement abstracted tabs on About page (9.79 KB, patch)
2023-01-20 15:52 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32571: (follow-up) Use more unique variable name to avoid collisions (2.57 KB, patch)
2023-01-20 15:52 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32571: (follow-up) Use more unique variable name to avoid collisions (3.06 KB, patch)
2023-01-20 16:04 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 32571: Use template wrapper to build tabbed components (3.24 KB, patch)
2023-02-05 12:38 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 32571: (follow-up) Implement abstracted tabs on About page (9.85 KB, patch)
2023-02-05 12:38 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 32571: (follow-up) Use more unique variable name to avoid collisions (3.11 KB, patch)
2023-02-05 12:38 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2023-01-05 12:53:45 UTC
In preparation for an upgrade to Bootstrap 5 I propose that we try to abstract the way we build some components. This will help reduce the number of template changes required during the update.

Using Template::Toolkit WRAPPERs we can create the structural components for tabs separately from the tab content:

- Main tab container
- Tab links container
- Individual tab links
- Tab panel container
- Individual tab panels

This can be done gradually before the Bootstrap upgrade without causing any disruption.
Comment 1 Owen Leonard 2023-01-05 13:12:43 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2023-01-05 13:12:48 UTC Comment hidden (obsolete)
Comment 3 David Nind 2023-01-05 23:21:31 UTC Comment hidden (obsolete)
Comment 4 David Nind 2023-01-05 23:21:36 UTC Comment hidden (obsolete)
Comment 5 David Nind 2023-01-05 23:22:30 UTC
Testing notes (using KTD):

1. Everything looks OK to me after applying the patches and viewing the About page tabs.
Comment 6 Kyle M Hall 2023-01-06 16:08:03 UTC Comment hidden (obsolete)
Comment 7 Owen Leonard 2023-01-20 15:52:22 UTC Comment hidden (obsolete)
Comment 8 Owen Leonard 2023-01-20 15:52:27 UTC Comment hidden (obsolete)
Comment 9 Owen Leonard 2023-01-20 15:52:32 UTC Comment hidden (obsolete)
Comment 10 Owen Leonard 2023-01-20 16:04:08 UTC Comment hidden (obsolete)
Comment 11 Katrin Fischer 2023-02-05 12:38:45 UTC
Created attachment 146199 [details] [review]
Bug 32571: Use template wrapper to build tabbed components

This patch adds Template::Toolkit WRAPPER blocks to html_helpers.inc so
that templates can build tabbed components while keeping tab structural
markup separate.

Each individual component of a Bootstrap tabbed interface is defined:

- Main tab container
- Tab links container
- Individual tab links
- Tab panel container
- Individual tab panels

Included is a usage example:

  [ WRAPPER tabs id= "tabs container id" ]
      [ WRAPPER tabs_nav ]
        [ WRAPPER tab_item tabname= "tab name 1" ] [ content ] [ END ]
          [ WRAPPER tab_item tabname= "tab name 2" ] [ content ] [ END ]
            ...
        [ END ]
        [ WRAPPER tab_panels ]
          [ WRAPPER tab_panel id="tab name 1"] [ content ] [ END ]
          [ WRAPPER tab_panel id="tab name 2"] [ content ] [ END ]
            ...
      [ END ]
  [ END ]

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Kyle M Hall <kyle@bywatersolutions.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 12 Katrin Fischer 2023-02-05 12:38:49 UTC
Created attachment 146200 [details] [review]
Bug 32571: (follow-up) Implement abstracted tabs on About page

This patch implements the proposed system for building tabs on the About
page.

To test, apply the patch and view the About page. It should look the
same as before and all tabs should function correctly.

Signed-off-by: David Nind <david@davidnind.com>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 13 Katrin Fischer 2023-02-05 12:38:54 UTC
Created attachment 146201 [details] [review]
Bug 32571: (follow-up) Use more unique variable name to avoid collisions

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 14 Tomás Cohen Arazi 2023-02-07 18:29:27 UTC
Pushed to master for 23.05.

Nice work everyone, thanks!
Comment 15 Jacob O'Mara 2023-02-08 16:53:16 UTC
Nice work, thanks everyone!

Pushed to 22.11.x for the next release.
Comment 16 Lucas Gass 2023-02-15 21:34:12 UTC
Enhancement will not be backported to 22.05.x.
Comment 17 Fridolin Somers 2023-03-02 05:40:27 UTC
Shouldn't we add a coding guideline for this ?
Comment 18 Owen Leonard 2023-03-07 13:17:53 UTC
(In reply to Fridolin Somers from comment #17)
> Shouldn't we add a coding guideline for this ?

I updated this page:

https://wiki.koha-community.org/wiki/Interface_patterns#Tabs