Attachment 131851 Details for Bug 29999 – Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page

[patch] Bug 29999: Replace the use of jQueryUI tabs on authorized values administration page

Bug-29999-Replace-the-use-of-jQueryUI-tabs-on-auth.patch (text/plain), 13.14 KB, created by Fridolin Somers on 2022-03-18 06:41:13 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Fridolin Somers

Created: 2022-03-18 06:41:13 UTC

Size: 13.14 KB

patch

obsolete

>From 17f0e9cff81b8b921d364231cffe8d744a2bdfe7 Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Tue, 1 Feb 2022 19:36:22 +0000
>Subject: [PATCH] Bug 29999: Replace the use of jQueryUI tabs on authorized
> values administration page
>
>This patch updates the authorized values edit interface so that it uses
>Bootstrap tabs instead of jQueryUI tabs for displaying icon sets.
>
>Normally Bootstrap tabs don't have to be initiated via JavaScript, but
>this page requires some JS to select the first tab as active if no other
>tabs are active. Because of the way the template works it's not simple
>to do it via template logic, so in this case some JS helps.
>
>To test, apply the patch and rebuild the staff interface CSS
>(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
>
>- Go to Administration -> Authorized values in the staff interface.
>- Select a category and then add or edit an authorized value in that
>  category.
>  - On the edit page you should see tabs under "Choose an icon."
>  - Confirm that the tabs look correct and work correctly.
>  - If you did not previously have any icon selected, the "None" tab
>    should be active.
>  - If you had an icon selected, that icon set's tab should be
>    active.
>  - Confirm that changing icons works correctly and that the
>    selected icon's tab is always active when you return to the edit
>    page.
>
>Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
>Signed-off-by: Fridolin Somers <fridolin.somers@biblibre.com>
>---
> .../prog/css/src/staff-global.scss            |   6 +
> .../en/modules/admin/authorised_values.tt     | 131 ++++++++++--------
> 2 files changed, 83 insertions(+), 54 deletions(-)
>
>diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>index fbf5200bfe..7f6375e895 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>@@ -1014,6 +1014,11 @@ fieldset {
>                 padding-bottom: 0;
>             }
>         }
>+
>+        .toptabs {
>+            clear: both;
>+            margin: 1em;
>+        }
>     }
> }
> 
>@@ -3591,6 +3596,7 @@ code {
> }
> 
> .tab-content {
>+    background-color: #FFF;
>     border: 1px solid #B9D8D9;
>     border-top-width: 0;
>     padding: 1em;
>diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/authorised_values.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/authorised_values.tt
>index 3bcd576083..12336be243 100644
>--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/authorised_values.tt
>+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/authorised_values.tt
>@@ -12,13 +12,29 @@
> </title>
> [% INCLUDE 'doc-head-close.inc' %]
> 
>-<style>
>-    fieldset.rows div.toptabs li { clear:none;margin-right:.5em;padding-bottom:0;width:auto; }
>-    fieldset.rows div.toptabs .ui-tabs-nav li.ui-tabs-active {background-color : #F4F8F9; }
>-    fieldset.rows .ui-tabs-panel { margin-right : 10px; margin-left : 10px;margin-bottom:10px;}
>-    fieldset.rows .ui-tabs-nav { margin-left : 10px; }
>-    #lib, #lib_opac { width: 75% }
>-</style>
>+[% FILTER collapse %]
>+    <style>
>+        fieldset.rows div.toptabs li {
>+            clear: none;
>+            margin-right:.4em;
>+            padding-bottom: 0;
>+            width: auto;
>+        }
>+        #lib,
>+        #lib_opac {
>+            width: 75%;
>+        }
>+        .authval-icons {
>+            display: flex;
>+            flex-wrap: wrap;
>+            clear: both;
>+        }
>+        .authval-icons label {
>+            float: none;
>+            width: auto;
>+        }
>+    </style>
>+[% END %]
> </head>
> 
> <body id="admin_authorised_values" class="admin">
>@@ -146,35 +162,46 @@
>                                     </li>
>                                 </ol>
> 
>-                                <div id="icons" class="toptabs" style="clear:both">
>-                                    <h5 style="margin-left:10px;">Choose an icon:</h5>
>-                                    <ul>
>-                                        <li><a href="#none">None</a></li>
>+                                <div id="icons" class="toptabs">
>+                                    <h5>Choose an icon:</h5>
>+                                    <ul class="nav nav-tabs" role="tablist">
>+                                        <li role="presentation">
>+                                            <a aria-controls="none" role="tab" data-toggle="tab" href="#none">None</a>
>+                                        </li>
>                                         [% FOREACH imageset IN imagesets %]
>-                                            [% IF ( imageset.imagesetactive ) %]<li class="ui-tabs-active">[% ELSE %]<li>[% END %]<a href="#[% imageset.imagesetname | uri %]">[% imageset.imagesetname | html %]</a></li>
>+                                            [% IF ( imageset.imagesetactive ) %]
>+                                                <li role="presentation" class="active">
>+                                            [% ELSE %]
>+                                                <li role="presentation">
>+                                            [% END %]
>+                                                <a aria-controls="[% imageset.imagesetname | html %]" role="tab" data-toggle="tab" href="#[% imageset.imagesetname | uri %]">[% imageset.imagesetname | html %]</a>
>+                                            </li>
>                                         [% END %]
>                                         [% IF av.imageurl.match('^http') %]
>-                                            <li class="ui-tabs-active">
>+                                            <li role="presentation" class="active">
>                                         [% ELSE %]
>-                                            <li>
>+                                            <li role="presentation">
>                                         [% END %]
>-                                            <a href="#remote">Remote image</a>
>+                                            <a aria-controls="remote" role="tab" data-toggle="tab" href="#remote">Remote image</a>
>                                         </li>
>                                     </ul>
>-                                    <div id="none">
>-                                        <ul>
>-                                            <li>
>-                                                <label for="noimage">No image: </label><input type="radio" name="image" id="noimage" value="removeImage" />
>-                                            </li>
>-                                        </ul>
>-                                        <br class="clear" />
>-                                    </div>
>-
>-                                    [% FOREACH imageset IN imagesets %]
>-                                        <div id="[% imageset.imagesetname | html %]">
>-                                            <ul>
>-                                                [% FOREACH image IN imageset.images %]
>-                                                    <li style="float: none; display: inline-block; clear : none; width: auto;">
>+                                    <div class="tab-content">
>+                                        <div id="none" role="tabpanel" class="tab-pane">
>+                                            <div class="authval-icons">
>+                                                <label for="noimage">No image:
>+                                                    <input type="radio" name="imageurl" id="noimage" value="removeImage" />
>+                                                </label>
>+                                            </div>
>+                                        </div> 
>+
>+                                        [% FOREACH imageset IN imagesets %]
>+                                            [% IF ( imageset.imagesetactive ) %]
>+                                                <div id="[% imageset.imagesetname | html %]" role="tabpanel" class="tab-pane active">
>+                                            [% ELSE %]
>+                                                <div id="[% imageset.imagesetname | html %]" role="tabpanel" class="tab-pane">
>+                                            [% END %]
>+                                                <div class="authval-icons">
>+                                                    [% FOREACH image IN imageset.images %]
>                                                         <label>
>                                                             [% IF ( image.StaffImageUrl ) %]
>                                                                 <img src="[% image.StaffImageUrl | html %]" alt="[% image.StaffImageUrl | html %]" title="[% image.StaffImageUrl | html %]" />
>@@ -189,30 +216,23 @@
>                                                                 [% END %]
>                                                             [% END %]
>                                                         </label>
>-                                                    </li>
>-                                                [% END # /FOREACH image %]
>-                                            </ul>
>-                                            <br class="clear" />
>-                                        </div>
>-                                    [% END # /FOREACH imageset %]
>-
>-                                    <div id="remote">
>-                                        <ul>
>-                                            <li>
>-                                                <label for="remote_image_check"> Remote image:</label>
>-                                                [% IF av.imageurl.match('^http') %]
>-                                                    <input type="radio" id="remote_image_check" name="image" value="remoteImage" checked="checked" />
>-                                                    <input type="text" name="remoteImage" size="48" maxlength="200" value="[% av.imageurl | html %]" onmousedown="document.getElementById('remote_image_check').checked = true;" />
>-                                                    <img src="[% av.imageurl | html %]" alt="" />
>-                                                [% ELSE %]
>-                                                    <input type="radio" id="remote_image_check" name="image" value="remoteImage" />
>-                                                    <input type="text" name="remoteImage" size="48" maxlength="200" value="" onmousedown="document.getElementById('remote_image_check').checked = true;" />
>-                                                [% END %]
>-                                            </li>
>-                                        </ul>
>-                                        <br class="clear" />
>-                                    </div>
>-
>+                                                    [% END # /FOREACH image %]
>+                                                </div> 
>+                                            </div> 
>+                                        [% END # /FOREACH imageset %]
>+
>+                                        <div id="remote" role="tabpanel" class="tab-pane">
>+                                            <label for="remote_image_check"> Remote image:</label>
>+                                            [% IF av.imageurl.match('^http') %]
>+                                                <input type="radio" id="remote_image_check" name="image" value="remoteImage" checked="checked" />
>+                                                <input type="text" name="remoteImage" size="48" maxlength="200" value="[% av.imageurl | html %]" onmousedown="document.getElementById('remote_image_check').checked = true;" />
>+                                                <img src="[% av.imageurl | html %]" alt="" />
>+                                            [% ELSE %]
>+                                                <input type="radio" id="remote_image_check" name="image" value="remoteImage" />
>+                                                <input type="text" name="remoteImage" size="48" maxlength="200" value="" onmousedown="document.getElementById('remote_image_check').checked = true;" />
>+                                            [% END %]
>+                                        </div> 
>+                                    </div> 
>                                 </div> 
>                             [% END # /IF action_add_category %]
>                         </fieldset>
>@@ -415,7 +435,6 @@
>             if ( $("#branches option:selected").length < 1 ) {
>                 $("#branches option:first").attr("selected", "selected");
>             }
>-            $('#icons').tabs();
> 
>             $("a.delete").click(function(){
>                 return confirm(_("Are you sure you want to delete this authorized value?"));
>@@ -428,6 +447,10 @@
>             $("#delete_category").on('submit', function(){
>                 return confirm(_("Are you sure you want to delete this authorized value category?"));
>             });
>+
>+            if( $(".tab-pane.active").length < 1 ){
>+                $("#icons a:first").tab("show");
>+            }
>         });
>     </script>
> [% END %]
>-- 
>2.35.1

Actions: View | Diff | Splinter Review

Attachments on bug 29999: 130053 | 130055 | 131068 | 131849 | 131851 | 131852 | 131979 | 131980