Use inline svgs for window controls for better theme compatibility

MercuryWorkshop · Dec 10, 2024 · bb70780 · bb70780
1 parent 63a2f76
commit bb70780
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 46 deletions.
diff --git a/public/assets/window/close.svg b/public/assets/window/close.svg
diff --git a/public/assets/window/maximize.svg b/public/assets/window/maximize.svg
diff --git a/public/assets/window/minimize.svg b/public/assets/window/minimize.svg
diff --git a/public/assets/window/restore.svg b/public/assets/window/restore.svg
diff --git a/src/AliceWM.css b/src/AliceWM.css
@@ -23,6 +23,11 @@
     opacity: 1;
 }
 
+.aliceWMwin svg {
+    fill: var(--theme-fg);
+    height: 12px;
+}
+
 .scaletransition {
     transition:
         visibility 0s,

diff --git a/src/AliceWM.tsx b/src/AliceWM.tsx
@@ -81,7 +81,9 @@ class WMWindow extends EventTarget implements Process {
         this.state.title = title;
     }
 
-    maximizeImg: HTMLImageElement;
+    maximizeImg: HTMLOrSVGElement;
+    maximizeSvg: HTMLOrSVGElement;
+    restoreSvg: HTMLOrSVGElement;
     constructor(
         wininfo: WindowInformation,
         public app?: App,
@@ -98,6 +100,42 @@ class WMWindow extends EventTarget implements Process {
         }
         this.clampWindows = !!anura.settings.get("clampWindows");
 
+        this.maximizeSvg = (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="12px"
+                height="12px"
+                viewBox="0 0 12 12"
+                version="1.1"
+            >
+                <g id="surface1">
+                    <path
+                        style=" stroke:none;fill-rule:evenodd;fill-opacity:1;"
+                        d="M 11.5 0.5 L 11.5 11.5 L 0.5 11.5 L 0.5 0.5 Z M 10 10 L 2 10 L 2 2 L 10 2 Z M 10 10 "
+                    />
+                </g>
+            </svg>
+        );
+
+        this.restoreSvg = (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                width="12px"
+                height="12px"
+                viewBox="0 0 12 12"
+                version="1.1"
+            >
+                <g id="surface1">
+                    <path
+                        style=" stroke:none;fill-rule:evenodd;fill-opacity:1;"
+                        d="M 11.5 8 L 4 8 L 4 0.5 L 11.5 0.5 Z M 5.5 6.5 L 5.5 2 L 10 2 L 10 6.5 Z M 2 4 L 0.5 4 L 0.5 11.5 L 8 11.5 L 8 10 L 2 10 Z M 2 4 "
+                    />
+                </g>
+            </svg>
+        );
+
         this.element = (
             <div
                 class="aliceWMwin opacity0"
@@ -172,35 +210,47 @@ class WMWindow extends EventTarget implements Process {
                             this.minimize();
                         }}
                     >
-                        <img
-                            src="/assets/window/minimize.svg"
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink"
+                            width="12px"
                             height="12px"
-                            class="windowButtonIcon"
-                        />
+                            viewBox="0 0 12 12"
+                            version="1.1"
+                        >
+                            <g id="surface1">
+                                <path
+                                    style=" stroke:none;fill-rule:evenodd;fill-opacity:1;"
+                                    d="M 0.5 10 L 11.5 10 L 11.5 11.5 L 0.5 11.5 Z M 0.5 10 "
+                                />
+                            </g>
+                        </svg>
                     </button>
                     <button
                         class="windowButton maximize"
                         on:click={this.maximize.bind(this)}
                     >
-                        {
-                            (this.maximizeImg = (
-                                <img
-                                    src="/assets/window/maximize.svg"
-                                    height="12px"
-                                    class="windowButtonIcon"
-                                />
-                            ) as HTMLImageElement)
-                        }
+                        {(this.maximizeImg = this.maximizeSvg)}
                     </button>
                     <button
                         class="windowButton close"
                         on:click={this.close.bind(this)}
                     >
-                        <img
-                            src="/assets/window/close.svg"
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            xmlns:xlink="http://www.w3.org/1999/xlink"
+                            width="12px"
                             height="12px"
-                            class="windowButtonIcon"
-                        />
+                            viewBox="0 0 12 12"
+                            version="1.1"
+                        >
+                            <g id="surface1">
+                                <path
+                                    style=" stroke:none;fill-rule:evenodd;fill-opacity:1;"
+                                    d="M 11.5 1.609375 L 10.390625 0.5 L 6 4.890625 L 1.609375 0.5 L 0.5 1.609375 L 4.890625 6 L 0.5 10.390625 L 1.609375 11.5 L 6 7.109375 L 10.390625 11.5 L 11.5 10.390625 L 7.109375 6 Z M 11.5 1.609375 "
+                                />
+                            </g>
+                        </svg>
                     </button>
                 </div>
                 {
@@ -599,7 +649,7 @@ class WMWindow extends EventTarget implements Process {
                 this.element.classList.remove("scaletransition");
             }, 200);
 
-        this.maximizeImg.src = "/assets/window/restore.svg";
+        this.maximizeImg = this.restoreSvg;
 
         this.justresized = true;
         this.maximized = true;
@@ -631,7 +681,7 @@ class WMWindow extends EventTarget implements Process {
 
             WMSplitBar.prototype.cleanup();
 
-            this.maximizeImg.src = "/assets/window/maximize.svg";
+            this.maximizeImg = this.maximizeSvg;
 
             this.element.setAttribute("style", this.oldstyle!);
             this.justresized = true;
@@ -655,7 +705,7 @@ class WMWindow extends EventTarget implements Process {
                 this.element.classList.remove("maxtransition");
                 this.element.classList.remove("scaletransition");
             }, 200);
-        this.maximizeImg.src = "/assets/window/maximize.svg";
+        this.maximizeImg = this.maximizeSvg;
 
         await sleep(10); // Race condition as a feature
         this.justresized = true;
@@ -952,7 +1002,7 @@ class WMWindow extends EventTarget implements Process {
         );
         this.onresize(this.width, this.height);
 
-        this.maximizeImg.src = "/assets/window/restore.svg";
+        this.maximizeImg = this.restoreSvg;
         this.snapped = true;
     }