fix keyboard layout

wgui/doc/widgets.md

@@ -28,7 +28,7 @@
 
 `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%)
 

wgui/src/parser/style.rs

@@ -84,6 +84,27 @@ pub fn style_from_node<'a>(
 					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 {
 				"hidden" => style.overflow.x = Overflow::Hidden,
 				"visible" => style.overflow.x = Overflow::Visible,

wlx-overlay-s/src/assets/keyboard.xml

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

wlx-overlay-s/src/overlays/keyboard.rs

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