Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
ransome
sleek
Commits
de78236f
Commit
de78236f
authored
Jul 31, 2021
by
ransome1
Browse files
Switching between text line and textarea has been improved
parent
7c44bc66
Changes
9
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.
Click to expand it.
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
\n
line2
\n
line3
\n
line4
"
);
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");
// })
})
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment