legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

change layout of replay panel

Browse Source
This commit is contained in:
legop3
2026-06-07 17:26:24 -04:00
parent 5fe7197c0b
commit dde4ac45c7
4 changed files with 161 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-BbhgEbHf.js
+126
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-SkeU6Ymg.js
-126
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+1 -1
View File
@@ -11,7 +11,7 @@
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Roomba Rover" />
<title>Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-SkeU6Ymg.js"></script>
<script type="module" crossorigin src="/assets/index-BbhgEbHf.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C47xw0G6.css">
</head>
<body>
webui/src/components/ReplaySourcesPanel/index.jsx
+34 -25
View File
@@ -220,13 +220,17 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources', fillHei
<GroupList title="Room Cams" items={grouped.rooms} selected={selected} onToggle={toggleKey} />
</div>
<div className="space-y-0.5">
<label className="panel-muted block text-xs" htmlFor={`${panelId}-title`}>
Replay title
</label>
<div className="flex items-center gap-0.5">
<label className="panel-muted shrink-0 text-xs" htmlFor={`${panelId}-title`}>
Replay title
</label>
{/* The label has fixed-width content, while the input owns the remaining row space.
This keeps the title control compact without making the input compete with
other controls or wrapping unpredictably on narrow panel layouts. */}
<input
id={`${panelId}-title`}
type="text"
className="field-input w-full text-xs"
className="field-input min-w-0 flex-1 text-xs"
value={title}
onChange={(event) => {
const next = event.target.value;
@@ -237,27 +241,32 @@ export default function ReplaySourcesPanel({ panelId = 'replay-sources', fillHei
placeholder={defaultTitle}
maxLength={120}
/>
<label className="surface flex items-center gap-0.5 text-xs">
<input
type="checkbox"
checked={includeSidebar}
onChange={(event) => {
const next = Boolean(event.target.checked);
setIncludeSidebar(next);
saveSettings((current) => ({ ...(current || {}), [`${panelId}:includeSidebar`]: next }));
}}
className="accent-emerald-400"
/>
<span>Include replay sidebar</span>
</label>
<button
type="button"
className="button-dark w-full text-xs disabled:opacity-40"
onClick={handleReplay}
disabled={replayDisabled}
>
{remainingMs > 0 ? `Replay (${Math.ceil(remainingMs / 1000)}s)` : busy ? 'Replay…' : 'Replay'}
</button>
</div>
<div className="flex items-center gap-0.5">
<label className="surface flex shrink-0 items-center gap-0.5 text-xs">
<input
type="checkbox"
checked={includeSidebar}
onChange={(event) => {
const next = Boolean(event.target.checked);
setIncludeSidebar(next);
saveSettings((current) => ({ ...(current || {}), [`${panelId}:includeSidebar`]: next }));
}}
className="accent-emerald-400"
/>
<span>Sidebar</span>
</label>
{/* The sidebar toggle is stable-width, so the replay button can expand into the
rest of the row and preserve the compact two-row control layout. */}
<button
type="button"
className="button-dark min-w-0 flex-1 text-xs disabled:opacity-40"
onClick={handleReplay}
disabled={replayDisabled}
>
{remainingMs > 0 ? `Replay (${Math.ceil(remainingMs / 1000)}s)` : busy ? 'Replay…' : 'Replay'}
</button>
</div>
{error ? <div className="text-xs text-amber-400">{error}</div> : null}
{activeJobStatusText ? (
<div className={`text-xs ${activeReplayJob?.status === 'failed' ? 'text-amber-400' : 'text-emerald-300'}`}>