Skip to content

GitLab

Commit de78236f authored by ransome1's avatar ransome1
Browse files

Switching between text line and textarea has been improved

parent 7c44bc66
Expand all Hide whitespace changes
Inline Side-by-side
package.json
View file @ de78236f
......@@ -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 ."
},
......
src/css/style.css
View file @ de78236f
......@@ -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;
......
src/css/style.css.map
View file @ de78236f
This diff is collapsed.
src/index.html
View file @ de78236f
......@@ -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>
......
src/js/form.mjs
View file @ de78236f
......@@ -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");
}
......
src/js/view.mjs
View file @ de78236f
......@@ -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");
......
src/scss/drawer.scss
View file @ de78236f
......@@ -144,6 +144,7 @@
}
.todoFilterHint {
cursor: pointer;
opacity: 0.5;
}
}
table tr td:nth-child(odd) {
......
test/preferences_existent/user-preferences.json
View file @ de78236f
{"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
test/todoModal.js
View file @ de78236f
......@@ -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");
// })
})
Supports Markdown
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