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>
Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/additional-contents.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/additional-contents.tt
index a74cb32..d814f33 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/additional-contents.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/additional-contents.tt
@@ -240,35 +240,35 @@
         </fieldset>
 
         [% IF languages.size %]
-            <div style="clear:both"></div>
-            <div id="tabs">
-                <ul>
+            <div id="tabs" class="toptabs">
+                <ul class="nav nav-tabs" role="tablist">
                     [% FOR language IN languages %]
                         [% IF language.lang == 'default' %]
-                            <li><a href="#lang_default">Default</a></li>
+                            <li role="presentation"><a href="#lang_default" aria-controls="lang_default" role="tab" data-toggle="tab">Default</a></li>
                         [% ELSE %]
-                            <li><a href="#lang_[% language.lang | uri %]">[% language.description | html %]</a></li>
+                            <li role="presentation"><a href="#lang_[% language.lang | uri %]" aria-controls="lang_[% language.lang | uri %]" role="tab" data-toggle="tab">[% language.description | html %]</a></li>
                         [% END %]
                     [% END %]
                 </ul>
-
-                [% FOR language IN languages %]
-                    <div id="lang_[% language.lang | uri %]" class="lang clearfix" data-lang="[% language.description | html %]">
-                        <fieldset class="rows">
-                            <ol>
-                                <li style="list-style: none;">
-                                    <label for="title_[% language.lang | html %]">Title: </label>
-                                    <input id="title_[% language.lang| html %]" size="100" maxlength="250" type="text" name="title_[% language.lang | html %]" value="[% translated_contents.item(language.lang).title | html %]">
-                                </li>
-                                <li style="list-style: none;">
-                                    <label for="content_[% language.lang | html %]">Content: </label>
-                                    <textarea name="content_[% language.lang | html %]" id="content_[% language.lang | html %]" data-lang="[% language.lang | html%]" cols="75" rows="10">[% translated_contents.item(language.lang).content | html %]</textarea>
-                                    <input type="hidden" name="lang" value="[% language.lang | html %]" />
-                                </li>
-                            </ol>
-                        </fieldset>
-                    </div>
-                [% END %]
+                <div class="tab-content">
+                    [% FOR language IN languages %]
+                        <div id="lang_[% language.lang | uri %]" class="lang clearfix tab-pane" data-lang="[% language.description | html %]">
+                            <fieldset class="rows">
+                                <ol>
+                                    <li>
+                                        <label for="title_[% language.lang | html %]">Title: </label>
+                                        <input id="title_[% language.lang| html %]" size="100" maxlength="250" type="text" name="title_[% language.lang | html %]" value="[% translated_contents.item(language.lang).title | html %]">
+                                    </li>
+                                    <li>
+                                        <label for="content_[% language.lang | html %]">Content: </label>
+                                        <textarea name="content_[% language.lang | html %]" id="content_[% language.lang | html %]" data-lang="[% language.lang | html%]" cols="75" rows="10">[% translated_contents.item(language.lang).content | html %]</textarea>
+                                        <input type="hidden" name="lang" value="[% language.lang | html %]" />
+                                    </li>
+                                </ol>
+                            </fieldset>
+                        </div>
+                    [% END %]
+                </div> <!-- /.tab-content -->
             </div>
         [% ELSE %]
             <div id="lang_default">
