/*
- * Copyright (c) 2016 Samsung Electronics Co., Ltd.
+ * Copyright (c) 2017 Samsung Electronics Co., Ltd.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
// EXTERNAL INCLUDES
#include <dali-toolkit/dali-toolkit.h>
-#include <iostream>
+#include <dali-toolkit/devel-api/controls/buttons/button-devel.h>
#include <sstream>
// INTERNAL INCLUDES
namespace
{
+const char * const THEME_PATH( DEMO_STYLE_DIR "text-editor-example-theme.json" ); ///< The theme used for this example
const Vector4 BACKGROUND_COLOR( 0.04f, 0.345f, 0.392f, 1.0f ); ///< The background color.
const char* TOOLBAR_IMAGE = DEMO_IMAGE_DIR "top-bar.png"; ///< The tool-bar image.
const float TOOLBAR_BUTTON_PERCENTAGE = 0.1f; ///< The button's space width as a percentage of the toolbar's width.
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( Toolkit::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 );
+ SetButtonColor( mColorButtonOption, 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 );
+ StyleManager styleManager = StyleManager::Get();
+ styleManager.ApplyTheme( THEME_PATH );
}
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 )
s << "color" << index;
button.SetName( s.str() );
- button.SetProperty( Button::Property::UNSELECTED_COLOR, COLORS[index] );
- button.SetProperty( Button::Property::SELECTED_COLOR, COLORS[index] );
+ SetButtonColor( button, COLORS[index] );
button.ClickedSignal().Connect( this, &TextEditorExample::OnColorButtonClicked );
{
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 );
}
+ SetButtonColor( mColorButtonOption, 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>();
+ SetButtonColor( mColorButtonOption, color );
+ }
+
+ editor.Reset();
+ }
+
+ void SetButtonColor( Button& button, const Vector4& color )
+ {
+ Property::Map colorVisualMap;
+ colorVisualMap.Add( Toolkit::Visual::Property::TYPE, Visual::COLOR )
+ .Add( ColorVisual::Property::MIX_COLOR, color );
+
+ button.SetProperty( DevelButton::Property::UNSELECTED_BACKGROUND_VISUAL, colorVisualMap );
+ button.SetProperty( DevelButton::Property::SELECTED_BACKGROUND_VISUAL, colorVisualMap );
+ }
+
private:
Application& mApplication;
Toolkit::Control mView;
Toolkit::ToolBar mToolBar;
Toolkit::TextEditor mEditor;
+ Toolkit::Control mColorContainer;
Toolkit::PushButton mColorButtonOption;
Toolkit::TableView mButtonContainer;
};
projects / platform / core / uifw / dali-demo.git / blobdiff