Bugzilla – Attachment 131981 Details for
Bug 29998
Replace the use of jQueryUI tabs on item types administration page
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 29998: Replace the use of jQueryUI tabs on item types administration page
Bug-29998-Replace-the-use-of-jQueryUI-tabs-on-item.patch (text/plain), 11.83 KB, created by
Jonathan Druart
on 2022-03-21 15:15:24 UTC
(
hide
)
Description:
Bug 29998: Replace the use of jQueryUI tabs on item types administration page
Filename:
MIME Type:
Creator:
Jonathan Druart
Created:
2022-03-21 15:15:24 UTC
Size:
11.83 KB
patch
obsolete
>From 21435629ba7516ddad42ca0417827978bc27a943 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Thu, 17 Mar 2022 18:21:56 +0000 >Subject: [PATCH] Bug 29998: Replace the use of jQueryUI tabs on item types > administration page > >This patch updates the item type edit interface so that it uses >Bootstrap tabs instead of jQueryUI tabs for displaying icon sets. > >Unrelated: The patch removes an invalid "type" attribute from a <select> >element. > >- Go to Administration -> Item types in the staff interface. >- Edit an item type. >- 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 if you specify a remote image (e.g. > https://via.placeholder.com/50/FF0000/FFFFFF.png ) the tab is > correctly shown after you save and re-edit. >- Confirm that changing icons works correctly and that the selected > icon's tab is always active when you return to the edit view. > >Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> >--- > .../prog/en/modules/admin/itemtypes.tt | 130 +++++++++++------- > 1 file changed, 78 insertions(+), 52 deletions(-) > >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt >index aed2ebc061f..d395f946b7f 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/itemtypes.tt >@@ -25,12 +25,25 @@ > Item types › Administration › 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; } >-</style> >+[% FILTER collapse %] >+ <style> >+ fieldset.rows div.toptabs li { >+ clear: none; >+ margin-right:.4em; >+ padding-bottom: 0; >+ width: auto; >+ } >+ .itemtype-icons { >+ display: flex; >+ flex-wrap: wrap; >+ clear: both; >+ } >+ .itemtype-icons label { >+ float: none; >+ width: auto; >+ } >+ </style> >+[% END %] > </head> > > <body id="admin_itemtypes" class="admin"> >@@ -222,33 +235,46 @@ Item types › Administration › Koha > [% END %] > </ol> > [% UNLESS Koha.Preference('noItemTypeImages') && Koha.Preference('OpacNoItemTypeImages') %] >- <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="non" role="tab" data-toggle="tab" href="#none">None</a> >+ </li> > [% FOREACH imageset IN imagesets %] > [% IF ( imageset.imagesetactive ) %] >- <li class="ui-tabs-active"> >+ <li role="presentation" class="active"> > [% ELSE %] >- <li> >+ <li role="presentation"> > [% END %] >- <a href="#[% imageset.imagesetname | uri %]">[% imageset.imagesetname | html %]</a> >+ <a aria-controls="[% imageset.imagesetname | uri %]" role="tab" data-toggle="tab" href="#[% imageset.imagesetname | uri %]">[% imageset.imagesetname | html %]</a> > </li> > [% END %] >- [% IF itemtype.image_location('intranet').match('^http') %]<li class="ui-tabs-active">[% ELSE %]<li>[% END %]<a href="#remote">Remote image</a></li> >+ [% IF itemtype.image_location('intranet').match('^http') %] >+ <li role="presentation" class="active"> >+ [% ELSE %] >+ <li role="presentation"> >+ [% END %] >+ <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> >+ <div class="tab-content"> >+ <div id="none" role="tabpanel" class="tab-pane"> >+ <div class="itemtype-icons"> >+ <label for="noimage">No image: >+ <input type="radio" name="image" id="noimage" value="removeImage" /> >+ </label> >+ </div> >+ </div> <!-- /.tab-pane --> > >- [% 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;"> >+ [% 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="itemtype-icons"> >+ [% FOREACH image IN imageset.images %] > <label> > [% IF image.StaffImageUrl %] > <img src="[% image.StaffImageUrl | html %]" alt="[% image.StaffImageUrl | html %]" title="[% image.StaffImageUrl | html %]" /> >@@ -259,33 +285,31 @@ Item types › Administration › Koha > <input type="radio" name="image" value="[% image.KohaImage | html %]" /> > [% END %] > </label> >- </li> >- [% END %] >- </ul> >- <br class="clear" /> >- </div> >- [% END %] >+ [% END #/ FOREACH image %] >+ </div> <!-- /.itemtype-icons --> >+ </div> <!-- /.tab-pane --> >+ [% END #/FOREACH imageset %] > >- <div id="remote"> >- <ul> >- <li> >- <label for="remote_image_check"> Remote image:</label> >- [% SET image_location = itemtype.image_location('intranet') %] >- [% IF image_location.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="[% image_location | html %]" onmousedown="document.getElementById('remote_image_check').checked = true;" /> >- [% IF itemtype.imageurl %] >- <img src="[% image_location | html %]" alt="" /> >- [% END %] >- [% 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;" /> >+ [% SET image_location = itemtype.image_location('intranet') %] >+ [% IF image_location.match('^http') %] >+ <div id="remote" role="tabpanel" class="tab-pane active"> >+ [% ELSE %] >+ <div id="remote" role="tabpanel" class="tab-pane"> >+ [% END %] >+ <label for="remote_image_check"> Remote image:</label> >+ [% IF image_location.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="[% image_location | html %]" onmousedown="document.getElementById('remote_image_check').checked = true;" /> >+ [% IF itemtype.imageurl %] >+ <img src="[% image_location | html %]" alt="" /> > [% END %] >- </li> >- </ul> >- <br class="clear" /> >- </div> >- </div> >+ [% 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> <!-- /#remote --> >+ </div> <!-- /.tab-content --> >+ </div> <!-- /#icons --> > [% END %] > <ol class="oladditemtype"> > <li> >@@ -362,7 +386,7 @@ Item types › Administration › Koha > </li> > <li> > <label for="checkinmsgtype">Checkin message type: </label> >- <select type="text" id="checkinmsgtype" name="checkinmsgtype"> >+ <select id="checkinmsgtype" name="checkinmsgtype"> > [% IF itemtype.checkinmsgtype == 'message' %] > <option value="message" selected="selected">Message</option> > [% ELSE %] >@@ -589,7 +613,6 @@ Item types › Administration › Koha > [% INCLUDE 'columns_settings.inc' %] > <script> > $(document).ready(function() { >- $('#icons').tabs(); > var columns_settings = [% TablesSettings.GetColumns( 'admin', 'itemtypes', 'table_item_type', 'json' ) | $raw %]; > [% IF ( Koha.Preference('noItemTypeImages') && Koha.Preference('OpacNoItemTypeImages') ) %] > columns_settings.shift(); // Remove item type image column from configuration >@@ -617,6 +640,9 @@ Item types › Administration › Koha > toUC(this); > }); > $(".library_limitation").tooltip(); >+ if( $(".tab-pane.active").length < 1 ){ >+ $("#icons a:first").tab("show"); >+ } > }); > </script> > [% END %] >-- >2.25.1
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 29998
:
131895
| 131981