Merge pull request #3439 from moisseev/webui

[WebUI] Map editor further improvements

2 files changed, 51 insertions, 9 deletions

diff --git a/interface/css/rspamd.css b/interface/css/rspamd.css
index 5fefb4b9a..d468696dc 100644
--- a/interface/css/rspamd.css
+++ b/interface/css/rspamd.css
@@ -534,31 +534,72 @@ td.maps-cell {
     border-radius: 0 0 calc(.25rem - 1px) 0;
 }
 
-textarea#editor {
-    height: calc(100vh - 178px);
+/* Dynamic width for modal */
+#modalDialog {
+    text-align: center;
 }
-.codejar-wrap {
-    background: rgb(0, 47, 79);
+#modalDialog > .modal-dialog {
+    display: inline-block;
+    max-width: 100%;
+    text-align: left;
+    width: auto !important;
+
+    /* Center the modal vertically */
+    margin: 0 auto;
+    top: 50%;
+    transform: translate(0 -50%);
+    -webkit-transform: translate(0, -50%);
+}
+
+.codejar-wrap,
+#editor.map-textarea {
     border-radius: 6px;
     max-height: calc(100vh - 178px);
-    overflow-y: auto;
+    max-width: 100%;
+    min-width: 100%;
+    overflow: auto;
+    resize: both;
+}
+#editor.map-textarea {
+    height: calc(100vh - 178px);
+    width: calc(100vw - 36px - 3rem);
+}
+.codejar-wrap,
+#editor.map-textarea,
+#editor.map-textarea:focus {
+    background: rgb(0, 47, 79);
+    color: silver;
 }
 .codejar-linenumbers {
     background: rgba(255, 255, 255, 0.07) !important;
     bottom: unset !important;
     color: rgba(120, 120, 120, 1) !important;
+    height: inherit;
     mix-blend-mode: unset !important;
     text-align: right;
     overflow: unset !important;
+    user-select: none;
 }
 .editor {
-    color: #fff;
     font-family: monospace;
     font-size: 14px;
     font-weight: 400;
     letter-spacing: normal;
-    min-height: 1.5em;
+    margin-left: 10px;
+    margin-right: 10px;
     resize: unset !important;
     tab-size: 4;
-    overflow-y: visible !important;
+    -moz-tab-size: 4;
+    overflow: unset !important;
+}
+
+/* Prism show-invisibles plugin overrides */
+.token.tab:not(:empty)::before {
+    content: "\23af\27F6";
+}
+/* Temporarily remove CR and LF tokens as they overflow line width */
+.token.cr::before,
+.token.crlf::before,
+.token.lf::before {
+    content: "";
 }
diff --git a/interface/js/lib/linenumbers.min.js b/interface/js/lib/linenumbers.min.js
index 1b8312009..850f6d065 100644
--- a/interface/js/lib/linenumbers.min.js
+++ b/interface/js/lib/linenumbers.min.js
@@ -1,5 +1,6 @@
 /*!
  * CodeJar 3.1.0 helper: lineNumbers (https://github.com/antonmedv/codejar)
  * Copyright (c) 2020, Anton Medvedev, MIT
+ * Added line count fix (https://github.com/antonmedv/codejar/pull/26/commits/245e213622ef60574ae76d9b7969b43249c592f5)
  */
-function withLineNumbers(e,t={}){const o=Object.assign({class:"codejar-linenumbers",wrapClass:"codejar-wrap",width:"35px",backgroundColor:"rgba(128, 128, 128, 0.15)",color:""},t);let l;return function(t){e(t),l||(l=init(t,o));const n=(t.textContent||"").replace(/\n+$/,"\n").split("\n").length+1;let s="";for(let e=1;e<n;e++)s+=`${e}\n`;l.innerText=s}}function init(e,t){const o=getComputedStyle(e),l=document.createElement("div");l.className=t.wrapClass,l.style.position="relative";const n=document.createElement("div");return n.className=t.class,l.appendChild(n),n.style.position="absolute",n.style.top="0px",n.style.left="0px",n.style.bottom="0px",n.style.width=t.width,n.style.overflow="hidden",n.style.backgroundColor=t.backgroundColor,n.style.color=t.color||o.color,n.style.setProperty("mix-blend-mode","difference"),n.style.fontFamily=o.fontFamily,n.style.fontSize=o.fontSize,n.style.lineHeight=o.lineHeight,n.style.paddingTop=o.paddingTop,n.style.paddingLeft=o.paddingLeft,n.style.borderTopLeftRadius=o.borderTopLeftRadius,n.style.borderBottomLeftRadius=o.borderBottomLeftRadius,e.style.paddingLeft=`calc(${t.width} + ${n.style.paddingLeft})`,e.style.whiteSpace="pre",e.parentNode.insertBefore(l,e),l.appendChild(e),n}
\ No newline at end of file
+function withLineNumbers(e,t={}){const o=Object.assign({class:"codejar-linenumbers",wrapClass:"codejar-wrap",width:"35px",backgroundColor:"rgba(128, 128, 128, 0.15)",color:""},t);let n;return function(t){e(t),n||(n=init(t,o));const l=t.textContent||"",s=l.split(/\r\n|\r|\n/).length+(l.endsWith("\r")||l.endsWith("\n")?0:1);let i="";for(let e=1;e<s;e++)i+=`${e}\n`;n.innerText=i}}function init(e,t){const o=getComputedStyle(e),n=document.createElement("div");n.className=t.wrapClass,n.style.position="relative";const l=document.createElement("div");return l.className=t.class,n.appendChild(l),l.style.position="absolute",l.style.top="0px",l.style.left="0px",l.style.bottom="0px",l.style.width=t.width,l.style.overflow="hidden",l.style.backgroundColor=t.backgroundColor,l.style.color=t.color||o.color,l.style.setProperty("mix-blend-mode","difference"),l.style.fontFamily=o.fontFamily,l.style.fontSize=o.fontSize,l.style.lineHeight=o.lineHeight,l.style.paddingTop=o.paddingTop,l.style.paddingLeft=o.paddingLeft,l.style.borderTopLeftRadius=o.borderTopLeftRadius,l.style.borderBottomLeftRadius=o.borderBottomLeftRadius,e.style.paddingLeft=`calc(${t.width} + ${l.style.paddingLeft})`,e.style.whiteSpace="pre",e.parentNode.insertBefore(n,e),n.appendChild(e),l}
\ No newline at end of file