Fixed for #129, added version number on hover over nav bar

package.json

 {
   "name": "sleek",
   "productName": "sleek",
-  "version": "1.0.9-rc.3",
+  "version": "1.0.9-rc.4",
   "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",

src/css/style.css

@@ -879,6 +879,7 @@ nav ul {
 nav ul li a,
 nav ul li.logo {
   width: 5em;
+  position: relative;
   display: block;
   height: 5em;
   line-height: 5em;
@@ -905,6 +906,22 @@ nav ul:nth-child(2) {
   bottom: 0;
   left: 0;
 }
+nav ul:nth-child(2) #versionNumber {
+  width: auto !important;
+  padding: 0.1em;
+  line-height: 1em;
+  display: none;
+  position: fixed;
+  bottom: 0.2em;
+  z-index: 80;
+  margin-left: 7em;
+  font-size: 0.8em;
+  color: #ccc;
+  background: white !important;
+}
+nav ul:nth-child(2):hover #versionNumber {
+  display: flex;
+}
 
 #todoTableSearchContainer {
   display: none;
@@ -958,7 +975,7 @@ nav ul:nth-child(2) {
   top: 0.8em;
   left: 1.4em;
   z-index: 70;
-  padding: 0.75em 0.75em 0.75em 0;
+  padding: 0.75em 0;
 }
 
 @media screen and (max-width: 992px), screen and (max-height: 650px) {
@@ -1042,6 +1059,9 @@ nav ul li.logo {
     height: 3.5em;
     line-height: 3.5em;
   }
+  nav ul:nth-child(2) #versionNumber {
+    margin-left: 5em;
+  }
 
   #autoCompleteContainer,
 #drawerContainer .drawer {
@@ -1155,6 +1175,9 @@ body.compact nav ul li.logo {
   height: 3.5em;
   line-height: 3.5em;
 }
+body.compact nav ul:nth-child(2) #versionNumber {
+  margin-left: 5em;
+}
 body.compact #autoCompleteContainer,
 body.compact #drawerContainer .drawer {
   padding: 1.5em;

src/index.html

@@ -31,7 +31,12 @@
           </ul>
           <ul>
             <li><a href="#" id="navBtnSettings" tabindex="-1"><i class="fas fa-cog"></i></a></li>
-            <li><a href="#" id="navBtnHelp" tabindex="-1"><i class="fas fa-question-circle"></i></a></li>
+            <li>
+              <a href="#" id="navBtnHelp" tabindex="-1">
+                <i class="fas fa-question-circle"></i>
+                <code id="versionNumber"></code>
+              </a>
+            </li>
           </ul>
           <div id="drawerContainer">
             <section id="filterDrawer" class="drawer dropdown" tabindex="0">

src/js/filters.mjs

