parent
1ce40f2c1a
commit
6ca0d7248b
329 changed files with 178 additions and 139 deletions
modules/ags/config/widgets/on-screen-keyboard
165
modules/ags/config/widgets/on-screen-keyboard/keyboard.tsx
Normal file
165
modules/ags/config/widgets/on-screen-keyboard/keyboard.tsx
Normal file
|
@ -0,0 +1,165 @@
|
|||
import { bind, idle, Variable } from 'astal';
|
||||
import { Astal, Gtk, Widget } from 'astal/gtk3';
|
||||
|
||||
import { ToggleButton } from '../misc/subclasses';
|
||||
import Separator from '../misc/separator';
|
||||
|
||||
import Arc from './arcs';
|
||||
import Key from './keys';
|
||||
|
||||
import { defaultOskLayout, oskLayouts } from './keyboard-layouts';
|
||||
|
||||
|
||||
const keyboardLayout = defaultOskLayout;
|
||||
const keyboardJson = oskLayouts[keyboardLayout];
|
||||
|
||||
const L_KEY_PER_ROW = [8, 7, 6, 6, 6, 4];
|
||||
const SPACING = 4;
|
||||
const COLOR = 'rgba(0, 0, 0, 0.5)';
|
||||
|
||||
export default () => {
|
||||
const ThirdWidth = Variable(0);
|
||||
|
||||
return (
|
||||
<box
|
||||
vertical
|
||||
onRealize={(self) => idle(() => {
|
||||
ThirdWidth.set(self.get_allocated_width() / 3);
|
||||
})}
|
||||
>
|
||||
<centerbox
|
||||
className="osk hidden"
|
||||
hexpand
|
||||
>
|
||||
{/* 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));
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<box vertical>
|
||||
<box className="row">
|
||||
<Separator size={SPACING} />
|
||||
|
||||
{...keys}
|
||||
</box>
|
||||
|
||||
<Separator size={SPACING} vertical />
|
||||
</box>
|
||||
);
|
||||
})}
|
||||
</box>
|
||||
|
||||
{/* MIDDLE */}
|
||||
<box
|
||||
widthRequest={bind(ThirdWidth)}
|
||||
halign={Gtk.Align.CENTER}
|
||||
valign={Gtk.Align.FILL}
|
||||
vertical
|
||||
>
|
||||
<box
|
||||
valign={Gtk.Align.START}
|
||||
>
|
||||
{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>
|
||||
|
||||
{/* 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[];
|
||||
|
||||
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;
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue