Bug 30474 - Convert tools pages tabs to Bootstrap (part 1)
Summary: Convert tools pages tabs to Bootstrap (part 1)
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks: 29226
  Show dependency treegraph
 
Reported: 2022-04-06 16:52 UTC by Owen Leonard
Modified: 2023-12-28 20:42 UTC (History)
4 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:
22.05.00


Attachments
Bug 30474: Convert tools pages tabs to Bootstrap (part 1) (16.56 KB, patch)
2022-04-06 17:11 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 30474: Convert tools pages tabs to Bootstrap (part 1) (16.56 KB, patch)
2022-04-13 11:56 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 30474: (follow-up) Tie editor initialization to tab activation (7.75 KB, patch)
2022-04-13 11:56 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 30474: Convert tools pages tabs to Bootstrap (part 1) (16.61 KB, patch)
2022-04-13 15:35 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 30474: (follow-up) Tie editor initialization to tab activation (7.80 KB, patch)
2022-04-13 15:35 UTC, Lucas Gass
Details | Diff | Splinter Review
Bug 30474: Convert tools pages tabs to Bootstrap (part 1) (16.68 KB, patch)
2022-04-20 15:35 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 30474: (follow-up) Tie editor initialization to tab activation (7.87 KB, patch)
2022-04-20 15:35 UTC, Martin Renvoize
Details | Diff | Splinter Review
Bug 30474: Convert tools pages tabs to Bootstrap (part 1) (15.73 KB, patch)
2022-05-03 12:14 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 30474: (follow-up) Tie editor initialization to tab activation (7.87 KB, patch)
2022-05-03 12:14 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 30474: Convert tools pages tabs to Bootstrap (part 1) (16.28 KB, patch)
2022-05-04 13:32 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 30474: (follow-up) Tie editor initialization to tab activation (7.87 KB, patch)
2022-05-04 13:32 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2022-04-06 16:52:08 UTC
Continuing the process of phasing out jQueryUI, this patch will replace jQueryUI tabs in a few tools templates with Bootstrap:

- additional-contents.tt
- batch_delete_records.tt
- batch_record_modification.tt
Comment 1 Owen Leonard 2022-04-06 17:11:58 UTC
Created attachment 133046 [details] [review]
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)

This patch converts jQueryUI tabs on three tools templates to Bootstrap
tabs.

To test, apply the patch and go to Tools -> HTML customizations.

- Click "New entry."
- On the entry form you should see two tabs, "Default" and "English
  (en)"
- The tabs should look correct and work correctly.

Go to Tools -> Batch record deletion.

 - Test the three tabs: "Upload a file", "Select a list of records", and
   "Enter a list of record numbers."

Go to Tools -> Batch record modification.

 -  Test the same three tabs on this page.
Comment 2 Lucas Gass 2022-04-08 18:00:06 UTC
On additional-contents.tt this patch seems to have a unintended effect of moving the CodeMirror-linenumber. 

When you use HTML customizations or New and use the CodeMirror editor (Edit with text editor) the line numbers are awkwardly placed now.

This happens to me in both Chrome and FF with the patch applied.
Comment 3 Owen Leonard 2022-04-13 11:56:32 UTC
Created attachment 133236 [details] [review]
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)

This patch converts jQueryUI tabs on three tools templates to Bootstrap
tabs.

To test, apply the patch and go to Tools -> HTML customizations.

- Click "New entry."
- On the entry form you should see two tabs, "Default" and "English
  (en)"
- The tabs should look correct and work correctly.

Go to Tools -> Batch record deletion.

 - Test the three tabs: "Upload a file", "Select a list of records", and
   "Enter a list of record numbers."

Go to Tools -> Batch record modification.

 -  Test the same three tabs on this page.
Comment 4 Owen Leonard 2022-04-13 11:56:37 UTC
Created attachment 133237 [details] [review]
Bug 30474: (follow-up) Tie editor initialization to tab activation

