feat(ags osk): get height dynamically
All checks were successful
Discord / discord commits (push) Has been skipped
All checks were successful
Discord / discord commits (push) Has been skipped
This commit is contained in:
parent
d1982d10c4
commit
1a9c89df97
5 changed files with 36 additions and 26 deletions
|
@ -20,6 +20,10 @@
|
|||
padding-top: 4px;
|
||||
border-radius: 10px 10px 0;
|
||||
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.side {
|
||||
.key {
|
||||
&:active label {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -30,7 +30,7 @@ export default () => (
|
|||
<box vertical>
|
||||
<centerbox
|
||||
css={`background: ${COLOR};`}
|
||||
className="osk"
|
||||
className="osk hidden"
|
||||
hexpand
|
||||
>
|
||||
<box
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 });
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue