make the keyboard as wide and tall as we can without going over the o…

…ther cvontent
keyboardio · Feb 7, 2024 · 04a0628 · 04a0628
1 parent a6e4503
commit 04a0628
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/src/api/hardware-keyboardio-atreus2/components/Keymap.js b/src/api/hardware-keyboardio-atreus2/components/Keymap.js
@@ -94,13 +94,14 @@ const Keymap = (props) => {
     );
   };
 
-  const { classes } = props;
+  const { classes, maxHeight } = props;
   return (
     <svg
       viewBox="0 0 855 362"
       xmlns="http://www.w3.org/2000/svg"
       preserveAspectRatio="xMinYMin meet"
       style={{
+        maxHeight: maxHeight || "100%",
         background: `url(${Atreus})`,
         backgroundRepeat: "no-repeat",
         backgroundSize: "100%",

diff --git a/src/api/hardware-keyboardio-model01/components/Keymap.js b/src/api/hardware-keyboardio-model01/components/Keymap.js
@@ -56,6 +56,10 @@ const Keymap = (props) => {
       clipRule="evenodd"
       viewBox="0 0 875 435"
       className={props.className || "layer"}
+      preserveAspectRatio="xMinYMin meet"
+      style={{
+        maxHeight: props.maxHeight || "100%",
+      }}
     >
       <g transform="matrix(1,0,0,1,-70,-55)">
         <Key

diff --git a/src/renderer/screens/Editor.js b/src/renderer/screens/Editor.js
@@ -69,6 +69,25 @@ const Editor = (props) => {
   const [dialogOpen, setDialogOpen] = useState(false);
 
   const drawerHeightInRem = 20;
+  const [maxKeyboardHeight, setMaxKeyboardHeight] = useState("auto");
+
+  useEffect(() => {
+    function updateMaxKeyboardHeight() {
+      const remInPixels = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      const maxHeightValue = window.innerHeight - (drawerHeightInRem + 3) * remInPixels;
+      setMaxKeyboardHeight(`${maxHeightValue}px`);
+    }
+
+    // Set the initial maxHeight
+    updateMaxKeyboardHeight();
+
+    // Add event listener for window resize
+    window.addEventListener("resize", updateMaxKeyboardHeight);
+
+    // Remove event listener on cleanup
+    return () => window.removeEventListener("resize", updateMaxKeyboardHeight);
+  }, []);
+
   const { t } = useTranslation();
 
   const maybeOpenMacroEditor = (state) => {
@@ -388,7 +407,6 @@ const Editor = (props) => {
   } else {
     title = t("app.menu.colormapEditor");
   }
-  console.log(theme);
 
   const currentKey = selectorKey || keymap.custom[currentLayer][currentKeyIndex];
 
@@ -410,6 +428,7 @@ const Editor = (props) => {
     mainWidget = (
       <KeymapSVG
         className="layer"
+        maxHeight={maxKeyboardHeight}
         layerNames={layerNames}
         index={currentLayer}
         keymap={keymap?.custom[currentLayer]}
@@ -451,7 +470,7 @@ const Editor = (props) => {
       <PageTitle title={title} />
 
       {macros && <MacroStorageAlert macros={macros} />}
-      <Box component="main" sx={{ marginLeft: 20, marginRight: 50 }}>
+      <Box component="main" sx={{ marginLeft: 0, marginRight: "14rem" }}>
         {layerNames.storageSize > 0 && <LayerNamesStorageAlert layerNames={layerNames} />}
         {mainWidget}
       </Box>

diff --git a/src/renderer/screens/Editor/components/KeyPicker.js b/src/renderer/screens/Editor/components/KeyPicker.js
@@ -124,7 +124,14 @@ export const KeyPicker = (props) => {
               <Tab value="advanced" label="Advanced" />
             </TabList>
           </Box>
-          <TabPanel value="keyboard">
+          <TabPanel
+            value="keyboard"
+            sx={{
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
             <Keyboard104 onKeySelect={onKeyChange} currentKeyCode={key.baseCode || key.code} keymap={keymap} />
           </TabPanel>
           <TabPanel value="modifiers">