mirror of
https://github.com/jkingsman/Remote-Terminal-for-MeshCore.git
synced 2026-08-06 16:53:38 +02:00
Move controls to top
This commit is contained in:
@@ -1720,12 +1720,30 @@ export function PacketVisualizer3D({
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Options */}
|
{/* Options */}
|
||||||
<div className="absolute top-4 left-4 bg-background/80 backdrop-blur-sm rounded-lg p-3 text-xs border border-border z-10">
|
<div
|
||||||
|
className={`absolute top-4 left-4 bg-background/80 backdrop-blur-sm rounded-lg p-3 text-xs border border-border z-10 transition-opacity ${!showControls ? 'opacity-40 hover:opacity-100' : ''}`}
|
||||||
|
>
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
|
<div className="flex flex-col gap-2">
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<Checkbox
|
||||||
|
checked={showControls}
|
||||||
|
onCheckedChange={(c) => setShowControls(c === true)}
|
||||||
|
/>
|
||||||
|
<span title="Toggle legends and controls visibility">Show controls</span>
|
||||||
|
</label>
|
||||||
|
{onFullScreenChange && (
|
||||||
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
|
<Checkbox
|
||||||
|
checked={!fullScreen}
|
||||||
|
onCheckedChange={(c) => onFullScreenChange(c !== true)}
|
||||||
|
/>
|
||||||
|
<span title="Show or hide the packet feed sidebar">Show packet feed sidebar</span>
|
||||||
|
</label>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
{showControls && (
|
{showControls && (
|
||||||
<>
|
<>
|
||||||
<div>Nodes: {data.stats.nodes}</div>
|
|
||||||
<div>Links: {data.stats.links}</div>
|
|
||||||
<div className="border-t border-border pt-2 mt-1 flex flex-col gap-2">
|
<div className="border-t border-border pt-2 mt-1 flex flex-col gap-2">
|
||||||
<label className="flex items-center gap-2 cursor-pointer">
|
<label className="flex items-center gap-2 cursor-pointer">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
@@ -1888,32 +1906,12 @@ export function PacketVisualizer3D({
|
|||||||
Clear & Reset
|
Clear & Reset
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="border-t border-border pt-2 mt-1">
|
||||||
|
<div>Nodes: {data.stats.nodes}</div>
|
||||||
|
<div>Links: {data.stats.links}</div>
|
||||||
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<div
|
|
||||||
className={
|
|
||||||
!showControls
|
|
||||||
? 'flex flex-col gap-2'
|
|
||||||
: 'border-t border-border pt-2 mt-1 flex flex-col gap-2'
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<label className="flex items-center gap-2 cursor-pointer">
|
|
||||||
<Checkbox
|
|
||||||
checked={showControls}
|
|
||||||
onCheckedChange={(c) => setShowControls(c === true)}
|
|
||||||
/>
|
|
||||||
<span title="Toggle legends and controls visibility">Show controls</span>
|
|
||||||
</label>
|
|
||||||
{onFullScreenChange && (
|
|
||||||
<label className="flex items-center gap-2 cursor-pointer">
|
|
||||||
<Checkbox
|
|
||||||
checked={!fullScreen}
|
|
||||||
onCheckedChange={(c) => onFullScreenChange(c !== true)}
|
|
||||||
/>
|
|
||||||
<span title="Show or hide the packet feed sidebar">Show packet feed sidebar</span>
|
|
||||||
</label>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -49,7 +49,7 @@ export function VisualizerView({ packets, contacts, config }: VisualizerViewProp
|
|||||||
<div ref={containerRef} className="flex flex-col h-full bg-background">
|
<div ref={containerRef} className="flex flex-col h-full bg-background">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="flex justify-between items-center px-4 py-3 border-b border-border font-medium text-lg">
|
<div className="flex justify-between items-center px-4 py-3 border-b border-border font-medium text-lg">
|
||||||
<span>Mesh Visualizer</span>
|
<span>{paneFullScreen ? 'RemoteTerm MeshCore Visualizer' : 'Mesh Visualizer'}</span>
|
||||||
<button
|
<button
|
||||||
className="hidden md:inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
className="hidden md:inline-flex items-center justify-center rounded-md p-1.5 text-muted-foreground hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||||
onClick={toggleFullScreen}
|
onClick={toggleFullScreen}
|
||||||
|
|||||||
@@ -43,6 +43,7 @@ class TestWebSocketEndpoint:
|
|||||||
mock_health_rm.connection_info = "Serial: /dev/ttyUSB0"
|
mock_health_rm.connection_info = "Serial: /dev/ttyUSB0"
|
||||||
mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
|
mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
|
||||||
mock_settings.database_path = "/tmp/test.db"
|
mock_settings.database_path = "/tmp/test.db"
|
||||||
|
mock_settings.disable_bots = False
|
||||||
|
|
||||||
from app.main import app
|
from app.main import app
|
||||||
|
|
||||||
@@ -76,6 +77,7 @@ class TestWebSocketEndpoint:
|
|||||||
mock_health_rm.connection_info = None
|
mock_health_rm.connection_info = None
|
||||||
mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
|
mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
|
||||||
mock_settings.database_path = "/tmp/test.db"
|
mock_settings.database_path = "/tmp/test.db"
|
||||||
|
mock_settings.disable_bots = False
|
||||||
|
|
||||||
from app.main import app
|
from app.main import app
|
||||||
|
|
||||||
@@ -105,6 +107,7 @@ class TestWebSocketEndpoint:
|
|||||||
mock_health_rm.connection_info = "TCP: 192.168.1.1:4000"
|
mock_health_rm.connection_info = "TCP: 192.168.1.1:4000"
|
||||||
mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
|
mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
|
||||||
mock_settings.database_path = "/tmp/test.db"
|
mock_settings.database_path = "/tmp/test.db"
|
||||||
|
mock_settings.disable_bots = False
|
||||||
|
|
||||||
from app.main import app
|
from app.main import app
|
||||||
|
|
||||||
@@ -135,6 +138,7 @@ class TestWebSocketEndpoint:
|
|||||||
mock_health_rm.connection_info = "Serial: /dev/ttyUSB0"
|
mock_health_rm.connection_info = "Serial: /dev/ttyUSB0"
|
||||||
mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
|
mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
|
||||||
mock_settings.database_path = "/tmp/test.db"
|
mock_settings.database_path = "/tmp/test.db"
|
||||||
|
mock_settings.disable_bots = False
|
||||||
|
|
||||||
from app.main import app
|
from app.main import app
|
||||||
|
|
||||||
@@ -165,6 +169,7 @@ class TestWebSocketEndpoint:
|
|||||||
mock_health_rm.connection_info = "Serial: /dev/ttyUSB0"
|
mock_health_rm.connection_info = "Serial: /dev/ttyUSB0"
|
||||||
mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
|
mock_repo.get_oldest_undecrypted = AsyncMock(return_value=None)
|
||||||
mock_settings.database_path = "/tmp/test.db"
|
mock_settings.database_path = "/tmp/test.db"
|
||||||
|
mock_settings.disable_bots = False
|
||||||
|
|
||||||
from app.main import app
|
from app.main import app
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user