watch rework
This commit is contained in:
galister
@@ -19,22 +19,52 @@
|
||||
align_items="center" justify_content="center" />
|
||||
|
||||
<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_builtin="${src}" />
|
||||
<rectangle macro="decorative_rect" padding_top="4" padding_bottom="4" align_items="center" gap="8">
|
||||
<sprite width="32" height="32" src_builtin="${src}" />
|
||||
<label _source="battery" _device="${idx}" size="24" weight="bold" />
|
||||
</rectangle>
|
||||
</template>
|
||||
|
||||
<template name="Overlay">
|
||||
<Button macro="button_style" id="overlay_${idx}"
|
||||
tooltip="WATCH.TOGGLE_FOR_CURRENT_SET" _press="::EditModeOverlayToggle ${idx}"
|
||||
align_items="center"
|
||||
height="40">
|
||||
<sprite id="overlay_${idx}_sprite" src_builtin="${src}" width="32" height="32" />
|
||||
<label id="overlay_${idx}_label" text="WLX-${idx}" size="18" />
|
||||
</Button>
|
||||
<template name="Hmd">
|
||||
<Device idx="${idx}" src="watch/hmd.svg" />
|
||||
</template>
|
||||
<template name="LeftHand">
|
||||
<Device idx="${idx}" src="watch/controller_l.svg" />
|
||||
</template>
|
||||
<template name="RightHand">
|
||||
<Device idx="${idx}" src="watch/controller_r.svg" />
|
||||
</template>
|
||||
<template name="Tracker">
|
||||
<Device idx="${idx}" src="watch/track.svg" />
|
||||
</template>
|
||||
|
||||
<template name="Screen">
|
||||
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
|
||||
<sprite width="38" height="38" color="~text_color" src_builtin="edit/screen.svg" />
|
||||
<div position="absolute" margin_top="-7" margin_left="-1">
|
||||
<label text="${display}" size="18" color="~color_faded_20" weight="bold" />
|
||||
</div>
|
||||
</Button>
|
||||
</template>
|
||||
<template name="Panel">
|
||||
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
|
||||
<sprite width="38" height="38" color="~text_color" src_builtin="edit/panel.svg" />
|
||||
</Button>
|
||||
</template>
|
||||
<template name="Mirror">
|
||||
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
|
||||
<sprite width="38" height="38" color="~text_color" src_builtin="edit/mirror.svg" />
|
||||
<div position="absolute" margin_top="5" margin_left="13">
|
||||
<label text="${display}" size="20" color="~color_faded_20" weight="bold" />
|
||||
</div>
|
||||
</Button>
|
||||
</template>
|
||||
<template name="App">
|
||||
<Button macro="button_style" id="overlay_${idx}" tooltip_str="${name}" _press="::OverlayToggle ${name}">
|
||||
<sprite width="38" height="38" color="~text_color" src_ext="${icon}" />
|
||||
</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="~text_color" src_builtin="watch/set2.svg" />
|
||||
@@ -44,63 +74,64 @@
|
||||
</Button>
|
||||
</template>
|
||||
|
||||
<template name="Clock">
|
||||
<div gap="12" flex_direction="column" padding="4">
|
||||
<div flex_direction="column" >
|
||||
<label text="11:22 PM" _source="clock" _display="time" color="~text_color" size="~clock0_size" weight="bold" align="center" />
|
||||
<div padding_left="2" gap="16" flex_direction="row" justify_content="center">
|
||||
<label text="Tue" _source="clock" _display="dow_short" color="~clock0_color" size="~clock0_dow_size" weight="bold" />
|
||||
<label text="22/2/2022" _source="clock" _display="date" color="~clock0_color" size="~clock0_date_size" weight="bold" />
|
||||
</div>
|
||||
</div>
|
||||
<div flex_direction="row" gap="8" justify_content="space_around">
|
||||
<!-- Timezone names here are only placeholders. Set your timezones via ~/.config/wlxoverlay/conf.d -->
|
||||
<div flex_direction="column">
|
||||
<label text="Paris" _source="clock" _display="name" _timezone="0" color="~clock_alt1_color" size="~clock_alt_tz_size" weight="bold" align="center" />
|
||||
<label text="23:59" _source="clock" _display="time" _timezone="0" color="~clock_alt1_color" size="~clock_alt_size" weight="bold" align="center" />
|
||||
</div>
|
||||
<div flex_direction="column">
|
||||
<label text="New York" _source="clock" _display="name" _timezone="1" color="~clock_alt2_color" size="~clock_alt_tz_size" weight="bold" align="center" />
|
||||
<label text="23:59" _source="clock" _display="time" _timezone="1" color="~clock_alt2_color" size="~clock_alt_size" weight="bold" align="center" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template name="VerticalSeparator">
|
||||
<rectangle width="2" height="100%" color="~color_accent" />
|
||||
</template>
|
||||
|
||||
<!--
|
||||
[!!!!!!!!] Disclaimer [!!!!!!!!]
|
||||
Elements with id="norm_*" show in normal mode.
|
||||
Elements with id="edit_*" show in edit mode.
|
||||
-->
|
||||
<elements>
|
||||
<!-- padding="32" is required there (to make room for tooltips) -->
|
||||
<div
|
||||
padding="32" interactable="0"
|
||||
flex_direction="column" gap="8">
|
||||
<!-- Top elements (device battery levels) -->
|
||||
<div id="devices" interactable="0" gap="6" width="100%" max_width="400" flex_direction="row" flex_wrap="wrap">
|
||||
<!-- 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" />
|
||||
<Device src="watch/track.svg" idx="3" />
|
||||
<!-- Will populate additional <Device> tags at runtime -->
|
||||
<div id="devices_root" interactable="0" gap="6" width="100%" max_width="400" flex_direction="row" flex_wrap="wrap">
|
||||
<!-- Will populate tags at runtime -->
|
||||
<!-- These are examples for uidev -->
|
||||
<Hmd idx="0" />
|
||||
<LeftHand idx="1" />
|
||||
<RightHand idx="2" />
|
||||
<Track idx="3" />
|
||||
</div>
|
||||
|
||||
<!-- All other elements inside the container -->
|
||||
<div flex_direction="column" gap="8">
|
||||
<rectangle macro="decorative_rect" flex_direction="row" id="norm_pane" gap="8">
|
||||
<div flex_direction="column" gap="8" min_width="300">
|
||||
<rectangle macro="decorative_rect" flex_direction="row" gap="8" justify_content="space_evenly">
|
||||
<!-- Clock, date and various timezones -->
|
||||
<div gap="8">
|
||||
<div flex_direction="column">
|
||||
<label text="23:59" _source="clock" _display="time" color="~text_color" size="~clock0_size" weight="bold" />
|
||||
<div padding="2" gap="2" flex_direction="column">
|
||||
<label text="22/2/2022" _source="clock" _display="date" color="~clock0_color" size="~clock0_date_size" weight="bold" />
|
||||
<label text="Tuesday" _source="clock" _display="dow" color="~clock0_color" size="~clock0_dow_size" weight="bold" />
|
||||
</div>
|
||||
</div>
|
||||
<div flex_direction="column" gap="8">
|
||||
<!-- Timezone names here are only placeholders. Set your timezones via ~/.config/wlxoverlay/conf.d -->
|
||||
<div flex_direction="column">
|
||||
<label text="Paris" _source="clock" _display="name" _timezone="0" color="~clock_alt1_color" size="~clock_alt_tz_size" weight="bold" />
|
||||
<label text="23:59" _source="clock" _display="time" _timezone="0" color="~clock_alt1_color" size="~clock_alt_size" weight="bold" />
|
||||
</div>
|
||||
<div flex_direction="column">
|
||||
<label text="New York" _source="clock" _display="name" _timezone="1" color="~clock_alt2_color" size="~clock_alt_tz_size" weight="bold" />
|
||||
<label text="23:59" _source="clock" _display="time" _timezone="1" color="~clock_alt2_color" size="~clock_alt_size" weight="bold" />
|
||||
</div>
|
||||
</div>
|
||||
<div id="clock_root">
|
||||
<Clock />
|
||||
</div>
|
||||
|
||||
<!-- Four buttons -->
|
||||
<div flex_direction="column" gap="8">
|
||||
<div gap="8">
|
||||
<Button macro="button_style" _press="::NewMirror" tooltip="WATCH.MIRROR" tooltip_side="left">
|
||||
<sprite width="40" height="40" color="~text_color" src="edit/mirror.svg" />
|
||||
<Button id="btn_keyboard" macro="button_style" _press="::OverlayToggle kbd" tooltip="EDIT_MODE.KEYBOARD" tooltip_side="left">
|
||||
<sprite src_builtin="watch/keyboard.svg" width="40" height="40" />
|
||||
</Button>
|
||||
<Button macro="button_style" _press="::CleanupMirrors" tooltip="WATCH.CLEANUP_MIRRORS" tooltip_side="left">
|
||||
<sprite width="40" height="40" color="~text_color" src="watch/mirror-off.svg" />
|
||||
<Button id="btn_edit_mode" macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="left">
|
||||
<sprite color="~text_color" width="40" height="40" src="watch/edit.svg" />
|
||||
</Button>
|
||||
</div>
|
||||
<div gap="8">
|
||||
@@ -114,53 +145,28 @@
|
||||
</div>
|
||||
</rectangle>
|
||||
|
||||
<rectangle macro="decorative_rect" flex_direction="column" id="edit_pane" display="none" gap="8">
|
||||
<div flex_direction="column" padding="4" align_items="center" justify_content="center">
|
||||
<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%" max_width="400" flex_direction="row" flex_wrap="wrap">
|
||||
<Button id="btn_keyboard" 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 `OverlayCategory` 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>
|
||||
</rectangle>
|
||||
|
||||
<!-- Bottom buttons -->
|
||||
<div flex_direction="row" gap="8">
|
||||
<div gap="4">
|
||||
<Button id="btn_dashboard" macro="button_style" _press="::DashToggle" tooltip="WATCH.DASHBOARD" tooltip_side="top">
|
||||
<sprite color="~text_color" width="40" height="40" src="watch/wayvr_dashboard_mono.svg" />
|
||||
</Button>
|
||||
<Button id="btn_edit_mode" macro="button_style" _press="::EditToggle" tooltip="WATCH.EDIT_MODE" tooltip_side="top">
|
||||
<sprite color="~text_color" width="40" height="40" src="watch/edit.svg" />
|
||||
</Button>
|
||||
<div id="edit_delete" display="none">
|
||||
<Button macro="button_style" _long_release="::EditModeDeleteSet" tooltip="WATCH.LONG_PRESS_TO_DELETE_SET" tooltip_side="top" border_color="~color_danger_translucent" color="~color_danger_40" color2="~color_danger_10">
|
||||
<sprite color="~text_color" width="40" height="40" src="edit/delete.svg" />
|
||||
</Button>
|
||||
</div>
|
||||
<div id="edit_add" display="none">
|
||||
<Button macro="button_style" _press="::EditModeAddSet" tooltip="WATCH.ADD_NEW_SET" tooltip_side="top">
|
||||
<sprite color="~text_color" width="40" height="40" src="edit/add.svg" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<VerticalSeparator />
|
||||
<div id="sets" gap="4">
|
||||
<div id="sets_root" gap="4">
|
||||
<!-- Will populate tags at runtime -->
|
||||
<!-- These are examples for uidev -->
|
||||
<Set idx="0" display="1" />
|
||||
<!-- Will populate additional <Set> tags at runtime -->
|
||||
<Set idx="1" display="2" />
|
||||
</div>
|
||||
<div id="panels_root" gap="4" display="none">
|
||||
<!-- Will populate tags at runtime -->
|
||||
<!-- These are examples for uidev -->
|
||||
<Screen idx="0" display="H1" />
|
||||
<Screen idx="1" display="D2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</elements>
|
||||
</layout>
|
||||
</layout>
|
||||
|
||||
Reference in New Issue
Block a user