From bed1864c772228d8891389097d1d57009f99c71a Mon Sep 17 00:00:00 2001 From: ransome1 Date: Sun, 21 Mar 2021 16:36:15 +0100 Subject: [PATCH] WIP: Zoom function --- src/css/style.css | 2 +- src/locales/en/translation.missing.json | 4 +- src/main.js | 21 ++++++++-- src/render.js | 56 ++++++++++++++++++------- src/scss/style.scss | 3 +- 5 files changed, 63 insertions(+), 23 deletions(-) diff --git a/src/css/style.css b/src/css/style.css index c7d06a53..c6e3572e 100644 --- a/src/css/style.css +++ b/src/css/style.css @@ -252,7 +252,7 @@ nav { padding: 1.5em; background: #ebebeb; --resizeable-width: 34em; - height: 100vh; + height: 100%; width: var(--resizeable-width); min-width: var(--min-width); max-width: var(--max-width); diff --git a/src/locales/en/translation.missing.json b/src/locales/en/translation.missing.json index 0c6ffcd1..8fb9a7cb 100644 --- a/src/locales/en/translation.missing.json +++ b/src/locales/en/translation.missing.json @@ -1,3 +1,5 @@ { - "paste": "paste" + "paste": "paste", + "zoomIn": "zoomIn", + "zoomOut": "zoomOut" } \ No newline at end of file diff --git a/src/main.js b/src/main.js index fed7167e..1f1bc10b 100644 --- a/src/main.js +++ b/src/main.js @@ -81,7 +81,7 @@ const userData = new Store({ filterDrawer: false, compactView: false, sortBy: "priority", - defaultFontSize: 16 + zoom: 100 } }); const appData = { @@ -136,8 +136,8 @@ const createWindow = () => { userData.set("sortBy", "priority"); } // if default font size is not set - if(!userData.data.defaultFontSize) { - userData.set("defaultFontSize", 16); + if(!userData.data.zoom) { + userData.set("zoom", 100); } // if theme hasn't been set, sleek will adapt to OS preference if(!userData.data.theme && nativeTheme.shouldUseDarkColors) { @@ -267,6 +267,21 @@ const createWindow = () => { } }, { type: "separator" }, + { + label: "Zoom In", + accelerator: "CmdOrCtrl+=", + click: function (item, focusedWindow) { + mainWindow.webContents.send("triggerFunction", "zoom", ["in"]) + } + }, + { + label: "Zoom Out", + accelerator: "CmdOrCtrl+-", + click: function (item, focusedWindow) { + mainWindow.webContents.send("triggerFunction", "zoom", ["out"]) + } + }, + { type: "separator" }, { label: i18next.t("toggleDarkMode"), accelerator: "CmdOrCtrl+d", diff --git a/src/render.js b/src/render.js index 9cc5cef3..0895d1fa 100644 --- a/src/render.js +++ b/src/render.js @@ -312,6 +312,31 @@ function positionSuggestionContainer() { suggestionContainer.style.top = modalFormInputPosition.top + modalFormInput.offsetHeight+2 + "px"; suggestionContainer.style.left = modalFormInputPosition.left + "px"; } +function zoom(variable) { + try { + let zoom = window.userData.zoom; + if(variable==="in") { + // set max zoom size + if(window.userData.zoom===175) return Promise.resolve("Info: Maximum zoom reached"); + zoom = window.userData.zoom + 5; + setUserData("zoom", zoom); + html.style.zoom = zoom + "%"; + //html.style.fontSize = zoom + "px"; + return Promise.resolve("Info: Zoomed in"); + } else if(variable==="out") { + // set min zoom size + if(window.userData.zoom===25) return Promise.resolve("Info: Minimum zoom reached"); + zoom = window.userData.zoom - 5; + setUserData("zoom", zoom); + html.style.zoom = zoom + "%"; + return Promise.resolve("Info: Zoomed out"); + } + } catch (error) { + // trigger matomo event + if(window.userData.matomoEvents) _paq.push(["trackEvent", "Error", "zoom()", error]) + return Promise.reject("Error in zoom(): " + error); + } +} // ######################################################################################################################## // RESIZEABLE FILTER DRAWER // https://spin.atomicobject.com/2019/11/21/creating-a-resizable-html-element/ @@ -2252,20 +2277,12 @@ function configureEvents() { btnToggleViewContainer.onclick = function() { viewContainer.classList.toggle("is-active"); } - scaleIncrease.onclick = function() { - // set max zoom size - if(window.userData.defaultFontSize===25) return false; - let defaultFontSize = window.userData.defaultFontSize + 1; - setUserData("defaultFontSize", defaultFontSize); - html.style.fontSize = defaultFontSize + "px"; - } - scaleDecrease.onclick = function() { - // set min zoom size - if(window.userData.defaultFontSize===10) return false; - let defaultFontSize = window.userData.defaultFontSize - 1; - setUserData("defaultFontSize", defaultFontSize); - html.style.fontSize = defaultFontSize + "px"; - } + scaleIncrease.onclick = function(el) { + zoom("in") + }; + scaleDecrease.onclick = function(el) { + zoom("out") + }; document.querySelector(".datepicker .clear-btn").addEventListener('click', function (e) { let todo = new TodoTxtItem(modalFormInput.value, [ new DueExtension(), new RecExtension() ]); todo.due = undefined; @@ -2378,7 +2395,7 @@ function configureTodoTableTemplate() { function configureMainView() { try { // set scaling factor if default font size has changed - if(window.userData.defaultFontSize) html.style.fontSize = window.userData.defaultFontSize + "px"; + if(window.userData.zoom) html.style.zoom = window.userData.zoom + "%"; // empty the table containers before reading fresh data todoTableContainer.innerHTML = ""; // add filename to application title @@ -2743,6 +2760,13 @@ window.onload = async function () { console.log(error); }); break; + case "zoom": + zoom(args.join()).then(function(result) { + console.log(result); + }).catch(function(error) { + console.log(error); + }); + break; } }); @@ -2756,7 +2780,7 @@ window.onload = async function () { // call user data and write it to a global variable await getUserData().then(function(userData) { window.userData = userData; - console.log(window.userData.defaultFontSize); + console.log(window.userData.zoom); if(!userData.file) showOnboarding(true) }).catch(function(error) { console.log(error); diff --git a/src/scss/style.scss b/src/scss/style.scss index 76613c81..a7cd91e6 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -281,9 +281,8 @@ nav { float: left; padding: 1.5em; background: $mid-grey; - --resizeable-width: 34em; - height: 100vh; + height: 100%; width: var(--resizeable-width); min-width: var(--min-width); max-width: var(--max-width);