Merge branch 'develop'

README.md

@@ -76,6 +76,7 @@ A prioritized backlog of new features and known issues can be found <a href="htt
   - start dates
   - <a href="https://github.com/ransome1/sleek/wiki/Recurring-todos">recurrences</a>
 * Todo-List can be grouped and sorted by priorities, due dates, contexts or projects
+* The sorting order can be defined on all 4 levels
 * Todos can be filtered by contexts, projects and priorities
 * Todos can be looked up by full-text search
 * Autocomplete function suggests available contexts and projects
@@ -101,6 +102,7 @@ A prioritized backlog of new features and known issues can be found <a href="htt
   - French
   - Simplified Chinese
   - Brazilian Portugese
+  - Japanese
 * sleek can be minimized to tray
 * Existing todos can be used as templates for new ones
 

package.json

 {
   "name": "sleek",
   "productName": "sleek",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "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",
@@ -92,17 +92,18 @@
     "artifactName": "${productName}-${version}-${arch}.${ext}"
   },
   "scripts": {
-    "build:windows": "electron-builder -w --publish never",
-    "build:macos": "electron-builder -m --publish never",
-    "build:linux": "electron-builder -l --publish never",
+    "build:windows": "yarn build:css && yarn build:pegjs && electron-builder -w --publish never",
+    "build:macos": "yarn build:css && yarn build:pegjs && electron-builder -m --publish never",
+    "build:linux": "yarn build:css && yarn build:pegjs && electron-builder -l --publish never",
     "build:appx": "electron-builder -w appx --publish never",
     "build:pacman": "electron-builder -l pacman --publish never",
-    "build:appimage": "yarn build:css && electron-builder -l AppImage --publish never",
+    "build:appimage": "yarn build:css && yarn build:pegjs && electron-builder -l AppImage --publish never",
     "pack": "electron-builder --dir",
     "lint": "eslint --ext .js, src --ext .mjs, src",
     "test": "mocha --timeout 10000",
     "test1": "mocha ./test/onboarding.js --timeout 10000",
     "build:css": "sass src/scss/style.scss:src/css/style.css",
+    "build:pegjs": "peggy --format es --output src/js/filterlang.mjs src/js/filterlang.pegjs",
     "sass": "sass -w src/scss/style.scss:src/css/style.css",
     "start": "yarn sass & electron ."
   },
