Bug 20935 - Redesign system preferences interface
Summary: Redesign system preferences interface
Status: CLOSED WONTFIX
Alias: None
Product: Koha
Classification: Unclassified
Component: System Administration (show other bugs)
Version: Main
Hardware: All All
: P5 - low enhancement with 1 vote (vote)
Assignee: Owen Leonard
QA Contact: Josef Moravec
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-06-13 16:20 UTC by Owen Leonard
Modified: 2023-12-28 20:43 UTC (History)
11 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Documentation contact:
Documentation submission:
Text to go in the release notes:
Version(s) released in:


Attachments
Screenshot showing system preferences standard view (38.83 KB, image/png)
2018-06-13 16:20 UTC, Owen Leonard
Details
Screenshot showing system preferences filtered using in-page filter (44.75 KB, image/png)
2018-06-13 16:21 UTC, Owen Leonard
Details
Screenshot showing system preferences search results (34.42 KB, image/png)
2018-06-13 16:21 UTC, Owen Leonard
Details
Bug 20935: Redesign system preferences interface (33.33 KB, patch)
2018-06-15 12:59 UTC, Owen Leonard
Details | Diff | Splinter Review
Screenshot of the system preferences page (53.00 KB, image/png)
2018-06-15 19:21 UTC, Caroline Cyr La Rose
Details
Bug 20935: Redesign system preferences interface (33.72 KB, patch)
2018-06-28 15:28 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Redesign system preferences interface (33.96 KB, patch)
2018-07-04 01:55 UTC, Dilan Johnpullé
Details | Diff | Splinter Review
Bug 20935: Redesign system preferences interface (34.02 KB, patch)
2018-07-08 10:23 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 20935: Remove "Click to" from some links (2.01 KB, patch)
2018-07-08 10:23 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 20935: Remove 'no match' box when it does (1.14 KB, patch)
2018-07-20 14:32 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 20935: Redesign system preferences interface (34.04 KB, patch)
2018-07-20 16:24 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 20935: Remove "Click to" from some links (2.01 KB, patch)
2018-07-20 16:25 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 20935: Remove 'no match' box when it does (1.14 KB, patch)
2018-07-20 16:25 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 20935: Redesign system preferences interface (34.03 KB, patch)
2018-08-10 18:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Remove "Click to" from some links (2.05 KB, patch)
2018-08-10 18:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Remove 'no match' box when it does (1.18 KB, patch)
2018-08-10 18:13 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Redesign system preferences interface (34.13 KB, patch)
2018-08-15 17:24 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 20935: Remove "Click to" from some links (2.13 KB, patch)
2018-08-15 17:24 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 20935: Remove 'no match' box when it does (1.26 KB, patch)
2018-08-15 17:24 UTC, Jonathan Druart
Details | Diff | Splinter Review
Bug 20935: Redesign system preferences interface (32.70 KB, patch)
2018-09-20 13:49 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Remove "Click to" from some links (2.18 KB, patch)
2018-09-20 13:49 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Remove 'no match' box when it does (1.25 KB, patch)
2018-09-20 13:49 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Redesign system preferences interface (32.69 KB, patch)
2018-12-05 19:12 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Remove "Click to" from some links (2.18 KB, patch)
2018-12-05 19:12 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Remove 'no match' box when it does (1.25 KB, patch)
2018-12-05 19:12 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Add in-page links to the sidebar (17.65 KB, patch)
2018-12-05 19:12 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Add missing html filter (1.23 KB, patch)
2018-12-05 19:21 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Redesign system preferences interface (32.83 KB, patch)
2019-03-20 12:50 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Remove "Click to" from some links (2.19 KB, patch)
2019-03-20 12:50 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Remove 'no match' box when it does (1.25 KB, patch)
2019-03-20 12:50 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Add in-page links to the sidebar (17.26 KB, patch)
2019-03-20 12:50 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Add missing html filter (1.23 KB, patch)
2019-03-20 12:50 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Redesign system preferences interface (32.97 KB, patch)
2019-03-20 20:35 UTC, Michal Denar
Details | Diff | Splinter Review
Bug 20935: Remove "Click to" from some links (2.29 KB, patch)
2019-03-20 20:35 UTC, Michal Denar
Details | Diff | Splinter Review
Bug 20935: Remove 'no match' box when it does (1.35 KB, patch)
2019-03-20 20:35 UTC, Michal Denar
Details | Diff | Splinter Review
Bug 20935: Add in-page links to the sidebar (17.38 KB, patch)
2019-03-20 20:35 UTC, Michal Denar
Details | Diff | Splinter Review
Bug 20935: Add missing html filter (1.33 KB, patch)
2019-03-20 20:35 UTC, Michal Denar
Details | Diff | Splinter Review
Bug 20935: Redesign system preferences interface (33.18 KB, patch)
2019-05-21 13:15 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Remove "Click to" from some links (2.75 KB, patch)
2019-05-21 13:16 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Remove 'no match' box when it does (1.35 KB, patch)
2019-05-21 13:16 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Add in-page links to the sidebar (17.56 KB, patch)
2019-05-21 13:16 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20935: Add missing html filter (1.32 KB, patch)
2019-05-21 13:16 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2018-06-13 16:20:15 UTC
Created attachment 76039 [details]
Screenshot showing system preferences standard view

I think the system preferences page could use some work to make it more readable. My proposal does this:

- Restructure the preferences list as a <dl>, with the preference name as the <dt> and the description as the <dd>.
- Add a JS filter library (mark.js) to do live filtering of the page and add search term highlighting.
- When the user has searched, show links to the sections in which results were returned.
Comment 1 Owen Leonard 2018-06-13 16:21:01 UTC
Created attachment 76040 [details]
Screenshot showing system preferences filtered using in-page filter
Comment 2 Owen Leonard 2018-06-13 16:21:45 UTC
Created attachment 76041 [details]
Screenshot showing system preferences search results
Comment 3 Owen Leonard 2018-06-15 12:59:45 UTC Comment hidden (obsolete)
Comment 4 Caroline Cyr La Rose 2018-06-15 19:21:59 UTC
Created attachment 76106 [details]
Screenshot of the system preferences page
Comment 5 Caroline Cyr La Rose 2018-06-15 19:31:17 UTC
When I apply the patch, it doesn't look the same as the screenshots. The section headings are blue and the syspref names are almost the same as their description. making it hard to read. I like it, but  would like the syspref names to be at least in bold.

Also, would it be possible to keep the same indent as the first line on the 2nd + line of the description? For example, in my screenshot, in the description for gist, the second line, starting at "rounded" doesn't have the same indent as the line above. I think it makes it look messy. 

