nixos-configs/nixosModules/ags/config/widgets/on-screen-keyboard/keyboard.tsx

177 lines
5.9 KiB
TypeScript
Raw Normal View History

2024-11-26 19:25:02 -05:00
import { bind, idle, Variable } from 'astal';
import { Astal, astalify, Gtk, type ConstructProps, Widget } from 'astal/gtk3';
import { register } from 'astal/gobject';
2024-11-25 12:09:03 -05:00
import Separator from '../misc/separator';
2024-11-26 19:25:02 -05:00
import Arc from './arcs';
2024-11-25 12:09:03 -05:00
import Key from './keys';
import { defaultOskLayout, oskLayouts } from './keyboard-layouts';
2024-11-25 12:09:03 -05:00
const keyboardLayout = defaultOskLayout;
const keyboardJson = oskLayouts[keyboardLayout];
@register()
class ToggleButton extends astalify(Gtk.ToggleButton) {
constructor(props: ConstructProps<
ToggleButton,
Gtk.ToggleButton.ConstructorProps
>) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
super(props as any);
}
}
2024-11-25 12:09:03 -05:00
2024-11-26 19:25:02 -05:00
const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4];
2024-11-25 12:09:03 -05:00
const SPACING = 4;
2024-11-26 19:25:02 -05:00
const COLOR = 'rgba(0, 0, 0, 0.3)';
export default () => {
const ThirdWidth = Variable(0);
2024-11-25 12:09:03 -05:00
2024-11-26 19:25:02 -05:00
return (
<box
vertical
onRealize={(self) => idle(() => {
ThirdWidth.set(self.get_allocated_width() / 3);
})}
2024-11-25 12:09:03 -05:00
>
2024-11-26 19:25:02 -05:00
<centerbox
className="osk hidden"
hexpand
2024-11-25 12:09:03 -05:00
>
2024-11-26 19:25:02 -05:00
{/* LEFT */}
<box
widthRequest={bind(ThirdWidth)}
css={`background: ${COLOR};`}
className="left-side side"
halign={Gtk.Align.START}
vertical
>
{...keyboardJson.keys.map((row, rowIndex) => {
const keys = [] as Widget.Box[];
row.forEach((key, keyIndex) => {
if (keyIndex < L_KEY_PER_ROW[rowIndex]) {
keys.push(Key(key));
}
});
2024-11-25 12:09:03 -05:00
2024-11-26 19:25:02 -05:00
return (
<box vertical>
<box className="row">
<Separator size={SPACING} />
2024-11-25 12:09:03 -05:00
2024-11-26 19:25:02 -05:00
{...keys}
</box>
2024-11-25 12:09:03 -05:00
2024-11-26 19:25:02 -05:00
<Separator size={SPACING} vertical />
2024-11-25 12:09:03 -05:00
</box>
2024-11-26 19:25:02 -05:00
);
})}
</box>
2024-11-25 12:09:03 -05:00
2024-11-26 19:25:02 -05:00
{/* MIDDLE */}
<box
2024-11-26 19:25:02 -05:00
widthRequest={bind(ThirdWidth)}
halign={Gtk.Align.CENTER}
2024-11-26 19:25:02 -05:00
valign={Gtk.Align.FILL}
vertical
>
2024-11-26 19:25:02 -05:00
<box
valign={Gtk.Align.START}
>
2024-11-26 19:25:02 -05:00
{bind(ThirdWidth).as((width) => (
<Arc
allocation={{ width, height: 160 }}
css={`background: ${COLOR};`}
/>
))}
</box>
<box
halign={Gtk.Align.FILL}
hexpand
vexpand
css={`background: ${COLOR};`}
className="settings"
>
<centerbox
halign={Gtk.Align.FILL}
hexpand
vexpand
>
<box />
<ToggleButton
className="button"
cursor="pointer"
active
valign={Gtk.Align.CENTER}
halign={Gtk.Align.CENTER}
onToggled={(self) => {
self.toggleClassName(
'toggled',
self.get_active(),
);
if (self.get_toplevel() === self) {
return;
}
(self.get_toplevel() as Widget.Window | undefined)
?.set_exclusivity(
self.get_active() ?
Astal.Exclusivity.EXCLUSIVE :
Astal.Exclusivity.NORMAL,
);
}}
>
Exclusive
</ToggleButton>
<box />
</centerbox>
</box>
</box>
2024-11-25 12:09:03 -05:00
2024-11-26 19:25:02 -05:00
{/* RIGHT */}
<box
widthRequest={bind(ThirdWidth)}
css={`background: ${COLOR};`}
className="right-side side"
halign={Gtk.Align.END}
vertical
>
{...keyboardJson.keys.map((row, rowIndex) => {
const keys = [] as Widget.Box[];
2024-11-25 12:09:03 -05:00
2024-11-26 19:25:02 -05:00
row.forEach((key, keyIndex) => {
if (keyIndex >= L_KEY_PER_ROW[rowIndex]) {
keys.push(Key(key));
}
});
return (
<box vertical>
<box
className="row"
halign={Gtk.Align.END}
>
{...keys}
</box>
<Separator size={SPACING} vertical />
</box>
);
})}
</box>
</centerbox>
</box>
) as Widget.Box;
};