Bugzilla – Attachment 133118 Details for
Bug 30494
Replace the use of jQueryUI Accordion on the table settings page
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 30494: Replace the use of jQueryUI Accordion on the table settings page
Bug-30494-Replace-the-use-of-jQueryUI-Accordion-on.patch (text/plain), 26.15 KB, created by
Owen Leonard
on 2022-04-08 10:56:05 UTC
(
hide
)
Description:
Bug 30494: Replace the use of jQueryUI Accordion on the table settings page
Filename:
MIME Type:
Creator:
Owen Leonard
Created:
2022-04-08 10:56:05 UTC
Size:
26.15 KB
patch
obsolete
>From 318de09f97e7901f367a0155b7836dc3306d1364 Mon Sep 17 00:00:00 2001 >From: Owen Leonard <oleonard@myacpl.org> >Date: Thu, 7 Apr 2022 16:02:37 +0000 >Subject: [PATCH] Bug 30494: Replace the use of jQueryUI Accordion on the table > settings page > >This page updates the table settings page so that it uses Bootstrap's >"Collapse" feature instead of jQueryUI's Accordion. > >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 -> Table settings. >- You should see a list of table settings which looks much the same as > it did before, with arrow icons prefixing each section header. All > panels should be collapsed. >- Test expanding and collapsing panels to confirm it's working > correctly. >- When you expand a section the heading arrow should change from > right-pointing to down. >- Make a change to one of the table configurations. After clicking > "Save" the page should reload with the same panel expanded. >--- > admin/columns_settings.pl | 2 +- > .../prog/css/src/staff-global.scss | 71 +++++ > .../prog/en/modules/admin/columns_settings.tt | 275 +++++++++++++----- > 3 files changed, 276 insertions(+), 72 deletions(-) > >diff --git a/admin/columns_settings.pl b/admin/columns_settings.pl >index 55d312d4f9..474b4237ee 100755 >--- a/admin/columns_settings.pl >+++ b/admin/columns_settings.pl >@@ -70,7 +70,7 @@ if ( $action eq 'save' ) { > if ( $action eq 'list' ) { > my $modules = C4::Utils::DataTables::TablesSettings::get_modules; > $template->param( >- panel => ( $input->param('panel') || 0 ), >+ panel => defined $input->param('panel') ? $input->param('panel') : undef, > modules => $modules, > ); > } >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 b9d0573dc7..1113f7096d 100644 >--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss >@@ -3362,6 +3362,77 @@ button, > padding: 3px 5px; > } > >+/* Bootstrap Collapse */ >+ >+.panel { >+ background: #F4F8F9 none; >+ box-shadow: none; >+} >+ >+.panel-collapse { >+ background: #FFF none; >+} >+ >+.panel-title { >+ a { >+ border-radius: 3px; >+ display: block; >+ padding: 10px 15px; >+ border-bottom-left-radius: 0; >+ border-bottom-right-radius: 0; >+ >+ &::before { >+ content: "\f0d7"; >+ display: inline-block; >+ font-family: FontAwesome; >+ width: 1em; >+ } >+ >+ &:hover { >+ background: #e6f0f2 none; >+ border-bottom-left-radius: 0; >+ border-bottom-right-radius: 0; >+ } >+ >+ &.collapsed { >+ &::before { >+ content: "\f0da"; >+ display: inline-block; >+ font-family: FontAwesome; >+ width: 1em; >+ } >+ >+ &:hover { >+ background: #e6f0f2 none; >+ border-bottom-left-radius: 3px; >+ border-bottom-right-radius: 3px; >+ } >+ } >+ } >+} >+ >+.panel-default { >+ border: 1px solid #B9D8D9; >+ > .panel-heading { >+ background: transparent none; >+ padding: 0; >+ >+ + .panel-collapse { >+ > .panel-body { >+ border-top-color: #B9D8D9; >+ } >+ } >+ } >+} >+ >+.panel-group { >+ .panel { >+ + .panel { >+ margin-top: 3px; >+ } >+ } >+} >+ > #toolbar { > .dropdown-menu { > border-top-width: 1px; >diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/columns_settings.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/columns_settings.tt >index 5db60d762c..786ee7efc9 100644 >--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/columns_settings.tt >+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/columns_settings.tt >@@ -201,89 +201,229 @@ > <main> > > <h2>Table settings</h2> >- <div id="modules"> >- <div class="panel_header"><a href="#acqui">Acquisition</a></div> >- <div id="acqui"> >- <h3>Acquisition tables</h3> >- [% PROCESS pagelist module=modules.acqui modulename="acqui" %] >+ <div class="panel-group" id="modules" role="tablist" aria-multiselectable="true"> >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="acquiHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#acqui" aria-expanded="false" aria-controls="collapseOne"> >+ Acquisition >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="acqui" class="panel-collapse collapse" role="tabpanel" aria-labelledby="acquiHeading"> >+ <div class="panel-body"> >+ <h3>Acquisition tables</h3> >+ [% PROCESS pagelist module=modules.acqui modulename="acqui" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#admin">Administration</a></div> >- <div id="admin"> >- <h3>Administration tables</h3> >- [% PROCESS pagelist module=modules.admin modulename="admin" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="adminHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#admin" aria-expanded="false" aria-controls="collapseOne"> >+ Administration >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="admin" class="panel-collapse collapse" role="tabpanel" aria-labelledby="adminHeading"> >+ <div class="panel-body"> >+ <h3>Administration tables</h3> >+ [% PROCESS pagelist module=modules.admin modulename="admin" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#authorities">Authorities</a></div> >- <div id="authorities"> >- <h3>Authorities tables</h3> >- [% PROCESS pagelist module=modules.authorities modulename="authorities" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="authoritiesHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#authorities" aria-expanded="false" aria-controls="collapseOne"> >+ Authorities >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="authorities" class="panel-collapse collapse" role="tabpanel" aria-labelledby="authoritiesHeading"> >+ <div class="panel-body"> >+ <h3>Authorities tables</h3> >+ [% PROCESS pagelist module=modules.authorities modulename="authorities" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#catalog">Catalog</a></div> >- <div id="catalogue"> >- <h3>Catalogue tables</h3> >- [% PROCESS pagelist module=modules.catalogue modulename="catalogue" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="catalogueHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#catalogue" aria-expanded="false" aria-controls="collapseOne"> >+ Catalog >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="catalogue" class="panel-collapse collapse" role="tabpanel" aria-labelledby="catalogueHeading"> >+ <div class="panel-body"> >+ <h3>Catalogue tables</h3> >+ [% PROCESS pagelist module=modules.catalogue modulename="catalogue" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#cataloguing">Cataloging</a></div> >- <div id="cataloguing"> >- <h3>Cataloguing tables</h3> >- [% PROCESS pagelist module=modules.cataloguing modulename="cataloguing" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="cataloguingHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#cataloguing" aria-expanded="false" aria-controls="collapseOne"> >+ Cataloging >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="cataloguing" class="panel-collapse collapse" role="tabpanel" aria-labelledby="cataloguingHeading"> >+ <div class="panel-body"> >+ <h3>Cataloguing tables</h3> >+ [% PROCESS pagelist module=modules.cataloguing modulename="cataloguing" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#circulation">Circulation</a></div> >- <div id="circulation"> >- <h3>Circulation tables</h3> >- [% PROCESS pagelist module=modules.circ modulename="circ" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="circulationHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#circulation" aria-expanded="false" aria-controls="collapseOne"> >+ Circulation >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="circulation" class="panel-collapse collapse" role="tabpanel" aria-labelledby="circulationHeading"> >+ <div class="panel-body"> >+ <h3>Circulation tables</h3> >+ [% PROCESS pagelist module=modules.circ modulename="circ" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#coursereserves">Course reserves</a></div> >- <div id="coursereserves"> >- <h3>Course reserves tables</h3> >- [% PROCESS pagelist module=modules.coursereserves modulename="coursereserves" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="coursereservesHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#coursereserves" aria-expanded="false" aria-controls="collapseOne"> >+ Course reserves >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="coursereserves" class="panel-collapse collapse" role="tabpanel" aria-labelledby="coursereservesHeading"> >+ <div class="panel-body"> >+ <h3>Course reserves tables</h3> >+ [% PROCESS pagelist module=modules.coursereserves modulename="coursereserves" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#ill">Interlibrary loans</a></div> >- <div id="ill"> >- <h3>Interlibrary loans tables</h3> >- [% PROCESS pagelist module=modules.illrequests modulename="illrequests" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="illHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#ill" aria-expanded="false" aria-controls="collapseOne"> >+ Interlibrary loans >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="ill" class="panel-collapse collapse" role="tabpanel" aria-labelledby="illHeading"> >+ <div class="panel-body"> >+ <h3>Interlibrary loans tables</h3> >+ [% PROCESS pagelist module=modules.illrequests modulename="illrequests" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#members">Patrons</a></div> >- <div id="members"> >- <h3>Patrons tables</h3> >- [% PROCESS pagelist module=modules.members modulename="members" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="membersHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#members" aria-expanded="false" aria-controls="collapseOne"> >+ Patrons >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="members" class="panel-collapse collapse" role="tabpanel" aria-labelledby="membersHeading"> >+ <div class="panel-body"> >+ <h3>Patrons tables</h3> >+ [% PROCESS pagelist module=modules.members modulename="members" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#pos">Point of sale</a></div> >- <div id="pos"> >- <h3>Point of sale tables</h3> >- [% PROCESS pagelist module=modules.pos modulename="pos" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="posHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#pos" aria-expanded="false" aria-controls="collapseOne"> >+ Point of sale >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="pos" class="panel-collapse collapse" role="tabpanel" aria-labelledby="posHeading"> >+ <div class="panel-body"> >+ <h3>Point of sale tables</h3> >+ [% PROCESS pagelist module=modules.pos modulename="pos" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#tools">Tools</a></div> >- <div id="tools"> >- <h3>Tools tables</h3> >- [% PROCESS pagelist module=modules.tools modulename="tools" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="toolsHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#tools" aria-expanded="false" aria-controls="collapseOne"> >+ Tools >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="tools" class="panel-collapse collapse" role="tabpanel" aria-labelledby="toolsHeading"> >+ <div class="panel-body"> >+ <h3>Tools tables</h3> >+ [% PROCESS pagelist module=modules.tools modulename="tools" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#opac">OPAC</a></div> >- <div id="opac"> >- <h3>OPAC tables</h3> >- [% PROCESS pagelist module=modules.opac modulename="opac" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="opacHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#opac" aria-expanded="false" aria-controls="collapseOne"> >+ OPAC >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="opac" class="panel-collapse collapse" role="tabpanel" aria-labelledby="opacHeading"> >+ <div class="panel-body"> >+ <h3>OPAC tables</h3> >+ [% PROCESS pagelist module=modules.opac modulename="opac" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#reports">Reports</a></div> >- <div id="reports"> >- <h3>Reports tables</h3> >- [% PROCESS pagelist module=modules.reports modulename="reports" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="reportsHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#reports" aria-expanded="false" aria-controls="collapseOne"> >+ Reports >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="reports" class="panel-collapse collapse" role="tabpanel" aria-labelledby="reportsHeading"> >+ <div class="panel-body"> >+ <h3>Reports tables</h3> >+ [% PROCESS pagelist module=modules.reports modulename="reports" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > >- <div class="panel_header"><a href="#serials">Serials</a></div> >- <div id="serials"> >- <h3>Serials tables</h3> >- [% PROCESS pagelist module=modules.serials modulename="serials" %] >+ <div class="panel panel-default"> >+ <div class="panel-heading" role="tab" id="serialsHeading"> >+ <h2 class="panel-title"> >+ <a class="collapsed" role="button" data-toggle="collapse" data-parent="#modules" href="#serials" aria-expanded="false" aria-controls="collapseOne"> >+ Serials >+ </a> >+ </h2> >+ </div> <!-- /.panel-heading --> >+ <div id="serials" class="panel-collapse collapse" role="tabpanel" aria-labelledby="serialsHeading"> >+ <div class="panel-body"> >+ <h3>Serials tables</h3> >+ [% PROCESS pagelist module=modules.serials modulename="serials" %] >+ </div> <!-- /.panel-body --> >+ </div> <!-- /.panel-collapse --> > </div> > > </div> >@@ -299,20 +439,13 @@ > > [% MACRO jsinclude BLOCK %] > [% Asset.js("js/admin-menu.js") | $raw %] >- <script> >- $(document).ready( function() { >- var accordion = $( "#modules" ).accordion({ >- collapsible: true, >- heightStyle: "content", >- header: ".panel_header", >- [%- IF panel -%] >- [%# we were asked to show a specific panel, usually on update %] >- active: [%- panel | html -%] >- [%- ELSE -%] >- active: false >- [%- END -%] >+ >+ [%- IF ( panel.defined && panel >= 0 ) -%] >+ <script> >+ $(document).ready( function() { >+ $("#modules a.collapsed:eq(" + Number( [% panel | html %] ) + ")").click(); > }); >- }); >- </script> >+ </script> >+ [%- END -%] > [% END %] > [% INCLUDE 'intranet-bottom.inc' %] >-- >2.20.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 30494
:
133118
|
133124
|
133471