implement animation panel interaction

This commit is contained in:
2019-10-17 20:42:52 +02:00
parent 62863e7224
commit 7487feb168
14 changed files with 399 additions and 16 deletions

View File

@@ -5,26 +5,50 @@
>
<layout id="tpl-layer">
<border height="30" border-color="1" thickness="1" color=".4" dir="row" margin="1 0 1 0">
<node dir="row" height="30" width="100">
<node width="30" pad="1">
<border height="40" border-color="1" thickness="1" color=".4" dir="row" margin="1 0 1 0">
<node dir="row" height="40" width="100">
<node width="40" pad="1">
<checkbox id="cb" icon="data/ui/check-layer-visibility.png"/>
</node>
<node width="1" grow="1" justify="center" pad="5">
<text id="label" text="Layer"/>
</node>
</node>
<border color=".2" grow="1" margin="1">
<border id="container" dir="row" color=".6" margin="1" pad="2" grow="1">
<!--frames list-->
</border>
</border>
</layout>
<layout id="tpl-panel-animation">
<node width="600" margin="0 0 10 0" rtl="ltr">
<scroll id="layers-container" pad="5" color=".4" dir="col-reverse" justify="flex-end" flood-events="1" grow="1" shrink="1">
<node margin="0 0 10 0" rtl="ltr" grow="1" dir="col">
<border color=".4" pad="0 5 0 5"><timeline id="timeline" margin="0 0 0 101" height="20"/></border>
<scroll id="container" pad="0 5 0 5" color=".4" dir="col-reverse" justify="flex-end" flood-events="1" grow="1" shrink="1">
<!--layers list-->
</scroll>
<border height="40" color=".5" dir="row" align="center" flood-events="1">
<button-custom id="btn-add" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
<icon width="30" icon="add"/>
</button-custom>
<button-custom id="btn-duplicate" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 5">
<icon width="30" icon="page_copy"/>
</button-custom>
<button-custom id="btn-up" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
<icon width="30" icon="bullet_arrow_up"/>
</button-custom>
<button-custom id="btn-down" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 2 0 0">
<icon width="30" icon="bullet_arrow_down"/>
</button-custom>
<node grow="1"></node>
<button-custom id="btn-remove" thickness="1" color="0 0" border-color=".0" shrink="1" margin="0 10 0 0">
<icon width="30" icon="bin_closed"/>
</button-custom>
</border>
</node>
</layout>

View File

@@ -5,7 +5,7 @@
>
<layout id="tpl-panel-floating">
<border thickness="1" border-color=".2" pad="3" max-width="650" dir="col" mouse-capture="true">
<border thickness="1" border-color=".2" pad="3" dir="col" mouse-capture="true">
<border height="30" pad="0 0 0 0" color=".4" align="center" justify="center" dir="row">
<button id="button-close" width="30" height="20" text="X" margin="0 0 0 5"/>
<button id="button-minimize" width="30" height="20" text="--" margin="0 0 0 5"/>