Enhanced terminal ui and file editor ui

Moonlight/Moonlight.csproj

@@ -66,7 +66,6 @@
     <Folder Include="App\Models\Google\Resources" />
     <Folder Include="App\Services\DiscordBot\Modules" />
     <Folder Include="resources\lang" />
-    <Folder Include="wwwroot\assets\media" />
   </ItemGroup>
 
 </Project>

Moonlight/Pages/_Layout.cshtml

@@ -101,6 +101,7 @@
 <script>require.config({ paths: { 'vs': '/_content/BlazorMonaco/lib/monaco-editor/min/vs' } });</script>
 <script src="/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
 <script src="/_content/BlazorMonaco/jsInterop.js"></script>
+<script src="/assets/js/monacoTheme.js"></script>
 
 <script src="/assets/js/scripts.bundle.js"></script>
 <script src="/assets/js/flashbang.js"></script>

Moonlight/Shared/Components/FileManagerPartials/FileEditor.razor

@@ -3,27 +3,30 @@
 @using Moonlight.Shared.Components.Partials
 
 @inject SmartTranslateService TranslationService
+@inject IJSRuntime JsRuntime
 
-<div class="card-body">
-    <MonacoEditor CssClass="h-100" @ref="Editor" Id="vseditor" ConstructionOptions="(x) => EditorOptions"/>
-</div>
-
-@if (!HideControls)
-{
-    <div class="card-footer pt-0">
-        <div class="btn-group">
-            <WButton 
-                Text="@(TranslationService.Translate("Save"))" 
-                WorkingText="@(TranslationService.Translate("Saving"))" 
-                OnClick="Submit"></WButton>
-            <WButton 
-                CssClasses="btn-danger" 
-                Text="@(TranslationService.Translate("Cancel"))" 
-                WorkingText="@(TranslationService.Translate("Canceling"))" 
-                OnClick="Cancel"></WButton>
-        </div>
+<div class="card bg-black rounded">
+    <div class="card-body">
+        <MonacoEditor CssClass="h-100" @ref="Editor" Id="vseditor" ConstructionOptions="(x) => EditorOptions"/>
     </div>
-}
+    
+    @if (!HideControls)
+    {
+        <div class="card-footer">
+            <div class="btn-group">
+                <WButton 
+                    Text="@(TranslationService.Translate("Save"))" 
+                    WorkingText="@(TranslationService.Translate("Saving"))" 
+                    OnClick="Submit"></WButton>
+                <WButton 
+                    CssClasses="btn-danger" 
+                    Text="@(TranslationService.Translate("Cancel"))" 
+                    WorkingText="@(TranslationService.Translate("Canceling"))" 
+                    OnClick="Cancel"></WButton>
+            </div>
+        </div>
+    }
+</div>
 
 @code
 {
@@ -53,8 +56,8 @@
         {
             AutomaticLayout = true,
             Language = "plaintext",
-            Value = "Wird geladen",
-            Theme = "vs-dark",
+            Value = "Loading content",
+            Theme = "moonlight-theme",
             Contextmenu = false,
             Minimap = new()
             {
@@ -68,6 +71,8 @@
     {
         if (firstRender)
         {
+            await JsRuntime.InvokeVoidAsync("initMonacoTheme");
+            
             Editor.OnDidInit = new EventCallback<MonacoEditorBase>(this, async () =>
             {
                 EditorOptions.Language = Language;

Moonlight/Shared/Components/ServerControl/ServerConsole.razor

@@ -15,21 +15,20 @@
 @inject AlertService AlertService
 @inject SmartTranslateService TranslationService
 
-<div class="row g-5 g-xl-10 mb-xl-10">
-    <Terminal @ref="Terminal" RunOnFirstRender="RunOnFirstRender"></Terminal>
-
-    <div class="mt-3 row">
-        <div class="ms-2 input-group">
+<div class="card card-body rounded bg-black p-3">
+    <div class="d-flex flex-column">
+        <Terminal @ref="Terminal" RunOnFirstRender="RunOnFirstRender"></Terminal>
+        <div class="input-group">
             <script suppress-error="BL9992">
-                                                                function checkEnter(event) {
-                                                                    if (event.keyCode === 13) {
-                                                                        event.preventDefault();
-                                                                        document.getElementById("sendCmd").click();
-                                                                    }
-                                                                }
-                                                            </script>
-            <input @bind="@CommandInput" class="form-control" onkeyup="checkEnter(event)" placeholder="@(TranslationService.Translate("Enter command"))"/>
-            
+                                        function checkEnter(event) 
+                                        {
+                                            if (event.keyCode === 13) {
+                                                event.preventDefault();
+                                                document.getElementById("sendCmd").click();
+                                            }
+                                        }
+                                    </script>
+            <input @bind="@CommandInput" class="form-control rounded-start" onkeyup="checkEnter(event)" placeholder="@(TranslationService.Translate("Enter command"))"/>
             <button id="sendCmd" @onclick="SendCommand" class="input-group-text btn btn-primary">@(TranslationService.Translate("Execute"))</button>
         </div>
     </div>

Moonlight/Shared/Views/Server/Index.razor

@@ -8,7 +8,6 @@
 @using Moonlight.App.Database.Entities
 @using Moonlight.App.Helpers
 @using Moonlight.App.Repositories
-@using Moonlight.App.Services.Sessions
 @using Moonlight.Shared.Components.Xterm
 @using Moonlight.Shared.Components.ServerControl
 @using Newtonsoft.Json
@@ -16,13 +15,20 @@
 @inject ImageRepository ImageRepository
 @inject ServerRepository ServerRepository
 @inject WingsConsoleHelper WingsConsoleHelper
-@inject IdentityService IdentityService
 
 <LazyLoader Load="LoadData">
     @if (CurrentServer == null)
     {
-        <div class="alert alert-danger">
-            <TL>Server not found</TL>
+        <div class="d-flex justify-content-center flex-center">
+            <div class="card">
+                <img src="/assets/media/svg/nodata.svg" class="card-img-top w-25 mx-auto pt-5" alt="Not found image" />
+                <div class="card-body text-center">
+                    <h4 class="card-title"><TL>Server not found</TL></h4>
+                    <p class="card-text">
+                        <TL>A server with that id cannot be found or you have no access for this server</TL>
+                    </p>
+                </div>
+            </div>
         </div>
     }
     else

Moonlight/resources/lang/de_de.lang

@@ -407,3 +407,5 @@ The State field is required.;The State field is required.
 The Country field is required.;The Country field is required.
 Street and house number requered;Street and house number requered
 Max lenght reached;Max lenght reached
+Server not found;Server not found
+A server with that id cannot be found or you have no access for this server;A server with that id cannot be found or you have no access for this server

Moonlight/wwwroot/assets/js/monacoTheme.js

@@ -0,0 +1,12 @@
+window.initMonacoTheme = function ()
+{
+    monaco.editor.defineTheme('moonlight-theme', {
+        base: 'vs-dark',
+        inherit: true,
+        rules: [
+        ],
+        colors: {
+            'editor.background': '#000000'
+        }
+    });
+}

Moonlight/wwwroot/assets/media/svg/nodata.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="647.63626" height="632.17383" viewBox="0 0 647.63626 632.17383" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M687.3279,276.08691H512.81813a15.01828,15.01828,0,0,0-15,15v387.85l-2,.61005-42.81006,13.11a8.00676,8.00676,0,0,1-9.98974-5.31L315.678,271.39691a8.00313,8.00313,0,0,1,5.31006-9.99l65.97022-20.2,191.25-58.54,65.96972-20.2a7.98927,7.98927,0,0,1,9.99024,5.3l32.5498,106.32Z" transform="translate(-276.18187 -133.91309)" fill="#f2f2f2"/><path d="M725.408,274.08691l-39.23-128.14a16.99368,16.99368,0,0,0-21.23-11.28l-92.75,28.39L380.95827,221.60693l-92.75,28.4a17.0152,17.0152,0,0,0-11.28028,21.23l134.08008,437.93a17.02661,17.02661,0,0,0,16.26026,12.03,16.78926,16.78926,0,0,0,4.96972-.75l63.58008-19.46,2-.62v-2.09l-2,.61-64.16992,19.65a15.01489,15.01489,0,0,1-18.73-9.95l-134.06983-437.94a14.97935,14.97935,0,0,1,9.94971-18.73l92.75-28.4,191.24024-58.54,92.75-28.4a15.15551,15.15551,0,0,1,4.40966-.66,15.01461,15.01461,0,0,1,14.32032,10.61l39.0498,127.56.62012,2h2.08008Z" transform="translate(-276.18187 -133.91309)" fill="#3f3d56"/><path d="M398.86279,261.73389a9.0157,9.0157,0,0,1-8.61133-6.3667l-12.88037-42.07178a8.99884,8.99884,0,0,1,5.9712-11.24023l175.939-53.86377a9.00867,9.00867,0,0,1,11.24072,5.9707l12.88037,42.07227a9.01029,9.01029,0,0,1-5.9707,11.24072L401.49219,261.33887A8.976,8.976,0,0,1,398.86279,261.73389Z" transform="translate(-276.18187 -133.91309)" fill="#6c63ff"/><circle cx="190.15351" cy="24.95465" r="20" fill="#6c63ff"/><circle cx="190.15351" cy="24.95465" r="12.66462" fill="#fff"/><path d="M878.81836,716.08691h-338a8.50981,8.50981,0,0,1-8.5-8.5v-405a8.50951,8.50951,0,0,1,8.5-8.5h338a8.50982,8.50982,0,0,1,8.5,8.5v405A8.51013,8.51013,0,0,1,878.81836,716.08691Z" transform="translate(-276.18187 -133.91309)" fill="#e6e6e6"/><path d="M723.31813,274.08691h-210.5a17.02411,17.02411,0,0,0-17,17v407.8l2-.61v-407.19a15.01828,15.01828,0,0,1,15-15H723.93825Zm183.5,0h-394a17.02411,17.02411,0,0,0-17,17v458a17.0241,17.0241,0,0,0,17,17h394a17.0241,17.0241,0,0,0,17-17v-458A17.02411,17.02411,0,0,0,906.81813,274.08691Zm15,475a15.01828,15.01828,0,0,1-15,15h-394a15.01828,15.01828,0,0,1-15-15v-458a15.01828,15.01828,0,0,1,15-15h394a15.01828,15.01828,0,0,1,15,15Z" transform="translate(-276.18187 -133.91309)" fill="#3f3d56"/><path d="M801.81836,318.08691h-184a9.01015,9.01015,0,0,1-9-9v-44a9.01016,9.01016,0,0,1,9-9h184a9.01016,9.01016,0,0,1,9,9v44A9.01015,9.01015,0,0,1,801.81836,318.08691Z" transform="translate(-276.18187 -133.91309)" fill="#6c63ff"/><circle cx="433.63626" cy="105.17383" r="20" fill="#6c63ff"/><circle cx="433.63626" cy="105.17383" r="12.18187" fill="#fff"/></svg>