Bug 23410: Add submenus to system preferences sidebar menu

This patch adds a submenu to the sidebar menu in the system preferences
interface. Submenu links let you jump to the sub-sections in each
preference category.

In the search results view, a link is added to allow the user to jump
directly to the section from which those results came. For instance, if
your search returns the "SuspendHoldsOpac" preference, the link will
take you to to the Circulation preferences page and jump the page to the
"Holds policy" section.

This patch also converts the expand/collapse arrows to Font Awesome
icons. The obsolete image files are removed.

If you click a submenu link for a section on the current page which has
been collapsed, the section will expand.

To test, apply the patch and rebuild the staff client CSS
(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).

 - Go to Administration -> System preferences.
 - Test the various preference categories and confirm that the submenus
   appear correctly and jump you to the right section.
   - Test that if you click a section heading to collapse it that
     clicking the corresponding submenu link in the sidebar causes it to
     expand again.
 - Do a search for system preferences and confirm that the sidebar menu
   displays correctly.
 - Confirm that the "View all..." links take you to the correct page and
   section.

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: David Nind <david@davidnind.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/preferences.css b/koha-tmpl/intranet-tmpl/prog/css/preferences.css
index 7ecce1b..1855af1 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/preferences.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/preferences.css
@@ -47,19 +47,35 @@ caption {
 h3 {
        color : #003366;
        margin : .4em 0;
-    width : 40%;
 }
 
-h3.expanded {
-    background: transparent url("../img/collapse.gif") 0 6px no-repeat;
-       cursor : pointer;
-       padding-left : 12px;
+/* https://css-tricks.com/hash-tag-links-padding/#article-header-id-4 */
+h3:target {
+    margin-top: -12px;
+    padding-top: 50px;
 }
 
+h3:target::before {
+    padding: 0 5px;
+    position: absolute;
+    top: 25px;
+}
+
+h3 i {
+    color: #336699;
+}
+
+h3.expanded,
 h3.collapsed {
-    background: transparent url("../img/expand.gif") 0 6px no-repeat;
-       cursor : pointer;
-       padding-left : 12px;
+    cursor: pointer;
+}
+
+h3.expanded i.fa.fa-caret-down::before {
+    content: "\f0d7";
+}
+
+h3.collapsed i.fa.fa-caret-down::before {
+    content: "\f0da";
 }
 
 .humanMsg strong {
@@ -134,4 +150,19 @@ span.overridden {
     border: 1px solid #EEE;
     margin: 1em 1em 1em 0;
     resize:  vertical;
-}
\ No newline at end of file
+}
+
+#menu ul li.active a.pref_sublink {
+    background: #FFF none;
+    border: 0;
+    color: #004D99;
+    font-size: 100%;
+    hyphens:  auto;
+    margin: 0;
+    padding: .2em .5em;
+    text-align: right;
+}
+
+#menu ul ul {
+    padding-left: 0;
+}

diff --git a/koha-tmpl/intranet-tmpl/prog/css/right-to-left.css b/koha-tmpl/intranet-tmpl/prog/css/right-to-left.css
index 8117fee..3a70812 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/css/right-to-left.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/right-to-left.css
@@ -377,18 +377,6 @@ p label, {
     float: left;
 }
 
