[NUI] Apply Tizen 7.0 UX on Slider ValueIndicator (#4624)

- The latest Slider UX for ValueIndicator has been applied. (Based on API10)
 1) `ValueIndicatorImage` has become a child of Thumb.
 2) The style of `ValueIndicatorText` is added to the default theme.
 3) Updated the position and size for value indicator.

Signed-off-by: Seoyeon Kim <seoyeon2.kim@samsung.com>
Signed-off-by: Seoyeon Kim <seoyeon2.kim@samsung.com>

diff --git a/src/Tizen.NUI.Components/Controls/Slider.Internal.cs b/src/Tizen.NUI.Components/Controls/Slider.Internal.cs
index 39734c3..d3e785a 100755 (executable)
--- a/src/Tizen.NUI.Components/Controls/Slider.Internal.cs
+++ b/src/Tizen.NUI.Components/Controls/Slider.Internal.cs
@@ -300,13 +300,14 @@ namespace Tizen.NUI.Components
                 {
                     WidthResizePolicy = ResizePolicyType.Fixed,
                     HeightResizePolicy = ResizePolicyType.Fixed,
-                    ParentOrigin = NUI.ParentOrigin.Center,
-                    PivotPoint = NUI.PivotPoint.Center,
-                    PositionUsesPivotPoint = true,
                     EnableControlState = true,
                     GrabTouchAfterLeave = true,
                     AccessibilityHidden = true,
                 };