@@ -121,7 +122,7 @@
   },
   "devDependencies": {
     "electron": "12.0.10",
-    "electron-builder": "22.10.5",
+    "electron-builder": "^22.11.7",
     "eslint": "^7.25.0",
     "mocha": "^9.0.0",
     "sass": "^1.34.1",

src/configs/dragndrop.mjs

+/* Made with love by @fitri
+ This is a component of my ReactJS project
+ https://codepen.io/fitri/full/oWovYj/ */
+
+"use strict";
+import { reorderSortingLevel } from "../render.js";
+
+function enableDragSort(listClass) {
+  const sortableLists = document.getElementsByClassName(listClass);
+  Array.prototype.map.call(sortableLists, (list) => {enableDragList(list)});
+}
+
+function enableDragList(list) {
+  Array.prototype.map.call(list.children, (item) => {enableDragItem(item)});
+}
+
+function enableDragItem(item) {
+  item.setAttribute("draggable", true)
+  item.ondrag = handleDrag;
+  item.ondragend = handleDrop;
+}
+
+function handleDrag(item) {
+  const selectedItem = item.target,
+        list = selectedItem.parentNode,
+        x = event.clientX,
+        y = event.clientY;
+
+  selectedItem.classList.add("drag-sort-active");
+  let swapItem = document.elementFromPoint(x, y) === null ? selectedItem : document.elementFromPoint(x, y);
+
+  if (list === swapItem.parentNode) {
+    swapItem = swapItem !== selectedItem.nextSibling ? swapItem : swapItem.nextSibling;
+    list.insertBefore(selectedItem, swapItem);
+  }
+}
+
+function handleDrop(item) {
+  item.target.classList.remove("drag-sort-active");
+  reorderSortingLevel();
+}
+
+//(()=> {enableDragSort("drag-sort-enable")})();
+
+export { enableDragSort };

src/configs/i18next.config.js

@@ -7,7 +7,7 @@ const i18nextOptions = {
   fallbackLng: "en",
   namespace: "translation",
   defaultNS: "translation",
-  supportedLngs: ["de", "en", "it", "es", "fr", "zh", "pt"],
+  supportedLngs: ["de", "en", "it", "es", "fr", "zh", "pt", "jp"],
   debug: false,
   preload: fs.readdirSync(path.join(__dirname, "../locales")).filter((fileName) => {
     const joinedPath = path.join(path.join(__dirname, "../locales"), fileName)

src/css/style.css

@@ -19,16 +19,16 @@ body.dark strong {
   color: #CCCDCF;
 }
 body.dark input,
-body.dark select,
-body.dark textarea {
+body.dark select {
   border: none !important;
-  background: #2d2d2d !important;
+  background: transparent !important;
   color: white !important;
 }
-body.dark input[type=search]::-webkit-search-cancel-button {
-  background-color: white;
-  -webkit-mask-image: url("../img/svg/times-circle.svg");
-  mask-image: url("../img/svg/times-circle.svg");
+body.dark input[type=text],
+body.dark textarea {
+  background: #2d2d2d !important;
+  border: none;
+  color: white;
 }
 body.dark input:active,
 body.dark input:focus,
@@ -200,6 +200,7 @@ body.dark #modalForm i {
 body.dark #modalForm button {
   color: white;
   border-color: #3B3B3B !important;
+  border-right: 1px solid #212224 !important;
   background: transparent !important;
 }
 body.dark #modalForm button:hover {
@@ -247,6 +248,10 @@ body.dark #drawerContainer .drawer h4.is-4 {
 body.dark #drawerContainer .drawer h4.is-4 i {
   color: #CCCDCF !important;
 }
+body.dark #drawerContainer .drawer::-webkit-scrollbar-thumb:window-inactive,
+body.dark #drawerContainer .drawer::-webkit-scrollbar-thumb {
+  background: #4a4a4a;
+}
 body.dark #drawerContainer #drawerClose {
   background: #3B3B3B !important;
 }
@@ -256,6 +261,10 @@ body.dark #drawerContainer svg {
 body.dark #drawerContainer #btnFiltersResetFilters {
   background: #212224 !important;
 }
+body.dark #todoTableWrapper::-webkit-scrollbar-thumb:window-inactive,
+body.dark #todoTableWrapper::-webkit-scrollbar-thumb {
+  background: #3B3B3B;
+}
 body.dark #filterContext .card {
   background: #3B3B3B;
 }
@@ -322,11 +331,6 @@ body.dark .modal .modal-content .card {
 body.dark .modal .modal-content .card .card-header-title {
   color: white;
 }
-body.dark .modal .modal-content .card .card-content {
-  /*button {
-    background: $darker-grey!important;
-  }*/
-}
 body.dark .modal .modal-content .card .card-footer,
 body.dark .modal .modal-content .card .card-footer-item {
   border-color: #2d2d2d;
@@ -382,6 +386,16 @@ body.dark .modal.content .tabs li.is-active a {
   color: white;
   border-color: #CCCDCF;
 }
+body.dark #sortByContainer li {
+  background: #2d2d2d;
+  color: white;
+}
+body.dark #sortByContainer li i {
+  color: #ebebeb;
+}
+body.dark #sortByContainer li.drag-sort-active {
+  border-left: 0.2em solid white;
+}
 body.dark .message.fixed {
   background: transparent !important;
 }
@@ -469,6 +483,10 @@ body {
   -ms-user-select: none;
 }
 
