From 656c9f8940d0ed26a933ff59c5e39bd799c841de Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Fri, 18 May 2018 16:02:32 +0000
Subject: [PATCH] Bug 20935: Redesign system preferences interface
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../lib/jquery/plugins/jquery.mark.min.js          |   7 ++
 koha-tmpl/intranet-tmpl/prog/css/preferences.css   |  78 +++++++++------
 .../intranet-tmpl/prog/css/src/staff-global.scss   |   5 +
 koha-tmpl/intranet-tmpl/prog/en/modules/about.tt   |   3 +
 .../prog/en/modules/admin/preferences.tt           | 107 ++++++++++++---------
 .../intranet-tmpl/prog/js/pages/preferences.js     |  61 ++++++------
 6 files changed, 154 insertions(+), 107 deletions(-)
 create mode 100644 koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.mark.min.js

diff --git a/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.mark.min.js b/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.mark.min.js
new file mode 100644
index 0000000000..b14fa718fc
--- /dev/null
+++ b/koha-tmpl/intranet-tmpl/lib/jquery/plugins/jquery.mark.min.js
@@ -0,0 +1,7 @@
+/*!***************************************************
+* mark.js v8.11.1
+* https://markjs.io/
+* Copyright (c) 2014–2018, Julian Kühnel
+* Released under the MIT license https://git.io/vwTVl
+*****************************************************/
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],t):e.Mark=t(e.jQuery)}(this,function(e){"use strict";e=e&&e.hasOwnProperty("default")?e.default:e;var t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},r=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},o=function(){function e(t){var r=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:5e3;n(this,e),this.ctx=t,this.iframes=r,this.exclude=i,this.iframesTimeout=o}return r(e,[{key:"getContexts",value:function(){var e=[];return(void 0!==this.ctx&&this.ctx?NodeList.prototype.isPrototypeOf(this.ctx)?Array.prototype.slice.call(this.ctx):Array.isArray(this.ctx)?this.ctx:"string"==typeof this.ctx?Array.prototype.slice.call(document.querySelectorAll(this.ctx)):[this.ctx]:[]).forEach(function(t){var n=e.filter(function(e){return e.contains(t)}).length>0;-1!==e.indexOf(t)||n||e.push(t)}),e}},{key:"getIframeContents",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},r=void 0;try{var i=e.contentWindow;if(r=i.document,!i||!r)throw new Error("iframe inaccessible")}catch(e){n()}r&&t(r)}},{key:"isIframeBlank",value:function(e){var t="about:blank",n=e.getAttribute("src").trim();return e.contentWindow.location.href===t&&n!==t&&n}},{key:"observeIframeLoad",value:function(e,t,n){var r=this,i=!1,o=null,a=function a(){if(!i){i=!0,clearTimeout(o);try{r.isIframeBlank(e)||(e.removeEventListener("load",a),r.getIframeContents(e,t,n))}catch(e){n()}}};e.addEventListener("load",a),o=setTimeout(a,this.iframesTimeout)}},{key:"onIframeReady",value:function(e,t,n){try{"complete"===e.contentWindow.document.readyState?this.isIframeBlank(e)?this.observeIframeLoad(e,t,n):this.getIframeContents(e,t,n):this.observeIframeLoad(e,t,n)}catch(e){n()}}},{key:"waitForIframes",value:function(e,t){var n=this,r=0;this.forEachIframe(e,function(){return!0},function(e){r++,n.waitForIframes(e.querySelector("html"),function(){--r||t()})},function(e){e||t()})}},{key:"forEachIframe",value:function(t,n,r){var i=this,o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:function(){},a=t.querySelectorAll("iframe"),s=a.length,c=0;a=Array.prototype.slice.call(a);var u=function(){--s<=0&&o(c)};s||u(),a.forEach(function(t){e.matches(t,i.exclude)?u():i.onIframeReady(t,function(e){n(t)&&(c++,r(e)),u()},u)})}},{key:"createIterator",value:function(e,t,n){return document.createNodeIterator(e,t,n,!1)}},{key:"createInstanceOnIframe",value:function(t){return new e(t.querySelector("html"),this.iframes)}},{key:"compareNodeIframe",value:function(e,t,n){if(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_PRECEDING){if(null===t)return!0;if(t.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)return!0}return!1}},{key:"getIteratorNode",value:function(e){var t=e.previousNode();return{prevNode:t,node:null===t?e.nextNode():e.nextNode()&&e.nextNode()}}},{key:"checkIframeFilter",value:function(e,t,n,r){var i=!1,o=!1;return r.forEach(function(e,t){e.val===n&&(i=t,o=e.handled)}),this.compareNodeIframe(e,t,n)?(!1!==i||o?!1===i||o||(r[i].handled=!0):r.push({val:n,handled:!0}),!0):(!1===i&&r.push({val:n,handled:!1}),!1)}},{key:"handleOpenIframes",value:function(e,t,n,r){var i=this;e.forEach(function(e){e.handled||i.getIframeContents(e.val,function(e){i.createInstanceOnIframe(e).forEachNode(t,n,r)})})}},{key:"iterateThroughNodes",value:function(e,t,n,r,i){for(var o,a=this,s=this.createIterator(t,e,r),c=[],u=[],l=void 0,h=void 0;void 0,o=a.getIteratorNode(s),h=o.prevNode,l=o.node;)this.iframes&&this.forEachIframe(t,function(e){return a.checkIframeFilter(l,h,e,c)},function(t){a.createInstanceOnIframe(t).forEachNode(e,function(e){return u.push(e)},r)}),u.push(l);u.forEach(function(e){n(e)}),this.iframes&&this.handleOpenIframes(c,e,n,r),i()}},{key:"forEachNode",value:function(e,t,n){var r=this,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:function(){},o=this.getContexts(),a=o.length;a||i(),o.forEach(function(o){var s=function(){r.iterateThroughNodes(e,o,t,n,function(){--a<=0&&i()})};r.iframes?r.waitForIframes(o,s):s()})}}],[{key:"matches",value:function(e,t){var n="string"==typeof t?[t]:t,r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.oMatchesSelector||e.webkitMatchesSelector;if(r){var i=!1;return n.every(function(t){return!r.call(e,t)||(i=!0,!1)}),i}return!1}}]),e}(),a=function(){function e(t){n(this,e),this.opt=i({},{diacritics:!0,synonyms:{},accuracy:"partially",caseSensitive:!1,ignoreJoiners:!1,ignorePunctuation:[],wildcards:"disabled"},t)}return r(e,[{key:"create",value:function(e){return"disabled"!==this.opt.wildcards&&(e=this.setupWildcardsRegExp(e)),e=this.escapeStr(e),Object.keys(this.opt.synonyms).length&&(e=this.createSynonymsRegExp(e)),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),this.opt.diacritics&&(e=this.createDiacriticsRegExp(e)),e=this.createMergedBlanksRegExp(e),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.createJoinersRegExp(e)),"disabled"!==this.opt.wildcards&&(e=this.createWildcardsRegExp(e)),e=this.createAccuracyRegExp(e),new RegExp(e,"gm"+(this.opt.caseSensitive?"":"i"))}},{key:"escapeStr",value:function(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}},{key:"createSynonymsRegExp",value:function(e){var t=this.opt.synonyms,n=this.opt.caseSensitive?"":"i",r=this.opt.ignoreJoiners||this.opt.ignorePunctuation.length?"\0":"";for(var i in t)if(t.hasOwnProperty(i)){var o=t[i],a="disabled"!==this.opt.wildcards?this.setupWildcardsRegExp(i):this.escapeStr(i),s="disabled"!==this.opt.wildcards?this.setupWildcardsRegExp(o):this.escapeStr(o);""!==a&&""!==s&&(e=e.replace(new RegExp("("+this.escapeStr(a)+"|"+this.escapeStr(s)+")","gm"+n),r+"("+this.processSynonyms(a)+"|"+this.processSynonyms(s)+")"+r))}return e}},{key:"processSynonyms",value:function(e){return(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),e}},{key:"setupWildcardsRegExp",value:function(e){return(e=e.replace(/(?:\\)*\?/g,function(e){return"\\"===e.charAt(0)?"?":"
"})).replace(/(?:\\)*\*/g,function(e){return"\\"===e.charAt(0)?"*":""})}},{key:"createWildcardsRegExp",value:function(e){var t="withSpaces"===this.opt.wildcards;return e.replace(/\u0001/g,t?"[\\S\\s]?":"\\S?").replace(/\u0002/g,t?"[\\S\\s]*?":"\\S*")}},{key:"setupIgnoreJoinersRegExp",value:function(e){return e.replace(/[^(|)\\]/g,function(e,t,n){var r=n.charAt(t+1);return/[(|)\\]/.test(r)||""===r?e:e+"\0"})}},{key:"createJoinersRegExp",value:function(e){var t=[],n=this.opt.ignorePunctuation;return Array.isArray(n)&&n.length&&t.push(this.escapeStr(n.join(""))),this.opt.ignoreJoiners&&t.push("\\u00ad\\u200b\\u200c\\u200d"),t.length?e.split(/\u0000+/).join("["+t.join("")+"]*"):e}},{key:"createDiacriticsRegExp",value:function(e){var t=this.opt.caseSensitive?"":"i",n=this.opt.caseSensitive?["aàáảãạăằắẳẵặâầấẩẫậäåāą","AÀÁẢÃẠĂẰẮẲẴẶÂẦẤẨẪẬÄÅĀĄ","cçćč","CÇĆČ","dđď","DĐĎ","eèéẻẽẹêềếểễệëěēę","EÈÉẺẼẸÊỀẾỂỄỆËĚĒĘ","iìíỉĩịîïī","IÌÍỈĨỊÎÏĪ","lł","LŁ","nñňń","NÑŇŃ","oòóỏõọôồốổỗộơởỡớờợöøō","OÒÓỎÕỌÔỒỐỔỖỘƠỞỠỚỜỢÖØŌ","rř","RŘ","sšśșş","SŠŚȘŞ","tťțţ","TŤȚŢ","uùúủũụưừứửữựûüůū","UÙÚỦŨỤƯỪỨỬỮỰÛÜŮŪ","yýỳỷỹỵÿ","YÝỲỶỸỴŸ","zžżź","ZŽŻŹ"]:["aàáảãạăằắẳẵặâầấẩẫậäåāąAÀÁẢÃẠĂẰẮẲẴẶÂẦẤẨẪẬÄÅĀĄ","cçćčCÇĆČ","dđďDĐĎ","eèéẻẽẹêềếểễệëěēęEÈÉẺẼẸÊỀẾỂỄỆËĚĒĘ","iìíỉĩịîïīIÌÍỈĨỊÎÏĪ","lłLŁ","nñňńNÑŇŃ","oòóỏõọôồốổỗộơởỡớờợöøōOÒÓỎÕỌÔỒỐỔỖỘƠỞỠỚỜỢÖØŌ","rřRŘ","sšśșşSŠŚȘŞ","tťțţTŤȚŢ","uùúủũụưừứửữựûüůūUÙÚỦŨỤƯỪỨỬỮỰÛÜŮŪ","yýỳỷỹỵÿYÝỲỶỸỴŸ","zžżźZŽŻŹ"],r=[];return e.split("").forEach(function(i){n.every(function(n){if(-1!==n.indexOf(i)){if(r.indexOf(n)>-1)return!1;e=e.replace(new RegExp("["+n+"]","gm"+t),"["+n+"]"),r.push(n)}return!0})}),e}},{key:"createMergedBlanksRegExp",value:function(e){return e.replace(/[\s]+/gim,"[\\s]+")}},{key:"createAccuracyRegExp",value:function(e){var t=this,n=this.opt.accuracy,r="string"==typeof n?n:n.value,i="";switch(("string"==typeof n?[]:n.limiters).forEach(function(e){i+="|"+t.escapeStr(e)}),r){case"partially":default:return"()("+e+")";case"complementary":return"()([^"+(i="\\s"+(i||this.escapeStr("!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~¡¿")))+"]*"+e+"[^"+i+"]*)";case"exactly":return"(^|\\s"+i+")("+e+")(?=$|\\s"+i+")"}}}]),e}(),s=function(){function e(t){n(this,e),this.ctx=t,this.ie=!1;var r=window.navigator.userAgent;(r.indexOf("MSIE")>-1||r.indexOf("Trident")>-1)&&(this.ie=!0)}return r(e,[{key:"log",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"debug",r=this.opt.log;this.opt.debug&&"object"===(void 0===r?"undefined":t(r))&&"function"==typeof r[n]&&r[n]("mark.js: "+e)}},{key:"getSeparatedKeywords",value:function(e){var t=this,n=[];return e.forEach(function(e){t.opt.separateWordSearch?e.split(" ").forEach(function(e){e.trim()&&-1===n.indexOf(e)&&n.push(e)}):e.trim()&&-1===n.indexOf(e)&&n.push(e)}),{keywords:n.sort(function(e,t){return t.length-e.length}),length:n.length}}},{key:"isNumeric",value:function(e){return Number(parseFloat(e))==e}},{key:"checkRanges",value:function(e){var t=this;if(!Array.isArray(e)||"[object Object]"!==Object.prototype.toString.call(e[0]))return this.log("markRanges() will only accept an array of objects"),this.opt.noMatch(e),[];var n=[],r=0;return e.sort(function(e,t){return e.start-t.start}).forEach(function(e){var i=t.callNoMatchOnInvalidRanges(e,r),o=i.start,a=i.end;i.valid&&(e.start=o,e.length=a-o,n.push(e),r=a)}),n}},{key:"callNoMatchOnInvalidRanges",value:function(e,t){var n=void 0,r=void 0,i=!1;return e&&void 0!==e.start?(r=(n=parseInt(e.start,10))+parseInt(e.length,10),this.isNumeric(e.start)&&this.isNumeric(e.length)&&r-t>0&&r-n>0?i=!0:(this.log("Ignoring invalid or overlapping range: "+JSON.stringify(e)),this.opt.noMatch(e))):(this.log("Ignoring invalid range: "+JSON.stringify(e)),this.opt.noMatch(e)),{start:n,end:r,valid:i}}},{key:"checkWhitespaceRanges",value:function(e,t,n){var r=void 0,i=!0,o=n.length,a=t-o,s=parseInt(e.start,10)-a;return(r=(s=s>o?o:s)+parseInt(e.length,10))>o&&(r=o,this.log("End range automatically set to the max value of "+o)),s<0||r-s<0||s>o||r>o?(i=!1,this.log("Invalid range: "+JSON.stringify(e)),this.opt.noMatch(e)):""===n.substring(s,r).replace(/\s+/g,"")&&(i=!1,this.log("Skipping whitespace only range: "+JSON.stringify(e)),this.opt.noMatch(e)),{start:s,end:r,valid:i}}},{key:"getTextNodes",value:function(e){var t=this,n="",r=[];this.iterator.forEachNode(NodeFilter.SHOW_TEXT,function(e){r.push({start:n.length,end:(n+=e.textContent).length,node:e})},function(e){return t.matchesExclude(e.parentNode)?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT},function(){e({value:n,nodes:r})})}},{key:"matchesExclude",value:function(e){return o.matches(e,this.opt.exclude.concat(["script","style","title","head","html"]))}},{key:"wrapRangeInTextNode",value:function(e,t,n){var r=this.opt.element?this.opt.element:"mark",i=e.splitText(t),o=i.splitText(n-t),a=document.createElement(r);return a.setAttribute("data-markjs","true"),this.opt.className&&a.setAttribute("class",this.opt.className),a.textContent=i.textContent,i.parentNode.replaceChild(a,i),o}},{key:"wrapRangeInMappedTextNode",value:function(e,t,n,r,i){var o=this;e.nodes.every(function(a,s){var c=e.nodes[s+1];if(void 0===c||c.start>t){if(!r(a.node))return!1;var u=t-a.start,l=(n>a.end?a.end:n)-a.start,h=e.value.substr(0,a.start),f=e.value.substr(l+a.start);if(a.node=o.wrapRangeInTextNode(a.node,u,l),e.value=h+f,e.nodes.forEach(function(t,n){n>=s&&(e.nodes[n].start>0&&n!==s&&(e.nodes[n].start-=l),e.nodes[n].end-=l)}),n-=l,i(a.node.previousSibling,a.start),!(n>a.end))return!1;t=a.end}return!0})}},{key:"wrapGroups",value:function(e,t,n,r){return r((e=this.wrapRangeInTextNode(e,t,t+n)).previousSibling),e}},{key:"separateGroups",value:function(e,t,n,r,i){for(var o=t.length,a=1;a<o;a++){var s=e.textContent.indexOf(t[a]);t[a]&&s>-1&&r(t[a],e)&&(e=this.wrapGroups(e,s,t[a].length,i))}return e}},{key:"wrapMatches",value:function(e,t,n,r,i){var o=this,a=0===t?0:t+1;this.getTextNodes(function(t){t.nodes.forEach(function(t){t=t.node;for(var i=void 0;null!==(i=e.exec(t.textContent))&&""!==i[a];){if(o.opt.separateGroups)t=o.separateGroups(t,i,a,n,r);else{if(!n(i[a],t))continue;var s=i.index;if(0!==a)for(var c=1;c<a;c++)s+=i[c].length;t=o.wrapGroups(t,s,i[a].length,r)}e.lastIndex=0}}),i()})}},{key:"wrapMatchesAcrossElements",value:function(e,t,n,r,i){var o=this,a=0===t?0:t+1;this.getTextNodes(function(t){for(var s=void 0;null!==(s=e.exec(t.value))&&""!==s[a];){var c=s.index;if(0!==a)for(var u=1;u<a;u++)c+=s[u].length;var l=c+s[a].length;o.wrapRangeInMappedTextNode(t,c,l,function(e){return n(s[a],e)},function(t,n){e.lastIndex=n,r(t)})}i()})}},{key:"wrapRangeFromIndex",value:function(e,t,n,r){var i=this;this.getTextNodes(function(o){var a=o.value.length;e.forEach(function(e,r){var s=i.checkWhitespaceRanges(e,a,o.value),c=s.start,u=s.end;s.valid&&i.wrapRangeInMappedTextNode(o,c,u,function(n){return t(n,e,o.value.substring(c,u),r)},function(t){n(t,e)})}),r()})}},{key:"unwrapMatches",value:function(e){for(var t=e.parentNode,n=document.createDocumentFragment();e.firstChild;)n.appendChild(e.removeChild(e.firstChild));t.replaceChild(n,e),this.ie?this.normalizeTextNode(t):t.normalize()}},{key:"normalizeTextNode",value:function(e){if(e){if(3===e.nodeType)for(;e.nextSibling&&3===e.nextSibling.nodeType;)e.nodeValue+=e.nextSibling.nodeValue,e.parentNode.removeChild(e.nextSibling);else this.normalizeTextNode(e.firstChild);this.normalizeTextNode(e.nextSibling)}}},{key:"markRegExp",value:function(e,t){var n=this;this.opt=t,this.log('Searching with expression "'+e+'"');var r=0,i="wrapMatches";this.opt.acrossElements&&(i="wrapMatchesAcrossElements"),this[i](e,this.opt.ignoreGroups,function(e,t){return n.opt.filter(t,e,r)},function(e){r++,n.opt.each(e)},function(){0===r&&n.opt.noMatch(e),n.opt.done(r)})}},{key:"mark",value:function(e,t){var n=this;this.opt=t;var r=0,i="wrapMatches",o=this.getSeparatedKeywords("string"==typeof e?[e]:e),s=o.keywords,c=o.length;this.opt.acrossElements&&(i="wrapMatchesAcrossElements"),0===c?this.opt.done(r):function e(t){var o=new a(n.opt).create(t),u=0;n.log('Searching with expression "'+o+'"'),n[i](o,1,function(e,i){return n.opt.filter(i,t,r,u)},function(e){u++,r++,n.opt.each(e)},function(){0===u&&n.opt.noMatch(t),s[c-1]===t?n.opt.done(r):e(s[s.indexOf(t)+1])})}(s[0])}},{key:"markRanges",value:function(e,t){var n=this;this.opt=t;var r=0,i=this.checkRanges(e);i&&i.length?(this.log("Starting to mark with the following ranges: "+JSON.stringify(i)),this.wrapRangeFromIndex(i,function(e,t,r,i){return n.opt.filter(e,t,r,i)},function(e,t){r++,n.opt.each(e,t)},function(){n.opt.done(r)})):this.opt.done(r)}},{key:"unmark",value:function(e){var t=this;this.opt=e;var n=this.opt.element?this.opt.element:"*";n+="[data-markjs]",this.opt.className&&(n+="."+this.opt.className),this.log('Removal selector "'+n+'"'),this.iterator.forEachNode(NodeFilter.SHOW_ELEMENT,function(e){t.unwrapMatches(e)},function(e){var r=o.matches(e,n),i=t.matchesExclude(e);return!r||i?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT},this.opt.done)}},{key:"opt",set:function(e){this._opt=i({},{element:"",className:"",exclude:[],iframes:!1,iframesTimeout:5e3,separateWordSearch:!0,acrossElements:!1,ignoreGroups:0,each:function(){},noMatch:function(){},filter:function(){return!0},done:function(){},debug:!1,log:window.console},e)},get:function(){return this._opt}},{key:"iterator",get:function(){return new o(this.ctx,this.opt.iframes,this.opt.exclude,this.opt.iframesTimeout)}}]),e}();return e.fn.mark=function(e,t){return new s(this.get()).mark(e,t),this},e.fn.markRegExp=function(e,t){return new s(this.get()).markRegExp(e,t),this},e.fn.markRanges=function(e,t){return new s(this.get()).markRanges(e,t),this},e.fn.unmark=function(e){return new s(this.get()).unmark(e),this},e});
diff --git a/koha-tmpl/intranet-tmpl/prog/css/preferences.css b/koha-tmpl/intranet-tmpl/prog/css/preferences.css
index b004267789..da27393ae9 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/preferences.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/preferences.css
@@ -20,46 +20,30 @@ textarea.preference-code, .preference-file {
 	font-family: monospace;
 }
 
-a.expand-textarea {
+a.expand-textarea,
+a.collapse-textarea {
     display: block;
+    font-size: 125%;
+    font-weight: bold;
 }
+
 dl {
 	margin-left : 1em;
 }
 dt {
 	padding : .1em;
 }
-h1 {
-	font-size : 149%;
-}
-h2 {
-	font-size : 134%;
-}
-
-table {
-	width : 100%;
-}
 
-caption {
-	color : #003399;
+h2 {
+    background-color: #e6f0f2;
+    font-size: 150%;
+    padding: .4em;
+    text-shadow: 0 1px 0 rgb(255, 255, 255);
 }
 
-h3 {
+h4 label {
 	color : #003366;
-	margin : .4em 0;
-    width : 40%;
-}
-
-h3.expanded {
-    background: transparent url("../img/collapse.gif") 0 6px no-repeat;
-	cursor : pointer;
-	padding-left : 12px;
-}
-
-h3.collapsed {
-    background: transparent url("../img/expand.gif") 0 6px no-repeat;
-	cursor : pointer;
-	padding-left : 12px;
+    font-weight: bold;
 }
 
 .humanMsg strong {
@@ -67,9 +51,7 @@ h3.collapsed {
 	font-weight: normal;
 }
 
-#yui-main {
-	margin-bottom:2em;
-}
+
 #toolbar.floating {
     box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.5);
     border-radius: 0;
@@ -89,3 +71,37 @@ span.overridden {
     font-weight: bold;
     color: red;
 }
+
+.pref_line {
+    border: 1px solid #CCC;
+}
+
+#menu ul li.active a.pref_sublink {
+    background: #FFF none;
+    border: 0;
+    color: #004D99;
+    font-weight: normal;
+    font-size: 100%;
+    margin: 0;
+    padding: .2em .5em;
+    text-align: right;
+    text-decoration: underline;
+}
+
+dl.name-row {
+    border-bottom: 1px solid #EEE;
+    margin: .3em 0;
+    margin-left: 1em;
+    padding: .3em 0;
+}
+
+.name-cell label {
+    font-weight: bold;
+    font-size: 130%;
+    color: #336699;
+}
+
+dd {
+    text-indent: 0;
+    margin-left: 3em;
+}
\ No newline at end of file
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 b17c6e4517..1eca4670c6 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
+++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
@@ -422,6 +422,11 @@ hr {
     clear: both;
 }
 
+mark {
+    background-color: #EFFF73;
+    padding: 0;
+}
+
 p {
     margin: .5em 0 .5em 0;
 }
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
index e40bb124e6..eb33e2b1f0 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
@@ -1015,6 +1015,9 @@
 
             <h2>JSZip</h2>
             <p>The <a href="https://stuk.github.io/jszip/">JSZip</a> JavaScript library is licensed under both the <a href="https://github.com/Stuk/jszip/blob/master/LICENSE.markdown">MIT and GPLv3 Licenses</a>.</p>
+
+            <h2>mark.js</h2>
+            <p>The <a href="https://markjs.io/">mark.js</a> JavaScript library by <a href="https://github.com/julmot">Julian Kühnel</a> is licensed under the <a href="https://github.com/julmot/mark.js/blob/master/LICENSE">MIT Licenses</a>.</p>
         </div>
 
         <div id="translations">
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 2db4b2d68c..c2f65f0c14 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tt
@@ -9,17 +9,17 @@
 [% Asset.css("lib/jquery/plugins/multiple-select/multiple-select.css") %]
 [% Asset.css("css/humanmsg.css") %]
 </head>
+
 <body id="admin_preferences" class="admin">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'prefs-admin-search.inc' %]
 
 <div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/admin/admin-home.pl">Administration</a> &rsaquo; System preferences</div>
 
-<div id="doc3" class="yui-t2">
-
-   <div id="bd">
-    <div id="yui-main">
-	    <div class="yui-b">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
     [% IF ( jump_not_found ) %]
     <h2>System preferences</h2>
@@ -34,47 +34,52 @@
     [% ELSIF searchfield %]
         <h1>You searched for: [% searchfield | html %]</h1>
     [% END %]
+    [% IF ( searchfield && !search_not_found ) %]
+        <p>
+            Results in sections:
+            [% FOREACH TAB IN TABS %]
+                <a href="#[% TAB.tab_title %]">[% TAB.tab_title %]</a>[% UNLESS ( loop.last ) %] &bull; [% END %]
+            [% END %]
+        </p>
+    [% END %]
+    [% IF ( searchfield ) %]
+        <label for="keyword_filter">Filter: <input type="text" size="10" name="keyword_filter" id="keyword_filter" /> <a href="#" id="clear_filter" style="display:none;"><i class="fa fa-remove"></i></a></label>
+    [% END %]
     [% FOREACH TAB IN TABS %]
     <div class="prefs-tab">
-    <h2>[% TAB.tab_title %] preferences</h2>
+    <h2 id="[% TAB.tab_title %]">[% TAB.tab_title %] preferences</h2>
     <form action="/cgi-bin/koha/admin/preferences.pl" method="post">
-        [% UNLESS ( searchfield ) %]<div id="toolbar"><button class="save-all submit" type="submit">Save all [% TAB.tab_title %] preferences</button></div>[% END %]
+        [% UNLESS ( searchfield ) %]
+            <div id="toolbar">
+                <button class="save-all submit" type="submit">Save all [% TAB.tab_title %] preferences</button>
+                <label for="keyword_filter">Filter: <input type="text" size="10" name="keyword_filter" id="keyword_filter" /> <a href="#" id="clear_filter" style="display:none;"><i class="fa fa-remove"></i></a></label>
+            </div>
+        [% END %]
         <input type="hidden" name="op" value="save" />
         <input type="hidden" name="tab" value="[% TAB.tab_id %]" />
-
-            [% FOREACH LINE IN TAB.LINES %]
+        [% FOREACH LINE IN TAB.LINES %]
             [% IF ( LINE.is_group_title ) %]
-            [% UNLESS ( loop.first ) %]</tbody></table>[% END %]
-            <h3>[% LINE.title %]</h3>
-            <table class="preferences">
-            <thead><tr><th>Preference</th><th>Value</th></tr></thead>
-            [% UNLESS ( loop.last ) %]<tbody>[% END %]
+                [% UNLESS ( loop.first ) %][% END %]
+                <h3 class="name-row">[% LINE.title %]</h3>
+                [% UNLESS ( loop.last ) %][% END %]
             [% ELSE %]
-            [% IF ( loop.first ) %]<table class="preferences"><thead><tr><th>Preference</th><th>Value</th></tr></thead><tbody>[% END %]
-            <tr class="name-row">
-                <td class="name-cell">
-                    <code>
-                        [% FOREACH NAME IN LINE.NAMES %]
-						<label for="pref_[% NAME.name %]">
-							[% IF ( NAME.jumped ) %]
-							<span class="term" id="jumped">[% NAME.name %]</span>
-                            [% ELSIF ( NAME.highlighted ) %]
-							<span class="term">[% NAME.name %]</span>
-							[% ELSE %]
-							[% NAME.name %]
-							[% END %]
+                [% IF ( loop.first ) %][% END %]
+            <dl class="name-row">
+                <dt class="name-cell">
+                    [% FOREACH NAME IN LINE.NAMES %]
+                        <label for="pref_[% NAME.name %]">
+                            [% NAME.name %]
 
                             [% IF NAME.overridden %]
                                 <span class="overridden" title="The system preference [% NAME.name %] may have been overridden from this value by one or more virtual hosts.">
                                     [Overridden]
                                 </span>
                             [% END %]
-						</label>
-                        [% UNLESS ( loop.last ) %]<br />[% END %]
-                        [% END %]
-                    </code>
-                </td>
-                <td><div>
+                        </label>
+                    [% UNLESS ( loop.last ) %]<br />[% END %]
+                    [% END %]
+                </dt>
+                <dd><div>
                     [% FOREACH CHUNK IN LINE.CHUNKS %]
                     [% IF ( CHUNK.type_text ) %]
                     [% CHUNK.contents %]
@@ -100,9 +105,9 @@
                         [% IF ( CHUNK.type_htmlarea ) && ( Koha.Preference('UseWYSIWYGinSystemPreferences') ) %]
                         <textarea name="pref_[% CHUNK.name %]" id="pref_[% CHUNK.name %]" class="preference preference-[% CHUNK.class or "short" %] mce" rows="20" cols="60">[% CHUNK.value %]</textarea>
                         [% ELSE %]
-                        <a class="expand-textarea" style="display: none" href="#">Click to Edit</a>
+                        <a class="expand-textarea" style="display: none" href="#"><i class="fa fa-pencil"></i> Click to edit</a>
                         <textarea name="pref_[% CHUNK.name %]" id="pref_[% CHUNK.name %]" class="preference preference-[% CHUNK.class or "short" %]" rows="10" cols="40">[% CHUNK.value %]</textarea>
-                        <a class="collapse-textarea" style="display:none" href="#">Click to collapse</br></a>
+                        <a class="collapse-textarea" style="display:none" href="#"><i class="fa fa-angle-double-up"></i> Click to collapse</br></a>
                         [% END %]
                     [% ELSIF ( CHUNK.type_languages ) %]
                     <dl class="sortable">
@@ -137,27 +142,31 @@
                     </dl>
                     [% END %]
                     [% END %]
-                </div></td>
-            </tr>
-            [% IF ( loop.last ) %]</tbody></table>[% END %]
+                </div></dt>
+            </dl>
+            [% IF ( loop.last ) %][% END %]
             [% END %]
         [% END %]
         <fieldset class="action"><button class="save-all submit" type="submit">Save all [% TAB.tab_title %] preferences</button> <a href="/cgi-bin/koha/admin/preferences.pl" class="force_reload cancel">Cancel</a></fieldset>
     </form>
     </div>
     [% END %]
-</div>
-</div>
-<div class="yui-b">
-[% INCLUDE 'prefs-menu.inc' %]
-</div>
-</div>
+
+            </main>
+        </div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+        <div class="col-sm-2 col-sm-pull-10">
+            <aside>
+                [% INCLUDE 'prefs-menu.inc' %]
+            </aside>
+        </div> <!-- /.col-sm-2.col-sm-pull-10 -->
+     </div> <!-- /.row -->
 
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'datatables.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery.fixFloat.js") %]
     [% Asset.js("lib/jquery/plugins/multiple-select/jquery.multiple.select.js") %]
-    <script type="text/javascript">
+    <script>
         [% UNLESS ( searchfield ) %]$(document).ready(function(){
                 $('#toolbar').fixFloat();
             });[% END %]
@@ -189,10 +198,12 @@
         var MSG_SESSION_TIMED_OUT = _( "You need to log in again, your session has timed out" );
         var MSG_DATA_NOT_SAVED = _( "Error; your data might not have been saved" );
         var MSG_LOADING = _( "Loading..." );
+        var MSG_FILTER_NOT_FOUND = _("No matching terms were found on this page");
     </script>
-    <script src="[% interface %]/lib/jquery/plugins/humanmsg.js" type="text/javascript"></script>
-    <script src="[% interface %]/[% theme %]/js/ajax.js" type="text/javascript"></script>
-    <script src="[% interface %]/[% theme %]/js/pages/preferences.js" type="text/javascript"></script>
+    [% Asset.js("lib/jquery/plugins/humanmsg.js") %]
+    [% Asset.js("lib/jquery/plugins/jquery.mark.min.js") %]
+    [% Asset.js("js/ajax.js") %]
+    [% Asset.js("js/pages/preferences.js") %]
     [%# Add WYSIWYG editor for htmlarea system preferences %]
     [% INCLUDE 'wysiwyg-systempreferences.inc' %]
 [% END %]
diff --git a/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js b/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
index f7ed5e1121..1aba1e259d 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/pages/preferences.js
@@ -45,14 +45,6 @@ KOHA.Preferences = {
 
 $( document ).ready( function () {
 
-    $("table.preferences").dataTable($.extend(true, {}, dataTablesDefaults, {
-        "sDom": 't',
-        "aoColumnDefs": [
-            { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false }
-        ],
-        "bPaginate": false
-    }));
-
     function mark_modified() {
         $( this.form ).find( '.save-all' ).prop('disabled', false);
         $( this ).addClass( 'modified' );
@@ -118,29 +110,42 @@ $( document ).ready( function () {
         return false;
     });
 
+    if ( search_jumped ) {
+        document.location.hash = "jumped";
+    }
+
+    $(".name-row").mark( to_highlight );
 
-    $("h3").attr("class","expanded").attr("title",MSG_CLICK_TO_EXPAND);
-    var collapsible = $(".collapsed,.expanded");
 
-    $(collapsible).on("click",function(){
-        var panel = $(this).next("div");
-        if(panel.is(":visible")){
-            $(this).addClass("collapsed").removeClass("expanded").attr("title",MSG_CLICK_TO_EXPAND);
-            panel.hide();
+    // Filtering by mark.js
+    var keyword_filter = $("#keyword_filter"),
+    context = $(".name-row");
+    $("#clear_filter").on("click", function(e){
+        e.preventDefault();
+        keyword_filter.val("").trigger("input");
+    });
+    keyword_filter.on("input", function() {
+        var term = $(this).val();
+        context.show().unmark();
+        if (term) {
+            $("#clear_filter").show();
+            context.mark(term, {
+                done: function( total ) {
+                    if( total > 0 ){
+                        context.not(":has(mark)").hide();
+                    }
+                },
+                noMatch: function(term){
+                    if( $("#filter_empty").length < 1 ){
+                        $("main").prepend("<div id=\"filter_empty\" class=\"dialog alert\">" + MSG_FILTER_NOT_FOUND + "</div>");
+                    }
+                    context.not(":has(mark)").show();
+                }
+            });
         } else {
-            $(this).addClass("expanded").removeClass("collapsed").attr("title",MSG_CLICK_TO_COLLAPSE);
-            panel.show();
+            $("#clear_filter").hide();
+            $("#filter_empty").remove();
         }
     });
 
-    if ( to_highlight ) {
-        var words = to_highlight.split( ' ' );
-        $( '.prefs-tab table' ).find( 'td, th' ).not( '.name-cell' ).each( function ( i, td ) {
-            $.each( words, function ( i, word ) { $( td ).highlight( word ) } );
-        } ).find( 'option, textarea' ).removeHighlight();
-    }
-
-    if ( search_jumped ) {
-        document.location.hash = "jumped";
-    }
-} );
+});
-- 
2.11.0