diff --git a/TODO.md b/TODO.md index 5998d51..99aa363 100644 --- a/TODO.md +++ b/TODO.md @@ -2,19 +2,21 @@ ## TODO -- [ ] Minimize the number of times the user is asked for access. If possible ask for all the access required at one time. - [ ] When dragging between columns we should show the insertion point and insert the card at that point. -- [ ] 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. -- [ ] Ability to create, move, remove columns. -- [ ] Make it look more the makesprite/concrete.css theme. -- [ ] Check mark type of UI for marking items complete/uncomplete. -- [ ] Ability to create a project on the projects select page, including if TODO.md is empty. - [ ] Plus button in the columns to add a new item, with text input. +- [ ] Ability to create, move, remove columns. +- [ ] Ability to create a project on the projects select page, including if TODO.md is empty. + +- [ ] Minimize the number of times the user is asked for access. If possible ask for all the access required at one time. ## In progress ## Done +- [x] Dropdown for setting the card as checked/unchecked. +- [x] Make it look more the makesprite/concrete.css theme. +- [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. + diff --git a/index.html b/index.html index 2a87f6a..3ce3da5 100644 --- a/index.html +++ b/index.html @@ -155,6 +155,7 @@ cursor: grab; user-select: none; word-wrap: break-word; + position: relative; } .card:hover { @@ -175,6 +176,21 @@ border: .1rem dashed var(--fg); } + .card-checkbox { + float: right; + width: 1em; + height: 1em; + border: .1rem solid var(--fg); + border-radius: 2px; + cursor: pointer; + background: transparent; + margin-left: 0.5em; + } + + .card-checkbox.checked { + background: var(--fg); + } + /* Section Picker */ .section-list { list-style: none; @@ -581,7 +597,6 @@ const cardDiv = document.createElement('div'); cardDiv.className = `card ${card.completed ? 'completed' : ''}`; - cardDiv.textContent = card.text; cardDiv.draggable = true; cardDiv.dataset.lineNumber = card.lineNumber; @@ -589,7 +604,10 @@ cardDiv.dataset.colIndex = colIndex; cardDiv.dataset.cardIndex = cardIndex; - cardDiv.onclick = async () => { + const checkbox = document.createElement('div'); + checkbox.className = `card-checkbox ${card.completed ? 'checked' : ''}`; + checkbox.onclick = async (e) => { + e.stopPropagation(); const lineNum = parseInt(cardDiv.dataset.lineNumber); const originalLine = cardDiv.dataset.originalLine; @@ -599,6 +617,11 @@ await updateLineInFile(lineNum, newLine); }; + cardDiv.appendChild(checkbox); + + const textSpan = document.createElement('span'); + textSpan.textContent = card.text; + cardDiv.appendChild(textSpan); cardDiv.ondragstart = (e) => handleDragStart(e, cardDiv); cardDiv.ondragend = handleDragEnd;