feat(ags osk): add exclusive toggle

This commit is contained in:
matt1432 2023-11-19 16:25:01 -05:00
parent 28570f7ac2
commit 2a64ff2a96
3 changed files with 57 additions and 16 deletions

View file

@ -1,4 +1,4 @@
import { Box, CenterBox } from 'resource:///com/github/Aylur/ags/widget.js';
import { Box, CenterBox, Label, ToggleButton } from 'resource:///com/github/Aylur/ags/widget.js';
import Separator from '../misc/separator.js';
import Key from './keys.js';
@ -10,7 +10,7 @@ const keyboardJson = oskLayouts[keyboardLayout];
const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4];
export default () => CenterBox({
export default window => CenterBox({
class_name: 'osk',
hexpand: true,
start_widget: Box({
@ -33,6 +33,25 @@ export default () => CenterBox({
center_widget: Box({
hpack: 'center',
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'),
}),
],
}),
],
}),
end_widget: Box({

View file

@ -10,20 +10,24 @@ execAsync('ydotoold').catch(print);
function releaseAllKeys() {
const keycodes = Array.from(Array(249).keys());
execAsync(['ydotool', 'key', ...keycodes.map(keycode => `${keycode}:0`)])
.then(console.log('Released all keys'))
.catch(print);
execAsync([
'ydotool', 'key',
...keycodes.map(keycode => `${keycode}:0`),
]).catch(print);
}
// Window
export default () => Gesture(PopupWindow({
export default () => {
const window = PopupWindow({
name: 'osk',
exclusivity: 'exclusive',
anchor: ['left', 'bottom', 'right'],
onClose: releaseAllKeys,
closeOnUnfocus: 'none',
connections: [[Tablet, self => {
self.visible = Tablet.oskState;
}, 'osk-toggled']],
child: Keyboard(),
}));
});
window.setChild(Keyboard(window));
return Gesture(window);
};

View file

@ -1,6 +1,24 @@
.osk {
margin-left: 4px;
.settings {
background-color: $bg;
border: 0.08rem solid $darkbg;
border-radius: 0.7rem;
padding: 0.6rem;
.button {
background-color: $bgfull;
border: 0.08rem solid $darkbg;
border-radius: 0.7rem;
padding: 0.5rem;
&.toggled {
background-color: $contrast-bg;
}
}
}
.side {
.key {
&:active label {