Commit de78236f authored by ransome1's avatar ransome1
Browse files

Switching between text line and textarea has been improved

parent 7c44bc66
......@@ -102,7 +102,7 @@
"pack": "yarn build:css && yarn build:pegjs && electron-builder --dir",
"lint": "eslint --ext .js, src --ext .mjs, src",
"test": "mocha --timeout 10000",
"test1": "mocha ./test/createTodos.js --timeout 10000",
"test1": "mocha ./test/todoModal.js --timeout 10000",
"sass": "sass -w src/scss/style.scss:src/css/style.css",
"start": "yarn sass & electron ."
},
......
......@@ -1615,6 +1615,7 @@ body.compact #autoCompleteContainer h4 {
}
#drawerContainer .drawer section .todoFilterHint {
cursor: pointer;
opacity: 0.5;
}
#drawerContainer .drawer table tr td:nth-child(odd) {
width: auto;
......
This diff is collapsed.
......@@ -380,7 +380,7 @@
<footer class="card-footer">
<button id="btnSave" class="card-footer-item" tabindex="0"></button>
<button id="btnItemStatus" class="card-footer-item" tabindex="0"></button>
<button class="card-footer-item" role="cancel" tabindex="0"></button>
<button id="btnCancel" class="card-footer-item" role="cancel" tabindex="0"></button>
</footer>
</div>
</div>
......
......@@ -252,8 +252,6 @@ function setDueDate(days) {
}
function show(todo, templated) {
try {
// switch to textarea if needed
if(userData.useTextarea) toggleInputSize("input");
// remove any previously set data-item attributes
//modalForm.removeAttribute("data-item");
modalForm.setAttribute("data-item", "");
......@@ -288,11 +286,13 @@ function show(todo, templated) {
modalForm.setAttribute("data-item", todo.toString());
// this is an existing todo task to be edited
// replace special char with line breaks before passing it to textarea
if(userData.useTextarea) document.getElementById("modalFormInput").value = todo.toString().replaceAll(String.fromCharCode(16),"\r\n");
//if(userData.useTextarea) document.getElementById("modalFormInput").value = todo.toString().replaceAll(String.fromCharCode(16),"\r\n");
// replace special char with space before passing it to regular input
if(!userData.useTextarea) document.getElementById("modalFormInput").value = todo.toString().replaceAll(String.fromCharCode(16)," ");
//if(!userData.useTextarea) document.getElementById("modalFormInput").value = todo.toString().replaceAll(String.fromCharCode(16)," ");
//document.getElementById("modalFormInput").value = todo.toString();
//modalTitle.innerHTML = translations.editTodo;
document.getElementById("modalFormInput").value = todo.toString();
btnItemStatus.classList.remove("is-hidden");
}
// only show the complete button on open items
......@@ -317,6 +317,8 @@ function show(todo, templated) {
//modalTitle.innerHTML = translations.addTodo;
btnItemStatus.classList.add("is-hidden");
}
// switch to textarea if needed
if(userData.useTextarea) toggleInputSize("input");
// adjust size of picker inputs
resizeInput(datePickerInput);
resizeInput(recurrencePickerInput);
......@@ -427,15 +429,28 @@ function submitForm() {
function toggleInputSize(type) {
let newInputElement;
let value = "";
if(document.getElementById("modalFormInput").value!=="") {
value = document.getElementById("modalFormInput").value.replaceAll("\n", String.fromCharCode(16));
} /*else if(modalForm.getAttribute("data-item")!=="") {
value = modalForm.getAttribute("data-item").replaceAll("\n", String.fromCharCode(16));
}*/
//modalForm.setAttribute("data-item", document.getElementById("modalFormInput").value);
switch (type) {
case "input":
newInputElement = document.createElement("textarea");
newInputElement.value = value.replaceAll(String.fromCharCode(16),"\r\n");
modalFormInputResize.setAttribute("data-input-type", "textarea");
modalFormInputResize.innerHTML = "<i class=\"fas fa-compress-alt\"></i>";
setUserData("useTextarea", true);
break;
case "textarea":
newInputElement = document.createElement("input");
//newInputElement.value = value.replaceAll(String.fromCharCode(16)," ");
newInputElement.value = value;
newInputElement.type = "text";
modalFormInputResize.setAttribute("data-input-type", "input");
modalFormInputResize.innerHTML = "<i class=\"fas fa-expand-alt\"></i>";
......@@ -445,18 +460,25 @@ function toggleInputSize(type) {
newInputElement.id = "modalFormInput";
newInputElement.setAttribute("tabindex", 0);
newInputElement.setAttribute("class", "input is-medium");
// if(userData.useTextarea) {
// value.replaceAll(String.fromCharCode(16),"\r\n");
// } else {
// value.replaceAll(String.fromCharCode(16)," ");
// }
//newInputElement.value = value;
// replace old element with the new one
document.getElementById("modalFormInput").replaceWith(newInputElement);
// replace special char with line break before passing it to textarea
if(userData.useTextarea && modalForm.getAttribute("data-item")) document.getElementById("modalFormInput").value = document.getElementById("modalForm").getAttribute("data-item").replaceAll(String.fromCharCode(16),"\r\n");
//if(userData.useTextarea && modalForm.getAttribute("data-item")) document.getElementById("modalFormInput").value = document.getElementById("modalForm").getAttribute("data-item").replaceAll(String.fromCharCode(16),"\r\n");
// replace special char with space before passing it to regular input
if(!userData.useTextarea && modalForm.getAttribute("data-item")) document.getElementById("modalFormInput").value = document.getElementById("modalForm").getAttribute("data-item").replaceAll(String.fromCharCode(16)," ");
//if(!userData.useTextarea && modalForm.getAttribute("data-item")) document.getElementById("modalFormInput").value = document.getElementById("modalForm").getAttribute("data-item").replaceAll(String.fromCharCode(16)," ");
positionAutoCompleteContainer();
resizeInput(document.getElementById("modalFormInput"));
// document.getElementById("modalFormInput").addEventListener("keyup", () => {
// modalFormInputEvent();
// });
document.getElementById("modalFormInput").onfocus = function() {
modalForm.classList.add("is-focused");
}
......
......@@ -114,8 +114,10 @@ function toggle(toggleName, variable) {
const toggle = document.getElementById(toggleName);
if(userData[toggle.id]==false || variable) {
userData[toggle.id] = true;
toggle.checked = true;
} else {
userData[toggle.id] = false;
toggle.checked = false;
}
if(toggle.id==="compactView" && userData[toggle.id]) {
body.classList.add("compact");
......
......@@ -144,6 +144,7 @@
}
.todoFilterHint {
cursor: pointer;
opacity: 0.5;
}
}
table tr td:nth-child(odd) {
......
{"theme":"light","width":1538,"height":863,"horizontal":382,"vertical":577,"maximizeWindow":false,"notifications":true,"useTextarea":false,"compactView":false,"matomoEvents":false,"drawerWidth":"500","showDueIsPast":true,"showDueIsFuture":true,"showDueIsToday":true,"showHidden":false,"showCompleted":true,"sortCompletedLast":false,"sortBy":["priority","dueString","contexts","projects"],"zoom":"100","tray":false,"showEmptyFilters":true,"dismissedNotifications":[-1319247018],"dismissedMessages":[],"hideFilterCategories":[],"language":"en","uid":"TESTING","path":"test/preferences_existent/todo.txt","files":[[1,"test/preferences_existent/todo.txt"]],"file":"test/preferences_existent/todo.txt","filterDrawer":false,"selectedFilters":[],"viewDrawer":false,"sortByLevel":["priority","dueString","contexts","projects"],"deferredTodos":true,"fileTabs":true}
\ No newline at end of file
{"theme":"light","width":1538,"height":863,"horizontal":46,"vertical":29,"maximizeWindow":true,"notifications":true,"useTextarea":false,"compactView":false,"matomoEvents":false,"drawerWidth":"500","showDueIsPast":true,"showDueIsFuture":true,"showDueIsToday":true,"showHidden":false,"showCompleted":true,"sortCompletedLast":false,"sortBy":["priority","dueString","contexts","projects"],"zoom":"100","tray":false,"showEmptyFilters":true,"dismissedNotifications":[-1319247018],"dismissedMessages":[],"hideFilterCategories":[],"language":"en","uid":"TESTING","path":"test/preferences_existent/todo.txt","files":[[1,"test/preferences_existent/todo.txt"]],"file":"test/preferences_existent/todo.txt","filterDrawer":false,"selectedFilters":[],"viewDrawer":false,"sortByLevel":["priority","dueString","contexts","projects"],"deferredTodos":true,"fileTabs":true}
\ No newline at end of file
......@@ -27,47 +27,124 @@ describe("Add/Edit window", function () {
const todoTableContainer = await app.client.$("#todoTable");
const todos = await todoTableContainer.$$(".todo");
const todo = await todos[8];
setTimeout(async () => {
await todo.click();
await modalForm.waitForDisplayed({ timeout: 10000 });
const modalFormInput = await app.client.$("#modalFormInput");
const value = await modalFormInput.getValue();
assert.equal(value, "2021-04-03 Todo with due date tomorrow due:2021-06-11");
}, 1000);
await todo.click();
await modalForm.waitForDisplayed({ timeout: 10000 });
const modalFormInput = await app.client.$("#modalFormInput");
const value = await modalFormInput.getValue();
assert.equal(value, "2021-04-03 Todo with due date tomorrow due:2021-06-11");
})
it("Todo is clicked and a context is appended", async () => {
const modalForm = await app.client.$("#modalForm");
const todoTableContainer = await app.client.$("#todoTable");
const todos = await todoTableContainer.$$(".todo");
const todo = await todos[8];
await todo.click();
await modalForm.waitForDisplayed({ timeout: 10000 });
let modalFormInput = await app.client.$("#modalFormInput");
let value = await modalFormInput.getValue();
if(value!=="2021-04-03 Todo with due date tomorrow due:2021-06-11") throw new Error("Value differs from what is expected");
await modalFormInput.setValue(value + " @");
const autoCompleteContainer = await app.client.$("#autoCompleteContainer");
const contexts = await autoCompleteContainer.$$("button");
await contexts[2].click();
modalFormInput = await app.client.$("#modalFormInput");
value = await modalFormInput.getValue();
if(value!=="2021-04-03 Todo with due date tomorrow due:2021-06-11 @phone ") throw new Error("Value differs from what is expected");
})
it("Modal is opened, autocomplete shown and third project added to todo input field", async () => {
const navBtnAddTodo = await app.client.$("#navBtnAddTodo");
let modalFormInput = await app.client.$("#modalFormInput");
const autoCompleteContainer = await app.client.$("#autoCompleteContainer");
setTimeout(async () => {
navBtnAddTodo.click();
await modalFormInput.setValue("+");
const projects = await autoCompleteContainer.$$(".button");
projects[2].click();
modalFormInput = await app.client.$("#modalFormInput");
const value = await modalFormInput.getValue();
assert.equal(value, "+PeaceLoveAndHappiness ")
}, 1000);
navBtnAddTodo.click();
await modalFormInput.setValue("+");
const projects = await autoCompleteContainer.$$("button");
projects[2].click();
modalFormInput = await app.client.$("#modalFormInput");
const value = await modalFormInput.getValue();
assert.equal(value, "+PeaceLoveAndHappiness ")
})
//
it("Modal is opened, input is resized, autocomplete shown and second context added to todo input field", async () => {
const navBtnAddTodo = await app.client.$("#navBtnAddTodo");
const autoCompleteContainer = await app.client.$("#autoCompleteContainer");
let modalFormInput = await app.client.$("#modalFormInput");
let modalFormInputResize = await app.client.$("#modalFormInputResize");
setTimeout(async () => {
navBtnAddTodo.click();
modalFormInputResize.click();
await modalFormInput.setValue("@");
const contexts = await autoCompleteContainer.$$(".button");
await contexts[2].click();
modalFormInput = await app.client.$("#modalFormInput");
const value = await modalFormInput.getValue();
modalFormInputResize = await app.client.$("#modalFormInputResize");
modalFormInputResize.click();
assert.equal(value, "@phone ")
}, 1000);
navBtnAddTodo.click();
modalFormInputResize.click();
await modalFormInput.setValue("@");
const contexts = await autoCompleteContainer.$$("button");
await contexts[2].click();
modalFormInput = await app.client.$("#modalFormInput");
const value = await modalFormInput.getValue();
modalFormInputResize = await app.client.$("#modalFormInputResize");
modalFormInputResize.click();
assert.equal(value, "@phone ")
})
it("Modal is opened, input field is resized to textarea, multi lined content is inserted, switched back to input and checked for correct replacement", async () => {
const modalForm = await app.client.$("#modalForm");
const navBtnAddTodo = await app.client.$("#navBtnAddTodo");
await navBtnAddTodo.waitForClickable({ timeout: 10000 });
navBtnAddTodo.click();
await modalForm.waitForDisplayed({ timeout: 10000 });
let modalFormInputResize = await app.client.$("#modalFormInputResize");
modalFormInputResize.click();
let modalFormInput = await app.client.$("#modalFormInput");
let tag = await modalFormInput.getProperty("tagName");
if(tag!=="TEXTAREA") throw new Error("Input has not switched to textarea");
await modalFormInput.setValue("line1\nline2\nline3\nline4");
modalFormInputResize.click();
modalFormInput = await app.client.$("#modalFormInput");
let value = await modalFormInput.getValue();
if(value!=="line1line2line3line4") throw new Error("Switch did no replace with correct value");
})
// it("Modal is opened, footer buttons are clicked", async () => {
// const modalForm = await app.client.$("#modalForm");
// const todoTableContainer = await app.client.$("#todoTable");
// let todos = await todoTableContainer.$$(".todo");
// let todo = await todos[8];
// todo.click();
//
// const btnSave = await app.client.$("#btnSave");
// btnSave.click();
//
// todo.click();
// await modalForm.waitForDisplayed({ timeout: 10000 });
//
// const btnCancel = await app.client.$("#btnCancel");
// btnCancel.click();
//
// todo.click();
// await modalForm.waitForDisplayed({ timeout: 10000 });
//
// let btnItemStatus = await app.client.$("#btnItemStatus");
// btnItemStatus.click();
//
// todo.click();
// //await modalForm.waitForDisplayed({ timeout: 10000 });
//
// let modalFormInput = await app.client.$("#modalFormInput");
// let value = await modalFormInput.getValue();
//
// console.log(modalFormInput);
//
// if(value.search("x 202" >= 0)) throw new Error("1Got an unexpected value in input field");
//
// btnItemStatus.click();
//
// todos = await todoTableContainer.$$(".todo");
// todo = await todos[8];
//
// todo.click();
// await modalForm.waitForDisplayed({ timeout: 10000 });
//
// modalFormInput = await app.client.$("#modalFormInput");
// value = await modalFormInput.getValue();
//
// if(value.search("x 202" === -1)) throw new Error("2Got an unexpected value in input field");
// })
})
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