From 06754474130777d0620c358f6915073367629666 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Thu, 11 Jul 2024 19:52:18 +0200
Subject: [PATCH] add zoom buttons

---
 dist/index.js            | 22 +++++++++++++++++++---
 dist/styles.css          |  4 ----
 src/Model/model.ts       | 12 ++++++++++++
 src/Tabs/overviewTab.tsx | 14 ++++++++++++--
 src/translations.ts      | 11 ++++++++++-
 5 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/dist/index.js b/dist/index.js
index faee98dc..7aca9f76 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -923,6 +923,17 @@
   };
   var isEncryptionAvailable = window.crypto.subtle != void 0;
   var senderName = restoreState("sender-name", "");
+  var pageZoom = restoreState("page-zoom", 100);
+  pageZoom.subscribe(() => {
+    document.body.style.zoom = `${pageZoom.value}%`;
+  });
+  var zoomStep = 10;
+  function zoomOut() {
+    pageZoom.value -= zoomStep;
+  }
+  function zoomIn() {
+    pageZoom.value += zoomStep;
+  }
   var chats = new ListState();
   var chatIds = restoreListState("chat-ids");
   var selectedChat = new State(void 0);
@@ -964,6 +975,8 @@
     undoChanges: "Undo changes",
     close: "Close",
     discard: "Discard",
+    zoomOut: "zoom out",
+    zoomIn: "zoom in",
     // overview
     overview: "Overview",
     connection: "Connection",
@@ -1031,6 +1044,8 @@
       undoChanges: "Deshacer",
       close: "Cerrar",
       discard: "Descartar",
+      zoomOut: "alejar",
+      zoomIn: "acercar",
       // overview
       overview: "Resumen",
       connection: "Conexi\xF3n",
@@ -1096,6 +1111,8 @@
       undoChanges: "\xC4nderungen verwerfen",
       close: "Schlie\xDFen",
       discard: "Verwerfen",
+      zoomOut: "verkleinern",
+      zoomIn: "vergr\xF6\xDFern",
       // overview
       overview: "\xDCbersicht",
       connection: "Verbindung",
@@ -1330,8 +1347,7 @@
       "button",
       {
         class: "height-100",
-        "on:click": createObject,
-        "aria-label": translation.createObject
+        disabled: true
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "visibility")
     )), /* @__PURE__ */ createElement(
@@ -1733,7 +1749,7 @@
 
   // src/Tabs/overviewTab.tsx
   function OverviewTab() {
-    return /* @__PURE__ */ createElement("article", { id: "settings-tab", "toggle:connected": isConnected }, /* @__PURE__ */ createElement("header", null, translation.overview), /* @__PURE__ */ createElement("div", { class: "flex-column large-gap" }, /* @__PURE__ */ createElement("div", { class: "tile error flex-no", "toggle:hidden": isEncryptionAvailable }, /* @__PURE__ */ createElement("span", { class: "icon" }, "warning"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translation.encryptionUnavailableTitle), /* @__PURE__ */ createElement("span", { class: "secondary" }, translation.encryptionUnavailableMessage))), PersonalSection(), ConnectionSection(), ChatListSection()));
+    return /* @__PURE__ */ createElement("article", { id: "settings-tab", "toggle:connected": isConnected }, /* @__PURE__ */ createElement("header", null, translation.overview, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement("button", { "on:click": zoomOut, "aria-label": translation.zoomOut }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_out")), /* @__PURE__ */ createElement("button", { "on:click": zoomIn, "aria-label": translation.zoomIn }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_in")))), /* @__PURE__ */ createElement("div", { class: "flex-column large-gap" }, /* @__PURE__ */ createElement("div", { class: "tile error flex-no", "toggle:hidden": isEncryptionAvailable }, /* @__PURE__ */ createElement("span", { class: "icon" }, "warning"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, translation.encryptionUnavailableTitle), /* @__PURE__ */ createElement("span", { class: "secondary" }, translation.encryptionUnavailableMessage))), PersonalSection(), ConnectionSection(), ChatListSection()));
   }
 
   // src/index.tsx
