jimmy/nas-tools
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: add iPhone landscape action buttons for fullscreen terminal
Deploy Dashboard (Dev) / Deploy to Dev (push) Failing after 1m46s
Details

Browse Source
This commit is contained in:
Gan, Jimmy
2026-04-22 01:42:49 +08:00
parent 47e4bde622
commit 5998df6fec
2 changed files with 109 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/index.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<meta name="description" content="Personal NAS Dashboard — manage Docker, Git repos, files, and media from one place"> <meta name="description" content="Personal NAS Dashboard — manage Docker, Git repos, files, and media from one place">
<title>NAS Dashboard</title> <title>NAS Dashboard</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
dashboard/frontend/src/routes/Terminal.svelte
+108
View File
@@ -36,6 +36,7 @@
let voiceTick = $state(0); let voiceTick = $state(0);
let isDark = $state(false); let isDark = $state(false);
let isFullscreen = $state(false); let isFullscreen = $state(false);
let showActionButtons = $state(false);
let tabCounter = 0; let tabCounter = 0;
const tabData = new Map(); const tabData = new Map();
@@ -465,18 +466,27 @@
if (!document.fullscreenElement) { if (!document.fullscreenElement) {
elem.requestFullscreen().then(() => { elem.requestFullscreen().then(() => {
isFullscreen = true; isFullscreen = true;
showActionButtons = true;
}).catch(err => { }).catch(err => {
console.error('Failed to enter fullscreen:', err); console.error('Failed to enter fullscreen:', err);
}); });
} else { } else {
document.exitFullscreen().then(() => { document.exitFullscreen().then(() => {
isFullscreen = false; isFullscreen = false;
showActionButtons = false;
}).catch(err => { }).catch(err => {
console.error('Failed to exit fullscreen:', err); console.error('Failed to exit fullscreen:', err);
}); });
} }
} }
function sendKey(key) {
const currentWs = tabData.get(activeTab)?.ws;
if (currentWs?.readyState === 1) {
currentWs.send(new TextEncoder().encode(key));
}
}
onMount(() => { onMount(() => {
syncTheme(); syncTheme();
themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
@@ -486,6 +496,7 @@
// Listen for fullscreen changes // Listen for fullscreen changes
document.addEventListener('fullscreenchange', () => { document.addEventListener('fullscreenchange', () => {
isFullscreen = !!document.fullscreenElement; isFullscreen = !!document.fullscreenElement;
showActionButtons = !!document.fullscreenElement;
}); });
}); });
@@ -510,6 +521,33 @@
<h1 class="text-2xl font-bold text-surface-900 dark:text-surface-100 tracking-tight">Terminal</h1> <h1 class="text-2xl font-bold text-surface-900 dark:text-surface-100 tracking-tight">Terminal</h1>
{/if} {/if}
<!-- iPhone Landscape Action Buttons (only in fullscreen) -->
{#if showActionButtons && activeTab}
<!-- Top Left Pocket -->
<div class="actions-top-left">
<button class="action-btn" onclick={() => sendKey('\x1b')} title="ESC">ESC</button>
<button class="action-btn" onclick={() => sendKey('\t')} title="TAB">TAB</button>
</div>
<!-- Bottom Left Pocket -->
<div class="actions-bottom-left">
<button class="action-btn" onclick={() => sendKey('\x01')} title="CTRL+A">^A</button>
<button class="action-btn" onclick={() => sendKey('\x03')} title="CTRL+C">^C</button>
</div>
<!-- Top Right Pocket -->
<div class="actions-top-right">
<button class="action-btn" onclick={() => sendKey('\x0c')} title="CTRL+L">^L</button>
<button class="action-btn" onclick={() => sendKey('\x1a')} title="CTRL+Z">^Z</button>
</div>
<!-- Bottom Right Pocket -->
<div class="actions-bottom-right">
<button class="action-btn" onclick={() => sendKey('\x04')} title="CTRL+D">^D</button>
<button class="action-btn" onclick={() => sendKey('\x12')} title="CTRL+R">^R</button>
</div>
{/if}
<div class="flex items-center gap-1 border-b border-surface-300 dark:border-surface-700 pb-1 relative"> <div class="flex items-center gap-1 border-b border-surface-300 dark:border-surface-700 pb-1 relative">
{#each tabs as tab (tab.id)} {#each tabs as tab (tab.id)}
<button <button
@@ -692,4 +730,74 @@
to { transform: translateY(0); opacity: 1; } to { transform: translateY(0); opacity: 1; }
} }
.animate-slide-up { animation: slide-up 0.25s ease-out; } .animate-slide-up { animation: slide-up 0.25s ease-out; }
/* iPhone 17 Pro Landscape Action Button Zones */
.actions-top-left,
.actions-bottom-left,
.actions-top-right,
.actions-bottom-right {
position: fixed;
display: flex;
flex-direction: column;
gap: 5px;
z-index: 9999;
}
.actions-top-left {
top: 5px;
left: 5px;
width: 52px;
height: 125px;
}
.actions-bottom-left {
bottom: 26px;
left: 5px;
width: 52px;
height: 110px;
}
.actions-top-right {
top: 5px;
right: 5px;
width: 52px;
height: 125px;
}
.actions-bottom-right {
bottom: 26px;
right: 5px;
width: 52px;
height: 110px;
}
.action-btn {
flex: 1;
background: rgba(99, 102, 241, 0.9);
color: white;
border: none;
border-radius: 8px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.action-btn:active {
background: rgba(79, 70, 229, 1);
transform: scale(0.95);
}
/* Terminal container respects safe areas */
.terminal-safe-container {
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
}
</style> </style>