show optimal zoom level in italic typeface in zoom buttons

arttu76 · Dec 3, 2023 · 6a21f67 · 6a21f67
1 parent f71b95b
commit 6a21f67
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -16,13 +16,30 @@ export const App = () => {
     const resize = () => {
       setTimeout(
         () => {
-
           const toolbarHeight = document.querySelector('.Toolbar')?.clientHeight;
           if (toolbarHeight) {
             document.querySelectorAll('.AppContainer > *').forEach(
               el => (el as HTMLElement).style.height = `calc(100vh - ${toolbarHeight}px)`
             );
           }
+
+          const screen: HTMLDivElement | null = document.querySelector('.Screen');
+          if (screen) {
+            const bestZoomLevel = Math.min(
+              Math.floor(screen.offsetWidth / 256),
+              Math.floor(screen.offsetHeight / 192)
+            );
+            const zoomButtons = Array.from(document.querySelectorAll('.ZoomButtonContainer button')) as HTMLElement[];
+            const resetZoomButtons = () => zoomButtons.forEach(zb => zb.style.fontStyle = 'inherit');
+            zoomButtons.forEach(zb => {
+              if (parseInt(zb.innerText, 10) <= bestZoomLevel) {
+                resetZoomButtons();
+                zb.style.fontStyle = 'italic';
+              }
+            });
+          }
+
+
         }, 50);
     }
 

diff --git a/src/components/Toolbar.tsx b/src/components/Toolbar.tsx
@@ -739,7 +739,7 @@ export const Toolbar = () => {
             </>
             }
 
-            <Group title="Zoom" disableClose={true}>
+            <Group title="Zoom" disableClose={true} className="ZoomButtonContainer">
                 {[1, 2, 3, 4, 5, 10, 20].map((zoomLevel) => <Button
                     key={zoomLevel}
                     dimmed={tools.zoom !== zoomLevel}