diff --git a/dist/styles.css b/dist/styles.css
index c9453212..913468ef 100644
--- a/dist/styles.css
+++ b/dist/styles.css
@@ -1071,10 +1071,6 @@ main {
     grid-template-columns: var(--split-pane-width-desktop) 1fr;
   }
 
-  footer {
-    bottom: 0px !important;
-  }
-
   article > div {
     padding-bottom: calc(var(--content-padding) + var(--control-height));
   }
diff --git a/src/Model/model.ts b/src/Model/model.ts
index d70335b5..f1659280 100644
--- a/src/Model/model.ts
+++ b/src/Model/model.ts
@@ -133,6 +133,18 @@ UDN.onmailboxdelete = () => {
 // MISC
 export const isEncryptionAvailable = window.crypto.subtle != undefined;
 export const senderName = React.restoreState("sender-name", "");
+export const pageZoom = React.restoreState("page-zoom", 100);
+pageZoom.subscribe(() => {
+  document.body.style.zoom = `${pageZoom.value}%`;
+});
+
+const zoomStep = 10;
+export function zoomOut() {
+  pageZoom.value -= zoomStep;
+}
+export function zoomIn() {
+  pageZoom.value += zoomStep;
+}
 
 // CHAT
 export const chats = new React.ListState<Chat>();
diff --git a/src/Tabs/overviewTab.tsx b/src/Tabs/overviewTab.tsx
index dfe8a2dd..ed615428 100644
--- a/src/Tabs/overviewTab.tsx
+++ b/src/Tabs/overviewTab.tsx
@@ -1,6 +1,6 @@
 import * as React from "bloatless-react";
 
-import { isConnected, isEncryptionAvailable } from "../Model/model";
+import { isConnected, isEncryptionAvailable, zoomIn, zoomOut } from "../Model/model";
 
 import { ChatListSection } from "../Views/Overview/chatListSection";
 import { ConnectionSection } from "../Views/Overview/connectionSection";
@@ -10,7 +10,17 @@ import { translation } from "../translations";
 export function OverviewTab() {
   return (
     <article id="settings-tab" toggle:connected={isConnected}>
-      <header>{translation.overview}</header>
+      <header>
+        {translation.overview}
+        <span>
+          <button on:click={zoomOut} aria-label={translation.zoomOut}>
+            <span class="icon">zoom_out</span>
+          </button>
+          <button on:click={zoomIn} aria-label={translation.zoomIn}>
+            <span class="icon">zoom_in</span>
+          </button>
+        </span>
+      </header>
 
       <div class="flex-column large-gap">
         <div class="tile error flex-no" toggle:hidden={isEncryptionAvailable}>
diff --git a/src/translations.ts b/src/translations.ts
index 4f56982d..7cd14a95 100644
--- a/src/translations.ts
+++ b/src/translations.ts
@@ -7,6 +7,9 @@ const englishTranslations = {
   close: "Close",
   discard: "Discard",
 
+  zoomOut: "zoom out",
+  zoomIn: "zoom in",
+
   // overview
   overview: "Overview",
 
@@ -99,6 +102,9 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     close: "Cerrar",
     discard: "Descartar",
 
+    zoomOut: "alejar",
+    zoomIn: "acercar",
+
     // overview
     overview: "Resumen",
 
@@ -188,6 +194,9 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     close: "Schließen",
     discard: "Verwerfen",
 
+    zoomOut: "verkleinern",
+    zoomIn: "vergrößern",
+
     // overview
     overview: "Übersicht",
 
@@ -254,7 +263,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
 
     viewAll: "Alle",
     viewNotes: "Notizen",
-    
+
     noObjects: "Keine Objekte",
     noNotes: "Keine Notizen",