From 4a892528ff0fa41361490a153becdc91f0b79250 Mon Sep 17 00:00:00 2001
From: matt1432 <matt@nelim.org>
Date: Tue, 28 Nov 2023 16:29:17 -0500
Subject: [PATCH] feat(ags osk): move exclusive toggle to thingy

---
 .../ags/js/on-screen-keyboard/keyboard.js     | 51 ++++++++++---------
 devices/wim/config/ags/scss/widgets/osk.scss  | 19 +++----
 2 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/devices/wim/config/ags/js/on-screen-keyboard/keyboard.js b/devices/wim/config/ags/js/on-screen-keyboard/keyboard.js
index a28d6110..ddbdbb1f 100644
--- a/devices/wim/config/ags/js/on-screen-keyboard/keyboard.js
+++ b/devices/wim/config/ags/js/on-screen-keyboard/keyboard.js
@@ -23,9 +23,34 @@ export default (window) => Box({
                 background-color: ${COLOR};
             `),
 
-            center_widget: Box({
+            center_widget: CenterBox({
                 class_name: 'thingy',
                 css: `background: ${COLOR};`,
+                center_widget: Box({
+                    hpack: 'center',
+                    class_name: 'settings',
+
+                    children: [
+                        ToggleButton({
+                            cursor: 'pointer',
+                            class_name: 'button',
+                            active: true,
+                            vpack: 'center',
+
+                            connections: [['toggled', (self) => {
+                                self.toggleClassName(
+                                    'toggled',
+                                    self.get_active(),
+                                );
+                                window.exclusivity = self.get_active() ?
+                                    'exclusive' :
+                                    'normal';
+                            }]],
+
+                            child: Label('Exclusive'),
+                        }),
+                    ],
+                }),
             }),
 
             end_widget: RoundedCorner('bottomleft', `
@@ -70,30 +95,6 @@ export default (window) => Box({
                 vpack: 'center',
 
                 children: [
-                    Box({
-                        class_name: 'settings',
-
-                        children: [
-                            ToggleButton({
-                                cursor: 'pointer',
-                                class_name: 'button',
-                                active: true,
-                                vpack: 'center',
-
-                                connections: [['toggled', (self) => {
-                                    self.toggleClassName(
-                                        'toggled',
-                                        self.get_active(),
-                                    );
-                                    window.exclusivity = self.get_active() ?
-                                        'exclusive' :
-                                        'normal';
-                                }]],
-
-                                child: Label('Exclusive'),
-                            }),
-                        ],
-                    }),
                 ],
             }),
 
diff --git a/devices/wim/config/ags/scss/widgets/osk.scss b/devices/wim/config/ags/scss/widgets/osk.scss
index abdbe160..f5e32777 100644
--- a/devices/wim/config/ags/scss/widgets/osk.scss
+++ b/devices/wim/config/ags/scss/widgets/osk.scss
@@ -2,29 +2,26 @@
   border-radius: 2rem 2rem 0 0;
   min-height: 2.7rem;
   min-width: 20rem;
-}
-
-.osk {
-  padding-top: 4px;
-  border-radius: 10px 10px 0;
 
   .settings {
-    background-color: $bg;
-    border: 0.08rem solid $darkbg;
-    border-radius: 0.7rem;
-    padding: 0.6rem;
+    padding: 0.5rem;
 
     .button {
       background-color: $bgfull;
-      border: 0.08rem solid $darkbg;
+      border: 0.1rem solid $darkbg;
       border-radius: 0.7rem;
-      padding: 0.5rem;
+      padding: 0.3rem;
 
       &.toggled {
         background-color: $contrast-bg;
       }
     }
   }
+}
+
+.osk {
+  padding-top: 4px;
+  border-radius: 10px 10px 0;
 
   .side {
     .key {