impr: Start creating the settings UI. Refactoring of button components

config/rollup.renderer.config.js

@@ -47,6 +47,10 @@ const commonPlugins = [
         find: "Common",
         replacement: path.resolve(projectRootDir, "..", "src/renderer/Common"),
       },
+      {
+        find: "Containers",
+        replacement: path.resolve(projectRootDir, "..", "src/renderer/Common/Containers"),
+      },
       {
         find: "Icons",
         replacement: path.resolve(projectRootDir, "..", "src/renderer/Common/Icons"),
@@ -141,8 +145,14 @@ module.exports = [
           host: "localhost",
           port: settingsPort,
           proxy: [
-            { from: "/renderer/settings.js", to: `http://localhost:${settingsPort}/dist/renderer/settings.js` },
-            { from: "/renderer/base.css", to: `http://localhost:${settingsPort}/dist/renderer/base.css` },
+            {
+              from: "/renderer/settings.js",
+              to: `http://localhost:${settingsPort}/dist/renderer/settings.js`,
+            },
+            {
+              from: "/renderer/base.css",
+              to: `http://localhost:${settingsPort}/dist/renderer/base.css`,
+            },
           ],
         }),
     ],
@@ -171,7 +181,10 @@ module.exports = [
               from: "/renderer/themeCreator.js",
               to: `http://localhost:${themeCreatorPort}/dist/renderer/themeCreator.js`,
             },
-            { from: "/renderer/base.css", to: `http://localhost:${themeCreatorPort}/dist/renderer/base.css` },
+            {
+              from: "/renderer/base.css",
+              to: `http://localhost:${themeCreatorPort}/dist/renderer/base.css`,
+            },
           ],
         }),
     ],
@@ -213,8 +226,14 @@ module.exports = [
           host: "localhost",
           port: panelPort,
           proxy: [
-            { from: "/renderer/panel.js", to: `http://localhost:${panelPort}/dist/renderer/panel.js` },
-            { from: "/renderer/base.css", to: `http://localhost:${panelPort}/dist/renderer/base.css` },
+            {
+              from: "/renderer/panel.js",
+              to: `http://localhost:${panelPort}/dist/renderer/panel.js`,
+            },
+            {
+              from: "/renderer/base.css",
+              to: `http://localhost:${panelPort}/dist/renderer/base.css`,
+            },
           ],
         }),
     ],

src/main/Ui/Window.ts

