Minor CSS improvements, defined more specfific Matomo events

README.md

@@ -69,13 +69,13 @@ A prioritized backlog of new features and known issues can be found <a href="htt
 ### Features
 * An existing todo.txt file can be used or a new one can be created
 * Todos can be enriched and searched for by
-- priorities
-- contexts
-- projects
-- due dates
-- 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
+  - priorities
+  - contexts
+  - projects
+  - due dates
+  - 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
 * 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

package.json

@@ -53,10 +53,7 @@
     "mac": {
       "target": {
         "target": "default",
-        "arch": [
-          "arm64",
-          "x64"
-        ]
+        "arch": "universal"
       },
       "icon": "assets/icons/sleek.icns",
       "category": "public.app-category.productivity",

src/configs/i18next.config.js

@@ -2,13 +2,13 @@ const fs = require("fs");
 const path = require("path");
 const i18next = require("i18next");
 const i18nextBackend = require("i18next-fs-backend");
-const LanguageDetector = require("i18next-browser-languagedetector");
+//const LanguageDetector = require("i18next-browser-languagedetector");
 const i18nextOptions = {
   initImmediate: false,
   fallbackLng: "en",
-  detection: {
+  /*detection: {
     order: ['localStorage', 'querystring', 'cookie', 'sessionStorage', 'navigator', 'htmlTag', 'path', 'subdomain']
-  },
+  },*/
   namespace: "translation",
   defaultNS: "translation",
   supportedLngs: ["de", "en", "it", "es", "fr", "zh"],
@@ -25,7 +25,7 @@ const i18nextOptions = {
   saveMissing: true
 };
 i18next
-.use(LanguageDetector)
+//.use(LanguageDetector)
 .use(i18nextBackend)
 .init(i18nextOptions);
 i18next.changeLanguage();

src/configs/store.config.js

@@ -5,15 +5,7 @@ const fs = require('fs');
 class Store {
   constructor(opts) {
     // Renderer process has to get `app` module via `remote`, whereas the main process can get it directly
-    // app.getPath('userData') will return a string of the user's app data directory path.
     let userDataPath;
-    //userDataPath = path.dirname(app.getPath('exe'));
-    //fs.mkdirSync(userDataPath + '\config\sleek');
-
-    //this.path = path.join(userDataPath, opts.configName + '.json');
-
-    //console.log(path.join(path.dirname(process.execPath), 'config', 'sleek'));
-
     if(process.env.PORTABLE_EXECUTABLE_FILE) {
       userDataPath = path.join(path.dirname(process.env.PORTABLE_EXECUTABLE_FILE), 'config', 'sleek');
       if(!fs.existsSync(userDataPath)) fs.mkdirSync(userDataPath, {recursive: true});
@@ -27,12 +19,10 @@ class Store {
     this.path = path.join(userDataPath, opts.configName + '.json');
     this.data = parseDataFile(this.path, opts.defaults);
   }
-
   // This will just return the property on the `data` object
   get(key) {
     return this.data[key];
   }
-
   // ...and this will set it
   set(key, val) {
     this.data[key] = val;
@@ -48,6 +38,7 @@ function parseDataFile(filePath, defaults) {
   // We'll try/catch it in case the file doesn't exist yet, which will be the case on the first application run.
   // `fs.readFileSync` will return a JSON string which we then parse into a Javascript object
   try {
+    console.log("User preferences located at: " + filePath);
     return JSON.parse(fs.readFileSync(filePath));
   } catch(error) {
     // if there was some kind of error, return the passed in defaults instead.

src/index.html

@@ -21,7 +21,7 @@
             <li class="btnAddTodo"><a href="#" tabindex="0"><i class="fas fa-plus"></i></a></li>
             <li id="navBtnFilter" class="navBtn"><a href="#" tabindex="0"><i class="fas fa-filter"></i></a></li>
             <li id="navBtnView" class="navBtn"><a href="#" tabindex="0"><i class="fas fa-sliders-h"></i></a></li>
-            <li class="btnChangeTodoFile"><a href="#" tabindex="-1"><i class="fas fa-folder-open"></i></a></li>
+            <li><a href="#" tabindex="-1" id="btnOpenTodoFile"><i class="fas fa-folder-open"></i></a></li>
             <li id="btnTheme"><a href="#" tabindex="-1"><i class="fas fa-adjust"></i></a></li>
           </ul>
           <ul>
@@ -196,11 +196,11 @@
           <h1 id="welcomeToSleek" class="title is-1"></h1>
           <p id="onboardingContainerSubtitle" class="subtitle"></p>
           <p class="file is-boxed is-centered">
-            <a href="#" class="btnOnboarding btnOpenTodoFile">
+            <a href="#" id="btnOnboardingOpenTodoFile" class="btnOnboarding">
               <i class="fas fa-folder-open"></i>
               <span id="onboardingContainerBtnOpen" class="file-label"></span>
             </a>
-            <a href="#" class="btnCreateTodoFile btnOnboarding">
+            <a href="#" id="btnOnboardingCreateTodoFile" class="btnOnboarding">
               <i class="fas fa-plus-circle"></i>
               <span id="onboardingContainerBtnCreate" class="file-label"></span>
             </a>
@@ -685,8 +685,8 @@ <h3 class="title is-3 arrow"><i class="fas fa-arrow-down"></i></h3>
             <table id="modalChangeFileTable"></table>
           </div>
           <footer class="card-footer">
-            <a href="#" class="card-footer-item btnOpenTodoFile" tabindex="0"><i class="fas fa-folder-open"></i>&nbsp;<span id="modalChangeFileOpen"></span></a>
-            <a href="#" class="card-footer-item btnCreateTodoFile" tabindex="0"><i class="fas fa-plus-circle"></i>&nbsp;<span id="modalChangeFileCreate"></span></a>
+            <a href="#" id="btnFilesOpenTodoFile" class="card-footer-item" tabindex="0"><i class="fas fa-folder-open"></i>&nbsp;<span id="modalChangeFileOpen"></span></a>
+            <a href="#" id="btnFilesCreateTodoFile" class="card-footer-item" tabindex="0"><i class="fas fa-plus-circle"></i>&nbsp;<span id="modalChangeFileCreate"></span></a>
             <a href="#" class="card-footer-item btnModalCancel" tabindex="0"></a>
           </footer>
         </div>

src/main.js

@@ -324,6 +324,7 @@ const createWindow = async function() {
   }
   userData = await getUserData();
   translations = await getTranslations(userData.data.language);
+  console.log("Success: Translation loaded for: " + userData.data.language);
   const mainWindow = new BrowserWindow({
     width: userData.data.width,
     height: userData.data.height,

src/render.js

@@ -18,7 +18,7 @@ const btnFiltersResetFilters = document.getElementById("btnFiltersResetFilters")
 const btnMessageLogging = document.getElementById("btnMessageLogging");
 const btnModalCancel = document.querySelectorAll(".btnModalCancel");
 const btnNoResultContainerResetFilters = document.getElementById("btnNoResultContainerResetFilters");
-const btnOpenTodoFile = document.querySelectorAll(".btnOpenTodoFile");
+//const btnOpenTodoFile = document.querySelectorAll(".btnOpenTodoFile");
 const btnResetFilters = document.querySelectorAll(".btnResetFilters");
 const btnSave = document.getElementById("btnSave");
 const btnTheme = document.getElementById("btnTheme");
@@ -55,6 +55,11 @@ const todoTable = document.getElementById("todoTable");
 const todoTableSearch = document.getElementById("todoTableSearch");
 const todoTableSearchContainer = document.getElementById("todoTableSearchContainer");
 const welcomeToSleek = document.getElementById("welcomeToSleek");
+const btnOnboardingOpenTodoFile = document.getElementById("btnOnboardingOpenTodoFile");
+const btnOnboardingCreateTodoFile = document.getElementById("btnOnboardingCreateTodoFile");
+const btnFilesOpenTodoFile = document.getElementById("btnFilesOpenTodoFile");
+const btnFilesCreateTodoFile = document.getElementById("btnFilesCreateTodoFile");
+const btnOpenTodoFile = document.getElementById("btnOpenTodoFile");
 let
   append = false,
   _paq, a0,
@@ -342,13 +347,13 @@ function registerEvents() {
       // trigger matomo event
       if(userData.matomoEvents) _paq.push(["trackEvent", "Setting", "Click on Archive"])
     }
-    btnOpenTodoFile.forEach(function(el) {
+    /*btnOpenTodoFile.forEach(function(el) {
       el.onclick = function () {
         window.api.send("openOrCreateFile", "open");
         // trigger matomo event
         if(userData.matomoEvents) _paq.push(["trackEvent", "Menu", "Click on Open file"]);
       }
-    });
+    })
     btnChangeTodoFile.forEach(function(el) {
       el.onclick = function () {
         if(typeof userData.files === "object" && userData.files.length>0) {
@@ -361,16 +366,55 @@ function registerEvents() {
           window.api.send("openOrCreateFile", "open");
         }
         // trigger matomo event
-        if(userData.matomoEvents) _paq.push(["trackEvent", "Menu", "Click on Choose file"]);
+        if(userData.matomoEvents) _paq.push(["trackEvent", "Onboarding/Change-Modal", "Click on Choose file"]);
       }
-    });
-    btnCreateTodoFile.forEach(function(el) {
+    });*/
+    /*btnCreateTodoFile.forEach(function(el) {
       el.onclick = function () {
         window.api.send("openOrCreateFile", "create");
         // trigger matomo event
         if(userData.matomoEvents) _paq.push(["trackEvent", "Onboarding/Change-Modal", "Click on Create file"]);
       }
-    });
+    });*/
+
+    btnOpenTodoFile.onclick = function() {
+      if(typeof userData.files === "object" && userData.files.length>0) {
+        showFiles().then(response => {
+          console.info(response);
+        }).catch(error => {
+          handleError(error);
+        });
+      } else {
+        window.api.send("openOrCreateFile", "open");
+      }
+      // trigger matomo event
+      if(userData.matomoEvents) _paq.push(["trackEvent", "menu", "Click on Files"]);
+    }
+
+    btnFilesCreateTodoFile.onclick = function() {
+      window.api.send("openOrCreateFile", "create");
+      // trigger matomo event
+      if(userData.matomoEvents) _paq.push(["trackEvent", "Change-Modal", "Click on Create file"]);
+    }
+
+    btnFilesOpenTodoFile.onclick = function() {
+      window.api.send("openOrCreateFile", "open");
+      // trigger matomo event
+      if(userData.matomoEvents) _paq.push(["trackEvent", "Change-Modal", "Click on Open file"]);
+    }
+
+    btnOnboardingCreateTodoFile.onclick = function() {
+      window.api.send("openOrCreateFile", "create");
+      // trigger matomo event
+      if(userData.matomoEvents) _paq.push(["trackEvent", "Onboarding", "Click on Create file"]);
+    }
+
+    btnOnboardingOpenTodoFile.onclick = function() {
+      window.api.send("openOrCreateFile", "open");
+      // trigger matomo event
+      if(userData.matomoEvents) _paq.push(["trackEvent", "Onboarding", "Click on Open file"]);
+    }
+
     btnModalCancel.forEach(function(el) {
       el.onclick = function() {
         el.parentElement.parentElement.parentElement.parentElement.classList.remove("is-active");
@@ -751,18 +795,18 @@ function setTranslations() {
     todoTableSearch.placeholder = translations.search;
     welcomeToSleek.innerHTML = translations.welcomeToSleek;
 
-    btnOpenTodoFile.forEach(function(el) {
+    /*btnOpenTodoFile.forEach(function(el) {
       el.setAttribute("title", translations.openFile);
-    });
+    });*/
     btnResetFilters.forEach(function(el) {
       el.getElementsByTagName('span')[0].innerHTML = translations.resetFilters;
     });
-    btnCreateTodoFile.forEach(function(el) {
+    /*btnCreateTodoFile.forEach(function(el) {
       el.setAttribute("title", translations.createFile);
     });
     btnChangeTodoFile.forEach(function(el) {
       el.setAttribute("title", translations.openFile);
-    });
+    });*/
     btnModalCancel.forEach(function(el) {
       el.innerHTML = translations.cancel;
     });

src/scss/dark.scss

@@ -50,6 +50,9 @@ input[type="checkbox"]:active {
   outline: none;
   box-shadow: none!important;
 }
+input[type="range"] {
+  background: $dark-grey!important;
+}
 button {
   color: white!important;
   background: transparent!important;
@@ -88,6 +91,15 @@ table tr td {
 table tr th {
   color: white!important;
 }
+table.files {
+  tr {
+    td:last-child {
+      i {
+        color: white;
+      }
+    }
+  }
+}
 nav {
   background-color: $darker-grey;
   svg {
@@ -360,11 +372,6 @@ nav {
     }
   }
 }
-.column.content {
-  .button {
-    //background: $darker-grey!important;
-  }
-}
 .modal.content {
   color: $lighter-grey!important;
   .button {
@@ -373,8 +380,8 @@ nav {
   .select:not(.is-multiple):not(.is-loading)::after {
     border-color: white!important;
   }
-  .is-large.delete,
-  .is-large.modal-close,
+  .delete,
+  .modal-close,
   .tag.is-info {
     background: white!important;
     color: $even-darker-grey!important;

src/scss/style.scss

@@ -135,6 +135,13 @@ input[type="checkbox"]:focus {
   outline: none;
   box-shadow: none!important;
 }
+input[type="range"] {
+  -webkit-appearance: none;
+  height: .25em;
+  background: $dark-grey;
+  border-radius: 10px;
+  outline: none;
+}
 .title,
 strong {
   font-family: "FreeSansBold";
@@ -983,8 +990,8 @@ nav {
     margin-left: 0;
     border: none;
   }
-  .is-large.delete,
-  .is-large.modal-close {
+  .delete,
+  .modal-close {
     background: $has-text-link!important;
     color: $has-text-link!important;
     z-index: 60;