fix keyboard layout

This commit is contained in:
Aleksander
2025-06-18 23:28:03 +02:00
parent 0abcf251a3
commit 7d7ab8055d
4 changed files with 77 additions and 93 deletions

View File

@@ -28,7 +28,7 @@
`padding`, `padding_left`, `padding_right`, `padding_top`, `padding_bottom`: units (42) or percent (42%) `padding`, `padding_left`, `padding_right`, `padding_top`, `padding_bottom`: units (42) or percent (42%)
`overflow_x`, `overflow_y`: hidden | visible | clip | scroll `overflow`, `overflow_x`, `overflow_y`: hidden | visible | clip | scroll
`min_width`, `min_height`: units (42) or percent (42%) `min_width`, `min_height`: units (42) or percent (42%)

View File

@@ -84,6 +84,27 @@ pub fn style_from_node<'a>(
style.padding.bottom = dim; style.padding.bottom = dim;
} }
} }
"overflow" => match &*value {
"hidden" => {
style.overflow.x = Overflow::Hidden;
style.overflow.y = Overflow::Hidden;
}
"visible" => {
style.overflow.x = Overflow::Visible;
style.overflow.y = Overflow::Visible;
}
"clip" => {
style.overflow.x = Overflow::Clip;
style.overflow.y = Overflow::Clip;
}
"scroll" => {
style.overflow.x = Overflow::Scroll;
style.overflow.y = Overflow::Scroll;
}
_ => {
print_invalid_attrib(&key, &value);
}
},
"overflow_x" => match &*value { "overflow_x" => match &*value {
"hidden" => style.overflow.x = Overflow::Hidden, "hidden" => style.overflow.x = Overflow::Hidden,
"visible" => style.overflow.x = Overflow::Visible, "visible" => style.overflow.x = Overflow::Visible,

View File

@@ -3,111 +3,75 @@
<!-- Key cap with a single label. --> <!-- Key cap with a single label. -->
<!-- Used for letter keys on layouts without AltGr. --> <!-- Used for letter keys on layouts without AltGr. -->
<template name="KeyLetter"> <template name="KeyLetter">
<rectangle <div width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}">
border_color="#0044CC" <rectangle
border="2" margin="4" width="100%" overflow="hidden" box_sizing="border_box"
round="8" border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical"
color="#000A1C" align_items="center"
color2="#000002" justify_content="center">
gradient="vertical" <label color="#FFFFFF" text="${text}" size="24" />
width="${width}" </rectangle>
height="${height}" </div>
min_width="${width}"
min_height="${height}"
max_width="${width}"
max_height="${height}"
margin="4"
align_items="center"
justify_content="center">
<label color="#FFFFFF" text="${text}" size="24" />
</rectangle>
</template> </template>
<!-- Key cap with a primary label on top and an AltGr label on bottom. --> <!-- Key cap with a primary label on top and an AltGr label on bottom. -->
<!-- Used for letter keys on layouts with AltGr. --> <!-- Used for letter keys on layouts with AltGr. -->
<template name="KeyLetterAltGr"> <template name="KeyLetterAltGr">
<rectangle <div width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}">
border_color="#0044CC" <rectangle
border="2" margin="4" width="100%" overflow="hidden" box_sizing="border_box"
round="8" border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical"
color="#000A1C" gap="4"
color2="#000002" flex_direction="column"
gradient="vertical" align_items="center"
width="${width}" justify_content="center">
height="${height}" <label color="#FFFFFF" text="${text}" size="24" />
min_width="${width}" <label color="#FFFFFF70" text="${text_altgr}" size="24" />
min_height="${height}" </rectangle>
max_width="${width}" </div>
max_height="${height}"
margin="4"
gap="4"
flex_direction="column"
align_items="center"
justify_content="center">
<label color="#FFFFFF" text="${text}" size="24" />
<label color="#FFFFFF70" text="${text_altgr}" size="24" />
</rectangle>
</template> </template>
<!-- Key cap with a primary label on bottom and a Shift label on top. --> <!-- Key cap with a primary label on bottom and a Shift label on top. -->
<!-- Used for number & symbol keys on layouts without AltGr. --> <!-- Used for number & symbol keys on layouts without AltGr. -->
<template name="KeySymbol"> <template name="KeySymbol">
<rectangle <div width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}">
border_color="#0044CC" <rectangle
border="2" margin="4" width="100%" overflow="hidden" box_sizing="border_box"
round="8" border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical"
color="#000A1C" gap="4"
color2="#000002" flex_direction="column"
gradient="vertical" align_items="center"
width="${width}" justify_content="center"
height="${height}" >
min_width="${width}" <label color="#FFFFFF70" text="${text_shift}" size="24" />
min_height="${height}" <label color="#FFFFFF" text="${text}" size="24" />
max_width="${width}" </rectangle>
max_height="${height}" </div>
margin="4"
gap="4"
flex_direction="column"
align_items="center"
justify_content="center">
<label color="#FFFFFF70" text="${text_shift}" size="24" />
<label color="#FFFFFF" text="${text}" size="24" />
</rectangle>
</template> </template>
<!-- Key cap with a primary label on bottom-left, an AltGr label on bottom-right, Shift label on top-left. --> <!-- Key cap with a primary label on bottom-left, an AltGr label on bottom-right, Shift label on top-left. -->
<!-- Used for number & symbol keys on layouts with AltGr. --> <!-- Used for number & symbol keys on layouts with AltGr. -->
<template name="KeySymbolAltGr"> <template name="KeySymbolAltGr">
<rectangle <div width="${width}" height="${height}" min_width="${width}" min_height="${height}" max_width="${width}" max_height="${height}">
border_color="#0044CC" <rectangle
border="2" margin="4" width="100%" overflow="hidden" box_sizing="border_box"
round="8" border_color="#0044CC" border="2" round="8" color="#000A1C" color2="#000002" gradient="vertical"
color="#000A1C" flex_direction="row"
color2="#000002" flex_wrap="wrap"
gradient="vertical" align_items="center"
width="${width}" justify_content="center">
height="${height}" <div width="50%" height="50%" align_items="center" justify_content="center">
min_width="${width}" <label color="#FFFFFF70" text="${text_shift}" size="24" />
min_height="${height}" </div>
max_width="${width}" <div width="50%" height="50%" align_items="center" justify_content="center" />
max_height="${height}" <div width="50%" height="50%" align_items="center" justify_content="center">
flex_direction="row" <label color="#FFFFFF" text="${text}" size="24" />
flex_wrap="wrap" </div>
align_items="center" <div width="50%" height="50%" align_items="center" justify_content="center">
margin="4" <label color="#FFFFFF70" text="${text_altgr}" size="24" />
padding="8" </div>
justify_content="center"> </rectangle>
<div width="50%" height="50%" align_items="center" justify_content="center"> </div>
<label color="#FFFFFF70" text="${text_shift}" size="24" />
</div>
<div width="50%" height="50%" align_items="center" justify_content="center"/>
<div width="50%" height="50%" align_items="center" justify_content="center">
<label color="#FFFFFF" text="${text}" size="24" />
</div>
<div width="50%" height="50%" align_items="center" justify_content="center">
<label color="#FFFFFF70" text="${text_altgr}" size="24" />
</div>
</rectangle>
</template> </template>
</layout> </layout>

View File

@@ -37,7 +37,6 @@ use wgui::{
}; };
const PIXELS_PER_UNIT: f32 = 80.; const PIXELS_PER_UNIT: f32 = 80.;
const BUTTON_PADDING: f32 = 4.;
const AUTO_RELEASE_MODS: [KeyModifier; 5] = [SHIFT, CTRL, ALT, SUPER, META]; const AUTO_RELEASE_MODS: [KeyModifier; 5] = [SHIFT, CTRL, ALT, SUPER, META];
pub const KEYBOARD_NAME: &str = "kbd"; pub const KEYBOARD_NAME: &str = "kbd";