add messagebox to template binding, add absolute positioning layout, add observer instead of stack based node traversal which is not great in case of hierarchical traversal

This commit is contained in:
2017-02-16 00:32:03 +00:00
parent 0d3c48fd98
commit d74af8ed17
5 changed files with 269 additions and 82 deletions

View File

@@ -22,6 +22,20 @@
<border thickness="2" border-color=".9" color=".4" height="100%" pad="10">
</border>
</layout>
<layout id="message-box">
<border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
<border width="400" height="40" color="0 0 0 .9" dir="row" align="center" justify="center">
<text text="Shit! Bug happens." font-face="arial" font-size="11"></text>
</border>
<border width="400" height="200" color="0 0 0 .9" pad="10" dir="col">
<text text="Yep, it's a bug. No worries, it happens. Try Unity and see." font-face="arial" font-size="11"></text>
<node height="40" grow="1" dir="row" align="flex-end" justify="flex-end">
<button id="btn-ok" text="Ok" width="50" height="30" margin="0 10 0 0"/>
<button text="Cancel" width="60" height="30" pad="10"/>
</node>
</border>
</border>
</layout>
<layout id="main">
<node dir="col" wrap="0" width="100%" height="100%" pad="5">
<border margin="0 0 5 0" pad="3 0 3 3" color=".3" width="100%" height="25" dir="row" align="center">
@@ -30,8 +44,9 @@
<button height="100%" margin="0 5 0 0" text="View"/>
</border>
<!-- toolbar -->
<border height="50" width="100%" pad="5" dir="row" color=".2">
<button id="btn-close" width="50" height="100%" margin="0 5 0 0" text="Button" color=".1" thickness="2" border-color=".5"/>
<border id="toolbar" height="50" width="100%" pad="5" dir="row" color=".2">
<button id="btn-close" width="50" height="100%" margin="0 5 0 0" text="Button"/>
<button id="btn-popup" width="50" height="100%" margin="0 5 0 0" text="Popup"/>
<ref id="multi-button"/>
<ref id="multi-button"/>
<ref id="multi-button"/>
@@ -93,5 +108,5 @@
<text text="#opengl #fromscratch #not-made-with-unity" font-face="arial" font-size="11" margin="0 0 0 10" color=".2 .5 1 1"/>
</border>
</node>
</layout>
</layout>
</root>