Commit 71782d9a authored by ransome1's avatar ransome1
Browse files

Filter tags in rows are bow clickable

parent 8c560070
{
"name": "sleek",
"productName": "sleek",
"version": "1.1.3-rc.2",
"version": "1.1.3-rc.3",
"description": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
"synopsis": "Todo app based on todo.txt for Linux, Windows and MacOS, free and open-source",
"category": "ProjectManagement",
......
......@@ -1985,7 +1985,6 @@ body.compact #autoCompleteContainer h4 {
}
#todoTable .todo {
display: flex;
cursor: pointer;
}
#todoTable .todo.completed .cell {
filter: opacity(50%) grayscale(100%);
......@@ -1999,15 +1998,19 @@ body.compact #autoCompleteContainer h4 {
margin: 0 1em 0 0;
height: auto;
}
#todoTable .cell span.tag {
#todoTable .cell a.tag {
text-decoration: none;
margin: 0 0.25em 0 0;
}
#todoTable .cell span.tag.projects {
#todoTable .cell a.tag.projects {
background: #f1d6f1;
}
#todoTable .cell span.tag.contexts {
#todoTable .cell a.tag.contexts {
background: #c5ede3;
}
#todoTable .cell.categories .tag {
margin-left: 0.25em;
}
#todoTable .cell.checkbox a {
font-size: 1.25em;
}
......@@ -2018,11 +2021,9 @@ body.compact #autoCompleteContainer h4 {
#todoTable a.cell.text {
width: auto;
flex: 1;
cursor: pointer;
color: #5a5a5a !important;
}
#todoTable a.cell.text .categories {
margin-right: 0.5em;
}
#todoTable a.cell.text button {
font-size: 1.1em;
font-family: FreeSansBold;
......@@ -2038,9 +2039,6 @@ body.compact #autoCompleteContainer h4 {
font-size: 0.9em;
padding: 0.1em 0.4em !important;
}
#todoTable a.cell.text .text {
margin-right: 0.5em;
}
#todoTable .cell.text:focus-visible {
background: #f0f0f0;
border-radius: 0.65em;
......@@ -2076,13 +2074,13 @@ body.compact #autoCompleteContainer h4 {
color: #5a5a5a;
position: relative;
white-space: nowrap;
margin: 0 0.25em 0 0;
margin-left: 0.25em;
text-transform: lowercase;
}
#todoTable .cell.itemDueDate .fa-sort-down {
position: absolute;
right: 0.2em;
bottom: 2.1em;
top: -0.35em;
display: none;
}
#todoTable .cell.itemDueDate .tags {
......@@ -2328,7 +2326,7 @@ body.compact #autoCompleteContainer h4 {
}
.datepicker-footer .datepicker-controls button {
margin: calc(.375rem - 1px) 0.375rem;
margin: calc(0.375rem - 1px) 0.375rem;
border-radius: 2px;
width: 100%;
font-size: 0.75rem;
......
This diff is collapsed.
......@@ -2,7 +2,7 @@
import "../../node_modules/jstodotxt/jsTodoExtensions.js";
import { getActiveFile, userData, appData, handleError, translations, setUserData, startBuilding, getConfirmation, resetModal } from "../render.js";
import { _paq } from "./matomo.mjs";
import { categories } from "./filters.mjs";
import { categories, selectFilter } from "./filters.mjs";
import { generateRecurrence } from "./recurrences.mjs";
import { convertDate, isToday, isTomorrow, isPast } from "./date.mjs";
import { show } from "./form.mjs";
......@@ -47,7 +47,7 @@ const tableContainerContent = document.createDocumentFragment();
const todoTableBodyRowTemplate = document.createElement("div");
const todoTableBodyCellCheckboxTemplate = document.createElement("div");
const todoTableBodyCellTextTemplate = document.createElement("a");
const tableContainerCategoriesTemplate = document.createElement("span");
const tableContainerCategoriesTemplate = document.createElement("div");
const todoTableBodyCellPriorityTemplate = document.createElement("div");
const todoTableBodyCellDueDateTemplate = document.createElement("span");
const todoTableBodyCellRecurrenceTemplate = document.createElement("span");
......@@ -95,7 +95,7 @@ function configureTodoTableTemplate() {
todoTableBodyCellTextTemplate.setAttribute("class", "cell text");
todoTableBodyCellTextTemplate.setAttribute("tabindex", 0);
todoTableBodyCellTextTemplate.setAttribute("href", "#");
tableContainerCategoriesTemplate.setAttribute("class", "categories");
tableContainerCategoriesTemplate.setAttribute("class", "cell categories");
todoTableBodyCellDueDateTemplate.setAttribute("class", "cell itemDueDate");
todoTableBodyCellRecurrenceTemplate.setAttribute("class", "cell recurrence");
return Promise.resolve("Success: Table templates set up");
......@@ -318,19 +318,25 @@ function generateTableRow(todo) {
if(userData.matomoEvents) _paq.push(["trackEvent", "Todo-Table", "Click on Todo item"]);
}
}
// add the text cell to the row
todoTableBodyRow.appendChild(todoTableBodyCellText);
// cell for the categories
categories.forEach(category => {
if(todo[category] && category!="priority") {
todo[category].forEach(element => {
let todoTableBodyCellCategory = document.createElement("span");
let todoTableBodyCellCategory = document.createElement("a");
todoTableBodyCellCategory.setAttribute("class", "tag " + category);
todoTableBodyCellCategory.onclick = function() {
console.log(element);
selectFilter(element, category);
}
todoTableBodyCellCategory.innerHTML = element;
tableContainerCategories.appendChild(todoTableBodyCellCategory);
});
}
});
// only add the categories to text cell if it has child nodes
if(tableContainerCategories.hasChildNodes()) todoTableBodyCellText.appendChild(tableContainerCategories);
if(tableContainerCategories.hasChildNodes()) todoTableBodyRow.appendChild(tableContainerCategories);
// check for and add a given due date
if(todo.due) {
var tag = convertDate(todo.due);
......@@ -350,16 +356,15 @@ function generateTableRow(todo) {
</div>
<i class="fas fa-sort-down"></i>`;
// append the due date to the text item
todoTableBodyCellText.appendChild(todoTableBodyCellDueDate);
todoTableBodyRow.appendChild(todoTableBodyCellDueDate);
}
// add recurrence icon
if(todo.rec) {
todoTableBodyCellRecurrence.innerHTML = "<i class=\"fas fa-redo\"></i>";
// append the due date to the text item
todoTableBodyCellText.appendChild(todoTableBodyCellRecurrence);
todoTableBodyRow.appendChild(todoTableBodyCellRecurrence);
}
// add the text cell to the row
todoTableBodyRow.appendChild(todoTableBodyCellText);
todoTableBodyRow.addEventListener("contextmenu", event => {
//todoContextUseAsTemplate.focus();
todoContext.style.left = event.x + "px";
......
......@@ -113,7 +113,6 @@
}
.todo {
display: flex;
cursor: pointer;
}
.todo.completed {
.cell {
......@@ -128,16 +127,22 @@
padding: .75em 0;
margin: 0 1em 0 0;
height: auto;
span.tag {
a.tag {
text-decoration: none;
margin: 0 0.25em 0 0;
}
span.tag.projects {
a.tag.projects {
background: $sleek-projects-button;
}
span.tag.contexts {
a.tag.contexts {
background: $sleek-contexts-button;
}
}
.cell.categories {
.tag {
margin-left: .25em;
}
}
.cell.checkbox {
a {
font-size: 1.25em;
......@@ -152,10 +157,8 @@
a.cell.text {
width: auto;
flex: 1;
cursor: pointer;
color: $dark-grey!important;
.categories {
margin-right: .5em;
}
button {
font-size: 1.1em;
font-family: FreeSansBold;
......@@ -171,9 +174,9 @@
padding: 0.1em 0.4em!important;
}
}
.text {
margin-right: .5em;
}
// .text {
// margin-right: .5em;
// }
}
.cell.text:focus-visible {
background: $almost-white;
......@@ -210,12 +213,12 @@
color: $dark-grey;
position: relative;
white-space: nowrap;
margin: 0 .25em 0 0;
margin-left: .25em;
text-transform: lowercase;
.fa-sort-down {
position: absolute;
right: 0.2em;
bottom: 2.1em;
top: -0.35em;
display: none;
}
.tags {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment