Minor demo improvements.

*The primitive shapes demo has had the buttons scaled down slightly to fit on two lines. *The text editor demo has had a label added to the color change button, which has itself received a border to highlight the less-visible colours. Change-Id: I16a69bd381ef0c8c980c0c3681cc47117b2d2786

Minor demo improvements.
*The primitive shapes demo has had the buttons scaled down slightly to fit on two lines. *The text editor demo has had a label added to the color change button, which has itself received a border to highlight the less-visible colours. Change-Id: I16a69bd381ef0c8c980c0c3681cc47117b2d2786
Andrew Poor
1 parent ecd5edf4
Showing 8 changed files with 39 additions and 16 deletions
examples/text-editor/text-editor-example.cpp
resources/images/bevelled-cube-button.png
resources/images/cone-button.png
resources/images/conical-frustrum-button.png
resources/images/cube-button.png
resources/images/cylinder-button.png
resources/images/octahedron-button.png
resources/images/sphere-button.png
@@ -40,7 +40,7 @@ const float   TOOLBAR_BUTTON_PERCENTAGE = 0.1f;                     ///&lt; The but
 const float   TOOLBAR_TITLE_PERCENTAGE = 0.7f;                      ///< The title's width as a percentage of the toolbar's width.
 const float   TOOLBAR_HEIGHT_PERCENTAGE = 0.05f;                    ///< The toolbar's height as a percentage of the stage's height.
 const float   TOOLBAR_PADDING = 4.f;                                ///< The padding in pixels.
-const Vector3 BUTTON_PERCENTAGE( 0.8f, 0.8f, 1.f );                 ///< The button's width as a percentage of the space for the buttons in the toolbar.
+const float   BUTTON_PERCENTAGE = 0.8f;                             ///< The button's height as a percentage of the space for the buttons in the toolbar.
 const Vector3 TEXT_EDITOR_RELATIVE_SIZE( 1.f, 0.45f, 1.0f );        ///< The size of the text editor as a percentage of the stage's size.
 const Vector4 TEXT_EDITOR_BACKGROUND_COLOR( 1.f, 1.f, 1.f, 0.15f ); ///< The background color of the text editor.
  
@@ -108,17 +108,46 @@ public:
                                              "",
                                              viewStyle );
  
+    // Create a label for the color selection button.
+    // The button will be a child of this, so as to be placed next to it.
+    TextLabel colorLabel = TextLabel::New( "Text Color: " );
+    colorLabel.SetResizePolicy( ResizePolicy::USE_NATURAL_SIZE, Dimension::WIDTH );
+    colorLabel.SetResizePolicy( ResizePolicy::FILL_TO_PARENT, Dimension::HEIGHT );
+    colorLabel.SetProperty( TextLabel::Property::VERTICAL_ALIGNMENT, "CENTER" );
+
+    // Create a container for the color button, to layout the drop-down list below it.
+    mColorContainer = Control::New();
+    mColorContainer.SetResizePolicy( ResizePolicy::DIMENSION_DEPENDENCY, Dimension::WIDTH );
+    mColorContainer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::HEIGHT );
+    mColorContainer.SetSizeModeFactor( Vector3( 0.0f, BUTTON_PERCENTAGE, 0.0f ) );
+
+    // Place to right of parent.
+    mColorContainer.SetParentOrigin( ParentOrigin::CENTER_RIGHT );
+    mColorContainer.SetAnchorPoint( AnchorPoint::CENTER_LEFT );
+    colorLabel.Add( mColorContainer );
+
+    // Add border to highlight harder-to-see colors.
+    // We use a color rather than border visual as the container will always be behind the button.
+    Property::Map colorMap;
+    colorMap.Insert( Visual::Property::TYPE, Visual::COLOR);
+    colorMap.Insert( ColorVisual::Property::MIX_COLOR, Color::BLACK );
+    mColorContainer.SetProperty( Control::Property::BACKGROUND, colorMap );
+
     // Create a 'select color' button.
     mColorButtonOption = Toolkit::PushButton::New();
     mColorButtonOption.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
-    mColorButtonOption.SetSizeModeFactor( BUTTON_PERCENTAGE );
+    mColorButtonOption.SetSizeModeFactor( Vector3( 0.9f, 0.9f, 0.0f ) ); // Smaller than container to show border.
+    mColorButtonOption.SetParentOrigin( ParentOrigin::CENTER );
+    mColorButtonOption.SetAnchorPoint( AnchorPoint::CENTER );
  
     mColorButtonOption.SetProperty( Button::Property::UNSELECTED_COLOR, Color::BLACK );
     mColorButtonOption.SetProperty( Button::Property::SELECTED_COLOR, Color::BLACK );
  
     mColorButtonOption.ClickedSignal().Connect( this, &TextEditorExample::OnChangeColorButtonClicked );
+    mColorContainer.Add( mColorButtonOption );
  
-    mToolBar.AddControl( mColorButtonOption, viewStyle.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
+    //Add label to toolbar, which will also add the color button next to it.
+    mToolBar.AddControl( colorLabel, viewStyle.mToolBarButtonPercentage, Toolkit::Alignment::HorizontalLeft, DemoHelper::DEFAULT_MODE_SWITCH_PADDING  );
  
     // Create the text editor.
     mEditor = TextEditor::New();
@@ -159,21 +188,14 @@ public:
   void CreateButtonContainer()
   {
     mButtonContainer = Toolkit::TableView::New( NUMBER_OF_COLORS, 1u );
-    mButtonContainer.SetParentOrigin( ParentOrigin::TOP_LEFT );
-    mButtonContainer.SetAnchorPoint( AnchorPoint::TOP_LEFT );
-
-    Stage stage = Stage::GetCurrent();
-    const Vector2 stageSize = stage.GetSize();
-    const float toolBarHeight = TOOLBAR_HEIGHT_PERCENTAGE * stageSize.height;
-    mButtonContainer.SetPosition( TOOLBAR_PADDING, 2.f * TOOLBAR_PADDING + toolBarHeight, 0.f );
-
     mButtonContainer.SetResizePolicy( ResizePolicy::SIZE_RELATIVE_TO_PARENT, Dimension::ALL_DIMENSIONS );
+    mButtonContainer.SetSizeModeFactor( Vector3( 1.0f, NUMBER_OF_COLORS, 1.0f ) );
  
-    const Vector3 containerPercentage( 0.8f * TOOLBAR_BUTTON_PERCENTAGE, NUMBER_OF_COLORS, 1.f );
-    mButtonContainer.SetSizeModeFactor( containerPercentage );
-
-    Layer toolbarLayer = mToolBar.GetLayer();
-    toolbarLayer.Add( mButtonContainer );
+    // Place below color selection button.
+    mButtonContainer.SetParentOrigin( ParentOrigin::BOTTOM_CENTER  );
+    mButtonContainer.SetAnchorPoint( AnchorPoint::TOP_CENTER );
+    mButtonContainer.SetPosition( 0.0f, 2.f * TOOLBAR_PADDING, 0.f );
+    mColorContainer.Add( mButtonContainer );
  
     const Vector3 buttonPercentage( 1.f, 0.8f / static_cast<float>( NUMBER_OF_COLORS ), 1.f );
     for( unsigned int index = 0u; index < NUMBER_OF_COLORS; ++index )
@@ -260,6 +282,7 @@ private:
   Toolkit::Control    mView;
   Toolkit::ToolBar    mToolBar;
   Toolkit::TextEditor mEditor;
+  Toolkit::Control    mColorContainer;
   Toolkit::PushButton mColorButtonOption;
   Toolkit::TableView  mButtonContainer;
 };