The way Bootstrap tabs manipulate the DOM, CodeMirror has problems
initializing correctly, I think because of redraws and CodeMirror's
attemps to position things absolutely.

The solution seems to be to wait until after a Bootstrap tab has
activated before initializing the CodeMirror instance. This patch
implements that, along with a check to prevent double-initializing the
same textarea.

I've also made a similar change to the way TinyMCE is initialized, which
I hope will help with the issue of the editor not always loading
correctly.

To test, apply the patch and go to Tools -> HTML customizations.

- Test creation and editing of HTML customization entries using both
  the default editor and the text editor (Edit -> Edit with text
  editor).
- Verify that the editor (CodeMirror or TinyMCE) loads correctly and
  looks correct, both upon page load and upon switching tabs between
  "Default" and other language tabs
- Verify that your edits are saved correctly.
Comment 5 Lucas Gass 2022-04-13 15:35:37 UTC
Created attachment 133271 [details] [review]
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)

This patch converts jQueryUI tabs on three tools templates to Bootstrap
tabs.

To test, apply the patch and go to Tools -> HTML customizations.

- Click "New entry."
- On the entry form you should see two tabs, "Default" and "English
  (en)"
- The tabs should look correct and work correctly.

Go to Tools -> Batch record deletion.

 - Test the three tabs: "Upload a file", "Select a list of records", and
   "Enter a list of record numbers."

Go to Tools -> Batch record modification.

 -  Test the same three tabs on this page.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 6 Lucas Gass 2022-04-13 15:35:40 UTC
Created attachment 133272 [details] [review]
Bug 30474: (follow-up) Tie editor initialization to tab activation

The way Bootstrap tabs manipulate the DOM, CodeMirror has problems
initializing correctly, I think because of redraws and CodeMirror's
attemps to position things absolutely.

The solution seems to be to wait until after a Bootstrap tab has
activated before initializing the CodeMirror instance. This patch
implements that, along with a check to prevent double-initializing the
same textarea.

I've also made a similar change to the way TinyMCE is initialized, which
I hope will help with the issue of the editor not always loading
correctly.

To test, apply the patch and go to Tools -> HTML customizations.

- Test creation and editing of HTML customization entries using both
  the default editor and the text editor (Edit -> Edit with text
  editor).
- Verify that the editor (CodeMirror or TinyMCE) loads correctly and
  looks correct, both upon page load and upon switching tabs between
  "Default" and other language tabs
- Verify that your edits are saved correctly.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Comment 7 Martin Renvoize 2022-04-20 15:35:45 UTC
Created attachment 133485 [details] [review]
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)

This patch converts jQueryUI tabs on three tools templates to Bootstrap
tabs.

To test, apply the patch and go to Tools -> HTML customizations.

- Click "New entry."
- On the entry form you should see two tabs, "Default" and "English
  (en)"
- The tabs should look correct and work correctly.

Go to Tools -> Batch record deletion.

 - Test the three tabs: "Upload a file", "Select a list of records", and
   "Enter a list of record numbers."

Go to Tools -> Batch record modification.

 -  Test the same three tabs on this page.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 8 Martin Renvoize 2022-04-20 15:35:49 UTC
Created attachment 133486 [details] [review]
Bug 30474: (follow-up) Tie editor initialization to tab activation

The way Bootstrap tabs manipulate the DOM, CodeMirror has problems
initializing correctly, I think because of redraws and CodeMirror's
attemps to position things absolutely.

The solution seems to be to wait until after a Bootstrap tab has
activated before initializing the CodeMirror instance. This patch
implements that, along with a check to prevent double-initializing the
same textarea.

I've also made a similar change to the way TinyMCE is initialized, which
I hope will help with the issue of the editor not always loading
correctly.

To test, apply the patch and go to Tools -> HTML customizations.

- Test creation and editing of HTML customization entries using both
  the default editor and the text editor (Edit -> Edit with text
  editor).
