Menubar.Add.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. Menubar.Add = function ( signals ) {
  2. var container = new UI.Panel();
  3. container.setFloat( 'left' );
  4. container.setWidth( '50px' );
  5. container.setCursor( 'pointer' );
  6. container.onMouseOver( function () { options.setDisplay( '' ) } );
  7. container.onMouseOut( function () { options.setDisplay( 'none' ) } );
  8. container.onClick( function () { options.setDisplay( 'none' ) } );
  9. var title = new UI.Panel();
  10. title.setTextContent( 'Add' ).setColor( '#666' );
  11. title.setMargin( '0px' );
  12. title.setPadding( '8px' )
  13. container.add( title );
  14. //
  15. var options = new UI.Panel();
  16. options.setWidth( '140px' );
  17. options.setBackgroundColor( '#ddd' );
  18. options.setPadding( '0px' );
  19. options.setBorderTop( 'solid 1px #ccc' );
  20. options.setStyle( 'box-shadow', [ '0 3px 6px rgba(0,0,0,0.1), 3px 3px 6px rgba(0,0,0,0.2)' ] );
  21. options.setDisplay( 'none' );
  22. container.add( options );
  23. //
  24. var option = new UI.Panel();
  25. option.setTextContent( 'Sphere' ).setColor( '#666' ).setPadding( '6px 12px' );
  26. option.onClick( function () { alert( 'Sphere' ) } );
  27. options.add( option );
  28. addHoverStyle( option );
  29. var option = new UI.Panel();
  30. option.setTextContent( 'Cube' ).setColor( '#666' ).setPadding( '6px 12px' );
  31. option.onClick( function () { alert( 'Cube' ) } );
  32. options.add( option );
  33. addHoverStyle( option );
  34. var option = new UI.Panel();
  35. option.setTextContent( 'Plane' ).setColor( '#666' ).setPadding( '6px 12px' );
  36. option.onClick( function () { alert( 'Plane' ) } );
  37. options.add( option );
  38. addHoverStyle( option );
  39. //
  40. function addHoverStyle( element ) {
  41. element.onMouseOver( function () { element.setBackgroundColor( '#356' ).setColor( '#eee' ); } );
  42. element.onMouseOut( function () { element.setBackgroundColor( 'transparent' ).setColor( '#666' ) } );
  43. }
  44. return container;
  45. }