widget event handling into macro

wlx-overlay-s/src/assets/gui/watch.xml

@@ -17,19 +17,19 @@
   </theme>
 
   <template name="Device">
-    <sprite color="~device_color" width="48" height="48" src="${src}" />
+    <sprite color="~device_color" width="${size}" height="${size}" src="${src}" />
   </template>
 
   <elements>
     <div width="400" height="200">
       <rectangle width="100%" height="100%" padding="4" box_sizing="content_box" flex_wrap="wrap" gap="16" color="~bg_color">
         <div width="100%" flex_direction="row">
-          <Device src="watch/hmd.svg" />
-          <Device src="watch/controller.svg" />
-          <Device src="watch/controller.svg" />
-          <Device src="watch/track3.svg" />
-          <Device src="watch/track3.svg" />
-          <Device src="watch/track3.svg" />
+          <Device src="watch/hmd.svg" size="40" />
+          <Device src="watch/controller_l.svg" size="36" />
+          <Device src="watch/controller_r.svg" size="36" />
+          <Device src="watch/track3.svg" size="40" />
+          <Device src="watch/track3.svg" size="40" />
+          <Device src="watch/track3.svg" size="40" />
         </div>
         <div flex_direction="row">
           <div id="clock_main" flex_direction="column" padding="4">
@@ -51,4 +51,4 @@
       </rectangle>
     </div>
   </elements>
-</layout>
+</layout>

wlx-overlay-s/src/assets/watch/controller.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE --><path fill="white" d="M11 18q-1.65 0-2.825-1.175T7 14q-2.5.025-4.25-1.737T1 8q0-.825.588-1.412T3 6h4V5H5V3h6v2H9v1h3.175q.4 0 .763.15t.637.425l8.375 8.375Q23 16 23 17.45t-1.05 2.5t-2.5 1.05t-2.5-1.05L15 18zm0-4H8.975q0 .825.588 1.413T11 16h2z"/></svg>