- Verify that the editor (CodeMirror or TinyMCE) loads correctly and
  looks correct, both upon page load and upon switching tabs between
  "Default" and other language tabs
- Verify that your edits are saved correctly.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 9 Martin Renvoize 2022-04-20 15:37:49 UTC
Looking good.. again the top padding is fixed elsewhere already.. Passing QA
Comment 10 Fridolin Somers 2022-05-02 20:28:21 UTC
Sorry, needs a rebase
Comment 11 Owen Leonard 2022-05-03 12:14:26 UTC
Created attachment 134532 [details] [review]
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)

This patch converts jQueryUI tabs on three tools templates to Bootstrap
tabs.

To test, apply the patch and go to Tools -> HTML customizations.

- Click "New entry."
- On the entry form you should see two tabs, "Default" and "English
  (en)"
- The tabs should look correct and work correctly.

Go to Tools -> Batch record deletion.

 - Test the three tabs: "Upload a file", "Select a list of records", and
   "Enter a list of record numbers."

Go to Tools -> Batch record modification.

 -  Test the same three tabs on this page.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 12 Owen Leonard 2022-05-03 12:14:31 UTC
Created attachment 134533 [details] [review]
Bug 30474: (follow-up) Tie editor initialization to tab activation

The way Bootstrap tabs manipulate the DOM, CodeMirror has problems
initializing correctly, I think because of redraws and CodeMirror's
attemps to position things absolutely.

The solution seems to be to wait until after a Bootstrap tab has
activated before initializing the CodeMirror instance. This patch
implements that, along with a check to prevent double-initializing the
same textarea.

I've also made a similar change to the way TinyMCE is initialized, which
I hope will help with the issue of the editor not always loading
correctly.

To test, apply the patch and go to Tools -> HTML customizations.

- Test creation and editing of HTML customization entries using both
  the default editor and the text editor (Edit -> Edit with text
  editor).
- Verify that the editor (CodeMirror or TinyMCE) loads correctly and
  looks correct, both upon page load and upon switching tabs between
  "Default" and other language tabs
- Verify that your edits are saved correctly.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 13 Fridolin Somers 2022-05-03 20:24:03 UTC
Ouch,
There are merge conflicts inside patch on
koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
Comment 14 Owen Leonard 2022-05-04 13:32:48 UTC
Created attachment 134609 [details] [review]
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)

This patch converts jQueryUI tabs on three tools templates to Bootstrap
tabs.

To test, apply the patch and go to Tools -> HTML customizations.

- Click "New entry."
- On the entry form you should see two tabs, "Default" and "English
  (en)"
- The tabs should look correct and work correctly.

Go to Tools -> Batch record deletion.

 - Test the three tabs: "Upload a file", "Select a list of records", and
   "Enter a list of record numbers."

Go to Tools -> Batch record modification.

 -  Test the same three tabs on this page.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 15 Owen Leonard 2022-05-04 13:32:52 UTC
Created attachment 134610 [details] [review]
Bug 30474: (follow-up) Tie editor initialization to tab activation

The way Bootstrap tabs manipulate the DOM, CodeMirror has problems
initializing correctly, I think because of redraws and CodeMirror's
attemps to position things absolutely.

The solution seems to be to wait until after a Bootstrap tab has
activated before initializing the CodeMirror instance. This patch
implements that, along with a check to prevent double-initializing the
same textarea.

I've also made a similar change to the way TinyMCE is initialized, which
I hope will help with the issue of the editor not always loading
correctly.

To test, apply the patch and go to Tools -> HTML customizations.

- Test creation and editing of HTML customization entries using both
  the default editor and the text editor (Edit -> Edit with text
  editor).
- Verify that the editor (CodeMirror or TinyMCE) loads correctly and
  looks correct, both upon page load and upon switching tabs between
  "Default" and other language tabs
- Verify that your edits are saved correctly.

Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Comment 16 Fridolin Somers 2022-05-05 00:32:51 UTC
Pushed to master for 22.05, thanks to everybody involved 🦄