mirror of
https://github.com/HeyPuter/puter.git
synced 2026-08-22 14:07:28 +00:00
Fixed issue: #1033 (Added app category display in Dev Center in main app list) (#1350)
Docker Image CI / build-and-push-image (push) Has been cancelled
Maintain Release Merge PR / update-release-pr (push) Has been cancelled
release-please / release-please (push) Has been cancelled
test / test (18.x) (push) Has been cancelled
test / test (20.x) (push) Has been cancelled
test / test (22.x) (push) Has been cancelled
Docker Image CI / build-and-push-image (push) Has been cancelled
Maintain Release Merge PR / update-release-pr (push) Has been cancelled
release-please / release-please (push) Has been cancelled
test / test (18.x) (push) Has been cancelled
test / test (20.x) (push) Has been cancelled
test / test (22.x) (push) Has been cancelled
* 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 <nj@puter.com>
This commit is contained in:
Josh Joseph
@@ -242,6 +242,7 @@ section {
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
@@ -251,8 +252,16 @@ section {
|
||||
background-color: #e8eff6;
|
||||
}
|
||||
|
||||
.app-card:hover .app-row-toolbar{
|
||||
display: block;
|
||||
|
||||
.app-card:hover .app-row-toolbar {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.app-toolbar-container {
|
||||
height: 16px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.app-card h1 {
|
||||
@@ -717,14 +726,24 @@ th.sorted{
|
||||
color: #394254;
|
||||
}
|
||||
|
||||
.app-row-toolbar{
|
||||
margin-top: -7px;
|
||||
display: none;
|
||||
width: 350px;
|
||||
.app-row-toolbar {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
height: auto; /* allow full content */
|
||||
overflow: visible; /* allow overflow */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px; /* adjust spacing here */
|
||||
font-size: 12px;
|
||||
padding-top: 2px;
|
||||
margin-top: -4px;
|
||||
|
||||
}
|
||||
|
||||
.app-row-toolbar img {
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.app-row-toolbar img:hover {
|
||||
@@ -1212,4 +1231,44 @@ dialog{
|
||||
}
|
||||
.stats-cell img{
|
||||
width: 18px; margin-right: 5px; margin-bottom: -4px;
|
||||
}
|
||||
}
|
||||
.category-badge {
|
||||
display: inline-block;
|
||||
background-color: #f2f2f2;
|
||||
color: #555;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 2px 6px;
|
||||
margin-left: 8px;
|
||||
border-radius: 6px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.app-category {
|
||||
display: inline-block;
|
||||
background-color: #f3f4f6;
|
||||
color: #374151;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
margin-top: 2px;
|
||||
max-height: 18px;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-row-toolbar span {
|
||||
margin: 0 4px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.app-row-toolbar span:hover {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
color: #000; /* Optional: darken on hover */
|
||||
}
|
||||
|
||||
|
||||
|
||||
+101
-42
@@ -315,13 +315,18 @@ async function create_app(title, source_path = null, items = null) {
|
||||
// Update the app with the new hostname
|
||||
// ----------------------------------------------------
|
||||
puter.apps.update(app.name, {
|
||||
title: title,
|
||||
indexURL: source_path ? protocol + `://${subdomain}.` + static_hosting_domain : 'https://dev-center.puter.com/coming-soon.html',
|
||||
icon: icon,
|
||||
description: ' ',
|
||||
maximizeOnStart: false,
|
||||
background: false,
|
||||
}).then(async (app) => {
|
||||
title: title,
|
||||
indexURL: source_path ? protocol + `://${subdomain}.` + static_hosting_domain : 'https://dev-center.puter.com/coming-soon.html',
|
||||
icon: icon,
|
||||
description: ' ',
|
||||
maximizeOnStart: false,
|
||||
background: false,
|
||||
metadata: {
|
||||
category: null, // default category on creation
|
||||
window_resizable: true,
|
||||
fullpage_on_landing: true,
|
||||
}
|
||||
}).then(async (app) => {
|
||||
// refresh app list
|
||||
puter.apps.list({ icon_size: 64 }).then(async (resp) => {
|
||||
apps = resp;
|
||||
@@ -330,6 +335,8 @@ async function create_app(title, source_path = null, items = null) {
|
||||
setTimeout(() => {
|
||||
// open edit app section
|
||||
edit_app_section(app.name);
|
||||
refresh_app_list(); // ✅ Refreshes main app list
|
||||
|
||||
// set drop area if source_path was provided or items were dropped
|
||||
if (source_path || items) {
|
||||
$('.drop-area').removeClass('drop-area-hover');
|
||||
@@ -1381,6 +1388,8 @@ $(document).on('click', '.edit-app-save-btn', async function (e) {
|
||||
},
|
||||
filetypeAssociations: filetype_associations,
|
||||
}).then(async (app) => {
|
||||
refresh_app_list();
|
||||
|
||||
currently_editing_app = app;
|
||||
trackOriginalValues(); // Update original values after save
|
||||
toggleSaveButton(); //Disable Save Button after succesful save
|
||||
@@ -1654,53 +1663,103 @@ async function getBase64ImageFromUrl(imageUrl) {
|
||||
*/
|
||||
function generate_app_card(app) {
|
||||
let h = ``;
|
||||
h += `<tr class="app-card" data-uid="${html_encode(app.uid)}" data-title="${html_encode(app.title)}" data-name="${html_encode(app.name)}">`;
|
||||
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;">`;
|
||||
// check box
|
||||
h += `<td style="height: 60px; width: 20px;">`;
|
||||
h += `<td style="height: 60px; width: 20px; display: flex ; align-items: center;">`;
|
||||
h += `<div style="width: 20px; height: 20px; margin-top: 20px; margin-right: 10px; flex-shrink:0;">`;
|
||||
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;">`;
|
||||
h += `</div>`;
|
||||
h += `</td>`;
|
||||
// App info
|
||||
h += `<td style="height: 60px; width: 450px; display: flex; flex-direction: row; overflow:hidden;">`;
|
||||
// App info (title, category, toolbar)
|
||||
h += `<td style="height: 72px; width: 450px;">`;
|
||||
|
||||
// Wrapper for icon + content side by side
|
||||
h += `<div style="display: flex; flex-direction: row; align-items: center; height: 86px; overflow: hidden;">`;
|
||||
|
||||
// Icon
|
||||
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>`;
|
||||
// Info
|
||||
h += `<div style="float:left; padding-left: 10px;">`;
|
||||
// Title
|
||||
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>`;
|
||||
// // Category
|
||||
// if (app.metadata?.category) {
|
||||
// const category = APP_CATEGORIES.find(c => c.id === app.metadata.category);
|
||||
// if (category) {
|
||||
// h += `<div class="app-categories">`;
|
||||
// h += `<span class="app-category">${category.label}</span>`;
|
||||
// h += `</div>`;
|
||||
// }
|
||||
// }
|
||||
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;
|
||||
margin-right: 10px;
|
||||
color: #414b56;
|
||||
cursor: pointer;
|
||||
background-color: white;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
"></div>`;
|
||||
|
||||
// link
|
||||
h += `<a class="app-card-link" href="${html_encode(applink(app))}" target="_blank">${html_encode(applink(app))}</a>`;
|
||||
// App info content
|
||||
h += `<div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%; overflow: visible;">`;
|
||||
|
||||
// toolbar
|
||||
h += `<div style="" class="app-row-toolbar disable-user-select">`;
|
||||
// Info block with fixed layout
|
||||
h += `<div style="display: flex; flex-direction: column; justify-content: center; padding-left: 10px; flex-grow: 1; overflow: hidden; gap: 1px; height: 100%;">`;
|
||||
|
||||
// Open
|
||||
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>`;
|
||||
h += `<span style="margin-right: 10px; margin-left: 10px; color: #CCC; cursor:default;">•</span>`;
|
||||
// Title
|
||||
h += `<h3 class="got-to-edit-app app-card-title" style="
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
" 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>`;
|
||||
|
||||
// Settings
|
||||
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>`;
|
||||
h += `<span style="margin-right: 10px; margin-left: 10px; color: #CCC; cursor:default;">•</span>`;
|
||||
// Category (optional)
|
||||
if (app.metadata?.category) {
|
||||
const category = APP_CATEGORIES.find(c => c.id === app.metadata.category);
|
||||
if (category) {
|
||||
h += `<span class="app-category" style="
|
||||
background-color: #f3f4f6;
|
||||
color: #374151;
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
margin: 1px 0 0 0;
|
||||
max-width: fit-content;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
">${html_encode(category.label)}</span>`;
|
||||
}
|
||||
}
|
||||
|
||||
// add to desktop
|
||||
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>`
|
||||
h += `<span style="margin-right: 10px; margin-left: 10px; color: #CCC; cursor:default;">•</span>`;
|
||||
// Link
|
||||
h += `<a class="app-card-link" href="${html_encode(applink(app))}" target="_blank" style="
|
||||
font-size: 13px;
|
||||
margin: 2px 0 0 0;
|
||||
color: #2563eb;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
">${html_encode(applink(app))}</a>`;
|
||||
|
||||
h += `</div>`;
|
||||
|
||||
|
||||
|
||||
// Toolbar
|
||||
h += `<div class="app-toolbar-container" style="height: 16px; overflow: visible;">`;
|
||||
h += `<div class="app-row-toolbar disable-user-select">`; // remove inline styles
|
||||
|
||||
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>`;
|
||||
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>`;
|
||||
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>`;
|
||||
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>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`;
|
||||
h += `</div>`; // end info column
|
||||
h += `</div>`; // end row
|
||||
h += `</td>`;
|
||||
|
||||
// Delete
|
||||
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>`;
|
||||
h += `</div>`;
|
||||
h += `</td>`;
|
||||
|
||||
// users count
|
||||
h += `<td style="margin-top:10px; font-size:15px; vertical-align:middle;">`;
|
||||
|
||||
Reference in New Issue
Block a user