diff --git a/pygitweb/static/board.js b/pygitweb/static/board.js index 600dade..8712b5f 100644 --- a/pygitweb/static/board.js +++ b/pygitweb/static/board.js @@ -2,6 +2,33 @@ var template = document.getElementById('board-card-template'); var addCardButtons = document.querySelectorAll('.board-column-add-card'); + var ICONS_BASE = '/static/icons/'; + var ICON_LIST = ['cloud.svg', 'cloud-filled.svg', 'cloud-storm.svg', 'cloud-down.svg', 'cloud-up.svg']; + var CLOUD_ICON_URL = ICONS_BASE + 'cloud.svg'; + + function preloadIcons() { + ICON_LIST.forEach(function(name) { + var img = new Image(); + img.src = ICONS_BASE + name; + }); + } + + function assignCloudIconToCard(card) { + var icon = card && card.querySelector && card.querySelector('.board-card-icon'); + if (icon) icon.setAttribute('data-icon', 'cloud'); + } + + function assignCloudIconToAllCards() { + document.querySelectorAll('.board-card').forEach(assignCloudIconToCard); + } + + preloadIcons(); + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', assignCloudIconToAllCards); + } else { + assignCloudIconToAllCards(); + } + function addDefaultCard(ev) { if (!template || !template.content) return; var column = ev.currentTarget.closest('.board-column'); @@ -12,6 +39,7 @@ if (card) { var titleEl = card.querySelector('.board-card-title'); if (titleEl) titleEl.textContent = 'New task'; + assignCloudIconToCard(card); } cardsContainer.appendChild(clone); var badge = column.querySelector('.board-column-add-card'); @@ -28,6 +56,7 @@ var boardColumns = document.querySelector('.board-columns'); var dropzones = document.querySelectorAll('.board-column.dropzone'); var draggedCard = null; + var didDrag = false; function updateColumnBadge(column) { var cardsContainer = column && column.querySelector('.board-column-cards'); @@ -40,6 +69,7 @@ function handleDragStart(e) { var card = e.target.closest && e.target.closest('.board-card'); if (!card) return; + didDrag = true; draggedCard = card; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', card.dataset.taskRef || ''); @@ -49,6 +79,192 @@ var card = e.target.closest && e.target.closest('.board-card'); if (card) card.classList.remove('opacity-50'); draggedCard = null; + setTimeout(function() { didDrag = false; }, 0); + } + + /** Parse display date text to YYYY-MM-DD for input[type=date]. Returns '' if none. */ + function parseDateForInput(text) { + if (!text || text.trim() === 'None') return ''; + var s = text.trim(); + var m = s.match(/^(\d{4})-(\d{2})-(\d{2})/); + return m ? m[0] : ''; + } + + function setupPopoutEditables(popoutCard) { + var titleEl = popoutCard.querySelector('.board-card-title'); + var descEl = popoutCard.querySelector('.board-card-description-full'); + var dueEl = popoutCard.querySelector('.board-card-due-date'); + var statusEl = popoutCard.querySelector('.board-card-status'); + var priorityEl = popoutCard.querySelector('.board-card-priority'); + + if (titleEl) titleEl.classList.add('board-card-editable'); + function commitTitle() { + var input = popoutCard.querySelector('.board-card-title-edit'); + if (!input) return; + var val = (input.value || '').trim() || 'Untitled'; + titleEl.textContent = val; + titleEl.classList.remove('d-none'); + input.remove(); + } + if (titleEl) { + titleEl.addEventListener('click', function () { + if (popoutCard.querySelector('.board-card-title-edit')) return; + var val = (titleEl.textContent || '').trim(); + var input = document.createElement('input'); + input.type = 'text'; + input.className = 'form-control form-control-sm board-card-title-edit'; + input.value = val; + titleEl.classList.add('d-none'); + titleEl.parentNode.insertBefore(input, titleEl); + input.focus(); + input.addEventListener('blur', commitTitle); + input.addEventListener('keydown', function (e) { if (e.key === 'Enter') { e.preventDefault(); input.blur(); } }); + }); + } + + function commitDescription() { + var textarea = popoutCard.querySelector('.board-card-description-edit'); + if (!textarea) return; + var val = (textarea.value || '').trim(); + descEl.textContent = val || ''; + descEl.classList.remove('d-none'); + textarea.remove(); + } + if (descEl) { + descEl.addEventListener('click', function () { + if (popoutCard.querySelector('.board-card-description-edit')) return; + var val = (descEl.textContent || '').trim(); + var textarea = document.createElement('textarea'); + textarea.className = 'form-control form-control-sm board-card-description-edit mt-1'; + textarea.rows = 3; + textarea.value = val; + descEl.classList.add('d-none'); + descEl.parentNode.insertBefore(textarea, descEl); + textarea.focus(); + textarea.addEventListener('blur', commitDescription); + }); + } + + function commitDueDate() { + var input = popoutCard.querySelector('.board-card-due-date-edit'); + if (!input) return; + var val = (input.value || '').trim(); + dueEl.textContent = val || 'None'; + dueEl.classList.remove('d-none'); + input.remove(); + } + if (dueEl) { + dueEl.addEventListener('click', function () { + if (popoutCard.querySelector('.board-card-due-date-edit')) return; + var val = parseDateForInput(dueEl.textContent); + var input = document.createElement('input'); + input.type = 'date'; + input.className = 'form-control form-control-sm board-card-due-date-edit mt-1'; + input.value = val; + dueEl.classList.add('d-none'); + dueEl.parentNode.insertBefore(input, dueEl); + input.focus(); + input.addEventListener('blur', commitDueDate); + }); + } + + function commitStatus() { + var sel = popoutCard.querySelector('.board-card-status-edit'); + if (!sel) return; + var display = (sel.options[sel.selectedIndex] && sel.options[sel.selectedIndex].text) ? sel.options[sel.selectedIndex].text : (sel.value || 'TODO'); + statusEl.textContent = display || 'TODO'; + statusEl.classList.remove('d-none'); + sel.remove(); + } + if (statusEl) { + statusEl.addEventListener('click', function () { + if (popoutCard.querySelector('.board-card-status-edit')) return; + var current = (statusEl.textContent || '').trim() || 'TODO'; + var sel = document.createElement('select'); + sel.className = 'form-select form-select-sm board-card-status-edit mt-1'; + sel.innerHTML = ''; + var opt = document.createElement('option'); + opt.value = current; + opt.textContent = current; + opt.selected = true; + sel.appendChild(opt); + statusEl.classList.add('d-none'); + statusEl.parentNode.insertBefore(sel, statusEl); + sel.focus(); + sel.addEventListener('blur', commitStatus); + sel.addEventListener('change', commitStatus); + }); + } + + function commitPriority() { + var sel = popoutCard.querySelector('.board-card-priority-edit'); + if (!sel) return; + var display = (sel.options[sel.selectedIndex] && sel.options[sel.selectedIndex].text) ? sel.options[sel.selectedIndex].text : (sel.value || 'LOW'); + priorityEl.textContent = display || 'LOW'; + priorityEl.classList.remove('d-none'); + sel.remove(); + } + if (priorityEl) { + priorityEl.addEventListener('click', function () { + if (popoutCard.querySelector('.board-card-priority-edit')) return; + var current = (priorityEl.textContent || '').trim() || 'LOW'; + var sel = document.createElement('select'); + sel.className = 'form-select form-select-sm board-card-priority-edit mt-1'; + sel.innerHTML = ''; + var opt = document.createElement('option'); + opt.value = current; + opt.textContent = current; + opt.selected = true; + sel.appendChild(opt); + priorityEl.classList.add('d-none'); + priorityEl.parentNode.insertBefore(sel, priorityEl); + sel.focus(); + sel.addEventListener('blur', commitPriority); + sel.addEventListener('change', commitPriority); + }); + } + } + + function showCardPopout(card) { + var cardsContainer = card.parentNode; + var nextSibling = card.nextSibling; + card.classList.add('board-card-popout'); + card.draggable = false; + card.removeAttribute('draggable'); + var details = card.querySelector('.board-card-details'); + if (details) details.classList.remove('d-none'); + setupPopoutEditables(card); + var overlay = document.createElement('div'); + overlay.className = 'board-card-popout-overlay'; + overlay.appendChild(card); + function close() { + overlay.removeEventListener('click', closeOnBackdrop); + document.body.removeChild(overlay); + card.classList.remove('board-card-popout'); + card.setAttribute('draggable', 'true'); + card.draggable = true; + if (details) details.classList.add('d-none'); + if (nextSibling) { + cardsContainer.insertBefore(card, nextSibling); + } else { + cardsContainer.appendChild(card); + } + updateColumnBadge(cardsContainer.closest('.board-column')); + } + function closeOnBackdrop(e) { + if (e.target === overlay) close(); + } + overlay.addEventListener('click', closeOnBackdrop); + document.body.appendChild(overlay); + updateColumnBadge(cardsContainer.closest('.board-column')); + } + + function handleCardClick(e) { + if (didDrag) return; + var card = e.target.closest && e.target.closest('.board-card'); + if (!card || card.classList.contains('board-card-popout')) return; + e.preventDefault(); + showCardPopout(card); } function handleDragOver(e) { @@ -78,6 +294,7 @@ if (boardColumns) { boardColumns.addEventListener('dragstart', handleDragStart); boardColumns.addEventListener('dragend', handleDragEnd); + boardColumns.addEventListener('click', handleCardClick); } dropzones.forEach(function(el) { el.addEventListener('dragover', handleDragOver); diff --git a/pygitweb/static/icons/cloud-down.svg b/pygitweb/static/icons/cloud-down.svg new file mode 100644 index 0000000..4af025f --- /dev/null +++ b/pygitweb/static/icons/cloud-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pygitweb/static/icons/cloud-filled.svg b/pygitweb/static/icons/cloud-filled.svg new file mode 100644 index 0000000..72d35f9 --- /dev/null +++ b/pygitweb/static/icons/cloud-filled.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pygitweb/static/icons/cloud-storm.svg b/pygitweb/static/icons/cloud-storm.svg new file mode 100644 index 0000000..87ed0c9 --- /dev/null +++ b/pygitweb/static/icons/cloud-storm.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pygitweb/static/icons/cloud-up.svg b/pygitweb/static/icons/cloud-up.svg new file mode 100644 index 0000000..1016ddd --- /dev/null +++ b/pygitweb/static/icons/cloud-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pygitweb/static/icons/cloud.svg b/pygitweb/static/icons/cloud.svg new file mode 100644 index 0000000..44b8086 --- /dev/null +++ b/pygitweb/static/icons/cloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pygitweb/static/main.css b/pygitweb/static/main.css index 961e7bd..d3864b3 100644 --- a/pygitweb/static/main.css +++ b/pygitweb/static/main.css @@ -623,3 +623,71 @@ tbody tr:hover { .board-column .text-muted { color: var(--pgw-text-muted) !important; } + +/* Board: Sync status icons (mask so currentColor is respected when loaded) */ +.board-card-icon-wrap { + opacity: 0.7; + color: var(--pgw-text-muted); +} +.board-card-icon { + display: inline-block; + width: 20px; + height: 20px; + background-color: currentColor; + -webkit-mask-image: url(/static/icons/cloud.svg); + mask-image: url(/static/icons/cloud.svg); + -webkit-mask-size: contain; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; +} +.board-card .board-card-title { + padding-right: 1.75rem; +} + +/* Board card popout: overlay and card on top of the board (above navbar and Bootstrap modals) */ +.board-card-popout-overlay { + position: fixed; + inset: 0; + z-index: 1060; + background-color: rgba(0, 0, 0, 0.35); + display: flex; + align-items: center; + justify-content: center; + padding: 1.5rem; + box-sizing: border-box; +} +.board-card-popout-overlay .board-card-popout { + position: relative; + z-index: 1061; + max-width: 40rem; + width: 100%; + pointer-events: auto; + box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); +} + +/* Popout card: editable fields (click to edit) */ +.board-card-popout .board-card-editable, +.board-card-popout .board-card-title.board-card-editable { + cursor: pointer; + border-radius: 0.25rem; + min-height: 1.5em; +} +.board-card-popout .board-card-editable:hover, +.board-card-popout .board-card-title.board-card-editable:hover { + background-color: var(--pgw-bg-muted); +} +.board-card-popout .board-card-title-edit, +.board-card-popout .board-card-description-edit, +.board-card-popout .board-card-due-date-edit, +.board-card-popout .board-card-status-edit, +.board-card-popout .board-card-priority-edit { + min-width: 10rem; + width: 100%; +} +.board-card-popout .board-card-description-edit { + min-height: 4rem; + resize: vertical; +} diff --git a/pygitweb/templates/board_card.html b/pygitweb/templates/board_card.html index 7154ce6..10faa43 100644 --- a/pygitweb/templates/board_card.html +++ b/pygitweb/templates/board_card.html @@ -1,6 +1,7 @@ -{# Static card structure. When `task` is provided and truthy, title and meta are filled (server); otherwise empty for template clone / JS fill. #} +{# Static card structure. When `task` is provided and truthy, title and meta are filled (server); otherwise empty for template clone / JS fill. .board-card-details is hidden on the small card and shown in the popout. #}
-
+
+
{% if task %}{{ task.title or 'Untitled' }}{% endif %}
{% if task and task.description %}{{ task.description }}{% else %}{% endif %}
@@ -26,5 +27,14 @@ 0 comments {% endif %}
+
+
Description
{% if task and task.description %}{{ task.description }}{% else %}{% endif %}
+
Due date
{% if task and task.due_date %}{{ task.due_date }}{% else %}None{% endif %}
+
Last modified
{% if task and task.updated_at %}{{ task.updated_at }}{% else %}None{% endif %}
+
Status
{% if task %}{{ task.status or 'TODO' }}{% else %}TODO{% endif %}
+
Priority
{% if task and task.priority %}{{ task.priority }}{% else %}LOW{% endif %}
+
Assignee
{% if task and task.assignee %}{{ task.assignee }}{% else %}None{% endif %}
+
Comments
{% if task and task.comments_count %}{{ task.comments_count }} comment{{ 's' if task.comments_count != 1 else '' }}{% else %}0 comments{% endif %}
+