@@ -567,7 +567,9 @@
     [% ELSE %]
         <script>
             $(document).ready(function() {
-                $("#tabs").tabs();
+                if( $("#tabs .tab-pane.active").length < 1 ){
+                    $("#tabs a:first").tab("show");
+                }
                 [% IF category == 'news' %]
                 $("#add_additional_content").validate({
                     submitHandler: function(form){

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_delete_records.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_delete_records.tt
index 4cf1439..c78702e 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_delete_records.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_delete_records.tt
@@ -66,14 +66,23 @@
         </ol>
       </fieldset>
 
-      <div id="batch_del_form" class="toptabs" style="clear:both">
-        <ul>
-          <li><a href="#uploadfile_tab">Upload a file</a></li>
-          [% IF lists.count %]<li id="show_list_option"><a href="#shelves_tab">Select a list of records</a></li>[% END %]
-          <li><a href="#enterlist_tab">Enter a list of record IDs</a></li>
+      <div id="batch_del_form" class="toptabs">
+        <ul class="nav nav-tabs" role="tablist">
+          <li role="presentation" class="active">
+              <a href="#uploadfile_tab" aria-controls="uploadfile_tab" role="tab" data-toggle="tab">Upload a file</a>
+          </li>
+          [% IF lists.count %]
+            <li id="show_list_option" role="presentation">
+                <a href="#shelves_tab" aria-controls="shelves_tab" role="tab" data-toggle="tab">Select a list of records</a>
+            </li>
+          [% END %]
+          <li role="presentation">
+            <a href="#enterlist_tab" aria-controls="enterlist_tab" role="tab" data-toggle="tab">Enter a list of record numbers</a>
+          </li>
         </ul>
 
-        <div id="uploadfile_tab">
+    <div class="tab-content">
+        <div id="uploadfile_tab" role="tabpanel" class="tab-pane active">
           <fieldset class="rows">
             <ol>
               <li><label for="uploadfile">File: </label> <input type="file" id="uploadfile" name="uploadfile" /></li>
@@ -83,7 +92,7 @@
         </div>
 
         [% IF lists.count %]
-            <div id="shelves_tab">
+            <div id="shelves_tab" role="tabpanel" class="tab-pane">
               <fieldset class="rows">
                 <ol>
                   <li>
@@ -93,7 +102,6 @@
                         [% FOREACH list IN lists %]
                           <option value="[% list.shelfnumber | html %]">[% list.shelfname | html %]</option>
                         [% END %]
-                      </option>
                     </select>
                   </li>
                 </ol>
@@ -102,7 +110,7 @@
             </div>
         [% END %]
 
-        <div id="enterlist_tab">
+        <div id="enterlist_tab" role="tabpanel" class="tab-pane">
           <fieldset class="rows">
             <ol>
               <li>
@@ -115,7 +123,8 @@
           &nbsp;
         </div>
 
-      </div>
+      </div> <!-- /.tab-content -->
+    </div>
 
       <fieldset class="action">
         <input type="hidden" name="op" value="list" />
@@ -227,8 +236,6 @@
         var MSG_CANNOT_BE_DELETED = _("This record cannot be deleted, at least one item is currently checked out.");
         $(document).ready(function() {
 
-          $("#batch_del_form").tabs();
-
           $("input[type='radio']").click(function(){
             if ($(this).attr('id') == 'authority_type') {
               $("#show_list_option").hide();

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
index e0c7027..ff3a61c 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/tools/batch_record_modification.tt
@@ -75,54 +75,63 @@
                             <br><br>
 
                             <div id="batch_mod_form" class="toptabs" style="clear:both">
-                                <ul>
-                                    <li><a href="#uploadfile_tab">Upload a file</a></li>
-                                        [% IF lists.count %]<li id="show_list_option"><a href="#shelves_tab">Select a list of records</a></li>[% END %]
-                                    <li><a href="#enterlist_tab">Enter a list of record IDs</a></li>
+                                <ul class="nav nav-tabs" role="tablist">
+                                    <li role="presentation" class="active">
+                                        <a href="#uploadfile_tab" aria-controls="uploadfile_tab" role="tab" data-toggle="tab">Upload a file</a>
+                                    </li>
+                                    [% IF lists.count %]
+                                        <li id="show_list_option">
+                                            <a href="#shelves_tab" aria-controls="shelves_tab" role="tab" data-toggle="tab">Select a list of records</a>
+                                        </li>
+                                    [% END %]
+                                    <li role="presentation">
+                                        <a href="#enterlist_tab" aria-controls="enterlist_tab" role="tab" data-toggle="tab">Enter a list of record numbers</a>
+                                    </li>
                                 </ul>
 
-                                <div id="uploadfile_tab">
-                                    <fieldset class="rows">
-                                        <ol>
-                                            <li><label for="uploadfile">File: </label> <input type="file" id="uploadfile" name="uploadfile" /></li>
-                                        </ol>
-                                    </fieldset>
-                                    &nbsp;
-                                </div>
+                                <div class="tab-content">
+                                    <div id="uploadfile_tab" role="tabpanel" class="tab-pane active">
+                                        <fieldset class="rows">
+                                            <ol>
+                                                <li><label for="uploadfile">File: </label> <input type="file" id="uploadfile" name="uploadfile" /></li>
+                                            </ol>
+                                        </fieldset>
+                                        &nbsp;
+                                    </div>
 
-                                [% IF lists.count %]
-                                    <div id="shelves_tab">
+                                    [% IF lists.count %]
+                                        <div id="shelves_tab" role="tabpanel" class="tab-pane">
+                                            <fieldset class="rows">
+                                                <ol>
+                                                    <li>
+                                                        <label for="shelf_number">List: </label>
+                                                        <select name="shelf_number" id="shelf_number">
+                                                            <option value="">Select a list</option>
+                                                            [% FOREACH list IN lists %]
+                                                            <option value="[% list.shelfnumber | html %]">[% list.shelfname | html %]</option>
+                                                            [% END %]
+                                                            </option>
+                                                        </select>
+                                                    </li>
+                                                </ol>
+                                            </fieldset>
+                                            &nbsp;
+                                        </div>
+                                    [% END %]
+
+                                    <div id="enterlist_tab" role="tabpanel" class="tab-pane">
                                         <fieldset class="rows">
                                             <ol>
                                                 <li>
-                                                    <label for="shelf_number">List: </label>
-                                                    <select name="shelf_number" id="shelf_number">
-                                                        <option value="">Select a list</option>
-                                                        [% FOREACH list IN lists %]
-                                                        <option value="[% list.shelfnumber | html %]">[% list.shelfname | html %]</option>
-                                                        [% END %]
-                                                        </option>
-                                                    </select>
+                                                    <label for="recordnumber_list">Record numbers: </label>
+                                                    <textarea rows="10" cols="30" id="recordnumber_list" name="recordnumber_list"></textarea>
+                                                    <div class="hint">Enter a list of biblionumbers or authority IDs, one per line.</div>
                                                 </li>
                                             </ol>
                                         </fieldset>
                                         &nbsp;
                                     </div>
-                                [% END %]
-
-                                <div id="enterlist_tab">
-                                    <fieldset class="rows">
-                                        <ol>
-                                            <li>
-                                                <label for="recordnumber_list">IDs: </label>
-                                                <textarea rows="10" cols="30" id="recordnumber_list" name="recordnumber_list"></textarea>
-                                                <div class="hint">Enter a list of biblionumbers or authority IDs, one per line.</div>
-                                            </li>
-                                        </ol>
-                                    </fieldset>
-                                    &nbsp;
-                                </div>
-
+                                </div> <!-- /.tab-content -->
                             </div> <!-- /#batch_mod_form -->
 
                             <fieldset class="rows">
@@ -277,8 +286,6 @@
     <script>
         $(document).ready(function() {
 
-            $("#batch_mod_form").tabs();
-
             $("input[type='radio']").click(function() {
                 if ($(this).attr('id') == 'authority_type') {
                     $("#show_list_option").hide();