129 lines
4.1 KiB
XML
129 lines
4.1 KiB
XML
<layout>
|
|
<include src="theme.xml" />
|
|
|
|
<theme>
|
|
<var key="side_size" value="48" />
|
|
<var key="side_sprite_size" value="26" />
|
|
<var key="side_button_size" value="48" />
|
|
</theme>
|
|
|
|
<template name="SideButton">
|
|
<Button
|
|
id="${id}"
|
|
round="100%"
|
|
width="~side_button_size"
|
|
height="~side_button_size"
|
|
color="#44444400"
|
|
hover_color="#333333ff"
|
|
hover_border_color="#555555ff">
|
|
<sprite src="${src}" width="~side_sprite_size" height="~side_sprite_size" />
|
|
</Button>
|
|
</template>
|
|
|
|
<elements>
|
|
<!-- background for testing -->
|
|
<rectangle position="absolute" color="#333333" width="100%" height="100%" />
|
|
|
|
<!-- left/right separator (menu and rest) -->
|
|
<div flex_direction="row" gap="8" width="100%" height="100%">
|
|
<!-- LEFT MENU -->
|
|
<div id="menu"
|
|
width="~size_size"
|
|
min_width="~side_size"
|
|
max_width="~side_size"
|
|
height="100%"
|
|
align_items="center"
|
|
justify_content="center">
|
|
<rectangle
|
|
width="100%"
|
|
round="100%"
|
|
color="~menu_dark"
|
|
flex_direction="column"
|
|
justify_content="center"
|
|
align_items="center"
|
|
gap="4"
|
|
>
|
|
<SideButton id="btn_side_home" src="dashboard/wayvr_dashboard_mono.svg" />
|
|
<SideButton id="btn_side_apps" src="dashboard/apps.svg" />
|
|
<SideButton id="btn_side_games" src="dashboard/games.svg" />
|
|
<SideButton id="btn_side_monado" src="dashboard/monado.svg" />
|
|
<SideButton id="btn_side_processes" src="dashboard/window.svg" />
|
|
<rectangle height="2" color="#FFFFFF33" width="~side_sprite_size" />
|
|
<SideButton id="btn_side_settings" src="dashboard/settings.svg" />
|
|
</rectangle>
|
|
</div>
|
|
<!-- REST -->
|
|
<!-- content/bottom panel separator -->
|
|
<div
|
|
flex_direction="column"
|
|
gap="8"
|
|
width="100%"
|
|
height="100%"
|
|
overflow_x="scroll">
|
|
<!-- CONTENT -->
|
|
<rectangle
|
|
color2="#0d131acc"
|
|
color="#244179aa"
|
|
gradient="vertical"
|
|
round="8"
|
|
flex_grow="1"
|
|
width="100%"
|
|
overflow_y="scroll"
|
|
>
|
|
<div
|
|
id="content"
|
|
overflow_x="scroll"
|
|
overflow_y="scroll"
|
|
flex_direction="column"
|
|
padding_top="8"
|
|
padding_bottom="8"
|
|
padding_left="16"
|
|
padding_right="16"
|
|
gap="8"
|
|
width="100%"
|
|
min_height="100%"
|
|
>
|
|
<!-- filled-in at runtime -->
|
|
</div>
|
|
</rectangle>
|
|
<!-- BOTTOM PANEL -->
|
|
<rectangle
|
|
width="100%"
|
|
height="48"
|
|
box_sizing="border_box"
|
|
round="8"
|
|
flex_direction="row"
|
|
align_items="center"
|
|
justify_content="space_between"
|
|
color="~bottom_panel"
|
|
>
|
|
<!-- left gradient -->
|
|
<div position="absolute" width="100%" height="100%" justify_content="start">
|
|
<rectangle position="absolute" width="40%" height="100%" color="#0a0a0a" color2="#0a0a0a00" round="8" gradient="horizontal" />
|
|
</div>
|
|
|
|
<!-- right gradient -->
|
|
<div position="absolute" width="100%" height="100%" justify_content="end">
|
|
<rectangle position="absolute" width="40%" height="100%" color2="#0a0a0a" color="#0a0a0a00" round="8" gradient="horizontal" />
|
|
</div>
|
|
|
|
<!-- top shine -->
|
|
<div position="absolute" width="100%" height="100%" justify_content="center">
|
|
<rectangle position="absolute" width="99%" height="2" color="#FFFFFF66" round="4" />
|
|
</div>
|
|
|
|
<!-- Left bottom side -->
|
|
<div margin_left="8">
|
|
<sprite src="dashboard/volume.svg" width="24" height="24" margin="8" />
|
|
<sprite src="dashboard/recenter.svg" width="24" height="24" margin="8" />
|
|
</div>
|
|
|
|
<!-- Right bottom side -->
|
|
<div margin_right="16">
|
|
<label id="label_time" size="16" />
|
|
</div>
|
|
</rectangle>
|
|
</div>
|
|
</div>
|
|
</elements>
|
|
</layout> |