Fixing and developing the editor

This commit is contained in:
Eugene ;) 2020-04-23 16:23:56 +02:00
parent de2400d03a
commit 821d9a8ef8
8 changed files with 204 additions and 69 deletions

View File

@ -14,6 +14,7 @@
<title>Seenginx</title>
<base href="~/" />
<link rel="stylesheet" href="~/css/codemirror.css">
<link rel="stylesheet" href="~/css/solarized.css">
<environment include="Staging,Production">
<link rel="stylesheet" href="~/css/materialdesignicons.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/bulma.min.css" asp-append-version="true" />

View File

@ -24,33 +24,3 @@ html {
.menu-list li a {
font-family: Ubuntu-Mono,'Noto Mono'
}
.editor {
border-radius: 6px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-family: 'Source Code Pro', monospace;
font-size: 14px;
font-weight: 400;
height: 100%;
min-height:10%;
max-height:100%;
letter-spacing: normal;
line-height: 20px;
padding: 10px;
tab-size: 4;
}
.token.number {
align-items: initial;
background-color: initial;
border-radius: initial;
display: initial;
font-size: initial;
height: initial;
justify-content: initial;
margin-right: initial;
min-width: initial;
padding: initial;
text-align: initial;
vertical-align: initial;
}

View File

@ -30,6 +30,7 @@
min-height: 10%;
grid-template-rows: 30px auto 30px;
grid-template-columns: 30% auto;
width: 100%;
& .filterFiles {
grid-area: filterFiles
@ -66,14 +67,22 @@
grid-area: codeEditor;
min-height: 0;
height: 100%;
overflow-x: auto;
& .editor {
height: 100%;
margin: 0
margin: 0;
width: 100%
}
& .CodeMirror.cm-s-default {
& .CodeMirror {
height: 100%;
max-height: 100%;
width: 100%;
&-sizer {
min-width: 1% !important
}
}
}

File diff suppressed because one or more lines are too long

View File

@ -137,34 +137,6 @@ html {
.menu-list li a {
font-family: Ubuntu-Mono,'Noto Mono'; }
.editor {
border-radius: 6px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
font-family: 'Source Code Pro', monospace;
font-size: 14px;
font-weight: 400;
height: 100%;
min-height: 10%;
max-height: 100%;
letter-spacing: normal;
line-height: 20px;
padding: 10px;
tab-size: 4; }
.token.number {
align-items: initial;
background-color: initial;
border-radius: initial;
display: initial;
font-size: initial;
height: initial;
justify-content: initial;
margin-right: initial;
min-width: initial;
padding: initial;
text-align: initial;
vertical-align: initial; }
.main {
display: flex;
flex-wrap: nowrap;
@ -191,7 +163,8 @@ html {
max-height: 100%;
min-height: 10%;
grid-template-rows: 30px auto 30px;
grid-template-columns: 30% auto; }
grid-template-columns: 30% auto;
width: 100%; }
.filesWithEditor .filterFiles {
grid-area: filterFiles; }
.filesWithEditor .fileTitle {
@ -216,12 +189,18 @@ html {
.filesWithEditor .codeEditor {
grid-area: codeEditor;
min-height: 0;
height: 100%; }
height: 100%;
overflow-x: auto; }
.filesWithEditor .codeEditor .editor {
height: 100%;
margin: 0; }
.filesWithEditor .codeEditor .CodeMirror.cm-s-default {
height: 100%; }
margin: 0;
width: 100%; }
.filesWithEditor .codeEditor .CodeMirror {
height: 100%;
max-height: 100%;
width: 100%; }
.filesWithEditor .codeEditor .CodeMirror-sizer {
min-width: 1% !important; }
.filesWithEditor .filesActions {
grid-area: filesActions; }
.filesWithEditor .editorActions {

View File

@ -1 +1 @@
#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}html{scrollbar-color:#f1b941 #fbeed0;scrollbar-width:thin;scrollbar-arrow-color:#fbeed0;scrollbar-base-color:#f6d287;scrollbar-darkshadow-color:#f1b941;}*{scrollbar-width:inherit;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}.flexCenter{display:flex;align-content:center;align-items:center;}.noBottomMargin{margin-bottom:0 !important;}.isNoWrap{white-space:nowrap;}.isFinger{cursor:pointer;}.neomorph{box-shadow:-8px -8px 16px rgba(251,238,208,.5),8px 8px 16px rgba(241,185,65,.5);}.neomorphSmall{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);}.neomorphBottom{filter:drop-shadow(8px 8px 14px #f1b941);}.neomorphInset{box-shadow:inset 8px 8px 16px rgba(241,185,65,.5),inset -8px -8px 16px rgba(251,238,208,.5);}.neomorphInsetSmall{box-shadow:inset 6px 6px 12px rgba(241,185,65,.5),inset -6px -6px 12px rgba(251,238,208,.5);}.neoBtn{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);background:none !important;border:none !important;transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.neoBtn:focus{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoBtn:hover{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);background:none !important;border:none !important;transform:scale(1.1);}.neoFile{box-shadow:0 0 0 rgba(251,238,208,.5),0 0 0 rgba(241,185,65,.5) !important;transition:all .2s linear;-webkit-backface-visibility:hidden !important;backface-visibility:hidden !important;background:#f6d287 !important;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoFile.isSelected{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5) !important;}.neoFile.is-active,.neoFile.active{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5) !important;color:#181515 !important;}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px !important;}.borderRBig{border-radius:28px;}.bg{background:#f6d287;}.sameMarginBottom{margin-bottom:1rem !important;}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}.editor{border-radius:6px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);font-family:'Source Code Pro',monospace;font-size:14px;font-weight:400;height:100%;min-height:10%;max-height:100%;letter-spacing:normal;line-height:20px;padding:10px;tab-size:4;}.token.number{align-items:initial;background-color:initial;border-radius:initial;display:initial;font-size:initial;height:initial;justify-content:initial;margin-right:initial;min-width:initial;padding:initial;text-align:initial;vertical-align:initial;}.main{display:flex;flex-wrap:nowrap;align-items:start;width:100%;height:100vh;padding:2.5%;}.mainNav{overflow-y:auto;padding:14px;width:17%;margin-right:40px;}.mainPage{overflow-y:auto;padding:28px;width:calc(83% - 40px);align-self:stretch;}.filesWithEditor{display:grid;grid-template-areas:"filterFiles fileTitle" "files codeEditor" "filesActions editorActions";grid-gap:20px;height:100%;max-height:100%;min-height:10%;grid-template-rows:30px auto 30px;grid-template-columns:30% auto;}.filesWithEditor .filterFiles{grid-area:filterFiles;}.filesWithEditor .fileTitle{grid-area:fileTitle;}.filesWithEditor .files{grid-area:files;display:block;min-height:10%;padding:4% 0;}.filesWithEditor .files .confFile{padding:4% 6%;margin-bottom:3%;}.filesWithEditor .filesList{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:10%;width:100%;padding:4% 8%;overflow-y:auto;}.filesWithEditor .codeEditor{grid-area:codeEditor;min-height:0;height:100%;}.filesWithEditor .codeEditor .editor{height:100%;margin:0;}.filesWithEditor .codeEditor .CodeMirror.cm-s-default{height:100%;}.filesWithEditor .filesActions{grid-area:filesActions;}.filesWithEditor .editorActions{grid-area:editorActions;}.menu-list>li>.neoFile{margin-bottom:4%;}
#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;}html{scrollbar-color:#f1b941 #fbeed0;scrollbar-width:thin;scrollbar-arrow-color:#fbeed0;scrollbar-base-color:#f6d287;scrollbar-darkshadow-color:#f1b941;}*{scrollbar-width:inherit;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}.flexCenter{display:flex;align-content:center;align-items:center;}.noBottomMargin{margin-bottom:0 !important;}.isNoWrap{white-space:nowrap;}.isFinger{cursor:pointer;}.neomorph{box-shadow:-8px -8px 16px rgba(251,238,208,.5),8px 8px 16px rgba(241,185,65,.5);}.neomorphSmall{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);}.neomorphBottom{filter:drop-shadow(8px 8px 14px #f1b941);}.neomorphInset{box-shadow:inset 8px 8px 16px rgba(241,185,65,.5),inset -8px -8px 16px rgba(251,238,208,.5);}.neomorphInsetSmall{box-shadow:inset 6px 6px 12px rgba(241,185,65,.5),inset -6px -6px 12px rgba(251,238,208,.5);}.neoBtn{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);background:none !important;border:none !important;transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;}.neoBtn:focus{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoBtn:hover{box-shadow:-6px -6px 12px rgba(251,238,208,.5),6px 6px 12px rgba(241,185,65,.5);background:none !important;border:none !important;transform:scale(1.1);}.neoFile{box-shadow:0 0 0 rgba(251,238,208,.5),0 0 0 rgba(241,185,65,.5) !important;transition:all .2s linear;-webkit-backface-visibility:hidden !important;backface-visibility:hidden !important;background:#f6d287 !important;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5) !important;}.neoFile.isSelected{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5) !important;}.neoFile.is-active,.neoFile.active{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5) !important;color:#181515 !important;}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px !important;}.borderRBig{border-radius:28px;}.bg{background:#f6d287;}.sameMarginBottom{margin-bottom:1rem !important;}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.menu-list li a{font-family:Ubuntu-Mono,'Noto Mono';}.main{display:flex;flex-wrap:nowrap;align-items:start;width:100%;height:100vh;padding:2.5%;}.mainNav{overflow-y:auto;padding:14px;width:17%;margin-right:40px;}.mainPage{overflow-y:auto;padding:28px;width:calc(83% - 40px);align-self:stretch;}.filesWithEditor{display:grid;grid-template-areas:"filterFiles fileTitle" "files codeEditor" "filesActions editorActions";grid-gap:20px;height:100%;max-height:100%;min-height:10%;grid-template-rows:30px auto 30px;grid-template-columns:30% auto;width:100%;}.filesWithEditor .filterFiles{grid-area:filterFiles;}.filesWithEditor .fileTitle{grid-area:fileTitle;}.filesWithEditor .files{grid-area:files;display:block;min-height:10%;padding:4% 0;}.filesWithEditor .files .confFile{padding:4% 6%;margin-bottom:3%;}.filesWithEditor .filesList{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:10%;width:100%;padding:4% 8%;overflow-y:auto;}.filesWithEditor .codeEditor{grid-area:codeEditor;min-height:0;height:100%;overflow-x:auto;}.filesWithEditor .codeEditor .editor{height:100%;margin:0;width:100%;}.filesWithEditor .codeEditor .CodeMirror{height:100%;max-height:100%;width:100%;}.filesWithEditor .codeEditor .CodeMirror-sizer{min-width:1% !important;}.filesWithEditor .filesActions{grid-area:filesActions;}.filesWithEditor .editorActions{grid-area:editorActions;}.menu-list>li>.neoFile{margin-bottom:4%;}

View File

@ -0,0 +1,168 @@
/*
Solarized theme for code-mirror
http://ethanschoonover.com/solarized
*/
/*
Solarized color palette
http://ethanschoonover.com/solarized/img/solarized-palette.png
*/
.solarized.base03 { color: #002b36; }
.solarized.base02 { color: #073642; }
.solarized.base01 { color: #586e75; }
.solarized.base00 { color: #657b83; }
.solarized.base0 { color: #839496; }
.solarized.base1 { color: #93a1a1; }
.solarized.base2 { color: #eee8d5; }
.solarized.base3 { color: #fdf6e3; }
.solarized.solar-yellow { color: #b58900; }
.solarized.solar-orange { color: #cb4b16; }
.solarized.solar-red { color: #dc322f; }
.solarized.solar-magenta { color: #d33682; }
.solarized.solar-violet { color: #6c71c4; }
.solarized.solar-blue { color: #268bd2; }
.solarized.solar-cyan { color: #2aa198; }
.solarized.solar-green { color: #859900; }
/* Color scheme for code-mirror */
.cm-s-solarized {
line-height: 1.45em;
color-profile: sRGB;
rendering-intent: auto;
}
.cm-s-solarized.cm-s-dark {
color: #839496;
background-color: #002b36;
text-shadow: #002b36 0 1px;
}
.cm-s-solarized.cm-s-light {
background-color: #fdf6e3;
color: #657b83;
text-shadow: #eee8d5 0 1px;
}
.cm-s-solarized .CodeMirror-widget {
text-shadow: none;
}
.cm-s-solarized .cm-header { color: #586e75; }
.cm-s-solarized .cm-quote { color: #93a1a1; }
.cm-s-solarized .cm-keyword { color: #cb4b16; }
.cm-s-solarized .cm-atom { color: #d33682; }
.cm-s-solarized .cm-number { color: #d33682; }
.cm-s-solarized .cm-def { color: #2aa198; }
.cm-s-solarized .cm-variable { color: #839496; }
.cm-s-solarized .cm-variable-2 { color: #b58900; }
.cm-s-solarized .cm-variable-3, .cm-s-solarized .cm-type { color: #6c71c4; }
.cm-s-solarized .cm-property { color: #2aa198; }
.cm-s-solarized .cm-operator { color: #6c71c4; }
.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; }
.cm-s-solarized .cm-string { color: #859900; }
.cm-s-solarized .cm-string-2 { color: #b58900; }
.cm-s-solarized .cm-meta { color: #859900; }
.cm-s-solarized .cm-qualifier { color: #b58900; }
.cm-s-solarized .cm-builtin { color: #d33682; }
.cm-s-solarized .cm-bracket { color: #cb4b16; }
.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; }
.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; }
.cm-s-solarized .cm-tag { color: #93a1a1; }
.cm-s-solarized .cm-attribute { color: #2aa198; }
.cm-s-solarized .cm-hr {
color: transparent;
border-top: 1px solid #586e75;
display: block;
}
.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; }
.cm-s-solarized .cm-special { color: #6c71c4; }
.cm-s-solarized .cm-em {
color: #999;
text-decoration: underline;
text-decoration-style: dotted;
}
.cm-s-solarized .cm-error,
.cm-s-solarized .cm-invalidchar {
color: #586e75;
border-bottom: 1px dotted #dc322f;
}
.cm-s-solarized.cm-s-dark div.CodeMirror-selected { background: #073642; }
.cm-s-solarized.cm-s-dark.CodeMirror ::selection { background: rgba(7, 54, 66, 0.99); }
.cm-s-solarized.cm-s-dark .CodeMirror-line::-moz-selection, .cm-s-dark .CodeMirror-line > span::-moz-selection, .cm-s-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(7, 54, 66, 0.99); }
.cm-s-solarized.cm-s-light div.CodeMirror-selected { background: #eee8d5; }
.cm-s-solarized.cm-s-light .CodeMirror-line::selection, .cm-s-light .CodeMirror-line > span::selection, .cm-s-light .CodeMirror-line > span > span::selection { background: #eee8d5; }
.cm-s-solarized.cm-s-light .CodeMirror-line::-moz-selection, .cm-s-ligh .CodeMirror-line > span::-moz-selection, .cm-s-ligh .CodeMirror-line > span > span::-moz-selection { background: #eee8d5; }
/* Editor styling */
/* Little shadow on the view-port of the buffer view */
.cm-s-solarized.CodeMirror {
-moz-box-shadow: inset 7px 0 12px -6px #000;
-webkit-box-shadow: inset 7px 0 12px -6px #000;
box-shadow: inset 7px 0 12px -6px #000;
}
/* Remove gutter border */
.cm-s-solarized .CodeMirror-gutters {
border-right: 0;
}
/* Gutter colors and line number styling based of color scheme (dark / light) */
/* Dark */
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
background-color: #073642;
}
.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
color: #586e75;
text-shadow: #021014 0 -1px;
}
/* Light */
.cm-s-solarized.cm-s-light .CodeMirror-gutters {
background-color: #eee8d5;
}
.cm-s-solarized.cm-s-light .CodeMirror-linenumber {
color: #839496;
}
/* Common */
.cm-s-solarized .CodeMirror-linenumber {
padding: 0 5px;
}
.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }
.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }
.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
color: #586e75;
}
/* Cursor */
.cm-s-solarized .CodeMirror-cursor { border-left: 1px solid #819090; }
/* Fat cursor */
.cm-s-solarized.cm-s-light.cm-fat-cursor .CodeMirror-cursor { background: #77ee77; }
.cm-s-solarized.cm-s-light .cm-animate-fat-cursor { background-color: #77ee77; }
.cm-s-solarized.cm-s-dark.cm-fat-cursor .CodeMirror-cursor { background: #586e75; }
.cm-s-solarized.cm-s-dark .cm-animate-fat-cursor { background-color: #586e75; }
/* Active line */
.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
background: rgba(255, 255, 255, 0.06);
}
.cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
background: rgba(0, 0, 0, 0.06);
}

View File

@ -1,14 +1,21 @@

window.GetEditor = () => document.querySelector(".CodeMirror")
window.InitEditor = (code) => {
if (document.querySelector(".CodeMirror.cm-s-default"))
document.querySelector(".CodeMirror.cm-s-default").remove()
if (window.GetEditor())
window.GetEditor().remove()
document.getElementById("code").innerHTML = code
const editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "nginx"
mode: "nginx",
styleActiveLine: true,
matchBrackets: true,
theme: "solarized light"
})
}
window.DeleteEditor = () => {
document.getElementById("code").innerHTML = ''
if (window.GetEditor())
window.GetEditor().remove()
}