Switching to CodeMirror as Editor
This commit is contained in:
parent
66184b7932
commit
de2400d03a
@ -58,25 +58,18 @@
|
||||
<div class="filesList">
|
||||
@foreach (var file in Files)
|
||||
{
|
||||
<div @onclick="e => OnFileClick(e,file)" @key="file" class="confFile borderRSmall neoFile @file.IsVisible @file.IsSelected">
|
||||
<p class="is-7">@file.Folder</p>
|
||||
<p class="has-text-weight-bold @(file.CanBeDeleted ? null : "has-text-danger")">@file.Name</p>
|
||||
</div>
|
||||
<div @onclick="e => OnFileClick(e,file)" @key="file" class="confFile borderRSmall isFinger neoFile @file.IsVisible @file.IsSelected">
|
||||
<p class="is-7">@file.Folder</p>
|
||||
<p class="has-text-weight-bold @(file.CanBeDeleted ? null : "has-text-danger")">@file.Name</p>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="codeEditor">
|
||||
@if (IsAnyFileSelected)
|
||||
{
|
||||
<div class="content">
|
||||
<textarea class="textarea" placeholder="Uhu" @bind="SelectedFile.OriginalBody"></textarea>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span></span>
|
||||
}
|
||||
<form class="editor">
|
||||
<textarea id="code" name="code"></textarea>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="filesActions">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
using Microsoft.AspNetCore.Components;
|
||||
using Microsoft.AspNetCore.Components.Web;
|
||||
using Microsoft.JSInterop;
|
||||
using Seenginx.Models;
|
||||
using System;
|
||||
using System.Collections.Generic;
|
||||
@ -12,6 +13,9 @@ namespace Seenginx.Components
|
||||
public partial class FilesWithEditor<CFile> : ComponentBase
|
||||
where CFile : ConfigFile
|
||||
{
|
||||
[Inject]
|
||||
public IJSRuntime JsRuntime { get; set; }
|
||||
|
||||
[Parameter]
|
||||
public List<CFile> Files { get; set; } = new List<CFile>();
|
||||
|
||||
@ -69,6 +73,7 @@ namespace Seenginx.Components
|
||||
|
||||
protected async Task OnDeselectClick()
|
||||
{
|
||||
await JsRuntime.InvokeVoidAsync("DeleteEditor");
|
||||
SelectedFile = null;
|
||||
await SelectedFileChanged.InvokeAsync(SelectedFile);
|
||||
}
|
||||
@ -140,6 +145,7 @@ namespace Seenginx.Components
|
||||
{
|
||||
Files.ForEach(f => f.Deselect());
|
||||
file.Select();
|
||||
await JsRuntime.InvokeVoidAsync("InitEditor", file.OriginalBody);
|
||||
await SelectedFileChanged.InvokeAsync(file);
|
||||
}
|
||||
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
<link rel="icon" href="~/favicon.png" />
|
||||
<title>Seenginx</title>
|
||||
<base href="~/" />
|
||||
@*<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">*@
|
||||
<link rel="stylesheet" href="~/css/codemirror.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" />
|
||||
@ -43,5 +43,8 @@
|
||||
|
||||
<script src="_framework/blazor.server.js"></script>
|
||||
<script src="_content/Blazorise/blazorise.js"></script>
|
||||
<script src="~/js/codemirror.js"></script>
|
||||
<script src="~/js/nginx.js"></script>
|
||||
<script src="~/js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -25,7 +25,32 @@ html {
|
||||
font-family: Ubuntu-Mono,'Noto Mono'
|
||||
}
|
||||
|
||||
.menu-list a.active {
|
||||
background-color: #3273dc;
|
||||
color: #fff;
|
||||
.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;
|
||||
}
|
||||
@ -43,17 +43,36 @@
|
||||
grid-area: files;
|
||||
display: block;
|
||||
min-height: 10%;
|
||||
padding: 4% 0;
|
||||
|
||||
& .confFile {
|
||||
padding: 4% 6%;
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
|
||||
&List {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
min-height: 10%;
|
||||
width: 100%;
|
||||
padding: 4% 8%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& .codeEditor {
|
||||
grid-area: codeEditor;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
|
||||
& .textarea {
|
||||
& .editor {
|
||||
height: 100%;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
& .CodeMirror.cm-s-default {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -67,16 +86,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.files {
|
||||
|
||||
&List {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
min-height: 10%;
|
||||
width: 100%;
|
||||
padding: 8%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.menu-list > li > .neoFile {
|
||||
margin-bottom: 4%
|
||||
}
|
||||
|
||||
@ -78,18 +78,23 @@
|
||||
}
|
||||
|
||||
&File {
|
||||
box-shadow: 0px 0px 0px rgba($light-shadow, .5), 0px 0px 0px rgba($dark-shadow, .5);
|
||||
box-shadow: 0px 0px 0px rgba($light-shadow, .5), 0px 0px 0px rgba($dark-shadow, .5) !important;
|
||||
transition: all .2s linear;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
background: $background;
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
background: $background !important;
|
||||
|
||||
&:hover {
|
||||
box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5);
|
||||
box-shadow: -3px -3px 6px rgba($light-shadow, .5), 3px 3px 6px rgba($dark-shadow, .5) !important;
|
||||
}
|
||||
|
||||
&.isSelected {
|
||||
box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5);
|
||||
box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5) !important;
|
||||
}
|
||||
|
||||
&.is-active, &.active {
|
||||
box-shadow: inset 3px 3px 6px rgba($dark-shadow, .5),inset -3px -3px 6px rgba($light-shadow, .5) !important;
|
||||
color: $color-black !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -102,7 +107,7 @@
|
||||
border-radius: $border-radius;
|
||||
|
||||
&Small {
|
||||
border-radius: $border-radius-s;
|
||||
border-radius: $border-radius-s !important;
|
||||
}
|
||||
|
||||
&Big {
|
||||
|
||||
@ -5,4 +5,5 @@ $background: rgba(246,210,135,1);
|
||||
$background-light: rgba(247, 215, 148,1);
|
||||
$background-dark: rgba(245, 205, 121,1);
|
||||
$light-shadow: hsl(41, 86%, 90%);
|
||||
$dark-shadow: hsl(41, 86%, 60%);
|
||||
$dark-shadow: hsl(41, 86%, 60%);
|
||||
$color-black: rgb(24,21,21)
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
<ItemGroup>
|
||||
<Folder Include="wwwroot\images\" />
|
||||
<Folder Include="wwwroot\js\" />
|
||||
</ItemGroup>
|
||||
|
||||
<ItemGroup>
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li>
|
||||
<NavLink href="/nginx" class="petiteCaps"
|
||||
<NavLink href="/nginx" class="petiteCaps neoFile borderRSmall"
|
||||
@key="@ActiveNav.Keys.ElementAt(0)"
|
||||
ActiveClass="@ActiveNav.GetValueOrDefault("nginx")"
|
||||
@onclick="@(e => SelectMenuItem("nginx"))">
|
||||
@ -22,7 +22,7 @@
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink href="/nginxlogs" class="petiteCaps"
|
||||
<NavLink href="/nginxlogs" class="petiteCaps neoFile borderRSmall"
|
||||
@key="@ActiveNav.Keys.ElementAt(1)"
|
||||
ActiveClass="@ActiveNav.GetValueOrDefault("nginxlogs")"
|
||||
@onclick="@(e => SelectMenuItem("nginxlogs"))">
|
||||
@ -37,7 +37,7 @@
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li>
|
||||
<NavLink href="/systemd" class="petiteCaps"
|
||||
<NavLink href="/systemd" class="petiteCaps neoFile borderRSmall"
|
||||
@key="@ActiveNav.Keys.ElementAt(2)"
|
||||
ActiveClass="@ActiveNav.GetValueOrDefault("systemd")"
|
||||
@onclick="@(e => SelectMenuItem("systemd"))">
|
||||
@ -46,7 +46,7 @@
|
||||
</NavLink>
|
||||
</li>
|
||||
<li>
|
||||
<NavLink href="/systemdlogs" class="petiteCaps"
|
||||
<NavLink href="/systemdlogs" class="petiteCaps neoFile borderRSmall"
|
||||
@key="@ActiveNav.Keys.ElementAt(3)"
|
||||
ActiveClass="@ActiveNav.GetValueOrDefault("systemdlogs")"
|
||||
@onclick="@(e => SelectMenuItem("systemdlogs"))">
|
||||
@ -61,7 +61,7 @@
|
||||
</p>
|
||||
<ul class="menu-list">
|
||||
<li>
|
||||
<NavLink href="/dmesg" class="petiteCaps"
|
||||
<NavLink href="/dmesg" class="petiteCaps neoFile borderRSmall"
|
||||
@key="@ActiveNav.Keys.ElementAt(4)"
|
||||
ActiveClass="@ActiveNav.GetValueOrDefault("dmesg")"
|
||||
@onclick="@(e => SelectMenuItem("dmesg"))">
|
||||
|
||||
349
Seenginx/wwwroot/css/codemirror.css
Normal file
349
Seenginx/wwwroot/css/codemirror.css
Normal file
@ -0,0 +1,349 @@
|
||||
/* BASICS */
|
||||
|
||||
.CodeMirror {
|
||||
/* Set height, width, borders, and global font properties here */
|
||||
font-family: monospace;
|
||||
height: 300px;
|
||||
color: black;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/* PADDING */
|
||||
|
||||
.CodeMirror-lines {
|
||||
padding: 4px 0; /* Vertical padding around content */
|
||||
}
|
||||
.CodeMirror pre.CodeMirror-line,
|
||||
.CodeMirror pre.CodeMirror-line-like {
|
||||
padding: 0 4px; /* Horizontal padding of content */
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
background-color: white; /* The little square between H and V scrollbars */
|
||||
}
|
||||
|
||||
/* GUTTER */
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #f7f7f7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.CodeMirror-linenumbers {}
|
||||
.CodeMirror-linenumber {
|
||||
padding: 0 3px 0 5px;
|
||||
min-width: 20px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.CodeMirror-guttermarker { color: black; }
|
||||
.CodeMirror-guttermarker-subtle { color: #999; }
|
||||
|
||||
/* CURSOR */
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-left: 1px solid black;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
}
|
||||
/* Shown when moving in bi-directional text */
|
||||
.CodeMirror div.CodeMirror-secondarycursor {
|
||||
border-left: 1px solid silver;
|
||||
}
|
||||
.cm-fat-cursor .CodeMirror-cursor {
|
||||
width: auto;
|
||||
border: 0 !important;
|
||||
background: #7e7;
|
||||
}
|
||||
.cm-fat-cursor div.CodeMirror-cursors {
|
||||
z-index: 1;
|
||||
}
|
||||
.cm-fat-cursor-mark {
|
||||
background-color: rgba(20, 255, 20, 0.5);
|
||||
-webkit-animation: blink 1.06s steps(1) infinite;
|
||||
-moz-animation: blink 1.06s steps(1) infinite;
|
||||
animation: blink 1.06s steps(1) infinite;
|
||||
}
|
||||
.cm-animate-fat-cursor {
|
||||
width: auto;
|
||||
border: 0;
|
||||
-webkit-animation: blink 1.06s steps(1) infinite;
|
||||
-moz-animation: blink 1.06s steps(1) infinite;
|
||||
animation: blink 1.06s steps(1) infinite;
|
||||
background-color: #7e7;
|
||||
}
|
||||
@-moz-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
@keyframes blink {
|
||||
0% {}
|
||||
50% { background-color: transparent; }
|
||||
100% {}
|
||||
}
|
||||
|
||||
/* Can style cursor different in overwrite (non-insert) mode */
|
||||
.CodeMirror-overwrite .CodeMirror-cursor {}
|
||||
|
||||
.cm-tab { display: inline-block; text-decoration: inherit; }
|
||||
|
||||
.CodeMirror-rulers {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: -50px; bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.CodeMirror-ruler {
|
||||
border-left: 1px solid #ccc;
|
||||
top: 0; bottom: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* DEFAULT THEME */
|
||||
|
||||
.cm-s-default .cm-header {color: blue;}
|
||||
.cm-s-default .cm-quote {color: #090;}
|
||||
.cm-negative {color: #d44;}
|
||||
.cm-positive {color: #292;}
|
||||
.cm-header, .cm-strong {font-weight: bold;}
|
||||
.cm-em {font-style: italic;}
|
||||
.cm-link {text-decoration: underline;}
|
||||
.cm-strikethrough {text-decoration: line-through;}
|
||||
|
||||
.cm-s-default .cm-keyword {color: #708;}
|
||||
.cm-s-default .cm-atom {color: #219;}
|
||||
.cm-s-default .cm-number {color: #164;}
|
||||
.cm-s-default .cm-def {color: #00f;}
|
||||
.cm-s-default .cm-variable,
|
||||
.cm-s-default .cm-punctuation,
|
||||
.cm-s-default .cm-property,
|
||||
.cm-s-default .cm-operator {}
|
||||
.cm-s-default .cm-variable-2 {color: #05a;}
|
||||
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
|
||||
.cm-s-default .cm-comment {color: #a50;}
|
||||
.cm-s-default .cm-string {color: #a11;}
|
||||
.cm-s-default .cm-string-2 {color: #f50;}
|
||||
.cm-s-default .cm-meta {color: #555;}
|
||||
.cm-s-default .cm-qualifier {color: #555;}
|
||||
.cm-s-default .cm-builtin {color: #30a;}
|
||||
.cm-s-default .cm-bracket {color: #997;}
|
||||
.cm-s-default .cm-tag {color: #170;}
|
||||
.cm-s-default .cm-attribute {color: #00c;}
|
||||
.cm-s-default .cm-hr {color: #999;}
|
||||
.cm-s-default .cm-link {color: #00c;}
|
||||
|
||||
.cm-s-default .cm-error {color: #f00;}
|
||||
.cm-invalidchar {color: #f00;}
|
||||
|
||||
.CodeMirror-composing { border-bottom: 2px solid; }
|
||||
|
||||
/* Default styles for common addons */
|
||||
|
||||
div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
|
||||
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
|
||||
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
|
||||
.CodeMirror-activeline-background {background: #e8f2ff;}
|
||||
|
||||
/* STOP */
|
||||
|
||||
/* The rest of this file contains styles related to the mechanics of
|
||||
the editor. You probably shouldn't touch them. */
|
||||
|
||||
.CodeMirror {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
overflow: scroll !important; /* Things will break if this is overridden */
|
||||
/* 30px is the magic margin used to hide the element's real scrollbars */
|
||||
/* See overflow: hidden in .CodeMirror */
|
||||
margin-bottom: -30px; margin-right: -30px;
|
||||
padding-bottom: 30px;
|
||||
height: 100%;
|
||||
outline: none; /* Prevent dragging from highlighting the element */
|
||||
position: relative;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 30px solid transparent;
|
||||
}
|
||||
|
||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||
before actual scrolling happens, thus preventing shaking and
|
||||
flickering artifacts. */
|
||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
}
|
||||
.CodeMirror-vscrollbar {
|
||||
right: 0; top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.CodeMirror-hscrollbar {
|
||||
bottom: 0; left: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.CodeMirror-scrollbar-filler {
|
||||
right: 0; bottom: 0;
|
||||
}
|
||||
.CodeMirror-gutter-filler {
|
||||
left: 0; bottom: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
position: absolute; left: 0; top: 0;
|
||||
min-height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
white-space: normal;
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
margin-bottom: -30px;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
background: none !important;
|
||||
border: none !important;
|
||||
}
|
||||
.CodeMirror-gutter-background {
|
||||
position: absolute;
|
||||
top: 0; bottom: 0;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-elt {
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
}
|
||||
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
|
||||
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }
|
||||
|
||||
.CodeMirror-lines {
|
||||
cursor: text;
|
||||
min-height: 1px; /* prevents collapsing before first draw */
|
||||
}
|
||||
.CodeMirror pre.CodeMirror-line,
|
||||
.CodeMirror pre.CodeMirror-line-like {
|
||||
/* Reset some styles that the rest of the page might have set */
|
||||
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-font-variant-ligatures: contextual;
|
||||
font-variant-ligatures: contextual;
|
||||
}
|
||||
.CodeMirror-wrap pre.CodeMirror-line,
|
||||
.CodeMirror-wrap pre.CodeMirror-line-like {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.CodeMirror-linebackground {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-linewidget {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding: 0.1px; /* Force widget margins to stay inside of the container */
|
||||
}
|
||||
|
||||
.CodeMirror-widget {}
|
||||
|
||||
.CodeMirror-rtl pre { direction: rtl; }
|
||||
|
||||
.CodeMirror-code {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Force content-box sizing for the elements where we expect it */
|
||||
.CodeMirror-scroll,
|
||||
.CodeMirror-sizer,
|
||||
.CodeMirror-gutter,
|
||||
.CodeMirror-gutters,
|
||||
.CodeMirror-linenumber {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.CodeMirror-measure {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
.CodeMirror-measure pre { position: static; }
|
||||
|
||||
div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
div.CodeMirror-dragcursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-focused div.CodeMirror-cursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-selected { background: #d9d9d9; }
|
||||
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
|
||||
.CodeMirror-crosshair { cursor: crosshair; }
|
||||
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
|
||||
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }
|
||||
|
||||
.cm-searching {
|
||||
background-color: #ffa;
|
||||
background-color: rgba(255, 255, 0, .4);
|
||||
}
|
||||
|
||||
/* Used to force a border model for a node */
|
||||
.cm-force-border { padding-right: .1px; }
|
||||
|
||||
@media print {
|
||||
/* Hide the cursor when printing */
|
||||
.CodeMirror div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* See issue #2901 */
|
||||
.cm-tab-wrap-hack:after { content: ''; }
|
||||
|
||||
/* Help users use markselection to safely style text background */
|
||||
span.CodeMirror-selectedtext { background: none; }
|
||||
@ -86,15 +86,18 @@ html {
|
||||
transform: scale(1.1); }
|
||||
|
||||
.neoFile {
|
||||
box-shadow: 0px 0px 0px rgba(251, 238, 208, 0.5), 0px 0px 0px rgba(241, 185, 65, 0.5);
|
||||
box-shadow: 0px 0px 0px rgba(251, 238, 208, 0.5), 0px 0px 0px rgba(241, 185, 65, 0.5) !important;
|
||||
transition: all .2s linear;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
background: #f6d287; }
|
||||
-webkit-backface-visibility: hidden !important;
|
||||
backface-visibility: hidden !important;
|
||||
background: #f6d287 !important; }
|
||||
.neoFile:hover {
|
||||
box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5); }
|
||||
box-shadow: -3px -3px 6px rgba(251, 238, 208, 0.5), 3px 3px 6px rgba(241, 185, 65, 0.5) !important; }
|
||||
.neoFile.isSelected {
|
||||
box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5); }
|
||||
box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5) !important; }
|
||||
.neoFile.is-active, .neoFile.active {
|
||||
box-shadow: inset 3px 3px 6px rgba(241, 185, 65, 0.5), inset -3px -3px 6px rgba(251, 238, 208, 0.5) !important;
|
||||
color: #181515 !important; }
|
||||
|
||||
.gradientBackground {
|
||||
background: linear-gradient(to right bottom, #f7d794, #f5cd79); }
|
||||
@ -102,7 +105,7 @@ html {
|
||||
.borderR {
|
||||
border-radius: 14px; }
|
||||
.borderRSmall {
|
||||
border-radius: 7px; }
|
||||
border-radius: 7px !important; }
|
||||
.borderRBig {
|
||||
border-radius: 28px; }
|
||||
|
||||
@ -134,9 +137,33 @@ html {
|
||||
.menu-list li a {
|
||||
font-family: Ubuntu-Mono,'Noto Mono'; }
|
||||
|
||||
.menu-list a.active {
|
||||
background-color: #3273dc;
|
||||
color: #fff; }
|
||||
.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;
|
||||
@ -172,25 +199,33 @@ html {
|
||||
.filesWithEditor .files {
|
||||
grid-area: files;
|
||||
display: block;
|
||||
min-height: 10%; }
|
||||
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; }
|
||||
.filesWithEditor .codeEditor .textarea {
|
||||
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; }
|
||||
|
||||
.filesList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
min-height: 10%;
|
||||
width: 100%;
|
||||
padding: 8%;
|
||||
overflow-y: auto; }
|
||||
.menu-list > li > .neoFile {
|
||||
margin-bottom: 4%; }
|
||||
|
||||
2
Seenginx/wwwroot/css/main.min.css
vendored
2
Seenginx/wwwroot/css/main.min.css
vendored
@ -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);transition:all .2s linear;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#f6d287;}.neoFile:hover{box-shadow:-3px -3px 6px rgba(251,238,208,.5),3px 3px 6px rgba(241,185,65,.5);}.neoFile.isSelected{box-shadow:inset 3px 3px 6px rgba(241,185,65,.5),inset -3px -3px 6px rgba(251,238,208,.5);}.gradientBackground{background:linear-gradient(to right bottom,#f7d794,#f5cd79);}.borderR{border-radius:14px;}.borderRSmall{border-radius:7px;}.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';}.menu-list a.active{background-color:#3273dc;color:#fff;}.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%;}.filesWithEditor .files .confFile{padding:4% 6%;margin-bottom:3%;}.filesWithEditor .codeEditor{grid-area:codeEditor;}.filesWithEditor .codeEditor .textarea{height:100%;}.filesWithEditor .filesActions{grid-area:filesActions;}.filesWithEditor .editorActions{grid-area:editorActions;}.filesList{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:10%;width:100%;padding:8%;overflow-y:auto;}
|
||||
#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%;}
|
||||
File diff suppressed because one or more lines are too long
9833
Seenginx/wwwroot/js/codemirror.js
Normal file
9833
Seenginx/wwwroot/js/codemirror.js
Normal file
File diff suppressed because it is too large
Load Diff
14
Seenginx/wwwroot/js/index.js
Normal file
14
Seenginx/wwwroot/js/index.js
Normal file
@ -0,0 +1,14 @@
|
||||
|
||||
window.InitEditor = (code) => {
|
||||
if (document.querySelector(".CodeMirror.cm-s-default"))
|
||||
document.querySelector(".CodeMirror.cm-s-default").remove()
|
||||
document.getElementById("code").innerHTML = code
|
||||
const editor = CodeMirror.fromTextArea(document.getElementById("code"), {
|
||||
lineNumbers: true,
|
||||
mode: "nginx"
|
||||
})
|
||||
}
|
||||
|
||||
window.DeleteEditor = () => {
|
||||
document.getElementById("code").innerHTML = ''
|
||||
}
|
||||
178
Seenginx/wwwroot/js/nginx.js
Normal file
178
Seenginx/wwwroot/js/nginx.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user