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

feat(ags osk): add excl button and cap slide up anim
All checks were successful
Discord / discord commits (push) Has been skipped
Details

Browse source
This commit is contained in:
matt1432 2024-11-25 13:15:13 -05:00
parent b915591b26
commit 6244f9726e
5 changed files with 72 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
nixosModules/ags/config/configurations/wim.ts
View file

@ -46,10 +46,6 @@ export default () => {
popup_osd(request.replace('popup ', ''));
respond('osd popped up');
}
else if (request.startsWith('osk')) {
console.log(`TODO: ${request.replace('osk ', '')}`);
respond('implement this');
}
},
main: () => {

2
nixosModules/ags/config/style/main.scss
View file

@ -7,7 +7,7 @@
@use '../widgets/icon-browser';
@use '../widgets/misc';
@use '../widgets/notifs';
@use '../widgets/on-screen-display';
@use '../widgets/on-screen-keyboard';
@use '../widgets/osd';
@use '../widgets/powermenu';
@use '../widgets/screenshot';

15
nixosModules/ags/config/widgets/on-screen-keyboard/_index.scss
View file

@ -1,6 +1,21 @@
@use 'sass:color';
@use '../../style/colors';
.settings {
padding: 0.5rem;
.button {
background-color: colors.$window_bg_color;
border: 0.1rem solid color.adjust(colors.$window_bg_color, $lightness: -3%);
border-radius: 0.7rem;
padding: 0.3rem;
&.toggled {
background-color: colors.$accent-color;
}
}
}
.osk {
padding-top: 4px;
border-radius: 10px 10px 0;

13
nixosModules/ags/config/widgets/on-screen-keyboard/gesture.ts
View file

@ -85,9 +85,16 @@ export default (window: OskWindow) => {
return;
}
window.get_child().css = `
margin-bottom: ${offset - HIDDEN_MARGIN}px;
`;
if (offset > HIDDEN_MARGIN) {
window.get_child().css = `
margin-bottom: 0px;
`;
}
else {
window.get_child().css = `
margin-bottom: ${offset - HIDDEN_MARGIN}px;
`;
}
});
}),
);

50
nixosModules/ags/config/widgets/on-screen-keyboard/keyboard.tsx
View file

@ -1,4 +1,5 @@
import { Gtk, Widget } from 'astal/gtk3';
import { Astal, astalify, Gtk, type ConstructProps, Widget } from 'astal/gtk3';
import { register } from 'astal/gobject';
import Separator from '../misc/separator';
@ -6,15 +7,26 @@ import Key from './keys';
import { defaultOskLayout, oskLayouts } from './keyboard-layouts';
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);
}
}
const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4]; // eslint-disable-line
const COLOR = 'rgba(0, 0, 0, 0.3)';
const SPACING = 4;
export default (): Widget.Box => (
export default () => (
<box vertical>
<centerbox
css={`background: ${COLOR};`}
@ -51,8 +63,39 @@ export default (): Widget.Box => (
<box
halign={Gtk.Align.CENTER}
valign={Gtk.Align.CENTER}
valign={Gtk.Align.END}
>
<box
halign={Gtk.Align.CENTER}
className="settings"
>
<ToggleButton
className="button"
cursor="pointer"
active
valign={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>
</box>
<box
@ -71,7 +114,6 @@ export default (): Widget.Box => (
return (
<box vertical>
<box
halign={Gtk.Align.END}
className="row"