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/css/dark.css

@@ -57,6 +57,10 @@ input[type=checkbox]:active {
   box-shadow: none !important;
 }
 
+input[type=range] {
+  background: #4a4a4a !important;
+}
+
 button {
   color: white !important;
   background: transparent !important;
@@ -105,6 +109,10 @@ table tr th {
   color: white !important;
 }
 
+table.files tr td:last-child i {
+  color: white;
+}
+
 nav {
   background-color: #2d2d2d;
 }
@@ -360,8 +368,8 @@ nav ul li.is-highlighted a {
 .modal.content .select:not(.is-multiple):not(.is-loading)::after {
   border-color: white !important;
 }
-.modal.content .is-large.delete,
-.modal.content .is-large.modal-close,
+.modal.content .delete,
+.modal.content .modal-close,
 .modal.content .tag.is-info {
   background: white !important;
   color: #3B3B3B !important;

src/css/dark.css.map

-{"version":3,"sourceRoot":"","sources":["../scss/dark.scss","../scss/variables.scss"],"names":[],"mappings":"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","file":"dark.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../scss/dark.scss","../scss/variables.scss"],"names":[],"mappings":"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","file":"dark.css"}
\ No newline at end of file

src/css/style.css

@@ -151,6 +151,14 @@ input[type=checkbox]:focus {
   box-shadow: none !important;
 }
 
+input[type=range] {
+  -webkit-appearance: none;
+  height: 0.25em;
+  background: #4a4a4a;
+  border-radius: 10px;
+  outline: none;
+}
+
 .title,
 strong {
   font-family: "FreeSansBold";
@@ -1018,8 +1026,8 @@ nav ul:nth-child(2) {
   margin-left: 0;
   border: none;
 }
-.modal.content .is-large.delete,
-.modal.content .is-large.modal-close {
+.modal.content .delete,
+.modal.content .modal-close {
   background: #3273dc !important;
   color: #3273dc !important;
   z-index: 60;

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 @@
             <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;