@@ -484,14 +484,18 @@ function generateFilterButtons(category, autoCompleteValue, autoCompletePrefix,
         // add filter to input
         todoFiltersItem.addEventListener("click", (event) => {
           if(autoCompletePrefix && autoCompleteValue) {
-            // remove composed filter first
-            let newValue = document.getElementById("modalFormInput").value.slice(0, caretPosition - autoCompleteValue.length) + document.getElementById("modalFormInput").value.slice(caretPosition);
-            // split string into single characters
-            newValue = newValue.split("");
-            //then add selected filter at index
-            newValue.splice(caretPosition - autoCompleteValue.length, 0, todoFiltersItem.getAttribute("data-filter"));
-            // join back from single characters to string
-            document.getElementById("modalFormInput").value = newValue.join("");
+            // split string into elements
+            let inputElements = document.getElementById("modalFormInput").value.split(" ");
+            let i;
+            let x = 0;
+            for(i = 0; i < inputElements.length; i++) {
+              x += inputElements[i].length + 1;
+              // once caret position is found inside element the index is persisted
+              if(x > caretPosition) break;
+            }
+            // replace value at index with prefix and data attribute of filter
+            inputElements.splice(i, 1, autoCompletePrefix + todoFiltersItem.getAttribute("data-filter"));
+            document.getElementById("modalFormInput").value = inputElements.join(" ");
           } else if(autoCompletePrefix) {
             // add button data value to the exact caret position
             document.getElementById("modalFormInput").value = [document.getElementById("modalFormInput").value.slice(0, caretPosition), todoFiltersItem.getAttribute('data-filter'), document.getElementById("modalFormInput").value.slice(caretPosition)].join('') + " ";

src/js/form.mjs

@@ -176,15 +176,16 @@ function modalFormInputEvent(event) {
   let autoCompletePrefix = "";
   let caretPosition = getCaretPosition(document.getElementById("modalFormInput"));
   let autoCompleteCategory = "";
-  if((document.getElementById("modalFormInput").value.charAt(caretPosition-2) === " " || document.getElementById("modalFormInput").value.charAt(caretPosition-2) === "\n") && (document.getElementById("modalFormInput").value.charAt(caretPosition-1) === "@" || document.getElementById("modalFormInput").value.charAt(caretPosition-1) === "+")) {
-    autoCompleteValue = document.getElementById("modalFormInput").value.substr(caretPosition, document.getElementById("modalFormInput").value.lastIndexOf(" ")).split(" ").shift();
-    autoCompletePrefix = document.getElementById("modalFormInput").value.charAt(caretPosition-1);
-  } else if(document.getElementById("modalFormInput").value.charAt(caretPosition) === " ") {
-    autoCompleteValue = document.getElementById("modalFormInput").value.substr(document.getElementById("modalFormInput").value.lastIndexOf(" ", caretPosition-1)+2).split(" ").shift();
-    autoCompletePrefix = document.getElementById("modalFormInput").value.charAt(document.getElementById("modalFormInput").value.lastIndexOf(" ", caretPosition-1)+1);
-  } else if(document.getElementById("modalFormInput").value.charAt(document.getElementById("modalFormInput").value.lastIndexOf(" ", caretPosition)+1) === "@" || document.getElementById("modalFormInput").value.charAt(document.getElementById("modalFormInput").value.lastIndexOf(" ", caretPosition)+1) === "+") {
-    autoCompleteValue = document.getElementById("modalFormInput").value.substr(document.getElementById("modalFormInput").value.lastIndexOf(" ", caretPosition)+2).split(" ").shift();
-    autoCompletePrefix = document.getElementById("modalFormInput").value.charAt(document.getElementById("modalFormInput").value.lastIndexOf(" ", caretPosition)+1);
+  let inputValue = document.getElementById("modalFormInput").value;
+  if((inputValue.charAt(caretPosition-2) === " " || inputValue.charAt(caretPosition-2) === "\n") && (inputValue.charAt(caretPosition-1) === "@" || inputValue.charAt(caretPosition-1) === "+")) {
+    autoCompleteValue = inputValue.substr(caretPosition, inputValue.lastIndexOf(" ")).split(" ").shift();
+    autoCompletePrefix = inputValue.charAt(caretPosition-1);
+  } else if(inputValue.charAt(caretPosition) === " ") {
+    autoCompleteValue = inputValue.substr(inputValue.lastIndexOf(" ", caretPosition-1)+2).split(" ").shift();
+    autoCompletePrefix = inputValue.charAt(inputValue.lastIndexOf(" ", caretPosition-1)+1);
+  } else if(inputValue.charAt(inputValue.lastIndexOf(" ", caretPosition)+1) === "@" || inputValue.charAt(inputValue.lastIndexOf(" ", caretPosition)+1) === "+") {
+    autoCompleteValue = inputValue.substr(inputValue.lastIndexOf(" ", caretPosition)+2).split(" ").shift();
+    autoCompletePrefix = inputValue.charAt(inputValue.lastIndexOf(" ", caretPosition)+1);
   } else {
     autoCompleteContainer.classList.remove("is-active");
     autoCompleteContainer.blur();

src/js/navigation.mjs

-import { userData, translations } from "../render.js";
+import { userData, appData, translations } from "../render.js";
 import { showContent } from "./content.mjs";
 import { show } from "./form.mjs";
 import { _paq } from "./matomo.mjs";
@@ -7,11 +7,14 @@ const navBtnAddTodo = document.getElementById("navBtnAddTodo");
 const navBtnHelp = document.getElementById("navBtnHelp");
 const navBtnSettings = document.getElementById("navBtnSettings");
 const navBtnView = document.getElementById("navBtnView");
+const versionNumber = document.getElementById("versionNumber");
 
 navBtnHelp.firstElementChild.setAttribute("title", translations.help);
 navBtnSettings.firstElementChild.setAttribute("title", translations.settings);
 navBtnView.firstElementChild.setAttribute("title", translations.view);
 
+versionNumber.innerHTML = appData.version;
+
 navBtnAddTodo.onclick = function () {
   show();
   // trigger matomo event

src/main.js

@@ -173,9 +173,18 @@ const createWindow = async function() {
       // skip persisted files and go with ENV if set
       if(process.env.SLEEK_CUSTOM_FILE && fs.existsSync(process.env.SLEEK_CUSTOM_FILE)) {
         file = process.env.SLEEK_CUSTOM_FILE;
-      } /*else if(process.argv.length > 1 && fs.existsSync(process.argv[1])) {
-        file = process.argv[1];
-      }*/
+      }
+      let args;
+      if (process.defaultApp) {
+        // electron "unbundled" app -- have to skip "electron" and script name arg eg: "."
+        args = process.argv.slice(2);
+      } else {
+        // electron "bundled" app -- skip only the app name, eg: "sleek"
+        args = process.argv.slice(1);
+      }
+      if (args.length > 0 && fs.existsSync(args[0])) {
+        file = args[0];
+      }
       // use the loop to check if the new path is already in the user data
       let fileFound = false;
       if(userData.data.files) {

src/scss/compact.scss

@@ -79,13 +79,20 @@
       }
     }
   }
-  nav ul {
-    width: 3.5em;
-    li a,
-    li.logo {
+  nav {
+    ul {
       width: 3.5em;
-      height: 3.5em;
-      line-height: 3.5em;
+      li a,
+      li.logo {
+        width: 3.5em;
+        height: 3.5em;
+        line-height: 3.5em;
+      }
+    }
+    ul:nth-child(2) {
+      #versionNumber {
+        margin-left: 5em;
+      }
     }
   }
   #autoCompleteContainer,

src/scss/navigation.scss

@@ -14,6 +14,7 @@ nav {
     li a,
     li.logo {
       width: 5em;
+      position: relative;
       display: block;
       height: 5em;
       line-height: 5em;
@@ -40,5 +41,23 @@ nav {
     position: absolute;
     bottom: 0;
     left: 0;
+    #versionNumber {
+      width: auto!important;
+      padding: 0.1em;
+      line-height: 1em;
+      display: none;
+      position: fixed;
+      bottom: 0.2em;
+      z-index: 80;
+      margin-left: 7em;
+      font-size: 0.8em;
+      color: $mid-grey;
+      background: white!important;
+    }
+  }
+  ul:nth-child(2):hover {
+    #versionNumber {
+      display: flex;
+    }
   }
 }

src/scss/search.scss

@@ -53,6 +53,6 @@
     top: 0.8em;
     left: 1.4em;
     z-index: 70;
-    padding: 0.75em 0.75em 0.75em 0;
+    padding: 0.75em 0;
   }
 }