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
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.
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.
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.
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.
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>
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>
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>
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>
Looking good.. again the top padding is fixed elsewhere already.. Passing QA
Sorry, needs a rebase
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>
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>
Ouch, There are merge conflicts inside patch on koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
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>
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>
Pushed to master for 22.05, thanks to everybody involved [U+1F984]