feat(ags osk): add tablet mode status bar thingy

devices/wim/config/ags/js/corners/screen-corners.js

@@ -2,7 +2,10 @@ import { Box, DrawingArea } from 'resource:///com/github/Aylur/ags/widget.js';
 import Gtk from 'gi://Gtk';
 const Lang = imports.lang;
 
-export default place => Box({
+export default (
+    place,
+    css = 'background-color: black;',
+) => Box({
     hpack: place.includes('left') ? 'start' : 'end',
     vpack: place.includes('top')  ? 'start' : 'end',
     css: `
@@ -14,10 +17,9 @@ export default place => Box({
         `,
     child: DrawingArea({
         css: `
-            background-color: black;
             border-radius: 18px;
             border-width: 0.068rem;
-        `,
+        ` + css,
         setup: widget => {
             const r = widget.get_style_context()
                 .get_property('border-radius', Gtk.StateFlags.NORMAL);

devices/wim/config/ags/js/on-screen-keyboard/gesture.js

@@ -1,10 +1,46 @@
+import { execAsync, timeout } from 'resource:///com/github/Aylur/ags/utils.js';
+
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
+
 import Gtk from 'gi://Gtk';
 
 
+const releaseAllKeys = () => {
+    const keycodes = Array.from(Array(249).keys());
+    execAsync([
+        'ydotool', 'key',
+        ...keycodes.map(keycode => `${keycode}:0`),
+    ]).catch(print);
+};
+
+const hidden = 340;
 export default window => {
+    window.child.setCss(`margin-bottom: -${hidden}px;`);
     const gesture = Gtk.GestureDrag.new(window);
 
+    window.setVisible = state => {
+        if (state) {
+            window.visible = true;
+            window.setSlideDown();
+            window.child.setCss(`
+                transition: margin-bottom 0.7s cubic-bezier(0.36, 0, 0.66, -0.56);
+                margin-bottom: 0px;
+            `);
+        }
+        else {
+            timeout(710, () => {
+                if (!Tablet.tabletMode)
+                    window.visible = false;
+            });
+            releaseAllKeys();
+            window.setSlideUp();
+            window.child.setCss(`
+                transition: margin-bottom 0.7s cubic-bezier(0.36, 0, 0.66, -0.56);
+                margin-bottom: -${hidden}px;
+            `);
+        }
+    };
+
     gesture.signals = [];
     window.killGestureSigs = () => {
         gesture.signals.forEach(id => gesture.disconnect(id));
@@ -12,8 +48,6 @@ export default window => {
     };
 
     window.setSlideUp = () => {
-        console.log(window.get_allocated_height());
-
         window.killGestureSigs();
 
         // Begin drag
@@ -36,7 +70,7 @@ export default window => {
                         return;
 
                     window.child.setCss(`
-                        margin-bottom: ${offset}px;
+                        margin-bottom: ${offset - hidden}px;
                     `);
                 });
             }),
@@ -47,7 +81,7 @@ export default window => {
             gesture.connect('drag-end', () => {
                 window.child.setCss(`
                     transition: margin-bottom 0.5s ease-in-out;
-                    margin-bottom: 0px;
+                    margin-bottom: -${hidden}px;
                 `);
             }),
         );
@@ -93,7 +127,5 @@ export default window => {
         );
     };
 
-    window.setSlideDown();
-
     return window;
 };

devices/wim/config/ags/js/on-screen-keyboard/keyboard.js

@@ -1,6 +1,7 @@
 import { Box, CenterBox, Label, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
-import Separator from '../misc/separator.js';
 
+import Separator from '../misc/separator.js';
+import RoundedCorner from '../corners/screen-corners.js';
 import Key from './keys.js';
 
 import { defaultOskLayout, oskLayouts } from './keyboard-layouts.js';
@@ -10,66 +11,90 @@ const keyboardJson = oskLayouts[keyboardLayout];
 const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4];
 
 
-export default window => CenterBox({
+const color = 'rgba(0, 0, 0, 0.3)';
-    class_name: 'osk',
+export default window => Box({
-    hexpand: true,
+    vertical: true,
-    start_widget: Box({
+    children: [
-        class_name: 'left-side side',
+        CenterBox({
-        hpack: 'start',
+            hpack: 'center',
-        vertical: true,
+            start_widget: RoundedCorner('bottomright', `
-        children: keyboardJson.keys.map((row, rowIndex) => Box({
+                background-color: ${color};
-            vertical: true,
+            `),
-            children: [
+            center_widget: Box({
-                Box({
+                class_name: 'thingy',
-                    class_name: 'row',
+                css: `background: ${color};`,
-                    children: row.map((key, keyIndex) => {
+            }),
-                        return keyIndex < L_KEY_PER_ROW[rowIndex] ? Key(key) : null;
+            end_widget: RoundedCorner('bottomleft', `
-                    }),
+                background-color: ${color};
-                }),
+            `),
-                Separator(4, { vertical: true }),
+        }),
-            ],
-        })),
-    }),
 
-    center_widget: Box({
+        CenterBox({
-        hpack: 'center',
+            css: `background: ${color};`,
-        vpack: 'center',
+            class_name: 'osk',
-        children: [
+            hexpand: true,
-            Box({
+            start_widget: Box({
-                class_name: 'settings',
+                class_name: 'left-side side',
+                hpack: 'start',
+                vertical: true,
+                children: keyboardJson.keys.map((row, rowIndex) => Box({
+                    vertical: true,
+                    children: [
+                        Box({
+                            class_name: 'row',
+                            children: [
+                                Separator(4),
+                                ...row.map((key, keyIndex) => {
+                                    return keyIndex < L_KEY_PER_ROW[rowIndex] ? Key(key) : null;
+                                }),
+                            ],
+                        }),
+                        Separator(4, { vertical: true }),
+                    ],
+                })),
+            }),
+
+            center_widget: Box({
+                hpack: 'center',
+                vpack: 'center',
                 children: [
-                    ToggleButton({
+                    Box({
-                        cursor: 'pointer',
+                        class_name: 'settings',
-                        class_name: 'button',
+                        children: [
-                        active: true,
+                            ToggleButton({
-                        vpack: 'center',
+                                cursor: 'pointer',
-                        connections: [['toggled', self => {
+                                class_name: 'button',
-                            self.toggleClassName('toggled', self.get_active());
+                                active: true,
-                            window.exclusivity = self.get_active() ? 'exclusive' : 'normal';
+                                vpack: 'center',
-                        }]],
+                                connections: [['toggled', self => {
-                        child: Label('Exclusive'),
+                                    self.toggleClassName('toggled', self.get_active());
+                                    window.exclusivity = self.get_active() ? 'exclusive' : 'normal';
+                                }]],
+                                child: Label('Exclusive'),
+                            }),
+                        ],
                     }),
                 ],
             }),
-        ],
-    }),
 
-    end_widget: Box({
+            end_widget: Box({
-        class_name: 'right-side side',
+                class_name: 'right-side side',
-        hpack: 'end',
+                hpack: 'end',
-        vertical: true,
+                vertical: true,
-        children: keyboardJson.keys.map((row, rowIndex) => Box({
+                children: keyboardJson.keys.map((row, rowIndex) => Box({
-            vertical: true,
+                    vertical: true,
-            children: [
+                    children: [
-                Box({
+                        Box({
-                    hpack: 'end',
+                            hpack: 'end',
-                    class_name: 'row',
+                            class_name: 'row',
-                    children: row.map((key, keyIndex) => {
+                            children: row.map((key, keyIndex) => {
-                        return keyIndex >= L_KEY_PER_ROW[rowIndex] ? Key(key) : null;
+                                return keyIndex >= L_KEY_PER_ROW[rowIndex] ? Key(key) : null;
-                    }),
+                            }),
-                }),
+                        }),
-                Separator(4, { vertical: true }),
+                        Separator(4, { vertical: true }),
-            ],
+                    ],
-        })),
+                })),
-    }),
+            }),
+        }),
+    ],
 });

devices/wim/config/ags/js/on-screen-keyboard/main.js

@@ -1,33 +1,31 @@
+import { Window } from 'resource:///com/github/Aylur/ags/widget.js';
 import { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
 
 import Gesture from './gesture.js';
 import Keyboard from './keyboard.js';
-import PopupWindow from '../misc/popup.js';
 
 
-// ydotool stuff
+// start ydotool daemon
 execAsync('ydotoold').catch(print);
 
-function releaseAllKeys() {
-    const keycodes = Array.from(Array(249).keys());
-    execAsync([
-        'ydotool', 'key',
-        ...keycodes.map(keycode => `${keycode}:0`),
-    ]).catch(print);
-}
-
 // Window
 export default () => {
-    const window = PopupWindow({
+    const window = Window({
         name: 'osk',
+        visible: false,
         anchor: ['left', 'bottom', 'right'],
-        onClose: releaseAllKeys,
+        connections: [
-        closeOnUnfocus: 'none',
+            [Tablet, (self, state) => {
-        connections: [[Tablet, self => {
+                self.setVisible(state);
-            self.visible = Tablet.oskState;
+            }, 'osk-toggled'],
-        }, 'osk-toggled']],
+
+            [Tablet, () => {
+                if (!Tablet.tabletMode && !Tablet.oskState)
+                    window.visible = false;
+            }, 'mode-toggled'],
+        ],
     });
-    window.setChild(Keyboard(window));
+    window.child = Keyboard(window);
 
     return Gesture(window);
 };

devices/wim/config/ags/scss/widgets/osk.scss

@@ -1,5 +1,12 @@
+.thingy {
+  border-radius: 2rem 2rem 0 0;
+  min-height: 2.7rem;
+  min-width: 20rem;
+}
+
 .osk {
-  margin-left: 4px;
+  padding-top: 4px;
+  border-radius: 10px 10px 0;
 
   .settings {
     background-color: $bg;