added checkbox, slider, layer panel, brushes panel

This commit is contained in:
2017-03-19 23:51:45 +00:00
parent 011aeb8948
commit 03a8266972
5 changed files with 624 additions and 203 deletions

View File

@@ -5,11 +5,13 @@
<text text="A" font-face="arial" font-size="11"/>
</border>
</layout>
<layout id="multi-button-item">
<button-custom height="50%" width="50%" justify="center" align="center">
<text text="A" font-face="arial" font-size="11"/>
</button-custom>
</layout>
<layout id="multi-button">
<node width="50" margin="0 5 0 0" dir="row" wrap="1" flood-events="1">
<ref id="multi-button-item"/>
@@ -18,10 +20,81 @@
<ref id="multi-button-item"/>
</node>
</layout>
<layout id="rounded-inside">
<border thickness="1" border-color=".9" color=".4" height="100%" pad="10">
</border>
</layout>
<!--brush icon-->
<layout id="tpl-brush-icon">
<button-custom width="50" height="50" margin="1" pad="2" align="center" justify="center">
<image width="100%" height="100%"/>
</button-custom>
</layout>
<!--slider control-->
<layout id="tpl-slider">
<border pad="1" grow="1" height="100%" color="1" dir="row">
<node height="100%" grow="1">
<slider-cursor id="cursor" width="10" height="100%" positioning="absolute" />
</node>
</border>
</layout>
<!--layer template-->
<layout id="tpl-layer">
<border height="30" border-color="1" thickness="1" color=".4" dir="row" margin="1 0 1 0">
<node width="30" pad="1">
<checkbox id="cb"></checkbox>
</node>
<node width="1" grow="1" justify="center" pad="5">
<text id="label" text="Layer0" font-face="arial" font-size="11"/>
</node>
<node color=".4" width="100" pad="5">
<slider></slider>
</node>
</border>
</layout>
<!--layers panel template-->
<layout id="tpl-panel-layers">
<node width="220" margin="0 0 10 0">
<border height="30" color=".5" align="center" justify="center" margin="0 0 0 0">
<text text="Layers" font-face="arial" font-size="11" color="1 1 1 1"/>
</border>
<border id="layers-container" pad="5" color=".4" dir="col" flood-events="1">
<!--layers list-->
</border>
<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-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>
<!--brushes panel-->
<layout id="tpl-panel-brushes">
<node width="220" margin="0 0 10 0">
<border height="30" color=".5" align="center" justify="center">
<text text="Brushes" font-face="arial" font-size="11" color="1 1 1 1"/>
</border>
<border id="brushes" color=".4" pad="5" dir="row" wrap="1" flood-events="1">
</border>
</node>
</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 thickness="1" border-color=".2" pad="3">
@@ -38,6 +111,7 @@
</border>
</border>
</layout>
<!--settings window-->
<layout id="settings">
<border positioning="absolute" position="0 0" color=".4 .4 .4 .8" width="100%" height="100%" align="center" justify="center">
@@ -75,6 +149,7 @@
</border>
</border>
</layout>
<!--popup menu-->
<layout id="popup-menu">
<popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
@@ -100,9 +175,22 @@
</button-custom>
</popup-menu>
</layout>
<!--popup menu-->
<!--file menu-->
<layout id="file-menu">
<popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
<button-custom height="30" align="center" color=".2" pad="0 20 0 10" dir="row">
<checkbox width="20" height="20"/>
<node pad="5" width="100%">
<slider></slider>
</node>
</button-custom>
<button-custom height="30" align="center" color=".2" pad="0 20 0 10" dir="row">
<icon icon="page_add" width="20"/>
<node pad="5" width="100%">
<slider></slider>
</node>
</button-custom>
<button-custom text="Menu" height="30" align="center" color=".2" pad="0 0 0 10" dir="row">
<icon icon="page_add" width="20"/>
<text text="New Panodoc" margin="0 0 0 5" font-face="arial" font-size="11"/>
@@ -125,6 +213,7 @@
</button-custom>
</popup-menu>
</layout>
<!--edit menu-->
<layout id="edit-menu">
<popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
@@ -142,6 +231,7 @@
</button-custom>
</popup-menu>
</layout>
<!--layers menu-->
<layout id="layers-menu">
<popup-menu positioning="absolute" position="100 100" width="150" thickness="1" border-color=".1" color=".4 .4 .4 .8" dir="col">
@@ -163,25 +253,12 @@
</button-custom>
</popup-menu>
</layout>
<!--brush icon-->
<layout id="tpl-brush-icon">
<button-custom width="50" height="50" margin="1" thickness="1" border-color=".0" pad="4" align="center" justify="center">
<image width="100%" height="100%"/>
</button-custom>
</layout>
<!--slider control-->
<layout id="tpl-slider">
<border pad="1" grow="1" height="100%" color="1">
<node width="100%" height="100%">
<slider-cursor width="10" height="100%" positioning="absolute" />
</node>
</border>
</layout>
<!--main-->
<layout id="main">
<node dir="col" wrap="0" width="100%" height="100%" pad="5">
<node dir="col" wrap="0" width="100%" height="100%" pad="0">
<!-- menu bar -->
<border flood-events="1" margin="0 0 5 0" pad="0 0 0 0" color=".1" width="100%" height="25" dir="row" align="center">
<border flood-events="1" margin="0 0 0 0" pad="0 0 0 0" color=".1" width="100%" height="30" dir="row" align="center">
<button-custom id="menu-file" height="100%" margin="0 0 0 0" justify="center" align="center" pad="8">
<text text="File" font-face="arial" font-size="11"/>
</button-custom>
@@ -219,29 +296,10 @@
<button-custom width="50" margin="0 5 0 0" thickness="1" border-color=".0" pad="8" align="center" justify="center">
<icon width="100%" height="100%" icon="accept"/>
</button-custom>
<!--<border width="50" margin="0 5 0 0" color=".1" thickness="2" border-color=".7" pad="4">
<image path="data/uvs.jpg" region="0 0 50 50" width="100%" height="100%" align="center" justify="flex-end">
<text text="atlas" font-face="arial" font-size="11"/>
</image>
</border>
<border width="60" pad="2" margin="0 5 0 0" color=".2" thickness="2" border-color=".7">
<image path="data/social.png" region="0 0 230 230" width="100%" height="100%" pad="5" align="center" justify="flex-end">
<text text="Facebook" font-face="arial" font-size="11"/>
</image>
</border>
<border width="50" margin="0 5 0 0" color=".3" thickness="2" border-color=".7">
<image path="data/social.png" region="250 0 480 230" width="100%" height="100%" pad="5" align="center" justify="flex-end">
<text text="Twitter" font-face="arial" font-size="11"/>
</image>
</border>
<separator width="10"/>
<border width="50" margin="0 5 0 0"></border>
<border width="50" margin="0 5 0 0"></border>
<border width="50" margin="0 5 0 0"></border>-->
</border>
<!-- central row -->
<node grow="1" dir="row" wrap="1" height="0">
<border width="60" color=".2" margin="0 10 0 0" dir="col" pad="4">
<!--<border width="60" color=".2 .2 .2 .6" margin="0 0 0 0" dir="col" pad="4">
<border height="4" margin="-4 0 0 0"/>
<button-custom width="50" height="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="12" align="center" justify="center">
<icon width="100%" height="100%" icon="accept"/>
@@ -255,33 +313,20 @@
<button-custom width="50" height="50" margin="5 5 0 0" thickness="1" border-color=".0" pad="12" align="center" justify="center">
<icon width="100%" height="100%" icon="disk"/>
</button-custom>
</border>
</border>-->
<!-- side bar -->
<node width="250" height="100%" dir="col" color=".2">
<border pad="15" margin="10 0 10 0" color=".3" width="100%" height="auto">
<border id="slider-space" color="0" height="30" margin="0 0 10 0">
<ref id="tpl-slider" />
</border>
<border height="30" color=".5" align="center" justify="center">
<text text="Brushes" font-face="arial" font-size="11" color="1 1 1 1"/>
</border>
<border id="brushes" color=".4" pad="5" dir="row" wrap="1">
</border>
</border>
<border pad="15" margin="0 0 10 0" color=".3" width="100%" height="auto">
<border height="30" color=".5" align="center" justify="center">
<text text="Statistics" font-face="arial" font-size="11" color="1 1 1 1"/>
</border>
<border height="30" color=".4" />
<border height="30" color=".5" />
<border height="30" color=".4" />
<border height="30" color=".5" />
<node height="100%" dir="row" shrink="1">
<border pad="5 5 5 5" margin="0 0 0 0" color=".3 .3 .3 .4" height="100%" dir="col" wrap="1" shrink="1">
<!--Brushes-->
<panel-brushes id="panel-brushes"></panel-brushes>
<!--Layers-->
<panel-layers></panel-layers>
</border>
</node>
<!-- content panel -->
<border grow="1" color=".1" pad="10">
<viewport grow="1"></viewport>
</border>
<node grow="1" color=".1" pad="10">
<!--<viewport grow="1"></viewport>-->
</node>
</node>
<!-- status bar -->
<border height="30" width="100%" color=".15" border-color=".3" dir="row" pad="0 0 0 10" align="center">