-/*the arrwos in pref.*/
-h3.expanded {
-    background: url("../img/collapse.gif") no-repeat scroll right 6px transparent;
-    cursor: pointer;
-    padding-right: 12px;
-}
-h3.collapsed {
-    background: url("../img/expand.gif") no-repeat scroll right 6px transparent;
-    cursor: pointer;
-    padding-right: 12px;
-
-}
 .dropdown-menu {
     position: absolute;
     top: 100%;

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-menu.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-menu.inc
index 542cf1f..d7486c3 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-menu.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/prefs-menu.inc
@@ -1,21 +1,185 @@
 <div id="menu">
-<ul>
-[% IF ( accounting ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Accounting" href="/cgi-bin/koha/admin/preferences.pl?tab=accounting">Accounting</a></li>
-[% IF ( acquisitions ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Acquisitions" href="/cgi-bin/koha/admin/preferences.pl?tab=acquisitions">Acquisitions</a></li>
-[% IF ( admin ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Administration" href="/cgi-bin/koha/admin/preferences.pl?tab=admin">Administration</a></li>
-[% IF ( authorities ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Authority Control" href="/cgi-bin/koha/admin/preferences.pl?tab=authorities">Authorities</a></li>
-[% IF ( cataloguing ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Cataloging" href="/cgi-bin/koha/admin/preferences.pl?tab=cataloguing">Cataloging</a></li>
-[% IF ( circulation ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Circulation" href="/cgi-bin/koha/admin/preferences.pl?tab=circulation">Circulation</a></li>
-[% IF ( enhanced_content ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Enhanced content settings" href="/cgi-bin/koha/admin/preferences.pl?tab=enhanced_content">Enhanced content</a></li>
-[% IF ( i18n_l10n ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Internationalization and localization" href="/cgi-bin/koha/admin/preferences.pl?tab=i18n_l10n">I18N/L10N</a></li>
-[% IF ( local_use ) %]<li class="active">[% ELSE %]<li>[% END %]<a href="/cgi-bin/koha/admin/systempreferences.pl">Local use</a></li>
-[% IF ( logs ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Transaction logs" href="/cgi-bin/koha/admin/preferences.pl?tab=logs">Logs</a></li>
-[% IF ( opac ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Online Public Access Catalog" href="/cgi-bin/koha/admin/preferences.pl?tab=opac">OPAC</a></li>
-[% IF ( patrons ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Patrons" href="/cgi-bin/koha/admin/preferences.pl?tab=patrons">Patrons</a></li>
-[% IF ( searching ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Searching" href="/cgi-bin/koha/admin/preferences.pl?tab=searching">Searching</a></li>
-[% IF ( serials ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Serials" href="/cgi-bin/koha/admin/preferences.pl?tab=serials">Serials</a></li>
-[% IF ( staff_client ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Staff client" href="/cgi-bin/koha/admin/preferences.pl?tab=staff_client">Staff client</a></li>
-[% IF ( tools ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Tools" href="/cgi-bin/koha/admin/preferences.pl?tab=tools">Tools</a></li>
-[% IF ( web_services ) %]<li class="active">[% ELSE %]<li>[% END %]<a title="Web services" href="/cgi-bin/koha/admin/preferences.pl?tab=web_services">Web services</a></li>
-</ul>
+    <ul>
+        [% IF ( accounting ) %]
+            <li class="active">
+                <a title="Accounting" href="/cgi-bin/koha/admin/preferences.pl?tab=accounting">Accounting</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Accounting" href="/cgi-bin/koha/admin/preferences.pl?tab=accounting">Accounting</a>
+        [% END %]
+        [% IF ( acquisitions ) %]
+            <li class="active">
+                <a title="Acquisitions" href="/cgi-bin/koha/admin/preferences.pl?tab=acquisitions">Acquisitions</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Acquisitions" href="/cgi-bin/koha/admin/preferences.pl?tab=acquisitions">Acquisitions</a>
+        [% END %]
+        </li>
+
+        [% IF ( admin ) %]
+            <li class="active">
+                <a title="Administration" href="/cgi-bin/koha/admin/preferences.pl?tab=admin">Administration</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Administration" href="/cgi-bin/koha/admin/preferences.pl?tab=admin">Administration</a>
+        [% END %]
+        </li>
+
+        [% IF ( authorities ) %]
+            <li class="active">
+                <a title="Authority Control" href="/cgi-bin/koha/admin/preferences.pl?tab=authorities">Authorities</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Authority Control" href="/cgi-bin/koha/admin/preferences.pl?tab=authorities">Authorities</a>
+        [% END %]
+        </li>
+
+        [% IF ( cataloguing ) %]
+            <li class="active">
+                <a title="Cataloging" href="/cgi-bin/koha/admin/preferences.pl?tab=cataloguing">Cataloging</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Cataloging" href="/cgi-bin/koha/admin/preferences.pl?tab=cataloguing">Cataloging</a>
+        [% END %]
+        </li>
+
+        [% IF ( circulation ) %]
+            <li class="active">
+                <a title="Circulation" href="/cgi-bin/koha/admin/preferences.pl?tab=circulation">Circulation</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Circulation" href="/cgi-bin/koha/admin/preferences.pl?tab=circulation">Circulation</a>
+        [% END %]
+        </li>
+
+        [% IF ( enhanced_content ) %]
+            <li class="active">
+                <a title="Enhanced content settings" href="/cgi-bin/koha/admin/preferences.pl?tab=enhanced_content">Enhanced content</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Enhanced content settings" href="/cgi-bin/koha/admin/preferences.pl?tab=enhanced_content">Enhanced content</a>
+        [% END %]
+        </li>
+
+        [% IF ( i18n_l10n ) %]
+            <li class="active">
+                <a title="Internationalization and localization" href="/cgi-bin/koha/admin/preferences.pl?tab=i18n_l10n">I18N/L10N</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Internationalization and localization" href="/cgi-bin/koha/admin/preferences.pl?tab=i18n_l10n">I18N/L10N</a>
+        [% END %]
+        </li>
+
+        [% IF ( local_use ) %]
+            <li class="active">
+                <a href="/cgi-bin/koha/admin/systempreferences.pl">Local use</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+            <a href="/cgi-bin/koha/admin/systempreferences.pl">Local use</a>
+        [% END %]
+        </li>
+
+        [% IF ( logs ) %]
+            <li class="active">
+                <a title="Transaction logs" href="/cgi-bin/koha/admin/preferences.pl?tab=logs">Logs</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Transaction logs" href="/cgi-bin/koha/admin/preferences.pl?tab=logs">Logs</a>
+        [% END %]
+        </li>
+
+        [% IF ( opac ) %]
+            <li class="active">
+                <a title="Online Public Access Catalog" href="/cgi-bin/koha/admin/preferences.pl?tab=opac">OPAC</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Online Public Access Catalog" href="/cgi-bin/koha/admin/preferences.pl?tab=opac">OPAC</a>
+        [% END %]
+        </li>
+
+        [% IF ( patrons ) %]
+            <li class="active">
+                <a title="Patrons" href="/cgi-bin/koha/admin/preferences.pl?tab=patrons">Patrons</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Patrons" href="/cgi-bin/koha/admin/preferences.pl?tab=patrons">Patrons</a>
+        [% END %]
+        </li>
+
+        [% IF ( searching ) %]
+            <li class="active">
+                <a title="Searching" href="/cgi-bin/koha/admin/preferences.pl?tab=searching">Searching</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Searching" href="/cgi-bin/koha/admin/preferences.pl?tab=searching">Searching</a>
+        [% END %]
+        </li>
+
+        [% IF ( serials ) %]
+            <li class="active">
+                <a title="Serials" href="/cgi-bin/koha/admin/preferences.pl?tab=serials">Serials</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Serials" href="/cgi-bin/koha/admin/preferences.pl?tab=serials">Serials</a>
+        [% END %]
+        </li>
+
+        [% IF ( staff_client ) %]
+            <li class="active">
+                <a title="Staff client" href="/cgi-bin/koha/admin/preferences.pl?tab=staff_client">Staff client</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Staff client" href="/cgi-bin/koha/admin/preferences.pl?tab=staff_client">Staff client</a>
+        [% END %]
+        </li>
+
+        [% IF ( tools ) %]
+            <li class="active">
+                <a title="Tools" href="/cgi-bin/koha/admin/preferences.pl?tab=tools">Tools</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Tools" href="/cgi-bin/koha/admin/preferences.pl?tab=tools">Tools</a>
+        [% END %]
+        </li>
+
+        [% IF ( web_services ) %]
+            <li class="active">
+                <a title="Web services" href="/cgi-bin/koha/admin/preferences.pl?tab=web_services">Web services</a>
+                [% PROCESS subtabs  %]
+        [% ELSE %]
+            <li>
+                <a title="Web services" href="/cgi-bin/koha/admin/preferences.pl?tab=web_services">Web services</a>
+        [% END %]
+        </li>
+    </ul>
 </div>
+
+[% BLOCK subtabs %]
+    [% UNLESS ( searchfield ) %]
+        [% FOREACH TAB IN TABS %]
+            <ul>
+                [% FOREACH LINE IN TAB.LINES %]
+                    [% IF ( LINE.is_group_title ) %]
+                        <li><a class="pref_sublink" href="#[% LINE.title | replace('\s+', '_') | uri %]">[% LINE.title | html %]</a></li>
+                    [% END %]
+                [% END %]
+            </ul>
+        [% END %]
+    [% END %]
+[% END %]

diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
index eaad215..ccdb621 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
@@ -47,8 +47,18 @@
             [% FOREACH LINE IN TAB.LINES %]
             [% IF ( LINE.is_group_title ) %]
             [% UNLESS ( loop.first ) %]</tbody></table>[% END %]
-            <h3>[% LINE.title | html %]</h3>
-            <table class="preferences">
+            <div class="row">
+                <div class="col-sm-6">
+                    <h3 id="[% LINE.title | replace('\s+', '_') | html %]"><i class="fa fa-caret-down"></i> [% LINE.title | html %]</h3>
+                </div>
+                <div class="col-sm-6">
+                    [% IF ( searchfield ) %]
+                        <div class="pull-right"><a class="btn btn-link" href="/cgi-bin/koha/admin/preferences.pl?tab=[% TAB.tab_id | html %]#[% LINE.title | replace('\s+', '_') | html %]"><i class="fa fa-list-ul"></i> View all [% LINE.title | html %] preferences</a></div>
+                    [% END %]
+                </div>
+            </div>
+
+            <table class="preferences" id="collapse_[% LINE.title | replace('\s+', '_') | html %]">
             <thead><tr><th>Preference</th><th>Value</th></tr></thead>
             [% UNLESS ( loop.last ) %]<tbody>[% END %]
             [% ELSE %]

diff --git a/koha-tmpl/intranet-tmpl/prog/img/collapse.gif b/koha-tmpl/intranet-tmpl/prog/img/collapse.gif
deleted file mode 100644 (file)
index 4457a95..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/img/collapse.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/img/expand.gif b/koha-tmpl/intranet-tmpl/prog/img/expand.gif
deleted file mode 100644 (file)
index 0289db3..0000000
Binary files a/koha-tmpl/intranet-tmpl/prog/img/expand.gif and /dev/null differ

diff --git a/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js b/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
index 6db43b2..2e83327 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
@@ -150,7 +150,8 @@ $( document ).ready( function () {
     var collapsible = $(".collapsed,.expanded");
 
     $(collapsible).on("click",function(){
-        var panel = $(this).next("div");
+        var h3Id = $(this).attr("id");
+        var panel = $("#collapse_" + h3Id);
         if(panel.is(":visible")){
             $(this).addClass("collapsed").removeClass("expanded").attr("title",MSG_CLICK_TO_EXPAND);
             panel.hide();
@@ -160,6 +161,18 @@ $( document ).ready( function () {
         }
     });
 
+    $(".pref_sublink").on("click", function(){
+        /* If the user clicks a sub-menu link in the sidebar,
+           check to see if it is collapsed. If so, expand it */
+        var href = $(this).attr("href");
+        href = href.replace("#","");
+        var panel = $("#collapse_" + href );
+        if( panel.is(":hidden") ){
+            $("#" + href ).addClass("expanded").removeClass("collapsed").attr("title",MSG_CLICK_TO_COLLAPSE);
+            panel.show();
+        }
+    });
+
     if ( to_highlight ) {
         var words = to_highlight.split( ' ' );
         $( '.prefs-tab table' ).find( 'td, th' ).not( '.name-cell' ).each( function ( i, td ) {