Skip to content

Commit 00724f6

Browse files
author
FolderView Plus Test
committed
Polish Docker Orbit center state
1 parent 0e41078 commit 00724f6

5 files changed

Lines changed: 71 additions & 46 deletions

File tree

‎archive/folderview.plus-2026.04.17.08.txz‎

14 MB
Binary file not shown.

‎archive/folderview.plus-2026.04.17.08.txz.sha256‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
0b6fb904ba8e29df5b2075f14d02ab4268715471db56b696d7695ac8bb5efe2a folderview.plus-2026.04.17.08.txz

‎folderview.plus.plg‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,17 @@
66
<!ENTITY launch "Settings/FolderViewPlus">
77
<!ENTITY plugdir "/usr/local/emhttp/plugins/&name;">
88
<!ENTITY pluginURL "https://raw.githubusercontent.com/&github;/dev/folderview.plus.plg">
9-
<!ENTITY version "2026.04.17.07">
10-
<!ENTITY md5 "fe2b921cf12506977195f20b1a18d485">
9+
<!ENTITY version "2026.04.17.08">
10+
<!ENTITY md5 "ad804a5937e45e4ccc79c12bad00fa61">
1111
]>
1212

1313
<PLUGIN name="&name;" author="&author;" version="&version;" launch="&launch;" pluginURL="&pluginURL;" icon="folder-icon.png" support="https://forums.unraid.net/topic/197631-plugin-folderview-plus/" min="7.0.0">
1414
<CHANGES>
1515

16+
###2026.04.17.08
17+
- UX: Docker Orbit view no longer auto-selects a folder into the center; it now starts with a neutral center prompt until you choose a folder orbit.
18+
- UX: Orbit inspector summary stays compact at the top instead of stretching down the full column, and Orbit surfaces now use a unified neutral visual treatment without the orange outline-heavy styling.
19+
1620
###2026.04.17.07
1721
- UX: Simplified Docker Orbit view by removing the top stats strip and left-side folder rail, leaving a cleaner centered stage plus inspector layout.
1822
- UX: Orbit member tiles now share the same surface treatment as the center folder and sit on a cleaner circular orbit with improved spacing and less aggressive highlight styling.

‎src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/scripts/docker.runtime.orbit-view.js‎

