From a6cd5001c246b3a37351c8aa609c54132d1aa8bf Mon Sep 17 00:00:00 2001 From: moisseev Date: Mon, 6 Jul 2020 13:24:15 +0300 Subject: [WebUI] Replace Glyphicons with Font Awesome SVG+JS --- interface/css/rspamd.css | 30 ++++++------- interface/css/svg-with-js.min.css | 5 +++ interface/index.html | 87 +++++++++++++++++++------------------ interface/js/app/rspamd.js | 4 +- interface/js/app/stats.js | 4 +- interface/js/lib/fontawesome.min.js | 5 +++ interface/js/lib/solid.min.js | 5 +++ interface/js/main.js | 5 ++- 8 files changed, 82 insertions(+), 63 deletions(-) create mode 100644 interface/css/svg-with-js.min.css create mode 100644 interface/js/lib/fontawesome.min.js create mode 100644 interface/js/lib/solid.min.js diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css index 4a8c6eaeb..8fb54ab7c 100644 --- a/interface/css/rspamd.css +++ b/interface/css/rspamd.css @@ -218,7 +218,10 @@ table#symbolsTable input[type="number"] { /* stylelint-disable-next-line function-name-case */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#eaeaea', GradientType=0); /* IE6-9 */ } -.card-header h6 { +.card-header > .icon > svg { + vertical-align: middle; +} +.card-header .h6 { font-size: 0.857rem; } @@ -333,17 +336,14 @@ td.maps-cell { text-decoration: underline; } -/* Glyphicons animated spinners */ -.loading .glyphicon-spin { - animation: spin 1000ms infinite linear; +/* Font Awesome icons size */ +.svg-inline--fa { + font-size: 16px; } -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(359deg); - } +/* Increase refresh button spinner speed */ +#refresh .fa-spin { + -webkit-animation: fa-spin 1s linear infinite; + animation: fa-spin 1s linear infinite; } /* Some spacing tweaks */ @@ -434,12 +434,12 @@ td.maps-cell { background: rgba(100, 230, 80, 0.1) !important; } -.glyphicon-ok { - color: #468847; -} -.glyphicon-remove { +.danger .icon { color: #b94a48; } +.success .icon { + color: #468847; +} #nprogress .bar { height: 1px; diff --git a/interface/css/svg-with-js.min.css b/interface/css/svg-with-js.min.css new file mode 100644 index 000000000..2640f9386 --- /dev/null +++ b/interface/css/svg-with-js.min.css @@ -0,0 +1,5 @@ +/*! + * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + */ +.svg-inline--fa,svg:not(:root).svg-inline--fa{overflow:visible}.svg-inline--fa{display:inline-block;font-size:inherit;height:1em;vertical-align:-.125em}.svg-inline--fa.fa-lg{vertical-align:-.225em}.svg-inline--fa.fa-w-1{width:.0625em}.svg-inline--fa.fa-w-2{width:.125em}.svg-inline--fa.fa-w-3{width:.1875em}.svg-inline--fa.fa-w-4{width:.25em}.svg-inline--fa.fa-w-5{width:.3125em}.svg-inline--fa.fa-w-6{width:.375em}.svg-inline--fa.fa-w-7{width:.4375em}.svg-inline--fa.fa-w-8{width:.5em}.svg-inline--fa.fa-w-9{width:.5625em}.svg-inline--fa.fa-w-10{width:.625em}.svg-inline--fa.fa-w-11{width:.6875em}.svg-inline--fa.fa-w-12{width:.75em}.svg-inline--fa.fa-w-13{width:.8125em}.svg-inline--fa.fa-w-14{width:.875em}.svg-inline--fa.fa-w-15{width:.9375em}.svg-inline--fa.fa-w-16{width:1em}.svg-inline--fa.fa-w-17{width:1.0625em}.svg-inline--fa.fa-w-18{width:1.125em}.svg-inline--fa.fa-w-19{width:1.1875em}.svg-inline--fa.fa-w-20{width:1.25em}.svg-inline--fa.fa-pull-left{margin-right:.3em;width:auto}.svg-inline--fa.fa-pull-right{margin-left:.3em;width:auto}.svg-inline--fa.fa-border{height:1.5em}.svg-inline--fa.fa-li{width:2em}.svg-inline--fa.fa-fw{width:1.25em}.fa-layers svg.svg-inline--fa{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.fa-layers{display:inline-block;height:1em;position:relative;text-align:center;vertical-align:-.125em;width:1em}.fa-layers svg.svg-inline--fa{-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter,.fa-layers-text{display:inline-block;position:absolute;text-align:center}.fa-layers-text{left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);-webkit-transform-origin:center center;transform-origin:center center}.fa-layers-counter{background-color:#ff253a;border-radius:1em;-webkit-box-sizing:border-box;box-sizing:border-box;color:#fff;height:1.5em;line-height:1;max-width:5em;min-width:1.5em;overflow:hidden;padding:.25em;right:0;text-overflow:ellipsis;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-bottom-right{bottom:0;right:0;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom right;transform-origin:bottom right}.fa-layers-bottom-left{bottom:0;left:0;right:auto;top:auto;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:bottom left;transform-origin:bottom left}.fa-layers-top-right{right:0;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top right;transform-origin:top right}.fa-layers-top-left{left:0;right:auto;top:0;-webkit-transform:scale(.25);transform:scale(.25);-webkit-transform-origin:top left;transform-origin:top left}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s linear infinite;animation:fa-spin 2s linear infinite}.fa-pulse{-webkit-animation:fa-spin 1s steps(8) infinite;animation:fa-spin 1s steps(8) infinite}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scaleX(-1);transform:scaleX(-1)}.fa-flip-vertical{-webkit-transform:scaleY(-1);transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-webkit-transform:scale(-1);transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;position:relative;width:2.5em}.fa-stack-1x,.fa-stack-2x{bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.svg-inline--fa.fa-stack-1x{height:1em;width:1.25em}.svg-inline--fa.fa-stack-2x{height:2em;width:2.5em}.fa-inverse{color:#fff}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.svg-inline--fa .fa-primary{fill:var(--fa-primary-color,currentColor);opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa .fa-secondary{fill:var(--fa-secondary-color,currentColor)}.svg-inline--fa .fa-secondary,.svg-inline--fa.fa-swap-opacity .fa-primary{opacity:.4;opacity:var(--fa-secondary-opacity,.4)}.svg-inline--fa.fa-swap-opacity .fa-secondary{opacity:1;opacity:var(--fa-primary-opacity,1)}.svg-inline--fa mask .fa-primary,.svg-inline--fa mask .fa-secondary{fill:#000}.fad.fa-inverse{color:#fff} \ No newline at end of file diff --git a/interface/index.html b/interface/index.html index d4b47ccb5..1ac5e2ca4 100644 --- a/interface/index.html +++ b/interface/index.html @@ -18,6 +18,7 @@ + @@ -45,7 +46,7 @@ @@ -90,8 +91,8 @@
- -
Servers
+ + Servers
@@ -113,8 +114,8 @@
- -
Statistics
+ + Statistics
@@ -132,8 +133,8 @@
- -
Throughput
+ + Throughput
@@ -202,15 +203,15 @@
- -
Actions
+ + Actions
- -
Lists
+ + Lists
@@ -221,12 +222,12 @@
-
- -
Symbols and rules
+
+ + Symbols and rules
@@ -239,8 +240,8 @@
- -
Scan suspected message
+ + Scan suspected message
@@ -250,8 +251,8 @@
- - + +
@@ -259,8 +260,8 @@
@@ -298,9 +299,9 @@
-
- -
Scan results history
+
+ + Scan results history
@@ -326,8 +327,8 @@
- -
Test Rspamd selectors
+ + Test Rspamd selectors
@@ -358,7 +359,7 @@
- +
@@ -367,8 +368,8 @@
- - + +
@@ -407,9 +408,9 @@
-
- -
History
+
+ + History
@@ -434,12 +435,12 @@
-
- -
Errors
+
+ + Errors
diff --git a/interface/js/app/rspamd.js b/interface/js/app/rspamd.js index 87fbfb633..e48a75318 100644 --- a/interface/js/app/rspamd.js +++ b/interface/js/app/rspamd.js @@ -396,11 +396,11 @@ function ($, D3pie, visibility, NProgress, stickyTabs, tab_stat, tab_graph, tab_ }); $(document).ajaxStart(function () { - $("#navBar").addClass("loading"); + $("#refresh > svg").addClass("fa-spin"); }); $(document).ajaxComplete(function () { setTimeout(function () { - $("#navBar").removeClass("loading"); + $("#refresh > svg").removeClass("fa-spin"); }, 1000); }); diff --git a/interface/js/app/stats.js b/interface/js/app/stats.js index 1f6a1b5b2..03cc02d08 100644 --- a/interface/js/app/stats.js +++ b/interface/js/app/stats.js @@ -107,14 +107,14 @@ define(["jquery", "d3pie"], $("#selSrv").empty(); $.each(servers, function (key, val) { var row_class = "danger"; - var glyph_status = "glyphicon glyphicon-remove"; + var glyph_status = "fas fa-times"; var short_id = "???"; if (!("config_id" in val.data)) { val.data.config_id = ""; } if (val.status) { row_class = "success"; - glyph_status = "glyphicon glyphicon-ok"; + glyph_status = "fas fa-check"; short_id = val.data.config_id.substring(0, 8); } diff --git a/interface/js/lib/fontawesome.min.js b/interface/js/lib/fontawesome.min.js new file mode 100644 index 000000000..ab008ed92 --- /dev/null +++ b/interface/js/lib/fontawesome.min.js @@ -0,0 +1,5 @@ +/*! + * Font Awesome Free 5.13.1 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + */ +!function(){"use strict";function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function r(t,e){for(var n=0;n>>0;n--;)e[n]=t[n];return e}function Ct(t){return t.classList?At(t.classList):(t.getAttribute("class")||"").split(" ").filter(function(t){return t})}function Ot(t,e){var n,a=e.split("-"),r=a[0],i=a.slice(1).join("-");return r!==t||""===i||(n=i,~F.indexOf(n))?null:i}function St(t){return"".concat(t).replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")}function Pt(n){return Object.keys(n||{}).reduce(function(t,e){return t+"".concat(e,": ").concat(n[e],";")},"")}function Nt(t){return t.size!==yt.size||t.x!==yt.x||t.y!==yt.y||t.rotate!==yt.rotate||t.flipX||t.flipY}function Mt(t){var e=t.transform,n=t.containerWidth,a=t.iconWidth,r={transform:"translate(".concat(n/2," 256)")},i="translate(".concat(32*e.x,", ").concat(32*e.y,") "),o="scale(".concat(e.size/16*(e.flipX?-1:1),", ").concat(e.size/16*(e.flipY?-1:1),") "),c="rotate(".concat(e.rotate," 0 0)");return{outer:r,inner:{transform:"".concat(i," ").concat(o," ").concat(c)},path:{transform:"translate(".concat(a/2*-1," -256)")}}}var zt={x:0,y:0,width:"100%",height:"100%"};function Et(t){var e=!(1").concat(o.map(Zt).join(""),"")}var $t=function(){};function te(t){return"string"==typeof(t.getAttribute?t.getAttribute(Z):null)}var ee={replace:function(t){var e=t[0],n=t[1].map(function(t){return Zt(t)}).join("\n");if(e.parentNode&&e.outerHTML)e.outerHTML=n+($.keepOriginalSource&&"svg"!==e.tagName.toLowerCase()?"\x3c!-- ".concat(e.outerHTML," --\x3e"):"");else if(e.parentNode){var a=document.createElement("span");e.parentNode.replaceChild(a,e),a.outerHTML=n}},nest:function(t){var e=t[0],n=t[1];if(~Ct(e).indexOf($.replacementClass))return ee.replace(t);var a=new RegExp("".concat($.familyPrefix,"-.*"));delete n[0].attributes.style,delete n[0].attributes.id;var r=n[0].attributes.class.split(" ").reduce(function(t,e){return e===$.replacementClass||e.match(a)?t.toSvg.push(e):t.toNode.push(e),t},{toNode:[],toSvg:[]});n[0].attributes.class=r.toSvg.join(" ");var i=n.map(function(t){return Zt(t)}).join("\n");e.setAttribute("class",r.toNode.join(" ")),e.setAttribute(Z,""),e.innerHTML=i}};function ne(t){t()}function ae(n,t){var a="function"==typeof t?t:$t;if(0===n.length)a();else{var e=ne;$.mutateApproach===P&&(e=g.requestAnimationFrame||ne),e(function(){var t=!0===$.autoReplaceSvg?ee.replace:ee[$.autoReplaceSvg]||ee.replace,e=Yt.begin("mutate");n.map(t),e(),a()})}}var re=!1;function ie(){re=!1}var oe=null;function ce(t){if(l&&$.observeMutations){var r=t.treeCallback,i=t.nodeCallback,o=t.pseudoElementsCallback,e=t.observeMutationsRoot,n=void 0===e?v:e;oe=new l(function(t){re||At(t).forEach(function(t){if("childList"===t.type&&0