Make toolbox expandable, default one row high
authorRichard Fairhurst <richard@systemeD.net>
Sat, 6 Oct 2012 08:38:24 +0000 (09:38 +0100)
committerRichard Fairhurst <richard@systemeD.net>
Sat, 6 Oct 2012 08:38:24 +0000 (09:38 +0100)
net/systemeD/potlatch2/Toolbox.mxml

index 6c3235b..05ca0bd 100644 (file)
@@ -4,7 +4,7 @@
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:potlatch2="net.systemeD.potlatch2.*"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:potlatch2="net.systemeD.potlatch2.*"
-       height="76" width="129" layout="absolute"
+       height="56" width="129" layout="absolute" verticalScrollPolicy="off"
        styleName="theToolBox">
 
                <mx:Image data="@Embed('../../../embedded/close_small.png')"
        styleName="theToolBox">
 
                <mx:Image data="@Embed('../../../embedded/close_small.png')"
                        toolTip="Merge ways" 
                        width="28" height="28" y="4" x="96" />
 
                        toolTip="Merge ways" 
                        width="28" height="28" y="4" x="96" />
 
+               <!-- Show more/less -->
+
+               <s:Button 
+                       id="expandButton"
+                       click="expand();"
+                       label="Show more" baselineShift="1"
+                       width="118" height="12" y="34" x="6" />
+
                <!-- Second row -->
 
                <s:Button icon="@Embed('../../../embedded/straighten.svg')"
                <!-- Second row -->
 
                <s:Button icon="@Embed('../../../embedded/straighten.svg')"
                        enabled="{canDo('straighten')}" 
                        alpha="{getAlpha('straighten')}" 
                        toolTip="Straighten way" 
                        enabled="{canDo('straighten')}" 
                        alpha="{getAlpha('straighten')}" 
                        toolTip="Straighten way" 
-                       width="28" height="28" y="34" x="6" />
+                       width="28" height="28" y="48" x="6" />
                <s:Button icon="@Embed('../../../embedded/circle.svg')"
                        id="circulariseButton"
                        click='doCircularise();' 
                        enabled="{canDo('circularise')}" 
                        alpha="{getAlpha('circularise')}" 
                        toolTip="Make circular" 
                <s:Button icon="@Embed('../../../embedded/circle.svg')"
                        id="circulariseButton"
                        click='doCircularise();' 
                        enabled="{canDo('circularise')}" 
                        alpha="{getAlpha('circularise')}" 
                        toolTip="Make circular" 
-                       width="28" height="28" y="34" x="36" />
+                       width="28" height="28" y="48" x="36" />
                <s:Button icon="@Embed('../../../embedded/quadrilateralise.svg')"
                        id="quadrilateraliseButton"
                        click='doQuadrilateralise();' 
                        enabled="{canDo('quadrilateralise')}" 
                        alpha="{getAlpha('quadrilateralise')}" 
                        toolTip="Make right-angled (Q)"
                <s:Button icon="@Embed('../../../embedded/quadrilateralise.svg')"
                        id="quadrilateraliseButton"
                        click='doQuadrilateralise();' 
                        enabled="{canDo('quadrilateralise')}" 
                        alpha="{getAlpha('quadrilateralise')}" 
                        toolTip="Make right-angled (Q)"
-                       width="28" height="28" y="34" x="66" />
+                       width="28" height="28" y="48" x="66" />
                <s:Button icon="@Embed('../../../embedded/parallel.svg')"
                        id="parralleliseButton"
                        click='doParallelise();' 
                        enabled="{canDo('parallelise')}" 
                        alpha="{getAlpha('parallelise')}" 
                        toolTip="Create parallel way (P)" 
                <s:Button icon="@Embed('../../../embedded/parallel.svg')"
                        id="parralleliseButton"
                        click='doParallelise();' 
                        enabled="{canDo('parallelise')}" 
                        alpha="{getAlpha('parallelise')}" 
                        toolTip="Create parallel way (P)" 
-                       width="28" height="28" y="34" x="96" />
+                       width="28" height="28" y="48" x="96" />
 
        <fx:Script><![CDATA[
 
 
        <fx:Script><![CDATA[
 
                        try { obj.flush(); } catch (e:Error) {}
                }
                
                        try { obj.flush(); } catch (e:Error) {}
                }
                
+               public function expand():void {
+                       if (height==56) {
+                               height+=34;
+                               y=Math.min(y,stage.stageHeight-height-10);
+                               expandButton.label="Show less"; // ** FIXME: make translatable
+                       } else {
+                               height-=34;
+                               expandButton.label="Show more";
+                       }
+               }
+               
                // --------------------------------------------------------------------------------
                // Enable/disable toolbox buttons
                // (ideally we'd use CSS to set alpha in disabled state, but Flex's CSS
                // --------------------------------------------------------------------------------
                // Enable/disable toolbox buttons
                // (ideally we'd use CSS to set alpha in disabled state, but Flex's CSS