matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
matt1432 2023-11-19 20:39:08 -05:00
parent aaea660e45
commit b4e51f1010
5 changed files with 148 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
devices/wim/config/ags/js/corners/screen-corners.js
View file

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

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

@ -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 Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
import Gtk from 'gi://Gtk'; 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 => { export default window => {
window.child.setCss(`margin-bottom: -${hidden}px;`);
const gesture = Gtk.GestureDrag.new(window); 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 = []; gesture.signals = [];
window.killGestureSigs = () => { window.killGestureSigs = () => {
gesture.signals.forEach(id => gesture.disconnect(id)); gesture.signals.forEach(id => gesture.disconnect(id));
@ -12,8 +48,6 @@ export default window => {
}; };
window.setSlideUp = () => { window.setSlideUp = () => {
console.log(window.get_allocated_height());
window.killGestureSigs(); window.killGestureSigs();
// Begin drag // Begin drag
@ -36,7 +70,7 @@ export default window => {
return; return;
window.child.setCss(` window.child.setCss(`
margin-bottom: ${offset}px; margin-bottom: ${offset - hidden}px;
`); `);
}); });
}), }),
@ -47,7 +81,7 @@ export default window => {
gesture.connect('drag-end', () => { gesture.connect('drag-end', () => {
window.child.setCss(` window.child.setCss(`
transition: margin-bottom 0.5s ease-in-out; 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; return window;
}; };

139
devices/wim/config/ags/js/on-screen-keyboard/keyboard.js
View file

@ -1,6 +1,7 @@
import { Box, CenterBox, Label, ToggleButton } 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 Separator from '../misc/separator.js';
import RoundedCorner from '../corners/screen-corners.js';
import Key from './keys.js'; import Key from './keys.js';
import { defaultOskLayout, oskLayouts } from './keyboard-layouts.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]; 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: [ 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 }),
], ],
})), })),
}), }),
}),
],
}); });

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

@ -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 { execAsync } from 'resource:///com/github/Aylur/ags/utils.js';
import Gesture from './gesture.js'; import Gesture from './gesture.js';
import Keyboard from './keyboard.js'; import Keyboard from './keyboard.js';
import PopupWindow from '../misc/popup.js';
// ydotool stuff // start ydotool daemon
execAsync('ydotoold').catch(print); execAsync('ydotoold').catch(print);
function releaseAllKeys() {
const keycodes = Array.from(Array(249).keys());
execAsync([
'ydotool', 'key',
...keycodes.map(keycode => `${keycode}:0`),
]).catch(print);
}
// Window // Window
export default () => { export default () => {
const window = PopupWindow({ const window = Window({
name: 'osk', name: 'osk',
visible: false,
anchor: ['left', 'bottom', 'right'], 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); return Gesture(window);
}; };

9
devices/wim/config/ags/scss/widgets/osk.scss
View file

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