SlickBoard | CSS/XML Timeline (new) | XML/SWF Charts | Timeline Eons

 < previousnext > 

 

Minimize

 

Minimize is one way to manage cluttered boards by shrinking unused objects. This differs from the dock in that it is not a standard feature. It can be created with actions that hide a large object, while showing a smaller representation of the same object. Because this is not a standard feature, it can be customized to make minimized objects go anywhere and look and behave in unlimited ways:

 

Example

<slickboard>
    

   <!-- container object that encloses both the large, red object and its small, orange representation -->
   <!-- this is nesseary to move both objects together -->
   <object id='container' offset_x='100' offset_y='50'>
   
      <!-- the large red rectangle (unminimized object) -->
      <object id='large'>
         <rect fill_color='ff4400' shadow='default' state='hit' /> 
         <action><item type='drag' target='container' /></action>
   
         <!-- the white corner icon inside the large red rectangle-->
         <object>  
            <rect x='70' y='10' width='20' height='20' fill_color='ffffff' state='hit' />  
            <rect x='70' y='25' width='20' height='5' />  
         
            <!-- when the white corner icon is clicked, hide the large object, show the small one, and move both -->
            <action>
               <item type='hide' target='large' transition='fade' duration='.25' easing='strong' />
               <item type='show' target='small' transition='fade' duration='.25' easing='strong' />
               <item type='move_to' offset='false' target='container' x='10' y='10' duration='.25' easing='back' />
            </action>  
             
         </object> 
      </object>   
   
   
      <!-- the small orange representation (minimized object), which is initially hidden -->
      <object id='small' hide='true'>  
         <rect x='0' y='0' width='20' height='20' fill_color='ff8800' state='hit' /> 
       
         <!-- when the small orange representation is clicked, hide the small object, show the large one, and move both -->   
         <action>
            <item type='show' target='large' transition='fade' duration='.25' easing='strong' />
            <item type='hide' target='small' transition='fade' duration='.25' easing='strong' />
            <item type='move_to' offset='false' target='container' x='100' y='50' duration='.25' easing='back' />
         </action>   
      </object>
      
   </object>     
   
   
   <filter>
      <shadow id='default' />
   </filter>
   
</slickboard>

 

 < previousnext > 


Copyright © 2010-2017, maani.us