Update Server Console, Again... (#776)

* More console changes

* Update Console Page

* Edit console input

* oops

* Remove failed attempt of clearing input when server offline

* Update File Editor to match console

* a touch more style

* Show not-allowed on read-only input

* round bottom corners of command input

* Move custom css to file

app/Filament/Server/Widgets/ServerCpuChart.php

@@ -12,7 +12,7 @@ class ServerCpuChart extends ChartWidget
 {
     protected static ?string $pollingInterval = '1s';
 
-    protected static ?string $maxHeight = '300px';
+    protected static ?string $maxHeight = '200px';
 
     public ?Server $server = null;
 

app/Filament/Server/Widgets/ServerMemoryChart.php

@@ -12,7 +12,7 @@ class ServerMemoryChart extends ChartWidget
 {
     protected static ?string $pollingInterval = '1s';
 
-    protected static ?string $maxHeight = '300px';
+    protected static ?string $maxHeight = '200px';
 
     public ?Server $server = null;
 

config/filament-monaco-editor.php

@@ -18,7 +18,7 @@ return [
             'inherit' => true,
             'rules' => [
                 [
-                    'background' => '0C1021',
+                    'background' => '161F27',
                     'token' => '',
                 ],
                 [
@@ -139,8 +139,8 @@ return [
             ],
             'colors' => [
                 'editor.foreground' => '#F8F8F8',
-                'editor.background' => '#0C1021',
-                'editor.selectionBackground' => '#253B76',
+                'editor.background' => '#101519',
+                'editor.selectionBackground' => '#5a5f63',
                 'editor.lineHighlightBackground' => '#FFFFFF0F',
                 'editorCursor.foreground' => '#FFFFFFA6',
                 'editorWhitespace.foreground' => '#FFFFFF40',

public/css/filament/server/console.css

@@ -0,0 +1,46 @@
+#terminal {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.xterm .xterm-rows > div {
+    padding-left: 10px;
+    padding-top: 2px;
+    padding-right: 10px;
+}
+
+input:read-only {
+    cursor: not-allowed;
+}
+
+::-webkit-scrollbar {
+    background: none;
+    width: 14px;
+    height: 14px;
+}
+
+::-webkit-scrollbar-thumb {
+    border: solid 0 rgb(0 0 0 / 0%);
+    border-right-width: 4px;
+    border-left-width: 4px;
+    -webkit-border-radius: 9px 4px;
+    -webkit-box-shadow: inset 0 0 0 1px hsl(211, 10%, 53%), inset 0 0 0 4px hsl(209deg 18% 30%);
+}
+
+::-webkit-scrollbar-track-piece {
+    margin: 4px 0;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    border-right-width: 0;
+    border-left-width: 0;
+    border-top-width: 4px;
+    border-bottom-width: 4px;
+    -webkit-border-radius: 4px 9px;
+}
+
+::-webkit-scrollbar-corner {
+    background: transparent;
+}

resources/views/filament/components/server-console.blade.php

@@ -6,33 +6,24 @@
     <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links/lib/addon-web-links.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-search/lib/addon-search.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/xterm-addon-search-bar/lib/xterm-addon-search-bar.min.js"></script>
-    <style>
-        #terminal {
-            border-radius: 10px;
-            overflow: hidden;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-        }
-
-        .xterm .xterm-rows > div {
-            padding-left: 10px;
-            padding-top: 2px;
-            padding-right: 10px;
-        }
-    </style>
+    <link rel="stylesheet" href="{{ asset('/css/filament/server/console.css') }}">
     @endassets
 
     <div id="terminal" wire:ignore></div>
 
-    <div class="flex items-center w-full bg-transparent border">
+    <div class="flex items-center w-full border-top overflow-hidden"
+         style="background-color: #202A32; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;">
         <x-filament::icon
             icon="tabler-chevrons-right"
         />
         <input
-            class="w-full bg-transparent p-2 focus:outline-none focus:ring-0 border-none"
+            class="w-full focus:outline-none focus:ring-0 border-none"
+            style="background-color: #202A32;"
             type="text"
+            autofocus
+            :readonly="{{ $this->canSendCommand() ? 'false' : 'true' }}"
             title="{{ $this->canSendCommand() ? '' : 'Can\'t send command when the server is Offline' }}"
-            :readonly="{{ !$this->canSendCommand() }}"
-            placeholder="Type a command..."
+            placeholder="{{ $this->canSendCommand() ? 'Type a command...' : 'Server Offline...' }}"
             wire:model="input"
             wire:keydown.enter="enter"
             wire:keydown.up.prevent="up"
@@ -70,8 +61,6 @@
             cursorStyle: 'underline',
             cursorInactiveStyle: 'none',
             allowTransparency: true,
-            letterSpacing: 0.15,
-            lineHeight: 0.50,
             rows: 30,
             theme: theme
         };