+body::-webkit-scrollbar {
+  display: none;
+}
+
 button, button:focus, button:active, button:active, button:after, button::before, button:active:after, .button, .button-is-white {
   border: none !important;
   box-shadow: none !important;
@@ -504,9 +522,6 @@ button, button:focus, button:active, button:active, button:after, button::before
 .is-greyed-out {
   filter: opacity(75%) grayscale(100%);
 }
-.is-greyed-out .tag {
-  display: none;
-}
 
 table {
   width: 100%;
@@ -538,10 +553,6 @@ table.files tr td:last-child i {
   color: #3273dc;
 }
 
-body::-webkit-scrollbar {
-  display: none;
-}
-
 :focus,
 :focus-visible {
   outline: none;
@@ -549,48 +560,34 @@ body::-webkit-scrollbar {
 }
 
 button:focus-visible,
-a:focus-visible {
-  outline: 2px solid #3273dc !important;
+a:focus-visible,
+li:focus-visible,
+select:focus,
+input:focus,
+textarea:focus,
+input[type=text]:focus {
+  box-shadow: 0 0 0 2px #3273dc inset !important;
+  outline: none !important;
+  border: none !important;
 }
 
-input[type=search]::-webkit-search-cancel-button {
-  -webkit-appearance: none;
-  height: 1.15em;
-  width: 1.15em;
-  border-radius: 30em;
-  background-color: #4a4a4a;
-  -webkit-mask-image: url("../img/svg/times-circle.svg");
-  mask-image: url("../img/svg/times-circle.svg");
-  opacity: 0;
-  pointer-events: none;
-  cursor: pointer;
+input,
+select {
+  border: none !important;
+  color: #3273dc !important;
 }
 
-input[type=search]:focus::-webkit-search-cancel-button {
-  opacity: 0.8;
-  pointer-events: all;
+input[type=text] {
+  border: 1px solid #ccc !important;
+  color: #2d2d2d !important;
 }
 
-input:focus,
-select:focus,
-input.is-focused,
-input[type=search]:focus,
-textarea:focus,
-textarea.is-focused,
-textarea[type=search]:focus {
-  border: none;
-  box-shadow: 0 0 0 2px #3273dc !important;
-  outline: none;
+input[type=text]::placeholder {
+  color: #ccc !important;
 }
 
-input,
-input::placeholder,
-select {
-  width: auto;
-  font-size: 1em;
-  color: #3273dc;
-  box-shadow: none;
-  background: transparent;
+input::placeholder {
+  color: #3273dc !important;
 }
 
 input[type=number] {
@@ -602,11 +599,6 @@ input[type=number]::-webkit-outer-spin-button {
   -webkit-appearance: none;
 }
 
-input[type=checkbox]:focus {
-  outline: none;
-  box-shadow: none !important;
-}
-
 input[type=range] {
   -webkit-appearance: none;
   height: 0.25em;
@@ -682,6 +674,9 @@ nav ul:nth-child(2) {
 .contentContainer {
   height: 80%;
 }
+.contentContainer p {
+  padding: 0 10%;
+}
 
 #recurrencePicker {
   position: relative;
@@ -813,10 +808,13 @@ nav ul:nth-child(2) {
   top: -0.75em;
   z-index: 35;
 }
+#drawerContainer .drawer .button.is-greyed-out .tag {
+  display: none;
+}
 #drawerContainer .drawer h4.is-4 {
   font-size: 1.25em;
   font-family: FreeSansBold;
-  margin-bottom: 1.5em;
+  margin-bottom: 0.75em;
 }
 #drawerContainer .drawer h4.is-4.clickable {
   cursor: pointer;
@@ -829,21 +827,44 @@ nav ul:nth-child(2) {
   padding: 0;
   margin: 0 0 1.5em 0;
 }
-#drawerContainer .drawer table {
-  margin-bottom: 2em;
-}
 #drawerContainer .drawer table tr td:nth-child(odd) {
   width: auto;
   vertical-align: middle;
 }
 #drawerContainer .drawer table tr td:nth-child(even) {
-  width: 35%;
+  width: auto;
   text-align: center;
   padding-right: 0 !important;
 }
 #drawerContainer .drawer.is-active {
   display: block !important;
 }
+#drawerContainer .drawer::-webkit-scrollbar {
+  background-color: transparent;
+  width: 0.8em;
+}
+#drawerContainer .drawer::-webkit-scrollbar-thumb:window-inactive,
+#drawerContainer .drawer::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 5px;
+}
+#drawerContainer #viewDrawer .button {
+  margin: 0;
+}
+#drawerContainer #viewDrawer table tr th h3 {
+  margin-top: 1em;
+}
+
+#todoTableWrapper::-webkit-scrollbar {
+  background-color: transparent;
+  width: 0.8em;
+}
+
+#todoTableWrapper::-webkit-scrollbar-thumb:window-inactive,
+#todoTableWrapper::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 5px;
+}
 
 #drawerContainer:hover #drawerClose {
   display: inline-block;
