Attachment 130053 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), 9.09 KB, created by Owen Leonard on 2022-02-01 19:38:16 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Owen Leonard

Created: 2022-02-01 19:38:16 UTC

Size: 9.09 KB

patch

obsolete

>From 5e105128885c7dca31a077868369a96bbfa82bc6 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.
>---
> .../prog/css/src/staff-global.scss            |   6 +
> .../en/modules/admin/authorised_values.tt     | 122 ++++++++++++------
> 2 files changed, 85 insertions(+), 43 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 75510ad470..94dfdcf964 100644
>--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
>@@ -1007,6 +1007,11 @@ fieldset {
>                 padding-bottom: 0;
>             }
>         }
>+
>+        .toptabs {
>+            clear: both;
>+            margin: 1em;
>+        }
>     }
> }
> 
>@@ -3572,6 +3577,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 d8215c817b..377e29e942 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,14 +12,29 @@
> Authorized values &rsaquo; Administration &rsaquo; Koha
> </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">
>@@ -138,40 +153,58 @@ Authorized values &rsaquo; Administration &rsaquo; Koha
>         </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>
>-				  [% 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>
>-				  [% END %]
>-			</ul>
>-  <div id="none"><ul>
>-  <li><label for="noimage">No image: </label><input type="radio" name="imageurl" 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;">
>-            <label> [% IF ( image.StaffImageUrl ) %]
>-              <img src="[% image.StaffImageUrl | html %]" alt="[% image.StaffImageUrl | html %]" title="[% image.StaffImageUrl | html %]" />
>-        [% ELSE %]
>-        [% END %]
>-    [% IF ( image.checked ) %]
>-              <input type="radio" name="imageurl" value="[% image.KohaImage | html %]" checked="checked" />
>-    [% ELSE %]
>-              [% IF ( image.KohaImage ) %] 
>-              <input type="radio" name="imageurl" value="[% image.KohaImage | html %]" />
>-              [% END %]
>-    [% END %]
>-            </label>
>-			</li>
>-  [% END %]</ul>
>-  <br class="clear" />
>-  </div>
>-  [% END %]
>-  </div>
>+        <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 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 %]
>+            </ul>
>+
>+            <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 %]" />
>+                                    [% ELSE %]
>+                                    [% END %]
>+                                    [% IF ( image.checked ) %]
>+                                        <input type="radio" name="imageurl" value="[% image.KohaImage | html %]" checked="checked" />
>+                                    [% ELSE %]
>+                                        [% IF ( image.KohaImage ) %] 
>+                                            <input type="radio" name="imageurl" value="[% image.KohaImage | html %]" />
>+                                        [% END %]
>+                                    [% END %]
>+                                </label>
>+                            [% END %]
>+                        </div>
>+                    </div> 
>+                [% END %]
>+            </div> 
>+        </div> 
>         [% END %]
>         </fieldset>
>        <fieldset class="action"> <input type="hidden" name="id" value="[% id | html %]" />
>@@ -366,7 +399,6 @@ Authorized values &rsaquo; Administration &rsaquo; Koha
>             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?"));
>@@ -379,6 +411,10 @@ Authorized values &rsaquo; Administration &rsaquo; Koha
>             $("#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.20.1

Actions: View | Diff | Splinter Review

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