Skip to content

Commit f9995a2

Browse files
JoshJoseph1234jelveh
JoshJoseph1234
and
jelveh
authored
Fixed issue: #1033 (Added app category display in Dev Center in main app list) (#1350)
* Update README.md * Fixed issue: #1033 (Added app category display in Dev Center in main app list) * Fixed issue: #1033 (Added app category display in Dev Center in main app list) * test 1033 * Fixed issue: #1033 (Added app category display in Dev Center in main app list) * Fixed issue: #1033 (Added app category display in Dev Center in main app list) * Center the app checkbox --------- Co-authored-by: jelveh <[email protected]>
1 parent 17a11a3 commit f9995a2

File tree

2 files changed

+173
-55
lines changed

2 files changed

+173
-55
lines changed

‎src/dev-center/css/style.css‎

Lines changed: 66 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,7 @@ section {
242242
background: white;
243243
overflow: hidden;
244244
position: relative;
245+
245246
}
246247

247248
.app-card:hover {
@@ -251,8 +252,16 @@ section {
251252
background-color: #e8eff6;
252253
}
253254

254-
.app-card:hover .app-row-toolbar{
255-
display: block;
255+
256+
.app-card:hover .app-row-toolbar {
257+
visibility: visible;
258+
opacity: 1;
259+
}
260+
261+
.app-toolbar-container {
262+
height: 16px;
263+
overflow: hidden;
264+
position: relative;
256265
}
257266

258267
.app-card h1 {
@@ -717,14 +726,24 @@ th.sorted{
717726
color: #394254;
718727
}
719728

720-
.app-row-toolbar{
721-
margin-top: -7px;
722-
display: none;
723-
width: 350px;
729+
.app-row-toolbar {
730+
visibility: hidden;
731+
opacity: 0;
732+
transition: opacity 0.2s ease;
733+
height: auto; /* allow full content */
734+
overflow: visible; /* allow overflow */
735+
display: flex;
736+
align-items: center;
737+
gap: 4px; /* adjust spacing here */
738+
font-size: 12px;
739+
padding-top: 2px;
740+
margin-top: -4px;
741+
724742
}
725743

726744
.app-row-toolbar img {
727745
opacity: 0.5;
746+
transition: opacity 0.2s ease;
728747
}
729748

730749
.app-row-toolbar img:hover {
@@ -1212,4 +1231,44 @@ dialog{
12121231
}
12131232
.stats-cell img{
12141233
width: 18px; margin-right: 5px; margin-bottom: -4px;
1215-
}
1234+
}
1235+
.category-badge {
1236+
display: inline-block;
1237+
background-color: #f2f2f2;
1238+
color: #555;
1239+
font-size: 12px;
1240+
font-weight: 500;
1241+
padding: 2px 6px;
1242+
margin-left: 8px;
1243+
border-radius: 6px;
1244+
vertical-align: middle;
1245+
}
1246+
.app-category {
1247+
display: inline-block;
1248+
background-color: #f3f4f6;
1249+
color: #374151;
1250+
padding: 1px 6px;
1251+
border-radius: 4px;
1252+
font-size: 11px;
1253+
font-weight: 500;
1254+
margin-top: 2px;
1255+
max-height: 18px;
1256+
line-height: 1.2;
1257+
white-space: nowrap;
1258+
}
1259+
1260+
.app-row-toolbar span {
1261+
margin: 0 4px;
1262+
font-size: 12px;
1263+
line-height: 1;
1264+
vertical-align: middle;
1265+
padding: 2px 4px;
1266+
}
1267+
1268+
.app-row-toolbar span:hover {
1269+
text-decoration: underline;
1270+
cursor: pointer;
1271+
color: #000; /* Optional: darken on hover */
1272+
}
1273+
1274+

‎src/dev-center/js/dev-center.js‎

Lines changed: 107 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -315,13 +315,18 @@ async function create_app(title, source_path = null, items = null) {
315315
// Update the app with the new hostname
316316
// ----------------------------------------------------
317317
puter.apps.update(app.name, {
318-
title: title,
319-
indexURL: source_path ? protocol + `://${subdomain}.` + static_hosting_domain : 'https://dev-center.puter.com/coming-soon.html',
320-
icon: icon,
321-
description: ' ',
322-
maximizeOnStart: false,
323-
background: false,
324-
}).then(async (app) => {
318+
title: title,
319+
indexURL: source_path ? protocol + `://${subdomain}.` + static_hosting_domain : 'https://dev-center.puter.com/coming-soon.html',
320+
icon: icon,
321+
description: ' ',
322+
maximizeOnStart: false,
323+
background: false,
324+
metadata: {
325+
category: null, // default category on creation
326+
window_resizable: true,
327+
fullpage_on_landing: true,
328+
}
329+
}).then(async (app) => {
325330
// refresh app list
326331
puter.apps.list({ icon_size: 64 }).then(async (resp) => {
327332
apps = resp;
@@ -330,6 +335,8 @@ async function create_app(title, source_path = null, items = null) {
330335
setTimeout(() => {
331336
// open edit app section
332337
edit_app_section(app.name);
338+
refresh_app_list(); // ✅ Refreshes main app list
339+
333340
// set drop area if source_path was provided or items were dropped
334341
if (source_path || items) {
335342
$('.drop-area').removeClass('drop-area-hover');
@@ -1381,6 +1388,8 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
13811388
},
13821389
filetypeAssociations: filetype_associations,
13831390
}).then(async (app) => {
1391+
refresh_app_list();
1392+
13841393
currently_editing_app = app;
13851394
trackOriginalValues(); // Update original values after save
13861395
toggleSaveButton(); //Disable Save Button after succesful save
@@ -1654,53 +1663,103 @@ async function getBase64ImageFromUrl(imageUrl) {
16541663
*/
16551664
function generate_app_card(app) {
16561665
let h = ``;
1657-
h += `<tr class="app-card" data-uid="${html_encode(app.uid)}" data-title="${html_encode(app.title)}" data-name="${html_encode(app.name)}">`;
1666+
h += `<tr class="app-card" data-uid="${html_encode(app.uid)}" data-title="${html_encode(app.title)}" data-name="${html_encode(app.name)}" style="height: 86px;">`;
16581667
// check box
1659-
h += `<td style="height: 60px; width: 20px;">`;
1668+
h += `<td style="height: 60px; width: 20px; display: flex ; align-items: center;">`;
16601669
h += `<div style="width: 20px; height: 20px; margin-top: 20px; margin-right: 10px; flex-shrink:0;">`;
16611670
h += `<input type="checkbox" class="app-checkbox" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}" style="width: 20px; height: 20px;">`;
16621671
h += `</div>`;
16631672
h += `</td>`;
1664-
// App info
1665-
h += `<td style="height: 60px; width: 450px; display: flex; flex-direction: row; overflow:hidden;">`;
1673+
// App info (title, category, toolbar)
1674+
h += `<td style="height: 72px; width: 450px;">`;
1675+
1676+
// Wrapper for icon + content side by side
1677+
h += `<div style="display: flex; flex-direction: row; align-items: center; height: 86px; overflow: hidden;">`;
1678+
16661679
// Icon
1667-
h += `<div class="got-to-edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-locked="${html_encode(app.metadata?.locked)}" data-app-uid="${html_encode(app.uid)}" style="background-position: center; background-repeat: no-repeat; background-size: 92%; background-image:url(${app.icon === null ? './img/app.svg' : app.icon}); width: 60px; height: 60px; float:left; margin-bottom: -14px; color: #414b56; cursor: pointer; background-color: white; border-radius: 3px; flex-shrink:0;"></div>`;
1668-
// Info
1669-
h += `<div style="float:left; padding-left: 10px;">`;
1670-
// Title
1671-
h += `<h3 class="got-to-edit-app app-card-title" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">${html_encode(app.title)}${app.metadata?.locked ? lock_svg_tippy : ''}</h3>`;
1672-
// // Category
1673-
// if (app.metadata?.category) {
1674-
// const category = APP_CATEGORIES.find(c => c.id === app.metadata.category);
1675-
// if (category) {
1676-
// h += `<div class="app-categories">`;
1677-
// h += `<span class="app-category">${category.label}</span>`;
1678-
// h += `</div>`;
1679-
// }
1680-
// }
1681-
1682-
// link
1683-
h += `<a class="app-card-link" href="${html_encode(applink(app))}" target="_blank">${html_encode(applink(app))}</a>`;
1684-
1685-
// toolbar
1686-
h += `<div style="" class="app-row-toolbar disable-user-select">`;
1687-
1688-
// Open
1689-
h += `<span title="Open app" class="open-app-btn" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}" style="">Open</span>`;
1690-
h += `<span style="margin-right: 10px; margin-left: 10px; color: #CCC; cursor:default;">&bull;</span>`;
1691-
1692-
// Settings
1693-
h += `<span title="Edit app" class="edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Settings</span>`;
1694-
h += `<span style="margin-right: 10px; margin-left: 10px; color: #CCC; cursor:default;">&bull;</span>`;
1695-
1696-
// add to desktop
1697-
h += `<span class="add-app-to-desktop" data-app-uid="${html_encode(app.uid)}" data-app-title="${html_encode(app.title)}">Add Shortcut to Desktop</span>`
1698-
h += `<span style="margin-right: 10px; margin-left: 10px; color: #CCC; cursor:default;">&bull;</span>`;
1699-
1700-
// Delete
1701-
h += `<span title="Delete app" class="delete-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Delete</span>`;
1702-
h += `</div>`;
1703-
h += `</td>`;
1680+
h += `<div class="got-to-edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-locked="${html_encode(app.metadata?.locked)}" data-app-uid="${html_encode(app.uid)}" style="
1681+
background-position: center;
1682+
background-repeat: no-repeat;
1683+
background-size: 92%;
1684+
background-image: url(${app.icon === null ? './img/app.svg' : app.icon});
1685+
width: 60px;
1686+
height: 60px;
1687+
margin-right: 10px;
1688+
color: #414b56;
1689+
cursor: pointer;
1690+
background-color: white;
1691+
border-radius: 3px;
1692+
flex-shrink: 0;
1693+
"></div>`;
1694+
1695+
// App info content
1696+
h += `<div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: visible;">`;
1697+
1698+
// Info block with fixed layout
1699+
h += `<div style="display: flex; flex-direction: column; justify-content: center; padding-left: 10px; flex-grow: 1; overflow: hidden; gap: 1px; height: 100%;">`;
1700+
1701+
// Title
1702+
h += `<h3 class="got-to-edit-app app-card-title" style="
1703+
margin: 0;
1704+
font-size: 16px;
1705+
line-height: 20px;
1706+
height: 20px;
1707+
white-space: nowrap;
1708+
overflow: hidden;
1709+
text-overflow: ellipsis;
1710+
" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">
1711+
${html_encode(app.title)}${app.metadata?.locked ? lock_svg_tippy : ''}
1712+
</h3>`;
1713+
1714+
// Category (optional)
1715+
if (app.metadata?.category) {
1716+
const category = APP_CATEGORIES.find(c => c.id === app.metadata.category);
1717+
if (category) {
1718+
h += `<span class="app-category" style="
1719+
background-color: #f3f4f6;
1720+
color: #374151;
1721+
padding: 1px 6px;
1722+
border-radius: 4px;
1723+
font-size: 12px;
1724+
font-weight: 500;
1725+
margin: 1px 0 0 0;
1726+
max-width: fit-content;
1727+
white-space: nowrap;
1728+
overflow: hidden;
1729+
text-overflow: ellipsis;
1730+
">${html_encode(category.label)}</span>`;
1731+
}
1732+
}
1733+
1734+
// Link
1735+
h += `<a class="app-card-link" href="${html_encode(applink(app))}" target="_blank" style="
1736+
font-size: 13px;
1737+
margin: 2px 0 0 0;
1738+
color: #2563eb;
1739+
white-space: nowrap;
1740+
overflow: hidden;
1741+
text-overflow: ellipsis;
1742+
text-decoration: none;
1743+
">${html_encode(applink(app))}</a>`;
1744+
1745+
h += `</div>`;
1746+
1747+
1748+
1749+
// Toolbar
1750+
h += `<div class="app-toolbar-container" style="height: 16px; overflow: visible;">`;
1751+
h += `<div class="app-row-toolbar disable-user-select">`; // remove inline styles
1752+
1753+
h += `<span title="Open app" class="open-app-btn" data-app-uid="${html_encode(app.uid)}" data-app-name="${html_encode(app.name)}">Open</span>`;
1754+
h += `<span title="Edit app" class="edit-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Settings</span>`;
1755+
h += `<span class="add-app-to-desktop" data-app-uid="${html_encode(app.uid)}" data-app-title="${html_encode(app.title)}">Add Shortcut to Desktop</span>`;
1756+
h += `<span title="Delete app" class="delete-app" data-app-name="${html_encode(app.name)}" data-app-title="${html_encode(app.title)}" data-app-uid="${html_encode(app.uid)}">Delete</span>`;
1757+
h += `</div>`;
1758+
h += `</div>`;
1759+
h += `</div>`; // end info column
1760+
h += `</div>`; // end row
1761+
h += `</td>`;
1762+
17041763

17051764
// users count
17061765
h += `<td style="margin-top:10px; font-size:15px; vertical-align:middle;">`;

0 commit comments

Comments
 (0)