@@ -887,23 +908,25 @@ nav ul:nth-child(2) {
   display: block;
 }
 
-#todoTable {
-  width: 100%;
-  min-width: 30em;
-  float: left;
-  display: none;
-  padding: 0 2.5em 1.5em 2.5em;
-}
-#todoTable #resultStats {
+#resultStats {
   width: 100%;
   display: none;
   text-align: center;
   padding: 0;
   white-space: nowrap;
 }
-#todoTable #resultStats.is-active {
+
+#resultStats.is-active {
   display: block;
 }
+
+#todoTable {
+  width: 100%;
+  min-width: 30em;
+  float: left;
+  display: none;
+  padding: 0 2.5em 1.5em 2.5em;
+}
 #todoTable #todoTableContainer {
   width: 100%;
   float: left;
@@ -928,7 +951,7 @@ nav ul:nth-child(2) {
 }
 #todoTable .group {
   min-height: 1em;
-  margin-top: 0.5em;
+  margin: 0.5em 0;
   border: none;
   font-family: FreeSansBold;
 }
@@ -945,147 +968,150 @@ nav ul:nth-child(2) {
 }
 #todoTable .todo {
   display: flex;
+  cursor: pointer;
 }
-#todoTable .cell {
+#todoTable .todo .cell {
   line-height: 1.7em;
   padding: 0.75em 0;
   margin-right: 1em;
   height: auto;
-  cursor: pointer;
 }
-#todoTable .cell .is-white {
+#todoTable .todo .cell .is-white {
   background: none;
 }
-#todoTable .cell span.tag {
+#todoTable .todo .cell span.tag {
   margin: 0 0.25em 0 0;
 }
-#todoTable .cell span.tag.projects {
+#todoTable .todo .cell span.tag.projects {
   background: #f1d6f1;
 }
-#todoTable .cell span.tag.contexts {
+#todoTable .todo .cell span.tag.contexts {
   background: #c5ede3;
 }
-#todoTable .cell.checkbox a {
+#todoTable .todo .cell.checkbox a {
   flex: 0 0 1em;
   font-size: 1.25em;
 }
-#todoTable .cell.text {
+#todoTable .todo .cell.text {
   width: auto;
   flex: 1;
   color: #4a4a4a;
   margin-right: 0;
 }
-#todoTable .cell.text .categories {
+#todoTable .todo .cell.text .categories {
   margin-right: 0.5em;
 }
-#todoTable .cell.text .button {
+#todoTable .todo .cell.text .button {
   font-size: 1.1em;
   font-family: FreeSansBold;
   height: auto;
   padding: 0 0.4em;
 }
-#todoTable .cell.text .priority {
+#todoTable .todo .cell.text .priority {
   background: transparent;
   color: #666666;
   margin-right: 0.5em;
 }
-#todoTable .cell.text .text {
+#todoTable .todo .cell.text .text {
   margin-right: 0.5em;
 }
-#todoTable .cell.spacer {
+#todoTable .todo .cell.spacer {
   width: 0.5em;
   background: transparent;
 }
-#todoTable .cell.priority {
+#todoTable .todo .cell.priority {
   background: #ccc;
   flex: 0 0 0.5em;
   opacity: 0.5;
 }
-#todoTable .cell.priority.A,
-#todoTable .cell .priority.A {
+#todoTable .todo .cell.priority.A,
+#todoTable .todo .cell .priority.A {
   color: #ffe6eb;
   background: #ff3860;
 }
-#todoTable .cell.priority.B,
-#todoTable .cell .priority.B {
+#todoTable .todo .cell.priority.B,
+#todoTable .todo .cell .priority.B {
   color: #fadcd8;
   background: #fa745e;
 }
-#todoTable .cell.priority.C,
-#todoTable .cell .priority.C {
+#todoTable .todo .cell.priority.C,
+#todoTable .todo .cell .priority.C {
   background: #ffdd57;
 }
