diff --git a/TODO.md b/TODO.md index f3ca93e..23f5dd3 100644 --- a/TODO.md +++ b/TODO.md @@ -2,10 +2,10 @@ ## TODO -- [ ] Ability to create a project on the projects select page, including if TODO.md is empty. - [ ] Ability to create, move, remove columns. -- [ ] Minimize the number of times the user is asked for access. If possible ask for all the access required at one time. - [ ] Plus button in the columns to add a new item, with text input. +- [ ] Can we make the columns vertically fill the available space? +- [ ] Minimize the number of times the user is asked for access. If possible ask for all the access required at one time. ## In progress @@ -19,4 +19,4 @@ - [x] When moving between columns don't insert an extra newline before, unless moving to an empty column. - [x] Give each column a max width of 450px and have them stretch to fill the area up to that. - [x] Don't put carriage returns between individual TODO list items. As far as possible try to preserve original formatting, just moving individual lines around without disturbing other lines. - +- [x] Ability to create a project on the projects select page, including if TODO.md is empty. diff --git a/index.html b/index.html index 6d4e316..d0b0e2f 100644 --- a/index.html +++ b/index.html @@ -61,6 +61,26 @@ border: .1rem solid var(--shade); } + input[type="text"] { + appearance: none; + box-shadow: none; + box-sizing: inherit; + padding: .5rem .5rem; + width: 100%; + font-size: 1rem; + color: var(--fg); + background-color: var(--bg); + border: .1rem solid var(--fg); + border-radius: var(--radius); + font-family: Helvetica, Arial, sans-serif; + } + + input::placeholder { + color: var(--fg); + font-style: italic; + opacity: 1; + } + h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; } @@ -140,6 +160,7 @@ .card-list { padding: 0.5em; overflow-y: auto; + overflow-x: hidden; flex-grow: 1; display: flex; flex-direction: column; @@ -196,7 +217,6 @@ .drop-indicator { height: 3px; background: var(--fg); - margin: -0.25em 0; border-radius: 2px; opacity: 0; transition: opacity 0.1s; @@ -231,6 +251,18 @@ border-color: var(--fg); } + .new-project-form { + width: 100%; + max-width: 600px; + display: flex; + gap: 0.5em; + margin-top: 1em; + } + + .new-project-form input { + flex-grow: 1; + } + .error { background-color: #782828; padding: 0.5em 1em; @@ -284,6 +316,10 @@

Select Project

+
+ + +
@@ -293,7 +329,7 @@

Project Name

- +
@@ -540,6 +576,26 @@ await writeFile(lines.join('\n')); } + async function createProject(projectName) { + console.log('Creating project:', projectName); + const file = await state.fileHandle.getFile(); + const text = await file.text(); + + let newText; + if (text.trim() === '') { + newText = `# ${projectName}\n\n## TODO\n\n## In Progress\n\n## Done\n`; + } else { + newText = text + (text.endsWith('\n') ? '' : '\n') + `\n# ${projectName}\n\n## TODO\n\n## In Progress\n\n## Done\n`; + } + + await writeFile(newText); + + const newSectionIndex = state.sections.findIndex(s => s.name === projectName); + if (newSectionIndex !== -1) { + await selectSection(newSectionIndex); + } + } + async function loadFile() { try { const file = await state.fileHandle.getFile(); @@ -611,6 +667,8 @@ list.appendChild(li); }); + document.getElementById('new-project-input').value = ''; + showScreen('section-screen'); } @@ -1012,6 +1070,29 @@ document.getElementById('open-file-btn').click(); }; + document.getElementById('create-project-btn').onclick = async () => { + const input = document.getElementById('new-project-input'); + const projectName = input.value.trim(); + + if (!projectName) { + alert('Please enter a project name'); + return; + } + + if (state.sections.some(s => s.name === projectName)) { + alert('A project with this name already exists'); + return; + } + + await createProject(projectName); + }; + + document.getElementById('new-project-input').onkeypress = (e) => { + if (e.key === 'Enter') { + document.getElementById('create-project-btn').click(); + } + }; + init();