lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-09-22 13:15:49 +00:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

Add Open Desktop bento card and CSS

Browse Source 
Replace the previous desktop-switch UI with a full-width "Open Desktop" bento card that links to /desktop. Removes the pinned sidebar Open Desktop button and the old desktop-switch button/handler, and adds new CSS variables and styles for the desktop card (icon background, shadow, surface/header colors), hover shadow and arrow transition, and layout/padding adjustments.

Changed files: TabHome.js (removed old switch, added anchor card), UIDashboard.js (removed sidebar button), dashboard.css (new desktop color vars and styles; removed legacy desktop-switch/button styles).
This commit is contained in:
jelveh
2026-07-06 12:33:56 -07:00
parent 23beb7bcde
commit 30e192c8bb
3 changed files with 61 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/UI/Dashboard/TabHome.js
+17 -13
View File
@@ -178,14 +178,6 @@ const TabHome = {
h += '</div>';
h += '</div>';
// Desktop switch card (spans full width)
// h += '<div class="bento-card bento-desktop-switch">';
// h += '<div class="bento-desktop-switch-inner">';
// h += '<span class="bento-desktop-switch-text">Looking for Puter\'s desktop interface?</span>';
// h += '<button class="bento-desktop-switch-btn">Switch to Desktop</button>';
// h += '</div>';
// h += '</div>';
// Usage card (spans full width on second row)
h += '<div class="bento-card bento-usage">';
h +=
@@ -208,6 +200,23 @@ const TabHome = {
h += '</div>';
h += '</div>';
// Open Desktop card (spans full width, links to the desktop interface)
h += '<a href="/desktop" target="_blank" rel="noopener" class="bento-card bento-desktop allow-native-ctxmenu">';
h += '<div class="bento-card-fancy-icon bento-card-fancy-icon-desktop">';
h +=
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>';
h += '</div>';
h += '<div class="bento-card-fancy-text">';
h += `<h2>${i18n('open_desktop')}</h2>`;
h += '<span class="bento-card-fancy-subtitle">';
h +=
'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>';
h += 'Switch to the desktop interface';
h += '</span>';
h += '</div>';
h += '<span class="bento-desktop-arrow">›</span>';
h += '</a>';
h += '</div>';
return h;
},
@@ -271,11 +280,6 @@ const TabHome = {
},
);
// Handle desktop switch button
$el_window.on('click', '.bento-desktop-switch-btn', function () {
window.location.href = '/desktop';
});
// Handle "Save Account" warning click
$el_window.on('click', '.bento-save-account-warning', function (e) {
e.preventDefault();
src/gui/src/UI/Dashboard/UIDashboard.js
-6
View File
@@ -106,12 +106,6 @@ async function UIDashboard (options) {
}
h += '</div>';
// Open Desktop button, pinned above user options
h += `<a class="dashboard-sidebar-item dashboard-desktop-btn allow-native-ctxmenu" href="/desktop" data-tooltip="${html_encode(i18n('open_desktop'))}">`;
h += '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>';
h += i18n('open_desktop');
h += '</a>';
// User options button at bottom
h += '<div class="dashboard-user-options">';
h += '<div class="dashboard-user-btn">';
src/gui/src/css/dashboard.css
+44 -43
View File
@@ -75,6 +75,11 @@
--dashboard-bento-usage-surface: #eef2ff;
--dashboard-bento-usage-header-bg: #e0e7ff;
--dashboard-bento-usage-bar-fill: #ea580c;
/* Emerald (matches the green icon accent used elsewhere) */
--dashboard-bento-desktop-icon-bg: #059669;
--dashboard-bento-desktop-icon-shadow: rgba(5, 150, 105, 0.22);
--dashboard-bento-desktop-surface: #ecfdf5;
--dashboard-bento-desktop-header-bg: #d1fae5;
--dashboard-shadow-subtle: rgba(0, 0, 0, 0.04);
--dashboard-shadow-light: rgba(0, 0, 0, 0.06);
@@ -166,6 +171,10 @@ body {
--dashboard-bento-usage-surface: #1c1d2e;
--dashboard-bento-usage-header-bg: #252a42;
--dashboard-bento-usage-bar-fill: #fb923c;
--dashboard-bento-desktop-icon-bg: #10b981;
--dashboard-bento-desktop-icon-shadow: rgba(16, 185, 129, 0.32);
--dashboard-bento-desktop-surface: #16241f;
--dashboard-bento-desktop-header-bg: #172e26;
--dashboard-shadow-subtle: rgba(0, 0, 0, 0.2);
--dashboard-shadow-light: rgba(0, 0, 0, 0.3);
@@ -404,17 +413,6 @@ body {
font-weight: 500;
}
/* Open Desktop button pinned above user options */
.dashboard-desktop-btn {
border: 1px solid var(--dashboard-border);
margin-bottom: 0;
justify-content: center;
}
.dashboard-sidebar.collapsed .dashboard-desktop-btn {
border: none;
}
/* User options button at bottom of sidebar */
.dashboard-user-options {
border-top: 1px solid var(--dashboard-border);
@@ -1257,6 +1255,11 @@ input.myapps-search::placeholder {
color: #fff;
}
.dashboard .bento-card-fancy-icon-desktop {
background-color: var(--dashboard-bento-desktop-icon-bg);
color: #fff;
}
.dashboard .bento-card-fancy-text {
display: flex;
flex-direction: column;
@@ -1397,46 +1400,39 @@ input.myapps-search::placeholder {
color: var(--dashboard-text-tertiary);
}
/* Desktop switch bento card */
.dashboard .bento-desktop-switch {
/* Open Desktop bento card (full width; links to the desktop interface) */
.dashboard .bento-desktop {
grid-column: 1 / -1;
min-height: auto;
background-color: var(--dashboard-bento-apps-surface);
padding: 16px 24px;
}
.dashboard .bento-desktop-switch-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.dashboard .bento-desktop-switch-text {
font-size: 14px;
font-weight: 500;
color: var(--dashboard-text-secondary);
}
.dashboard .bento-desktop-switch-btn {
flex-shrink: 0;
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: var(--dashboard-background);
background: var(--dashboard-icon-blue-start);
border: 1px solid var(--dashboard-primary);
border-radius: 8px;
cursor: pointer;
gap: 14px;
padding: 18px 24px;
background-color: var(--dashboard-bento-desktop-header-bg);
text-decoration: none;
transition: background 0.15s, color 0.15s;
color: inherit;
transition: box-shadow 0.15s ease;
}
@media (hover: hover) {
.dashboard .bento-desktop-switch-btn:hover {
background: var(--dashboard-icon-blue-end);
color: white;
.dashboard .bento-desktop:hover {
box-shadow:
0 2px 4px var(--dashboard-shadow-subtle),
0 10px 28px var(--dashboard-bento-desktop-icon-shadow);
}
.dashboard .bento-desktop:hover .bento-desktop-arrow {
transform: translateX(3px);
color: var(--dashboard-text-primary);
}
}
.dashboard .bento-desktop-arrow {
margin-left: auto;
font-size: 22px;
font-weight: 300;
line-height: 1;
color: var(--dashboard-text-hint);
transition: transform 0.15s ease, color 0.15s ease;
}
/* Usage bento card (cool indigo surfaces; orange bars stay as progress accent) */
@@ -1712,6 +1708,11 @@ input.myapps-search::placeholder {
gap: 12px;
}
.dashboard .bento-desktop {
padding: 16px 20px;
gap: 12px;
}
.dashboard .bento-card-fancy-icon {
width: 40px;
height: 40px;