feat(ags osk): add excl button and cap slide up anim
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
b915591b26
commit
6244f9726e
5 changed files with 72 additions and 12 deletions
|
@ -46,10 +46,6 @@ export default () => {
|
||||||
popup_osd(request.replace('popup ', ''));
|
popup_osd(request.replace('popup ', ''));
|
||||||
respond('osd popped up');
|
respond('osd popped up');
|
||||||
}
|
}
|
||||||
else if (request.startsWith('osk')) {
|
|
||||||
console.log(`TODO: ${request.replace('osk ', '')}`);
|
|
||||||
respond('implement this');
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
main: () => {
|
main: () => {
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
@use '../widgets/icon-browser';
|
@use '../widgets/icon-browser';
|
||||||
@use '../widgets/misc';
|
@use '../widgets/misc';
|
||||||
@use '../widgets/notifs';
|
@use '../widgets/notifs';
|
||||||
|
@use '../widgets/on-screen-display';
|
||||||
@use '../widgets/on-screen-keyboard';
|
@use '../widgets/on-screen-keyboard';
|
||||||
@use '../widgets/osd';
|
|
||||||
@use '../widgets/powermenu';
|
@use '../widgets/powermenu';
|
||||||
@use '../widgets/screenshot';
|
@use '../widgets/screenshot';
|
||||||
|
|
|
@ -1,6 +1,21 @@
|
||||||
@use 'sass:color';
|
@use 'sass:color';
|
||||||
@use '../../style/colors';
|
@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 {
|
.osk {
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
border-radius: 10px 10px 0;
|
border-radius: 10px 10px 0;
|
||||||
|
|
|
@ -85,9 +85,16 @@ export default (window: OskWindow) => {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (offset > HIDDEN_MARGIN) {
|
||||||
|
window.get_child().css = `
|
||||||
|
margin-bottom: 0px;
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
else {
|
||||||
window.get_child().css = `
|
window.get_child().css = `
|
||||||
margin-bottom: ${offset - HIDDEN_MARGIN}px;
|
margin-bottom: ${offset - HIDDEN_MARGIN}px;
|
||||||
`;
|
`;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
|
@ -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';
|
import Separator from '../misc/separator';
|
||||||
|
|
||||||
|
@ -6,15 +7,26 @@ import Key from './keys';
|
||||||
|
|
||||||
import { defaultOskLayout, oskLayouts } from './keyboard-layouts';
|
import { defaultOskLayout, oskLayouts } from './keyboard-layouts';
|
||||||
|
|
||||||
|
|
||||||
const keyboardLayout = defaultOskLayout;
|
const keyboardLayout = defaultOskLayout;
|
||||||
const keyboardJson = oskLayouts[keyboardLayout];
|
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 L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4]; // eslint-disable-line
|
||||||
const COLOR = 'rgba(0, 0, 0, 0.3)';
|
const COLOR = 'rgba(0, 0, 0, 0.3)';
|
||||||
const SPACING = 4;
|
const SPACING = 4;
|
||||||
|
|
||||||
export default (): Widget.Box => (
|
export default () => (
|
||||||
<box vertical>
|
<box vertical>
|
||||||
<centerbox
|
<centerbox
|
||||||
css={`background: ${COLOR};`}
|
css={`background: ${COLOR};`}
|
||||||
|
@ -51,8 +63,39 @@ export default (): Widget.Box => (
|
||||||
|
|
||||||
<box
|
<box
|
||||||
halign={Gtk.Align.CENTER}
|
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>
|
||||||
|
|
||||||
<box
|
<box
|
||||||
|
@ -71,7 +114,6 @@ export default (): Widget.Box => (
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<box vertical>
|
<box vertical>
|
||||||
|
|
||||||
<box
|
<box
|
||||||
halign={Gtk.Align.END}
|
halign={Gtk.Align.END}
|
||||||
className="row"
|
className="row"
|
||||||
|
|
Loading…
Reference in a new issue