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.
class TextEditorExample : public ConnectionTracker
{
public:
-
TextEditorExample( Application& application )
: mApplication( application )
{
"",
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();
"Asšúm sapěret usu ůť.\n"
"Síť ut apeirián laboramúš percipitur, sůas hařum ín éos?\n" );
+ mEditor.InputStyleChangedSignal().Connect( this, &TextEditorExample::OnTextInputStyleChanged );
+
contents.Add( mEditor );
}
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 )
{
const std::string& name = button.GetName();
+ Vector4 color;
if( "color" == name.substr( 0u, 5u ) )
{
const unsigned int index = strtoul( name.substr( 5u, 1u ).c_str(), NULL, 10u );
- mEditor.SetProperty( TextEditor::Property::INPUT_COLOR, COLORS[index] );
+ color = COLORS[index];
+ mEditor.SetProperty( TextEditor::Property::INPUT_COLOR, color );
}
+ mColorButtonOption.SetProperty( Button::Property::UNSELECTED_COLOR, color );
+ mColorButtonOption.SetProperty( Button::Property::SELECTED_COLOR, color );
+
mButtonContainer.SetVisible( false );
mButtonContainer.SetSensitive( false );
return true;
}
+ void OnTextInputStyleChanged( TextEditor editor, TextEditor::InputStyle::Mask mask )
+ {
+ if( TextEditor::InputStyle::NONE != static_cast<TextEditor::InputStyle::Mask>( mask & TextEditor::InputStyle::COLOR ) )
+ {
+ const Vector4 color = editor.GetProperty( TextEditor::Property::INPUT_COLOR ).Get<Vector4>();
+
+ mColorButtonOption.SetProperty( Button::Property::UNSELECTED_COLOR, color );
+ mColorButtonOption.SetProperty( Button::Property::SELECTED_COLOR, color );
+ }
+
+ editor.Reset();
+ }
+
private:
Application& mApplication;
Toolkit::Control mView;
Toolkit::ToolBar mToolBar;
Toolkit::TextEditor mEditor;
+ Toolkit::Control mColorContainer;
Toolkit::PushButton mColorButtonOption;
Toolkit::TableView mButtonContainer;
};