@@ -181,7 +181,7 @@ export default class Window {
   }
 
   private openSettingsView() {
-    const bounds = this.calcBoundsForTabView();
+    const bounds = this.window.getBounds();
     this.settingsView.updateProps(bounds);
 
     this.window.addBrowserView(this.settingsView.view);
@@ -200,7 +200,7 @@ export default class Window {
     this.settingsView.postClose();
   }
   private openThemeCreatorView() {
-    const bounds = this.calcBoundsForTabView();
+    const bounds = this.window.getBounds();
     this.themeCreatorView.updateProps(bounds);
 
     this.window.addBrowserView(this.themeCreatorView.view);

src/renderer/Common/Buttons/Button.svelte

@@ -1,16 +1,32 @@
 <script lang="ts">
+  export let round: number = 0;
+  export let size: number | undefined = undefined;
+  export let width = "inherit";
+  export let height = "inherit";
+
+  export let padding = "inherit";
   export let normalFgColor = "var(--fg-header)";
   export let normalBgColor = "var(--bg-header)";
   export let activeBgColor = "var(--bg-tab-hover)";
   export let hoverBgColor = "var(--bg-tab-hover)";
+
   export let isActive = false;
-  export let onClick = (event: MouseEvent) => {};
+
+  if (size) {
+    width = `${size}px`;
+    height = `${size}px`;
+  }
 </script>
 
 <div
-  on:mouseup|capture={onClick}
-  class={`${$$props.class || ""} ${isActive ? "button__active" : ""}`}
+  on:mousedown|capture
+  on:mouseup|capture
+  class={isActive ? "button__active" : ""}
   style={`
+    --button-padding: ${padding};
+    --button-width: ${width};
+    --button-height: ${height};
+    --button-border-radius: ${round}px;
     --button-normal-bg-color: ${normalBgColor};
     --button-hover-bg-color: ${hoverBgColor};
     --button-active-bg-color: ${activeBgColor};
@@ -24,8 +40,14 @@
   div {
     display: flex;
     align-items: center;
+    justify-content: center;
     background-color: var(--button-normal-bg-color);
     color: var(--button-normal-fg-color);
+    border-radius: var(--button-border-radius);
+    width: var(--button-width);
+    height: var(--button-height);
+    padding: var(--button-padding);
+    transition: all 0.08s ease;
   }
   div:hover {
     background-color: var(--button-hover-bg-color);

src/renderer/Common/Buttons/ButtonTool.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  export let round: number = 0;
+  export let size: number | undefined = undefined;
+  export let width = "inherit";
+  export let height = "inherit";
+
+  export let padding = "inherit";
+  export let normalFgColor = "var(--fg-header)";
+  export let normalBgColor = "var(--bg-header)";
+  export let hoverBgColor = "var(--bg-tab-hover)";
+
+  if (size) {
+    width = `${size}px`;
+    height = `${size}px`;
+  }
+</script>
+
+<div
+  on:mousedown|capture
+  on:mouseup|capture
+  style={`
+    --button-padding: ${padding};
+    --button-width: ${width};
+    --button-height: ${height};
+    --button-border-radius: ${round}px;
+    --button-normal-bg-color: ${normalBgColor};
+    --button-hover-bg-color: ${hoverBgColor};
+    --button-normal-fg-color: ${normalFgColor};
+  `}
+>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--button-normal-bg-color);
+    color: var(--button-normal-fg-color);
+    border-radius: var(--button-border-radius);
+    width: var(--button-width);
+    height: var(--button-height);
+    padding: var(--button-padding);
+    opacity: 0.4;
+    transition: all 0.1s ease;
+  }
+  div:hover {
+    opacity: 1;
+  }
+</style>

src/renderer/Common/Buttons/ButtonWindow.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Button from "./Button.svelte";
+
+  export let padding = "0px 18px";
+  export let normalBgColor = "var(--bg-header-control)";
+  export let activeBgColor = "var(--bg-header-control-hover)";
+  export let hoverBgColor = "var(--bg-header-control-hover)";
+  export let isActive = false;
+</script>
+
+<Button {padding} {normalBgColor} {activeBgColor} {hoverBgColor} {isActive} on:mousedown on:mouseup>
+  <slot />
+</Button>

src/renderer/Common/Buttons/index.ts

@@ -1,8 +1,3 @@
-export { default as ButtonNormal } from "./ButtonNormal.svelte";
-export { default as ButtonControl } from "./ButtonControl.svelte";
-export { default as ButtonControlHover } from "./ButtonControlHover.svelte";
-export { default as ButtonWinControl } from "./ButtonWinControl.svelte";
-export { default as ButtonTabClose } from "./ButtonTabClose.svelte";
-export { default as ButtonHome } from "./ButtonHome.svelte";
-export { default as ButtonClose } from "./ButtonClose.svelte";
 export { default as Button } from "./Button.svelte";
+export { default as ButtonWindow } from "./ButtonWindow.svelte";
+export { default as ButtonTool } from "./ButtonTool.svelte";

src/renderer/Common/Containers/Flex.svelte

@@ -0,0 +1,9 @@
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    display: flex;
+  }
+</style>

src/renderer/Common/Containers/FlexGrow.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  export let grow = 0;
+</script>
+
+<div style={`--flexGrow: ${grow}`}>
+  <slot />
+</div>
+
+<style>
+  div {
+    flex-grow: var(--flexGrow);
+  }
+</style>