feat(ags osk): get height dynamically
All checks were successful
Discord / discord commits (push) Has been skipped

This commit is contained in:
matt1432 2024-11-25 21:17:36 -05:00
parent d1982d10c4
commit 1a9c89df97
5 changed files with 36 additions and 26 deletions

View file

@ -20,6 +20,10 @@
padding-top: 4px;
border-radius: 10px 10px 0;
&.hidden {
opacity: 0;
}
.side {
.key {
&:active label {

View file

@ -1,5 +1,5 @@
import { execAsync, idle } from 'astal';
import { Gtk } from 'astal/gtk3';
import { Astal, Gtk } from 'astal/gtk3';
import Tablet from '../../services/tablet';
import { hyprMessage } from '../../lib';
@ -8,14 +8,14 @@ import OskWindow from './osk-window';
const KEY_N = 249;
const HIDDEN_MARGIN = 340;
const KEYCODES = Array.from(Array(KEY_N).keys());
const ANIM_DURATION = 700;
const releaseAllKeys = () => {
const keycodes = Array.from(Array(KEY_N).keys());
execAsync([
'ydotool', 'key',
...keycodes.map((keycode) => `${keycode}:0`),
...KEYCODES.map((keycode) => `${keycode}:0`),
]).catch(print);
};
@ -23,19 +23,26 @@ export default (window: OskWindow) => {
const tablet = Tablet.get_default();
let signals = [] as number[];
let calculatedHeight = 0;
idle(() => {
calculatedHeight = window.get_allocated_height();
tablet.oskState = false;
setTimeout(() => {
window.get_grandchildren()[0].toggleClassName('hidden', false);
window.set_exclusivity(Astal.Exclusivity.EXCLUSIVE);
}, ANIM_DURATION * 3);
});
const gesture = Gtk.GestureDrag.new(window);
window.get_child().css = `
margin-bottom: -${HIDDEN_MARGIN}px;
`;
window.hook(tablet, 'notify::osk-state', () => {
if (tablet.oskState) {
window.setSlideDown();
window.get_child().css = `
transition: margin-bottom 0.7s cubic-bezier(0.36, 0, 0.66, -0.56);
transition: margin-bottom ${ANIM_DURATION}ms cubic-bezier(0.36, 0, 0.66, -0.56);
margin-bottom: 0px;
`;
}
@ -45,16 +52,12 @@ export default (window: OskWindow) => {
window.setSlideUp();
window.get_child().css = `
transition: margin-bottom 0.7s cubic-bezier(0.36, 0, 0.66, -0.56);
margin-bottom: -${HIDDEN_MARGIN}px;
transition: margin-bottom ${ANIM_DURATION}ms cubic-bezier(0.36, 0, 0.66, -0.56);
margin-bottom: -${calculatedHeight}px;
`;
}
});
idle(() => {
tablet.oskState = false;
});
window.killGestureSigs = () => {
signals.forEach((id) => {
gesture.disconnect(id);
@ -89,20 +92,20 @@ export default (window: OskWindow) => {
if (offset < 0) {
window.get_child().css = `
transition: margin-bottom 0.5s ease-in-out;
margin-bottom: -${HIDDEN_MARGIN}px;
margin-bottom: -${calculatedHeight}px;
`;
return;
}
if (offset > HIDDEN_MARGIN) {
if (offset > calculatedHeight) {
window.get_child().css = `
margin-bottom: 0px;
`;
}
else {
window.get_child().css = `
margin-bottom: ${offset - HIDDEN_MARGIN}px;
margin-bottom: ${offset - calculatedHeight}px;
`;
}
});
@ -120,7 +123,7 @@ export default (window: OskWindow) => {
const currentY = JSON.parse(out).y;
const offset = window.startY - currentY;
if (offset > HIDDEN_MARGIN) {
if (offset > calculatedHeight) {
window.get_child().css = `
transition: margin-bottom 0.5s ease-in-out;
margin-bottom: 0px;
@ -130,7 +133,7 @@ export default (window: OskWindow) => {
else {
window.get_child().css = `
transition: margin-bottom 0.5s ease-in-out;
margin-bottom: -${HIDDEN_MARGIN}px;
margin-bottom: -${calculatedHeight}px;
`;
}
});
@ -188,10 +191,10 @@ export default (window: OskWindow) => {
const currentY = JSON.parse(out).y;
const offset = window.startY - currentY;
if (offset < -(HIDDEN_MARGIN * 2 / 3)) {
if (offset < -(calculatedHeight * 2 / 3)) {
window.get_child().css = `
transition: margin-bottom 0.5s ease-in-out;
margin-bottom: -${HIDDEN_MARGIN}px;
margin-bottom: -${calculatedHeight}px;
`;
tablet.oskState = false;

View file

@ -30,7 +30,7 @@ export default () => (
<box vertical>
<centerbox
css={`background: ${COLOR};`}
className="osk"
className="osk hidden"
hexpand
>
<box

View file

@ -14,13 +14,12 @@ export default () => {
name="osk"
namespace="noanim-osk"
exclusivity={Astal.Exclusivity.EXCLUSIVE}
layer={Astal.Layer.OVERLAY}
anchor={
Astal.WindowAnchor.BOTTOM |
Astal.WindowAnchor.LEFT |
Astal.WindowAnchor.RIGHT
}
layer={Astal.Layer.OVERLAY}
>
<Keyboard />
</OskWindow>

View file

@ -14,6 +14,10 @@ export default class OskWindow extends Widget.Window {
return super.get_child() as Widget.Box;
}
get_grandchildren(): (Widget.Box | Widget.CenterBox)[] {
return this.get_child().get_children() as (Widget.Box | Widget.CenterBox)[];
}
constructor({ ...rest }: Widget.WindowProps) {
super({ application: App, ...rest });
}