-#todoTable .cell .contexts {
+#todoTable .todo .cell .contexts {
   background: #c5ede3;
 }
-#todoTable .cell .projects {
+#todoTable .todo .cell .projects {
   background: #f1d6f1;
 }
-#todoTable .cell.itemDueDate {
+#todoTable .todo .cell.itemDueDate {
   color: #4a4a4a;
   position: relative;
   white-space: nowrap;
   margin: 0 0.25em 0 0;
   text-transform: lowercase;
 }
-#todoTable .cell.itemDueDate .fa-sort-down {
+#todoTable .todo .cell.itemDueDate .fa-sort-down {
   position: absolute;
   right: 0.2em;
   bottom: 2.1em;
   display: none;
 }
-#todoTable .cell.itemDueDate .tags {
+#todoTable .todo .cell.itemDueDate .tags {
   position: absolute;
   top: -1.4em;
   right: -1.5em;
   z-index: 40;
   display: none;
 }
-#todoTable .cell.itemDueDate .tags .tag {
+#todoTable .todo .cell.itemDueDate .tags .tag {
   margin: 0;
 }
-#todoTable .cell.itemDueDate .tags .is-dark {
+#todoTable .todo .cell.itemDueDate .tags .is-dark {
   background: #4a4a4a;
   font-family: FreeSansBold;
 }
-#todoTable .cell.isToday,
-#todoTable .cell.isToday .button {
+#todoTable .todo .cell.isToday,
+#todoTable .todo .cell.isToday .button {
   color: #ff3860;
 }
-#todoTable .cell.isToday .tags .is-dark,
-#todoTable .cell.isToday .button .tags .is-dark {
+#todoTable .todo .cell.isToday .tags .is-dark,
+#todoTable .todo .cell.isToday .button .tags .is-dark {
   background: #ff3860;
   font-family: FreeSansBold;
 }
-#todoTable .cell.isTomorrow,
-#todoTable .cell.isTomorrow .button {
+#todoTable .todo .cell.isTomorrow,
+#todoTable .todo .cell.isTomorrow .button {
   color: #fa745e;
 }
-#todoTable .cell.isTomorrow .tags .is-dark,
-#todoTable .cell.isTomorrow .button .tags .is-dark {
+#todoTable .todo .cell.isTomorrow .tags .is-dark,
+#todoTable .todo .cell.isTomorrow .button .tags .is-dark {
   background: #fa745e;
   font-family: FreeSansBold;
 }
-#todoTable .cell.isPast,
-#todoTable .cell.isPast .button {
+#todoTable .todo .cell.isPast,
+#todoTable .todo .cell.isPast .button {
   color: #ff3860;
 }
-#todoTable .cell.isPast .tags .is-dark,
-#todoTable .cell.isPast .button .tags .is-dark {
+#todoTable .todo .cell.isPast .tags .is-dark,
+#todoTable .todo .cell.isPast .button .tags .is-dark {
   background: #ff3860;
   font-family: FreeSansBold;
 }
-#todoTable .cell:hover .tags,
-#todoTable .cell:focus .tags {
+#todoTable .todo .cell:hover .tags,
+#todoTable .todo .cell:focus .tags {
   display: block;
 }
-#todoTable .cell:hover i.fa-sort-down,
-#todoTable .cell:focus i.fa-sort-down {
+#todoTable .todo .cell:hover i.fa-sort-down,
+#todoTable .todo .cell:focus i.fa-sort-down {
   display: block;
 }
 #todoTable .todo.completed .cell {
   filter: opacity(50%) grayscale(100%);
 }
+#todoTable .todo.completed .cell.priority {
+  background: #3273dc;
+}
 
 #todoTable.is-active {
   display: block;
@@ -1125,14 +1151,6 @@ nav ul:nth-child(2) {
   float: left;
   margin: 0.5em 0.5em 0.5em 0;
 }
-#modalForm .field input,
-#modalForm .field input::placeholder,
-#modalForm .field select,
-#modalForm .field select::placeholder {
-  background: none !important;
-  border: none;
-  color: #3273dc !important;
-}
 #modalForm .message {
   display: none;
   margin: 1em 0 0 0;
@@ -1164,7 +1182,6 @@ nav ul:nth-child(2) {