✨ Add border radius

lmachens · Feb 2, 2022 · 24cde5a · 24cde5a
1 parent 631beed
commit 24cde5a
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/src/child.js b/src/child.js
@@ -10,13 +10,14 @@ window.addEventListener("DOMContentLoaded", () => {
     };
     const widthOffset = crop.left + crop.right;
     const heightOffset = crop.top + crop.bottom;
+    const borderRadius = website.borderRadius ?? 0;
 
     const iframe = document.querySelector("#child");
     if (!iframe.src) {
       iframe.src = website.url;
       document.title = website.name;
     }
-    iframe.style = `top: ${-crop.top}px; left: ${-crop.left}px; right: ${-crop.right}px; width: calc(100% + ${widthOffset}px); bottom: ${-crop.bottom}px; top: ${-crop.top}px; height: calc(100% + ${heightOffset}px);`;
+    iframe.style = `top: ${-crop.top}px; left: ${-crop.left}px; right: ${-crop.right}px; width: calc(100% + ${widthOffset}px); bottom: ${-crop.bottom}px; top: ${-crop.top}px; height: calc(100% + ${heightOffset}px); border-radius: ${borderRadius}%;`;
   });
 
   ipcRenderer.send("whoami");

diff --git a/src/components/WebsiteForm.js b/src/components/WebsiteForm.js
@@ -95,6 +95,7 @@ const WebsiteForm = () => {
           cropTop,
           cropBottom,
           opacity,
+          borderRadius,
         } = event.target.elements;
         website.name = name.value;
         if (!website.id) {
@@ -120,7 +121,8 @@ const WebsiteForm = () => {
         website.clickThrough = clickThrough.checked;
         website.movable = movable.checked;
         website.toggleHotkey = toggleHotkey.value;
-        website.opacity = +opacity.value / 100;
+        website.opacity = +opacity.value;
+        website.borderRadius = +borderRadius.value;
         if (isNew) {
           addWebsite(website);
           location.href = `#${website.id}`;
@@ -183,8 +185,18 @@ const WebsiteForm = () => {
         text: "Opacity",
         name: "opacity",
         min: 0,
+        max: 1,
+        step: 0.01,
+        value: website.opacity ?? 1,
+        oninput: handleChange,
+      }),
+      LabeledInput({
+        type: "range",
+        text: "Border Radius",
+        name: "borderRadius",
+        min: 0,
         max: 100,
-        value: website.opacity ?? 100,
+        value: website.borderRadius ?? 0,
         oninput: handleChange,
       }),
       LabeledInput({

diff --git a/src/main.js b/src/main.js
@@ -74,10 +74,10 @@ const createWindow = () => {
           cursorInfo.ptScreenPos.y >= bounds.y;
         const inBounds = xInBounds && yInBounds && cursorInfo.hCursor !== 0;
         if (inBounds && !singleWindow.inBounds) {
-          singleWindow.targetOpacity = 0.05;
+          singleWindow.targetOpacity = 0;
           fadeOpacity(singleWindow);
         } else if (!inBounds && singleWindow.inBounds) {
-          singleWindow.targetOpacity = 1;
+          singleWindow.targetOpacity = singleWindow.maxOpacity;
           fadeOpacity(singleWindow);
         }
         singleWindow.inBounds = inBounds;
@@ -139,7 +139,8 @@ const createWindow = () => {
 
       websiteWindow.frame = website.frame;
       websiteWindow.transparent = website.transparent;
-      websiteWindow.setOpacity(website.opacity ?? 1);
+      websiteWindow.maxOpacity = website.opacity ?? 1;
+      websiteWindow.setOpacity(websiteWindow.maxOpacity);
       websiteWindow.setMovable(website.movable);
       websiteWindow.setResizable(website.resizable);
       websiteWindow.setAlwaysOnTop(website.alwaysOnTop);
@@ -315,7 +316,9 @@ const fadeOpacity = (singleWindow) => {
       if (opacity > targetOpacity) {
         singleWindow.setOpacity(Math.max(0.05, opacity - 0.1));
       } else {
-        singleWindow.setOpacity(Math.min(1, opacity + 0.1));
+        singleWindow.setOpacity(
+          Math.min(singleWindow.maxOpacity, opacity + 0.1)
+        );
       }
       fadeOpacity(singleWindow);
     } catch (error) {