custom panels

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

@@ -24,7 +24,7 @@
 
   <template name="Device">
     <rectangle id="dev_${idx}" macro="decorative_rect" padding_top="4" padding_bottom="4" display="none" align_items="center" gap="8">
-      <sprite id="dev_${idx}_sprite" width="32" height="32" src="${src}" />
+      <sprite id="dev_${idx}_sprite" width="32" height="32" src_builtin="${src}" />
       <label _source="battery" _device="${idx}" size="24" weight="bold" />
     </rectangle>
   </template>
@@ -34,14 +34,14 @@
       tooltip="WATCH.TOGGLE_FOR_CURRENT_SET" _press="::EditModeOverlayToggle ${idx}"
       align_items="center"
       height="40">
-      <sprite src_builtin="watch/display.svg" width="32" height="32" />
-      <label text="WLX-${idx}" size="18" />
+      <sprite id="overlay_${idx}_sprite" src_builtin="${src}" width="32" height="32" />
+      <label id="overlay_${idx}_label" text="WLX-${idx}" size="18" />
     </Button>
   </template>
 
   <template name="Set">
     <Button macro="button_style" id="set_${idx}" _press="::SetToggle ${idx}" tooltip="WATCH.SWITCH_TO_SET" tooltip_side="top">
-      <sprite width="40" height="40" color="~set_color" src="watch/set2.svg" />
+      <sprite width="40" height="40" color="~set_color" src_builtin="watch/set2.svg" />
       <div position="absolute" margin_top="9">
         <label text="${display}" size="24" color="#00050F" weight="bold" />
       </div>
@@ -60,7 +60,7 @@
       flex_direction="column" gap="8">
       <!-- Top elements (device battery levels) -->
       <div flex_direction="row" id="devices" interactable="0" gap="8">
-        <!-- Src here may be changed, but maintain order: HMD, Left, Right, Tracker -->
+        <!-- Src here may be changed, but maintain `TrackedDeviceRole` order: HMD, Left, Right, Tracker -->
         <Device src="watch/hmd.svg" idx="0" />
         <Device src="watch/controller_l.svg" idx="1" />
         <Device src="watch/controller_r.svg" idx="2" />
@@ -119,11 +119,16 @@
             <label translation="WATCH.EDIT_MODE_EXPLANATION" align="center" />
           </div>
           <div flex_direction="column" align_items="center" justify_content="center">
-            <div id="toolbox" gap="8" width="100%" flex_wrap="wrap">
+            <div id="toolbox" gap="8" width="100%" flex_direction="column" flex_wrap="wrap">
               <Button height="40" macro="button_style" tooltip="WATCH.TOGGLE_FOR_CURRENT_SET" _press="::OverlayToggle kbd">
                 <sprite src_builtin="watch/keyboard.svg" width="32" height="32" />
                 <label translation="EDIT_MODE.KEYBOARD" size="18" />
               </Button>
+              <!-- Src here may be changed, but maintain `OverlayCategor` order: Panel, Screen, Mirror, WayVR -->
+              <Overlay src="edit/panel.svg" idx="0" />
+              <Overlay src="edit/screen.svg" idx="1" />
+              <Overlay src="edit/mirror.svg" idx="2" />
+              <Overlay src="edit/wayvr.svg" idx="3" />
               <!-- Will populate additional <Overlay> tags at runtime -->
             </div>
           </div>
@@ -155,4 +160,4 @@
       </div>
     </div>
   </elements>
-</layout>
+</layout>