From 0e51bf0caeb63ab82964ef6be867bfcd64fa3d85 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

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.
---
 .../lib/jquery/plugins/jquery.mark.min.js          |   7 ++
 koha-tmpl/intranet-tmpl/prog/css/preferences.css   |  78 +++++++++------
 koha-tmpl/intranet-tmpl/prog/css/staff-global.css  |   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 0000000..b14fa71
--- /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 b004267..da27393 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/staff-global.css b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
index 57d3622..fda3e0a 100644
--- a/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/css/staff-global.css
@@ -93,6 +93,11 @@ h1,h2,h3,h4,h5,h6 {
 	margin : .3em 0;
 }
 
+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 f6cf9ae..3af9c92 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/about.tt
@@ -1012,6 +1012,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 2db4b2d..c2f65f0 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 f7ed5e1..1aba1e2 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.1.4