From b4e51f101082a9a318ff588616c3e86f16f630c4 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Sun, 19 Nov 2023 20:39:08 -0500 Subject: [PATCH] feat(ags osk): add tablet mode status bar thingy --- .../config/ags/js/corners/screen-corners.js | 8 +- .../ags/js/on-screen-keyboard/gesture.js | 44 +++++- .../ags/js/on-screen-keyboard/keyboard.js | 139 +++++++++++------- .../config/ags/js/on-screen-keyboard/main.js | 32 ++-- devices/wim/config/ags/scss/widgets/osk.scss | 9 +- 5 files changed, 148 insertions(+), 84 deletions(-) diff --git a/devices/wim/config/ags/js/corners/screen-corners.js b/devices/wim/config/ags/js/corners/screen-corners.js index 333e73c..5a52b54 100644 --- a/devices/wim/config/ags/js/corners/screen-corners.js +++ b/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); diff --git a/devices/wim/config/ags/js/on-screen-keyboard/gesture.js b/devices/wim/config/ags/js/on-screen-keyboard/gesture.js index a188bbd..b957c10 100644 --- a/devices/wim/config/ags/js/on-screen-keyboard/gesture.js +++ b/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; }; 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 655c453..de51cb7 100644 --- a/devices/wim/config/ags/js/on-screen-keyboard/keyboard.js +++ b/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({ - class_name: 'osk', - hexpand: true, - start_widget: Box({ - class_name: 'left-side side', - hpack: 'start', - vertical: true, - children: keyboardJson.keys.map((row, rowIndex) => Box({ - vertical: true, - children: [ - Box({ - class_name: 'row', - children: row.map((key, keyIndex) => { - return keyIndex < L_KEY_PER_ROW[rowIndex] ? Key(key) : null; - }), - }), - Separator(4, { vertical: true }), - ], - })), - }), +const color = 'rgba(0, 0, 0, 0.3)'; +export default window => Box({ + vertical: true, + children: [ + CenterBox({ + hpack: 'center', + start_widget: RoundedCorner('bottomright', ` + background-color: ${color}; + `), + center_widget: Box({ + class_name: 'thingy', + css: `background: ${color};`, + }), + end_widget: RoundedCorner('bottomleft', ` + background-color: ${color}; + `), + }), - center_widget: Box({ - hpack: 'center', - vpack: 'center', - children: [ - Box({ - class_name: 'settings', + CenterBox({ + css: `background: ${color};`, + class_name: 'osk', + hexpand: true, + start_widget: Box({ + 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({ - 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'), + 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'), + }), + ], }), ], }), - ], - }), - end_widget: Box({ - class_name: 'right-side side', - hpack: 'end', - vertical: true, - children: keyboardJson.keys.map((row, rowIndex) => Box({ - vertical: true, - children: [ - Box({ - hpack: 'end', - class_name: 'row', - children: row.map((key, keyIndex) => { - return keyIndex >= L_KEY_PER_ROW[rowIndex] ? Key(key) : null; - }), - }), - Separator(4, { vertical: true }), - ], - })), - }), + end_widget: Box({ + class_name: 'right-side side', + hpack: 'end', + vertical: true, + children: keyboardJson.keys.map((row, rowIndex) => Box({ + vertical: true, + children: [ + Box({ + hpack: 'end', + class_name: 'row', + children: row.map((key, keyIndex) => { + return keyIndex >= L_KEY_PER_ROW[rowIndex] ? Key(key) : null; + }), + }), + Separator(4, { vertical: true }), + ], + })), + }), + }), + ], }); diff --git a/devices/wim/config/ags/js/on-screen-keyboard/main.js b/devices/wim/config/ags/js/on-screen-keyboard/main.js index fc8b13f..45b588b 100644 --- a/devices/wim/config/ags/js/on-screen-keyboard/main.js +++ b/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, - closeOnUnfocus: 'none', - connections: [[Tablet, self => { - self.visible = Tablet.oskState; - }, 'osk-toggled']], + connections: [ + [Tablet, (self, state) => { + self.setVisible(state); + }, 'osk-toggled'], + + [Tablet, () => { + if (!Tablet.tabletMode && !Tablet.oskState) + window.visible = false; + }, 'mode-toggled'], + ], }); - window.setChild(Keyboard(window)); + window.child = Keyboard(window); return Gesture(window); }; diff --git a/devices/wim/config/ags/scss/widgets/osk.scss b/devices/wim/config/ags/scss/widgets/osk.scss index 4cabf38..abdbe16 100644 --- a/devices/wim/config/ags/scss/widgets/osk.scss +++ b/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;