chris/toadstoolTally
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use pencil icon for project rename

Browse Source
This commit is contained in:
chris 2025-12-09 11:42:09 -05:00
parent fb95cb4995
commit 6e07dcb09a
2 changed files with 39 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
assets/app.js
View File

@ -207,6 +207,16 @@ document.addEventListener('visibilitychange', async () => {
project.collapsed = !project.collapsed;
save();
}
function renameProject(pId) {
modalState = { type: 'renameProject', pId, partId: null };
const project = projects.find(p => p.id === pId);
modalTitle.innerText = "Rename Project";
modalInput.value = project.name;
modalInput.type = "text";
modalInput.placeholder = "Project name";
modal.classList.add('active');
setTimeout(() => modalInput.focus(), 100);
}
async function deletePart(pId, partId) {
const ok = await showConfirm({ title: 'Delete part?', text: 'This part will be removed.', confirmText: 'Delete', danger: true });
if (ok) {
@ -308,6 +318,10 @@ function closeModal() {
const part = projects.find(p => p.id === modalState.pId).parts.find(pt => pt.id === modalState.partId);
part.name = val;
}
else if (modalState.type === 'renameProject') {
const project = projects.find(p => p.id === modalState.pId);
project.name = val;
}
else if (modalState.type === 'manualCount') {
const num = parseInt(val);
if (!isNaN(num) && num >= 0) {
@ -341,6 +355,9 @@ function render() {
return;
}
const grid = document.createElement('div');
grid.className = 'projects-grid';
projects.forEach(project => {
const sortedParts = [...project.parts].sort((a, b) => a.finished - b.finished);
const projectCollapsedClass = project.collapsed ? 'project-collapsed' : '';
@ -394,15 +411,18 @@ function render() {
<button class="btn-toggle-project">▼</button>
<span class="project-title">${project.name}</span>
</div>
<div style="display:flex; gap:10px; align-items:center;">
<div class="project-actions">
<button class="btn-rename-project" onclick="renameProject(${project.id})" title="Rename project">✏️</button>
<button class="btn-add-part" onclick="openModal('addPart', ${project.id})">+ Part</button>
<button class="btn-delete-project" onclick="deleteProject(${project.id})">×</button>
</div>
</div>
<div class="part-list">${partsHtml}</div>
`;
app.appendChild(projectContainer);
grid.appendChild(projectContainer);
});
app.appendChild(grid);
}
render();

20
assets/style.css
View File

@ -119,14 +119,20 @@ h1 {
.hidden { display: none !important; }
.container {
max-width: 650px;
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem 1rem calc(120px + env(safe-area-inset-bottom, 0px));
padding: 1.5rem 1.25rem calc(120px + env(safe-area-inset-bottom, 0px));
position: relative;
z-index: 2;
flex: 1;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
}
/* --- PROJECT CONTAINER --- */
.project-container {
background: var(--card-bg);
@ -140,7 +146,7 @@ h1 {
.project-header {
display: flex; justify-content: space-between; align-items: center;
padding: 15px 5px; margin-bottom: 10px;
padding: 15px 5px; margin-bottom: 10px; gap: 10px;
}
.project-title-group { display: flex; align-items: center; gap: 10px; }
@ -159,6 +165,8 @@ h1 {
.project-collapsed .part-list { display: none; }
.project-collapsed { margin-bottom: 1rem; opacity: 0.8; box-shadow: none; }
.project-actions { display: flex; gap: 8px; align-items: center; }
.btn-add-part {
background: var(--project-color); color: var(--card-bg); border: none;
border-radius: 20px; padding: 6px 16px; font-size: 0.9rem; font-weight: bold;
@ -171,6 +179,12 @@ h1 {
}
.btn-delete-project:hover { color: var(--danger); }
.btn-rename-project {
background: none; border: none; color: var(--text-muted);
padding: 5px 8px; border-radius: 8px; font-size: 1rem; cursor: pointer;
}
.btn-rename-project:hover { color: var(--project-color); }
/* --- PART CARD --- */
.part-card {
background: var(--card-bg);