feat: add Escape key support to exit fullscreen logs view

This commit is contained in:
Kyle Essenmacher 2025-12-14 14:07:29 -05:00
parent 6b88481ce2
commit 8d20d50937

View file

@ -1,22 +1,28 @@
<div class="{{ $collapsible ? 'my-4 border dark:border-coolgray-200 border-neutral-200' : '' }}"> <div class="{{ $collapsible ? 'my-4 border dark:border-coolgray-200 border-neutral-200' : '' }}">
<div id="screen" x-data="{ <div id="screen" x-data="{
collapsible: {{ $collapsible ? 'true' : 'false' }}, collapsible: {{ $collapsible ? 'true' : 'false' }},
expanded: {{ ($expandByDefault || !$collapsible) ? 'true' : 'false' }}, expanded: {{ ($expandByDefault || !$collapsible) ? 'true' : 'false' }},
logsLoaded: false, logsLoaded: false,
fullscreen: false, fullscreen: false,
alwaysScroll: false, alwaysScroll: false,
intervalId: null, intervalId: null,
scrollDebounce: null, scrollDebounce: null,
colorLogs: localStorage.getItem('coolify-color-logs') === 'true', colorLogs: localStorage.getItem('coolify-color-logs') === 'true',
searchQuery: '', searchQuery: '',
containerName: '{{ $container ?? "logs" }}', containerName: '{{ $container ?? "logs" }}',
makeFullscreen() { makeFullscreen() {
this.fullscreen = !this.fullscreen; this.fullscreen = !this.fullscreen;
if (this.fullscreen === false) { if (this.fullscreen === false) {
this.alwaysScroll = false; this.alwaysScroll = false;
clearInterval(this.intervalId); clearInterval(this.intervalId);
} }
}, },
handleKeyDown(event) {
if (event.key === 'Escape' && this.fullscreen) {
this.makeFullscreen();
}
},
} @keydown.window="handleKeyDown($event)">
isScrolling: false, isScrolling: false,
toggleScroll() { toggleScroll() {
this.alwaysScroll = !this.alwaysScroll; this.alwaysScroll = !this.alwaysScroll;
@ -375,4 +381,4 @@ class="font-mono whitespace-pre-wrap break-all max-w-full text-neutral-400">No l
</div> </div>
</div> </div>
</div> </div>
</div> </div>