+                if (valueIndicatorImage != null)
+                {
+                    thumbImage.Add(valueIndicatorImage);
+                }
                 if (bgTrackImage != null)
                 {
                     bgTrackImage.Add(thumbImage);
@@ -324,19 +325,19 @@ namespace Tizen.NUI.Components
             {
                 valueIndicatorImage = new ImageView()
                 {
-                    PositionUsesPivotPoint = true,
-                    ParentOrigin = Tizen.NUI.ParentOrigin.Center,
-                    PivotPoint = Tizen.NUI.PivotPoint.Center,
-                    WidthResizePolicy = ResizePolicyType.Fixed,
+                    WidthResizePolicy = ResizePolicyType.FitToChildren,
                     HeightResizePolicy = ResizePolicyType.Fixed,
                     AccessibilityHidden = true,
                 };
+                if (thumbImage != null)
+                {
+                    thumbImage.Add(valueIndicatorImage);
+                }
                 if (valueIndicatorText != null)
                 {
                     valueIndicatorImage.Add(valueIndicatorText);
+                    valueIndicatorText.RaiseToTop();
                 }
-                // TODO : ValueIndicator can be a child of Thumb
-                this.Add(valueIndicatorImage);
             }
 
             valueIndicatorImage.Hide();
@@ -349,7 +350,7 @@ namespace Tizen.NUI.Components
             {
                 valueIndicatorText = new TextLabel()
                 {
-                    WidthResizePolicy = ResizePolicyType.Fixed,
+                    WidthResizePolicy = ResizePolicyType.UseNaturalSize,
                     HeightResizePolicy = ResizePolicyType.Fixed,
                     AccessibilityHidden = true,
                 };
@@ -357,6 +358,7 @@ namespace Tizen.NUI.Components
                 {
                     valueIndicatorImage.Add(valueIndicatorText);
                 }
+                valueIndicatorText.RaiseToTop();
             }
 
             return valueIndicatorText;
@@ -487,16 +489,16 @@ namespace Tizen.NUI.Components
                 }
                 if (valueIndicatorImage != null)
                 {
-                    valueIndicatorImage.ParentOrigin = NUI.ParentOrigin.TopLeft;
+                    valueIndicatorImage.ParentOrigin = NUI.ParentOrigin.TopCenter;
                     valueIndicatorImage.PivotPoint = NUI.PivotPoint.BottomCenter;
                     valueIndicatorImage.PositionUsesPivotPoint = true;
+                    valueIndicatorImage.PositionY = -10.0f;
                 }
                 if (valueIndicatorText != null)
                 {
-                    valueIndicatorText.ParentOrigin = NUI.ParentOrigin.TopCenter;
-                    valueIndicatorText.PivotPoint = NUI.PivotPoint.TopCenter;
+                    valueIndicatorText.ParentOrigin = NUI.ParentOrigin.Center;
+                    valueIndicatorText.PivotPoint = NUI.PivotPoint.Center;
                     valueIndicatorText.PositionUsesPivotPoint = true;
-                    valueIndicatorText.Padding = new Extents(0, 0, 5, 0); // TODO : How to set the text as center
                 }
                 if (panGestureDetector != null)
                 {
@@ -559,16 +561,16 @@ namespace Tizen.NUI.Components
                 }
                 if (valueIndicatorImage != null)
                 {
-                    valueIndicatorImage.ParentOrigin = NUI.ParentOrigin.BottomCenter;
-                    valueIndicatorImage.PivotPoint = NUI.PivotPoint.BottomCenter;
+                    valueIndicatorImage.ParentOrigin = NUI.ParentOrigin.CenterLeft;
+                    valueIndicatorImage.PivotPoint = NUI.PivotPoint.CenterRight;
                     valueIndicatorImage.PositionUsesPivotPoint = true;
+                    valueIndicatorImage.PositionX = -14.0f;
                 }
                 if (valueIndicatorText != null)
                 {
-                    valueIndicatorText.ParentOrigin = NUI.ParentOrigin.TopCenter;
-                    valueIndicatorText.PivotPoint = NUI.PivotPoint.TopCenter;
+                    valueIndicatorText.ParentOrigin = NUI.ParentOrigin.Center;
+                    valueIndicatorText.PivotPoint = NUI.PivotPoint.Center;
                     valueIndicatorText.PositionUsesPivotPoint = true;
-                    valueIndicatorText.Padding = new Extents(0, 0, 5, 0); // TODO : How to set the text as center
                 }
                 if (panGestureDetector != null)
                 {
@@ -786,11 +788,6 @@ namespace Tizen.NUI.Components
                 slidedTrackImage.Size2D = new Size2D((int)(slidedTrackLength + round), (int)curTrackThickness); //Add const round to reach Math.Round function.
                 thumbImage.Position = new Position(slidedTrackImage.Size2D.Width, 0);
                 thumbImage.RaiseToTop();
-
-                if (isValueShown)
-                {
-                    valueIndicatorImage.Position = new Position(slidedTrackImage.Size2D.Width, 0);
-                }
             }
             else if (direction == DirectionType.Vertical)
             {
@@ -798,11 +795,6 @@ namespace Tizen.NUI.Components
                 slidedTrackImage.Size2D = new Size2D((int)curTrackThickness, (int)(slidedTrackLength + round)); //Add const round to reach Math.Round function.
                 thumbImage.Position = new Position(0, -slidedTrackImage.Size2D.Height);
                 thumbImage.RaiseToTop();
-
-                if (isValueShown)
-                {
-                    valueIndicatorImage.Position = new Position(0, -(slidedTrackImage.Size2D.Height + thumbImage.Size.Height / 2));
-                }
             }
 
             // Update the track and thumb when the value is over warning value.

diff --git a/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs b/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
index 4875997..2439f9e 100755 (executable)
--- a/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
+++ b/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
@@ -276,11 +276,18 @@ namespace Tizen.NUI.Components
                 },
                 ValueIndicatorImage = new ImageViewStyle()
                 {
-                    Size = new Size(16, 24),
-                    BorderlineWidth = 0.5f,
+                    Size = new Size(43, 40),
+                    BorderlineWidth = 1.0f,
                     BorderlineColor = new Color("#FF6200"),
-                    BackgroundColor = new Color(0.0f, 0.04f, 0.16f, 1.0f),
+                    BackgroundColor = new Color(1.0f, 1.0f, 1.0f, 0.0f),
+                    CornerRadius = 12.0f,
                 },
+                ValueIndicatorText = new TextLabelStyle()
+                {
+                    SizeHeight = 24,
+                    PixelSize = 16,
+                    TextColor = new Color("#FF6200"),
+                }
             });
 
             // Switch base style