Lines changed: 42 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -551,17 +551,18 @@
551551
`;
552552
return true;
553553
}
554-
if (!folderModels[selectedFolderId]) {
555-
selectedFolderId = orderedIds[0];
556-
}
557-
const selectedFolder = folderModels[selectedFolderId];
554+
const hasSelectedFolder = Boolean(selectedFolderId && folderModels[selectedFolderId]);
555+
const selectedFolder = hasSelectedFolder ? folderModels[selectedFolderId] : null;
558556
const selectedMembers = Array.isArray(selectedFolder?.directMembers) ? selectedFolder.directMembers : [];
559557
if (!selectedMembers.some((member) => member.name === selectedMemberName)) {
560558
selectedMemberName = '';
561559
}
562560
const selectedMember = selectedMembers.find((member) => member.name === selectedMemberName) || null;
563-
const breadcrumbs = buildBreadcrumbs(selectedFolderId, snapshot, folderModels);
561+
const breadcrumbs = hasSelectedFolder ? buildBreadcrumbs(selectedFolderId, snapshot, folderModels) : [];
564562
const relatedFolderIds = (() => {
563+
if (!selectedFolder) {
564+
return orderedIds.filter((folderId) => !folderModels[folderId]?.parentId);
565+
}
565566
if (selectedFolder.childIds.length) {
566567
return selectedFolder.childIds.slice();
567568
}
@@ -583,7 +584,7 @@
583584
running: model.running,
584585
updates: model.updates
585586
}));
586-
const memberOrbit = layoutOrbitNodes(selectedFolder.directMembers, {
587+
const memberOrbit = layoutOrbitNodes(selectedFolder?.directMembers || [], {
587588
startRadius: 256,
588589
ringStep: 132,
589590
baseCapacity: 8,
@@ -625,17 +626,22 @@
625626
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="clear-member-selection">Back to folder summary</button>
626627
</div>
627628
</div>
628-
` : `
629+
` : hasSelectedFolder ? `
629630
<div class="fv-docker-orbit-inspector-card">
630631
<div class="fv-docker-orbit-inspector-title">Folder summary</div>
631632
<div class="fv-docker-orbit-inspector-list">
632-
<div><span>Direct members</span><strong>${selectedFolder.directMemberCount}</strong></div>
633-
<div><span>Branch members</span><strong>${selectedFolder.branchMemberCount}</strong></div>
634-
<div><span>Child folders</span><strong>${selectedFolder.childIds.length}</strong></div>
635-
<div><span>Updates</span><strong>${selectedFolder.updates}</strong></div>
633+
<div><span>Direct members</span><strong>${selectedFolder?.directMemberCount || 0}</strong></div>
634+
<div><span>Branch members</span><strong>${selectedFolder?.branchMemberCount || 0}</strong></div>
635+
<div><span>Child folders</span><strong>${selectedFolder?.childIds.length || 0}</strong></div>
636+
<div><span>Updates</span><strong>${selectedFolder?.updates || 0}</strong></div>
636637
</div>
637638
<p class="fv-docker-orbit-inspector-note">Click a container orbit to inspect it, or select a child folder orbit to move deeper into the branch.</p>
638639
</div>
640+
` : `
641+
<div class="fv-docker-orbit-inspector-card">
642+
<div class="fv-docker-orbit-inspector-title">Folder summary</div>
643+
<p class="fv-docker-orbit-inspector-note">Select a folder orbit to focus it here. Containers will appear only after a folder is selected.</p>
644+
</div>
639645
`;
640646
root.innerHTML = `
641647
<div class="fv-docker-orbit-shell">
@@ -651,40 +657,42 @@
651657
</div>
652658
<div class="fv-docker-orbit-layout">
653659
<section class="fv-docker-orbit-main">
654-
<div class="fv-docker-orbit-breadcrumbs">
660+
${breadcrumbs.length ? `<div class="fv-docker-orbit-breadcrumbs">
655661
${breadcrumbs.map((crumb, index) => `
656662
<button type="button" class="fv-docker-orbit-crumb${crumb.folderId === selectedFolderId ? ' is-current' : ''}" data-fv-orbit-action="select-folder" data-folder-id="${escapeHtml(crumb.folderId)}">${escapeHtml(crumb.name)}</button>
657663
${index < breadcrumbs.length - 1 ? '<span class="fv-docker-orbit-crumb-sep">/</span>' : ''}
658664
`).join('')}
659-
</div>
665+
</div>` : ''}
660666
<div class="fv-docker-orbit-stage-wrap">
661667
<div class="fv-docker-orbit-stage" style="--fv-docker-orbit-stage-size:${stageSize}px;">
662668
<div class="fv-docker-orbit-rings">${ringMarkup}</div>
663-
<article class="fv-docker-orbit-hub" data-folder-id="${escapeHtml(selectedFolderId)}">
669+
<article class="fv-docker-orbit-hub${hasSelectedFolder ? '' : ' is-placeholder'}" ${hasSelectedFolder ? `data-folder-id="${escapeHtml(selectedFolderId)}"` : ''}>
664670
<div class="fv-docker-orbit-hub-head">
665-
<img src="${selectedFolder.icon}" class="fv-docker-orbit-folder-icon" alt="" loading="lazy" onerror='this.src="${DEFAULT_FOLDER_ICON}"'>
671+
<img src="${hasSelectedFolder ? selectedFolder.icon : DEFAULT_FOLDER_ICON}" class="fv-docker-orbit-folder-icon" alt="" loading="lazy" onerror='this.src="${DEFAULT_FOLDER_ICON}"'>
666672
<div>
667-
<div class="fv-docker-orbit-folder-title">${escapeHtml(selectedFolder.name)}</div>
668-
<div class="fv-docker-orbit-folder-meta">${selectedFolder.directMemberCount} direct • ${selectedFolder.branchMemberCount} in branch • ${selectedFolder.childIds.length} child folders</div>
673+
<div class="fv-docker-orbit-folder-title">${escapeHtml(hasSelectedFolder ? selectedFolder.name : 'Select a folder')}</div>
674+
<div class="fv-docker-orbit-folder-meta">${escapeHtml(hasSelectedFolder ? `${selectedFolder.directMemberCount} direct • ${selectedFolder.branchMemberCount} in branch • ${selectedFolder.childIds.length} child folders` : 'Choose a folder from orbit to focus it in the center.')}</div>
669675
</div>
670676
</div>
671-
<div class="fv-docker-orbit-hub-stats">
672-
<span class="fv-docker-orbit-pill running"><i class="fa fa-play"></i> ${selectedFolder.running}</span>
673-
<span class="fv-docker-orbit-pill paused"><i class="fa fa-pause"></i> ${selectedFolder.paused}</span>
674-
<span class="fv-docker-orbit-pill stopped"><i class="fa fa-stop"></i> ${selectedFolder.stopped}</span>
675-
<span class="fv-docker-orbit-pill update"><i class="fa fa-cloud-download"></i> ${selectedFolder.updates}</span>
676-
${selectedFolder.pinned ? '<span class="fv-docker-orbit-pill pin"><i class="fa fa-star"></i> pinned</span>' : ''}
677-
${selectedFolder.locked ? '<span class="fv-docker-orbit-pill lock"><i class="fa fa-lock"></i> locked</span>' : ''}
678-
</div>
679-
<div class="fv-docker-orbit-hub-actions">
680-
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="start-branch" data-folder-id="${escapeHtml(selectedFolderId)}">Start branch</button>
681-
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="stop-branch" data-folder-id="${escapeHtml(selectedFolderId)}">Stop branch</button>
682-
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="${selectedFolder.actionCounts.updateReady > 0 ? 'update-branch' : 'force-update-branch'}" data-folder-id="${escapeHtml(selectedFolderId)}">${selectedFolder.actionCounts.updateReady > 0 ? 'Update branch' : 'Force update'}</button>
683-
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="open-webui" data-folder-id="${escapeHtml(selectedFolderId)}">Open WebUIs</button>
684-
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="edit-folder" data-folder-id="${escapeHtml(selectedFolderId)}">Edit</button>
685-
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="toggle-pin" data-folder-id="${escapeHtml(selectedFolderId)}">${selectedFolder.pinned ? 'Unpin' : 'Pin'}</button>
686-
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="toggle-lock" data-folder-id="${escapeHtml(selectedFolderId)}">${selectedFolder.locked ? 'Unlock' : 'Lock'}</button>
687-
</div>
677+
${hasSelectedFolder ? `
678+
<div class="fv-docker-orbit-hub-stats">
679+
<span class="fv-docker-orbit-pill running"><i class="fa fa-play"></i> ${selectedFolder.running}</span>
680+
<span class="fv-docker-orbit-pill paused"><i class="fa fa-pause"></i> ${selectedFolder.paused}</span>
681+
<span class="fv-docker-orbit-pill stopped"><i class="fa fa-stop"></i> ${selectedFolder.stopped}</span>
682+
<span class="fv-docker-orbit-pill update"><i class="fa fa-cloud-download"></i> ${selectedFolder.updates}</span>
683+
${selectedFolder.pinned ? '<span class="fv-docker-orbit-pill pin"><i class="fa fa-star"></i> pinned</span>' : ''}
684+
${selectedFolder.locked ? '<span class="fv-docker-orbit-pill lock"><i class="fa fa-lock"></i> locked</span>' : ''}
685+
</div>
686+
<div class="fv-docker-orbit-hub-actions">
687+
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="start-branch" data-folder-id="${escapeHtml(selectedFolderId)}">Start branch</button>
688+
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="stop-branch" data-folder-id="${escapeHtml(selectedFolderId)}">Stop branch</button>
689+
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="${selectedFolder.actionCounts.updateReady > 0 ? 'update-branch' : 'force-update-branch'}" data-folder-id="${escapeHtml(selectedFolderId)}">${selectedFolder.actionCounts.updateReady > 0 ? 'Update branch' : 'Force update'}</button>
690+
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="open-webui" data-folder-id="${escapeHtml(selectedFolderId)}">Open WebUIs</button>
691+
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="edit-folder" data-folder-id="${escapeHtml(selectedFolderId)}">Edit</button>
692+
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="toggle-pin" data-folder-id="${escapeHtml(selectedFolderId)}">${selectedFolder.pinned ? 'Unpin' : 'Pin'}</button>
693+
<button type="button" class="fv-docker-orbit-button" data-fv-orbit-action="toggle-lock" data-folder-id="${escapeHtml(selectedFolderId)}">${selectedFolder.locked ? 'Unlock' : 'Lock'}</button>
694+
</div>
695+
` : ''}
688696
</article>
689697
${memberOrbit.nodes.map((member) => `
690698
<button

