Make layout buttons resizable

layoutSwitcher.nim

@@ -2,7 +2,7 @@ from std/os import symlinkExists, getConfigDir, `/`
 from std/envvars import existsEnv, getEnv, delEnv, putEnv
 from std/options import Option, some, get, isNone
 from std/strutils import toLowerAscii, split
-import owlkettle, sharedModule
+import pkg/owlkettle, ./sharedModule
 
 const
   dataDir = "/usr/share/tromjaro-layout-switcher"
@@ -10,14 +10,11 @@ const
   profilesDir = dataDir / "profiles"
   # GTK CSS for changing the default icon size and shape of our layout buttons
   gtkCSS = """
-.layout-button > image {
-  -gtk-icon-transform: scale(19);
-}
-
 .layout-button {
-  min-height: 200px;
-  min-width: 300px;
-}"""
+  min-width: 16.2em;
+  min-height: 10.4em;
+}
+"""
   appID = "com.tromjaro.LayoutSwitcher"
   layoutsGrid = [
     [ "Windows-Like (default)", "MacOS-Like (experimental)", "MX-Like" ],
@@ -122,7 +119,7 @@ proc enableLayout(args: tuple[layoutName: string, app: AppState]) {.thread.} =
   if runCommand("/usr/bin/killall", ["mate-hud"]) == 0:
     discard runCommand("/usr/bin/setsid", ["-f", "/usr/lib/mate-hud/mate-hud"])
   sendNotification(appID, "Layout Switcher", layoutName & " layout was enabled",
-    icon = iconsDir / layoutName.toLowerAscii() & "-layout.png")
+    icon = iconsDir / layoutName.toLowerAscii() & "-layout.svg")
 
 var thread: Thread[(string, AppState)]
 
@@ -131,15 +128,18 @@ method view(app: AppState): Widget =
     Window:
       title = "TROMjaro Layout Switcher"
       # Shrink window to the smallest size
-      defaultSize = (0, 0)
+      defaultSize = (1, 1)
       iconName = "tromjaro-layout-switcher"
       if app.loading:
-        Box(orient = OrientY, margin = 70):
-          Spinner(spinning = true)
-          Label(text = "Loading your layout, please wait...") {.expand: false.}
+        Box(orient = OrientY):
+          Spinner {.vAlign: AlignEnd.}:
+            spinning = true
+            sizeRequest = (300, 300)
+          Label {.vAlign: AlignStart.}:
+            text = "Loading your layout, please wait..."
       else:
         Box(orient = OrientY, margin = 7, spacing = 5):
-          Box(orient = OrientX):
+          Box(orient = OrientX) {.vAlign: AlignEnd.}:
             Label {.hAlign: AlignEnd.}:
               text = "Please use the"
             LinkButton {.expand: false.}:
@@ -148,21 +148,22 @@ method view(app: AppState): Widget =
                 discard runCommand("/usr/bin/setsid", ["-f", "/usr/bin/xfce4-panel-profiles"])
             Label {.hAlign: AlignStart.}:
               text = "to save your current configuration in case you did any manual changes, else you may lose them."
-          Label:
+          Label {.vAlign: AlignStart.}:
             text = "Changing to or from any layout that has global menu will require your admin password."
           for row in layoutsGrid:
-            Box(orient = OrientX, spacing = 5):
+            Box(orient = OrientX, spacing = 5) {.vAlign: AlignStart.}:
               for tooltip in row:
                 let layoutName = tooltip.split(' ', 1)[0]
-                Button {.vAlign: AlignCenter, hAlign: AlignCenter.}:
-                  icon = layoutName.toLowerAscii() & "-layout"
+                Button {.hAlign: AlignCenter.}:
+                  Picture:
+                    pixbuf = loadPixbuf(iconsDir / layoutName.toLowerAscii() & "-layout.svg")
                   tooltip = tooltip
                   style = [ButtonFlat, StyleClass("layout-button")]
                   proc clicked() =
                     app.loading = true
                     createThread(thread, enableLayout, (layoutName, app))
 
-brew(appID, gui(App()), icons=[iconsDir], stylesheets=[newStylesheet(gtkCSS)])
+brew(appID, gui(App()), stylesheets=[newStylesheet(gtkCSS)])
 
 if running(thread):
   joinThread(thread)