I would miss the arrows to collapse a section (when they're really long, it saves scrolling energy). Would it still be possible to have them in this new design? It's not the end of the world if it's not
Comment 6 Owen Leonard 2018-06-20 12:10:55 UTC
(In reply to Caroline Cyr La Rose from comment #5)
> When I apply the patch, it doesn't look the same as the screenshots.

Did you clear your browser cache? That could explain the difference in what you see.
Comment 7 Josef Moravec 2018-06-27 15:42:58 UTC
Comment on attachment 76097 [details] [review]
Bug 20935: Redesign system preferences interface

Review of attachment 76097 [details] [review]:
-----------------------------------------------------------------

::: koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
@@ +156,5 @@
> +        </div> <!-- /.col-sm-10.col-sm-push-2 -->
> +
> +        <div class="col-sm-2 col-sm-pull-10">
> +            <aside>
> +                [% INCLUDE 'admin-menu.inc' %]

should be prefs-menu
Comment 8 Josef Moravec 2018-06-27 15:44:18 UTC
Also, the "Local use" preferences are not addressed in this patch

But great work Owen, I like this style!
Comment 9 Jonathan Druart 2018-06-27 19:19:24 UTC
* I would not add the alert box when nothing is found

* Left navigation is replaced by the admin one, instead of the pref specific one (prefs-menu.inc vs admin-menu.inc), I do not think it's expected.
Comment 10 Owen Leonard 2018-06-28 15:28:31 UTC Comment hidden (obsolete)
Comment 11 Owen Leonard 2018-06-28 15:32:51 UTC
(In reply to Josef Moravec from comment #8)
> Also, the "Local use" preferences are not addressed in this patch

The local use tab wasn't updated in the last round of interface changes, so I didn't think it was a priority.
Comment 12 Dilan Johnpullé 2018-07-04 01:55:35 UTC Comment hidden (obsolete)
Comment 13 Katrin Fischer 2018-07-08 10:19:32 UTC
Just some small remarks, no blockers:

Instead of "Click to edit" and "Click to collapse" I think it should just be "Edit" and "Collapse" as there is no need to extra label a link for clicking. Also... I think the German translation would be horribly long :) 

Attaching a patch with the suggested change, feel free to disagree!
Comment 14 Katrin Fischer 2018-07-08 10:23:14 UTC Comment hidden (obsolete)
Comment 15 Katrin Fischer 2018-07-08 10:23:18 UTC Comment hidden (obsolete)
Comment 16 Katrin Fischer 2018-07-08 10:27:34 UTC
There is no question that this is more modern and prettier looking than before. The new filter functionality is a great addition, as are the "(modified)" labels on prefs changed. 

I am still a little torn on usability. I have the impression that it takes me a little longer to find things with the new styling. In the old interface the prefs were (ugly) Courier and in one column, so scanning over the page was pretty fast.  This might be just a thing of 'being used to the old way'. 

I'd love another opinion as this is a bigger change and it would be good to get another set of eyes on it. Could be another sign-off or QA opinion.
Comment 17 Jonathan Druart 2018-07-20 14:31:39 UTC
When there is a match:
https://screenshots.firefox.com/iaqfOGIV1yWAylQg/pro.kohadev.org

When there is no match:
https://screenshots.firefox.com/iaqfOGIV1yWAylQg/pro.kohadev.org

The "Acquisitions preferences" h2 is display under the toolbar (I have selected the text to show it on the screenshot.
Comment 18 Jonathan Druart 2018-07-20 14:32:04 UTC Comment hidden (obsolete)
Comment 19 Jonathan Druart 2018-07-20 16:07:46 UTC
Found and fix an ergonomic bug with the toolbar on bug 21099.
Comment 20 Jonathan Druart 2018-07-20 16:24:12 UTC
(In reply to Jonathan Druart from comment #17)
> When there is a match:
> https://screenshots.firefox.com/iaqfOGIV1yWAylQg/pro.kohadev.org
> 
> When there is no match:
> https://screenshots.firefox.com/iaqfOGIV1yWAylQg/pro.kohadev.org
> 
> The "Acquisitions preferences" h2 is display under the toolbar (I have
> selected the text to show it on the screenshot.

I have no idea how to fix that. I have also noticed that fixFloat duplicate the toolbar node (one is hidden), and so we should not have an id on them.

Passing QA as it is a minor ergonomic issue.
Comment 21 Jonathan Druart 2018-07-20 16:24:55 UTC Comment hidden (obsolete)
Comment 22 Jonathan Druart 2018-07-20 16:25:00 UTC Comment hidden (obsolete)
Comment 23 Jonathan Druart 2018-07-20 16:25:04 UTC Comment hidden (obsolete)
Comment 24 Owen Leonard 2018-08-10 18:13:47 UTC Comment hidden (obsolete)
Comment 25 Owen Leonard 2018-08-10 18:13:52 UTC Comment hidden (obsolete)
Comment 26 Owen Leonard 2018-08-10 18:13:57 UTC Comment hidden (obsolete)
Comment 27 Jonathan Druart 2018-08-15 17:24:46 UTC Comment hidden (obsolete)
Comment 28 Jonathan Druart 2018-08-15 17:24:53 UTC Comment hidden (obsolete)
Comment 29 Jonathan Druart 2018-08-15 17:24:58 UTC Comment hidden (obsolete)
Comment 30 Jonathan Druart 2018-08-15 17:26:04 UTC
I have found a small regression added by the toolbar changes (bug 21139), RM please push the follow-up I have attached on it along with these patches.
Comment 31 Jonathan Druart 2018-08-15 17:30:10 UTC
(In reply to Jonathan Druart from comment #20)
> (In reply to Jonathan Druart from comment #17)
> > When there is a match:
> > https://screenshots.firefox.com/iaqfOGIV1yWAylQg/pro.kohadev.org
> > 
> > When there is no match:
> > https://screenshots.firefox.com/iaqfOGIV1yWAylQg/pro.kohadev.org
> > 
> > The "Acquisitions preferences" h2 is display under the toolbar (I have
> > selected the text to show it on the screenshot.
> 
> I have no idea how to fix that. I have also noticed that fixFloat duplicate
> the toolbar node (one is hidden), and so we should not have an id on them.
> 
> Passing QA as it is a minor ergonomic issue.

Hum, I have posted twice the same link!
When there is no match:
https://screenshots.firefox.com/E2ey9Akb68rPHngV/pro.kohadev.org

This is still valid, but minor and can be pushed as it IMO.
Comment 32 Nick Clemens 2018-08-30 13:05:25 UTC
Please rebase on 13618
Comment 33 Owen Leonard 2018-09-20 13:49:26 UTC Comment hidden (obsolete)
Comment 34 Owen Leonard 2018-09-20 13:49:31 UTC Comment hidden (obsolete)
Comment 35 Owen Leonard 2018-09-20 13:49:36 UTC Comment hidden (obsolete)
Comment 36 Katrin Fischer 2018-10-04 07:17:34 UTC
Hi Owen, what happened here?
Comment 37 Owen Leonard 2018-10-04 11:50:24 UTC
(In reply to Katrin Fischer from comment #36)
> Hi Owen, what happened here?

I wanted to try to address some comments and suggestions I got during Hackfest.
Comment 38 Owen Leonard 2018-12-05 19:12:28 UTC Comment hidden (obsolete)
Comment 39 Owen Leonard 2018-12-05 19:12:32 UTC Comment hidden (obsolete)
Comment 40 Owen Leonard 2018-12-05 19:12:37 UTC Comment hidden (obsolete)
Comment 41 Owen Leonard 2018-12-05 19:12:43 UTC Comment hidden (obsolete)
Comment 42 Owen Leonard 2018-12-05 19:16:47 UTC
I was asked to add alternate-row highlighting to this but I found that it made it less readable rather than more. So I didn't do that.
Comment 43 Owen Leonard 2018-12-05 19:21:13 UTC Comment hidden (obsolete)
Comment 44 Martin Renvoize 2019-02-14 14:40:26 UTC
Some comments I made on irc, but thought should be recorded here.

Functionality wise I can't find any issues, it all works as expected.

However:

* I think we need to make the left menu float as you can no longer collapse preference sections and instead use the left menu more frequently to navigate between sections.
* Somehow although it's spaced out more, it feels less readable and clear.. we're highlighting the non-descriptive in many cases syspref codes/names but making the actual descriptions and options a bit smaller.
* Sometimes it's a good thing to have more on the page, this change introduces a not-insignificant descrease in data per page and as such results in more scrolling to find the preference you want (assuming you can't remember it's name enough to search / filter for it.

I really want to like this update and I do think it looks more modern, but I can't happily go for it right now I'm afraid.

Hugs to Owen for giving it a good try.. I look forward to more feedback being given and perhaps being over-ruled on this one.. It would be a great area to smarten up but I don't think we're quit there yet.
Comment 45 Owen Leonard 2019-03-20 12:50:36 UTC
Created attachment 86784 [details] [review]
Bug 20935: Redesign system preferences interface

This patch proposes a new interface for system preferences. The goal is
to make the interface more readable and to give the user additional
options for finding what they need.

- Restructures the preferences list as a <dl>, with the preference name
  as the <dt> and the description as the <dd>.
- Add a JS filter library (mark.js) to do live filtering of the page and
  add search term highlighting.
- When the user has searched, show links to the sections in which
  results were returned.

To test, apply the patch and go to Administration -> System preferences.

 - Test the functionality of setting various kinds of preferences,
   including multi-selects, textareas, WYSIWYG editors, etc.
 - Test the filter form at the top of the page for narrowing in-page
   results.
   - Test both successful and unsuccessful filters.
 - Perform a system preference search.
   - Test the in-page links to the different sections.
   - Test that in-page filtering works in this case too.
 - View the licenses tab of the "About" page and check that the
   information about mark.js looks correct.

Followed test plan and pleased to say everything worked as expected.
Looking forward to this enhancement.

Signed-off-by: Dilan Johnpullé <dilan@calyx.net.au>

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

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 46 Owen Leonard 2019-03-20 12:50:40 UTC
Created attachment 86785 [details] [review]
Bug 20935: Remove "Click to" from some links

Changes "Click to edit" and "Click to collapse" to just
"Edit" and "Collapse" as the "Click to" appears not
necessary for elements formatted as links.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 47 Owen Leonard 2019-03-20 12:50:44 UTC
Created attachment 86786 [details] [review]
Bug 20935: Remove 'no match' box when it does

Test plan:
Hit /cgi-bin/koha/admin/preferences.pl
Search for "AcqCreateX"
=> You get "No matching terms were found on this page"
Remove the last X
=> Without this patch the "no matching" box is still displayed

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Comment 48 Owen Leonard 2019-03-20 12:50:48 UTC
Created attachment 86787 [details] [review]
Bug 20935: Add in-page links to the sidebar

This patch adds links to the sidebar menu which allow the user to jump
to a section within the page.
Comment 49 Owen Leonard 2019-03-20 12:50:51 UTC
Created attachment 86788 [details] [review]
Bug 20935: Add missing html filter
Comment 50 Owen Leonard 2019-03-20 12:52:11 UTC
Rebase only.
Comment 51 Michal Denar 2019-03-20 20:35:23 UTC
Created attachment 86833 [details] [review]
Bug 20935: Redesign system preferences interface

This patch proposes a new interface for system preferences. The goal is
to make the interface more readable and to give the user additional
options for finding what they need.

- Restructures the preferences list as a <dl>, with the preference name
  as the <dt> and the description as the <dd>.
- Add a JS filter library (mark.js) to do live filtering of the page and
  add search term highlighting.
- When the user has searched, show links to the sections in which
  results were returned.

To test, apply the patch and go to Administration -> System preferences.

 - Test the functionality of setting various kinds of preferences,
   including multi-selects, textareas, WYSIWYG editors, etc.
 - Test the filter form at the top of the page for narrowing in-page
   results.
   - Test both successful and unsuccessful filters.
 - Perform a system preference search.
   - Test the in-page links to the different sections.
   - Test that in-page filtering works in this case too.
 - View the licenses tab of the "About" page and check that the
   information about mark.js looks correct.

Followed test plan and pleased to say everything worked as expected.
Looking forward to this enhancement.

Signed-off-by: Dilan Johnpullé <dilan@calyx.net.au>

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

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

Signed-off-by: Michal Denar <black23@gmail.com>
Comment 52 Michal Denar 2019-03-20 20:35:28 UTC
Created attachment 86834 [details] [review]
Bug 20935: Remove "Click to" from some links

Changes "Click to edit" and "Click to collapse" to just
"Edit" and "Collapse" as the "Click to" appears not
necessary for elements formatted as links.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Michal Denar <black23@gmail.com>
Comment 53 Michal Denar 2019-03-20 20:35:33 UTC
Created attachment 86835 [details] [review]
Bug 20935: Remove 'no match' box when it does

Test plan:
Hit /cgi-bin/koha/admin/preferences.pl
Search for "AcqCreateX"
=> You get "No matching terms were found on this page"
Remove the last X
=> Without this patch the "no matching" box is still displayed

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Michal Denar <black23@gmail.com>
Comment 54 Michal Denar 2019-03-20 20:35:37 UTC
Created attachment 86836 [details] [review]
Bug 20935: Add in-page links to the sidebar

This patch adds links to the sidebar menu which allow the user to jump
to a section within the page.

Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Michal Denar <black23@gmail.com>
Comment 55 Michal Denar 2019-03-20 20:35:41 UTC
Created attachment 86837 [details] [review]
Bug 20935: Add missing html filter

Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Michal Denar <black23@gmail.com>
Comment 56 Josef Moravec 2019-03-21 08:01:30 UTC
Comment on attachment 86837 [details] [review]
Bug 20935: Add missing html filter

Review of attachment 86837 [details] [review]:
-----------------------------------------------------------------

::: koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
@@ +38,4 @@
>          <div id="toolbar">
>              Results in sections:
>              [% FOREACH TAB IN TABS %]
> +                <a href="#[% TAB.tab_title | url %]">[% TAB.tab_title | html %]</a>[% UNLESS ( loop.last ) %] &bull; [% END %]

In fragment you should use uri filter, not url.
Comment 57 Josef Moravec 2019-03-21 08:03:23 UTC
I have question about multiselect fields:
- Should the text be blue? I think we could stay with black here
- The width of multiselect field is set bad, so there is scrollbar at the bottom, is it possible to do something with that?
See screenshot: https://prnt.sc/n0u6ji

Marking Failed QA means I need answer here.

Otherwise it is looking good. (Just the small issue with uri/url filter)
Comment 58 Owen Leonard 2019-05-21 13:15:59 UTC
Created attachment 89936 [details] [review]
Bug 20935: Redesign system preferences interface

This patch proposes a new interface for system preferences. The goal is
to make the interface more readable and to give the user additional
options for finding what they need.

- Restructures the preferences list as a <dl>, with the preference name
  as the <dt> and the description as the <dd>.
- Add a JS filter library (mark.js) to do live filtering of the page and
  add search term highlighting.
- When the user has searched, show links to the sections in which
  results were returned.

To test, apply the patch and go to Administration -> System preferences.

 - Test the functionality of setting various kinds of preferences,
   including multi-selects, textareas, WYSIWYG editors, etc.
 - Test the filter form at the top of the page for narrowing in-page
   results.
   - Test both successful and unsuccessful filters.
 - Perform a system preference search.
   - Test the in-page links to the different sections.
   - Test that in-page filtering works in this case too.
 - View the licenses tab of the "About" page and check that the
   information about mark.js looks correct.

Followed test plan and pleased to say everything worked as expected.
Looking forward to this enhancement.

Signed-off-by: Dilan Johnpullé <dilan@calyx.net.au>

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

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Michal Denar <black23@gmail.com>
Comment 59 Owen Leonard 2019-05-21 13:16:04 UTC
Created attachment 89937 [details] [review]
Bug 20935: Remove "Click to" from some links

Changes "Click to edit" and "Click to collapse" to just
"Edit" and "Collapse" as the "Click to" appears not
necessary for elements formatted as links.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Michal Denar <black23@gmail.com>
Comment 60 Owen Leonard 2019-05-21 13:16:07 UTC
Created attachment 89938 [details] [review]
Bug 20935: Remove 'no match' box when it does

Test plan:
Hit /cgi-bin/koha/admin/preferences.pl
Search for "AcqCreateX"
=> You get "No matching terms were found on this page"
Remove the last X
=> Without this patch the "no matching" box is still displayed

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Michal Denar <black23@gmail.com>
Comment 61 Owen Leonard 2019-05-21 13:16:11 UTC
Created attachment 89939 [details] [review]
Bug 20935: Add in-page links to the sidebar

This patch adds links to the sidebar menu which allow the user to jump
to a section within the page.

Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Michal Denar <black23@gmail.com>
Comment 62 Owen Leonard 2019-05-21 13:16:15 UTC
Created attachment 89940 [details] [review]
Bug 20935: Add missing html filter

Signed-off-by: Michal Denar <black23@gmail.com>

Signed-off-by: Michal Denar <black23@gmail.com>