‎src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/styles/docker.orbit-view.css‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,10 @@ body[data-fvplus-docker-orbit-view-mounted="true"] table#docker_containers {
5959
align-items: flex-start;
6060
}
6161

62+
.fv-docker-orbit-layout {
63+
align-items: flex-start;
64+
}
65+
6266
.fv-docker-orbit-header h2,
6367
.fv-docker-orbit-empty h3 {
6468
margin: 0;
@@ -83,17 +87,19 @@ body[data-fvplus-docker-orbit-view-mounted="true"] table#docker_containers {
8387
.fv-docker-orbit-node,
8488
.fv-docker-orbit-crumb {
8589
appearance: none;
86-
border: 1px solid var(--fv-docker-orbit-border);
90+
border: 1px solid rgba(112, 126, 152, 0.46) !important;
8791
color: inherit;
8892
cursor: pointer;
8993
font: inherit;
9094
transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
95+
box-shadow: none !important;
96+
outline: none;
9197
}
9298

9399
.fv-docker-orbit-button {
94100
border-radius: 999px;
95101
padding: 9px 15px;
96-
background: rgba(25, 34, 49, 0.92);
102+
background: rgba(25, 34, 49, 0.92) !important;
97103
}
98104

99105
.fv-docker-orbit-button:hover,
@@ -103,7 +109,7 @@ body[data-fvplus-docker-orbit-view-mounted="true"] table#docker_containers {
103109
.fv-docker-orbit-crumb:hover,
104110
.fv-docker-orbit-crumb:focus-visible {
105111
transform: translateY(-1px);
106-
border-color: var(--fv-docker-orbit-border-strong);
112+
border-color: rgba(144, 160, 190, 0.58) !important;
107113
box-shadow: 0 0 0 1px rgba(119, 216, 255, 0.1), 0 10px 24px rgba(0, 0, 0, 0.24);
108114
}
109115

@@ -145,7 +151,7 @@ body[data-fvplus-docker-orbit-view-mounted="true"] table#docker_containers {
145151
}
146152

