Bug 30474

Summary: Convert tools pages tabs to Bootstrap (part 1)
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Testopia <testopia>
Severity: enhancement    
Priority: P5 - low CC: fridolin.somers, lucas, martin.renvoize, testopia
Version: Main   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
22.05.00
Bug Depends on:    
Bug Blocks: 29226    
Attachments: Bug 30474: Convert tools pages tabs to Bootstrap (part 1)
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)
Bug 30474: (follow-up) Tie editor initialization to tab activation
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)
Bug 30474: (follow-up) Tie editor initialization to tab activation
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)
Bug 30474: (follow-up) Tie editor initialization to tab activation
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)
Bug 30474: (follow-up) Tie editor initialization to tab activation
Bug 30474: Convert tools pages tabs to Bootstrap (part 1)
Bug 30474: (follow-up) Tie editor initialization to tab activation

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 🦄