persistent settings and better small labels

temporaerhaus · Jun 2, 2023 · 53f91ca · 53f91ca
1 parent d5d7f87
commit 53f91ca
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 8 deletions.
diff --git a/src/index.css b/src/index.css
@@ -1664,6 +1664,10 @@ li > button.refresh {
   right: 4em;
 }
 
+li {
+  margin-bottom: 1em;
+}
+
 #print {
   position: absolute;
   right: .5em;

diff --git a/src/index.html b/src/index.html
@@ -5,7 +5,7 @@
     <title>Label Terminal 🖨</title>
   </head>
   <body>
-    <button id="settings-toggle">⚙</button>
+    <button disabled="disabled" id="settings-toggle">⚙</button>
 
     <h2>
       <img src="" alt="" id="logo" />

diff --git a/src/renderer.js b/src/renderer.js
@@ -125,16 +125,30 @@ window.addEventListener('DOMContentLoaded', async () => {
 
   document.getElementById('setting-print-dialog').addEventListener('change', () => {
     settings.printDialog = !settings.printDialog;
+    localStorage.setItem('settings', JSON.stringify(settings));
   });
 
   printerSelect.addEventListener('change', (e) => {
     settings.printer = printerSelect.value;
+    localStorage.setItem('settings', JSON.stringify(settings));
   });
 
   window.electronAPI.getPrinters().then(({ printers, defaultPrinter }) => {
     printers.forEach(p => printerSelect.add(new Option(p.name, p.deviceId), undefined));
     printerSelect.value = defaultPrinter.deviceId;
     settings.printer = defaultPrinter.deviceId;
+
+    try {
+      const restored = JSON.parse(localStorage.getItem('settings'));
+      Object.assign(settings, restored);
+
+      printerSelect.value = settings.printer;
+      document.getElementById('setting-print-dialog').checked = settings.printDialog;
+    } catch {
+      // ignore
+    }
+
+    document.querySelector('#settings-toggle').disabled = false;
     document.querySelector('#print-small').disabled = false;
     document.querySelector('#print').disabled = false;
   });
@@ -203,17 +217,17 @@ window.addEventListener('DOMContentLoaded', async () => {
           margin: [mm2pt(1), mm2pt(.3), mm2pt(1), mm2pt(3)],
           stack: [{
             bold: true,
-            fontSize: 6,
+            fontSize: 7,
             text: id.toUpperCase(),
-            margin: [mm2pt(0), mm2pt(0), mm2pt(0), mm2pt(.4)]
+            margin: [mm2pt(0), mm2pt(0), mm2pt(0), mm2pt(.1)]
           }, {
-            text: await truncateText(item.title, { fontSize: 5, maxWidth: mm2pt(50 - 10 - 7.5 - 3) }),
-            fontSize: 5,
-            margin: [mm2pt(0), mm2pt(0), mm2pt(0), mm2pt(.4)],
+            text: await truncateText(item.title, { fontSize: 6, maxWidth: mm2pt(50 - 10 - 7.5 - 3) }),
+            fontSize: 6,
+            margin: [mm2pt(0), mm2pt(0), mm2pt(0), mm2pt(.1)],
           }, {
-            text: await shortenDescription(item.yaml?.description || '', { fontSize: 4, maxWidth: mm2pt(50 - 10 - 7.5 - 3), maxLines: 3 }),
+            text: await shortenDescription(item.yaml?.description || '', { fontSize: 6, maxWidth: mm2pt(50 - 10 - 7.5 - 3), maxLines: 2 }),
             lineHeight: .8,
-            fontSize: 4
+            fontSize: 6
           }]
         }, {
           svg: logo,