147153
.fv-docker-orbit-crumb.is-current {
148-
background: rgba(33, 45, 66, 0.98);
154+
background: rgba(33, 45, 66, 0.98) !important;
149155
}
150156

151157
.fv-docker-orbit-crumb-sep {
@@ -202,8 +208,8 @@ body[data-fvplus-docker-orbit-view-mounted="true"] table#docker_containers {
202208
.fv-docker-orbit-node {
203209
border-radius: 22px;
204210
background:
205-
linear-gradient(180deg, rgba(27, 37, 55, 0.98), rgba(16, 23, 35, 0.98));
206-
border: 1px solid var(--fv-docker-orbit-border);
211+
linear-gradient(180deg, rgba(27, 37, 55, 0.98), rgba(16, 23, 35, 0.98)) !important;
212+
border: 1px solid rgba(112, 126, 152, 0.42) !important;
207213
box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
208214
}
209215

@@ -217,6 +223,12 @@ body[data-fvplus-docker-orbit-view-mounted="true"] table#docker_containers {
217223
z-index: 3;
218224
}
219225

226+
.fv-docker-orbit-hub.is-placeholder {
227+
width: 240px;
228+
min-height: 180px;
229+
justify-content: center;
230+
}
231+
220232
.fv-docker-orbit-hub-head {
221233
display: flex;
222234
gap: 12px;
@@ -271,21 +283,21 @@ body[data-fvplus-docker-orbit-view-mounted="true"] table#docker_containers {
271283

272284
.fv-docker-orbit-node.is-member.running,
273285
.fv-docker-orbit-inspector-card.is-member.running {
274-
border-color: rgba(54, 208, 122, 0.32);
286+
border-color: rgba(112, 126, 152, 0.42) !important;
275287
}
276288

277289
.fv-docker-orbit-node.is-member.paused,
278290
.fv-docker-orbit-inspector-card.is-member.paused {
279-
border-color: rgba(234, 176, 55, 0.32);
291+
border-color: rgba(112, 126, 152, 0.42) !important;
280292
}
281293

282294
.fv-docker-orbit-node.is-member.stopped,
283295
.fv-docker-orbit-inspector-card.is-member.stopped {
284-
border-color: rgba(228, 96, 96, 0.32);
296+
border-color: rgba(112, 126, 152, 0.42) !important;
285297
}
286298

287299
.fv-docker-orbit-node.is-selected {
288-
border-color: var(--fv-docker-orbit-border-strong);
300+
border-color: rgba(150, 170, 206, 0.64) !important;
289301
box-shadow: 0 0 0 1px rgba(119, 216, 255, 0.12), 0 14px 32px rgba(0, 0, 0, 0.28);
290302
}
291303

0 commit comments

Comments
 (0)