[NUI] Apply Tizen 7.0 UX on Pagination

- The latest Pagination UX has been applied. (Based on API10)
 The size and the default images are changed.

- The type of Pagination indicator is changed from `ImageVisual`
 to `ImageView`.
 Now, the indicators get highlight on AT-SPI.

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

diff --git a/src/Tizen.NUI.Components/Controls/Pagination.cs b/src/Tizen.NUI.Components/Controls/Pagination.cs
index 9dd36c5..ad914bc 100755 (executable)
--- a/src/Tizen.NUI.Components/Controls/Pagination.cs
+++ b/src/Tizen.NUI.Components/Controls/Pagination.cs
@@ -50,7 +50,7 @@ namespace Tizen.NUI.Components
 
         /// <summary>The IndicatorImageUrlSelector bindable property.</summary>
         [EditorBrowsable(EditorBrowsableState.Never)]
-        public static readonly BindableProperty IndicatorImageUrlProperty = BindableProperty.Create("IndicatorImageUrl", typeof(Selector<string>), typeof(Pagination), null, propertyChanged: (bindable, oldValue, newValue) =>
+        public static readonly BindableProperty IndicatorImageUrlProperty = BindableProperty.Create(nameof(IndicatorImageUrl), typeof(Selector<string>), typeof(Pagination), null, propertyChanged: (bindable, oldValue, newValue) =>
         {
             var pagination = (Pagination)bindable;
             pagination.indicatorImageUrl = ((Selector<string>)newValue)?.Clone();
@@ -74,11 +74,18 @@ namespace Tizen.NUI.Components
             return ((Pagination)bindable).indicatorSpacing;
         });
 
-        private VisualView container;
-        private Size indicatorSize = new Size(10, 10);
+        // Depending on Tizen 7.0 Pagination UX guide
+        private const int DefaultIndicatorWidth = 64;
+        private const int DefaultIndicatorHeight = 8;
+        private const int DefaultIndicatorSpacing = 16;
+        private const string DefaultIndicatorColor = "#FAFAFA";
+        private const string DefaultSelectedIndicatorColor = "#FFA166";
+
+        private View container;
+        private Size indicatorSize = new Size(DefaultIndicatorWidth, DefaultIndicatorHeight);
         private Selector<string> indicatorImageUrl;
-        private int indicatorSpacing;
-        private List<ImageVisual> indicatorList = new List<ImageVisual>();
+        private int indicatorSpacing = DefaultIndicatorSpacing;
+        private List<ImageView> indicatorList = new List<ImageView>();
 
         private int indicatorCount = 0;
         private int selectedIndex = 0;
@@ -169,7 +176,7 @@ namespace Tizen.NUI.Components
                 lastIndicatorImageUrl = value;
                 if (value != null && indicatorCount > 0)
                 {
-                    indicatorList[LastIndicatorIndex].URL = IsLastSelected ? value.Selected : value.Normal;
+                    indicatorList[LastIndicatorIndex].ResourceUrl = IsLastSelected ? value.Selected : value.Normal;
                 }
             }
         }
@@ -234,8 +241,7 @@ namespace Tizen.NUI.Components
                 {
                     for (int i = value; i < indicatorCount; i++)
                     {
-                        ImageVisual indicator = indicatorList[i];
-                        container.RemoveVisual("Indicator" + i);
+                        container.Remove(indicatorList[i]);
                     }
                     indicatorList.RemoveRange(value, indicatorCount - value);
 
@@ -245,7 +251,7 @@ namespace Tizen.NUI.Components
 
                         if (value > 0)
                         {
-                            SelectIn(indicatorList[selectedIndex]);
+                            UpdateSelectedIndicator(indicatorList[selectedIndex]);
                         }
                     }
                 }
@@ -255,9 +261,9 @@ namespace Tizen.NUI.Components
                 {
                     if (prevLastIndex >= 0)
                     {
-                        indicatorList[prevLastIndex].URL = prevLastIndex == selectedIndex ? indicatorImageUrl.Selected : indicatorImageUrl.Normal;
+                        indicatorList[prevLastIndex].ResourceUrl = prevLastIndex == selectedIndex ? indicatorImageUrl.Selected : indicatorImageUrl.Normal;
                     }
-                    indicatorList[LastIndicatorIndex].URL = IsLastSelected ? lastIndicatorImageUrl.Selected : lastIndicatorImageUrl.Normal;
+                    indicatorList[LastIndicatorIndex].ResourceUrl = IsLastSelected ? lastIndicatorImageUrl.Selected : lastIndicatorImageUrl.Normal;
                 }
 
                 UpdateContainer();
@@ -324,9 +330,7 @@ namespace Tizen.NUI.Components
                         continue;
                     }
 
-                    ImageVisual indicator = indicatorList[i];
-                    indicator.MixColor = indicatorColor;
-                    indicator.Opacity = indicatorColor.A;
+                    indicatorList[i].Color = indicatorColor;
                 }
             }
         }
@@ -381,9 +385,7 @@ namespace Tizen.NUI.Components
 
                 if (indicatorList.Count > selectedIndex)
                 {
-                    var indicator = indicatorList[selectedIndex];
-                    indicator.MixColor = selectedIndicatorColor;
-                    indicator.Opacity = selectedIndicatorColor.A;
+                    indicatorList[selectedIndex].Color = selectedIndicatorColor;
                 }
             }
         }
@@ -422,11 +424,11 @@ namespace Tizen.NUI.Components
                 Debug.Assert(refinedValue >= 0 && refinedValue < indicatorCount);
                 Debug.Assert(selectedIndex >= 0 && selectedIndex < indicatorCount);
 
-                SelectOut(indicatorList[selectedIndex]);
+                UpdateUnselectedIndicator(indicatorList[selectedIndex]);
 
                 selectedIndex = refinedValue;
 
-                SelectIn(indicatorList[selectedIndex]);
+                UpdateSelectedIndicator(indicatorList[selectedIndex]);
 
                 if (Accessibility.Accessibility.IsEnabled && IsHighlighted)
                 {
@@ -512,18 +514,24 @@ namespace Tizen.NUI.Components
             AccessibilityHighlightable = true;
             AppendAccessibilityAttribute("style", "pagecontrolbyvalue");
 
-            container = new VisualView()
+            container = new View()
             {
                 Name = "Container",
                 ParentOrigin = Tizen.NUI.ParentOrigin.CenterLeft,
                 PivotPoint = Tizen.NUI.PivotPoint.CenterLeft,
                 PositionUsesPivotPoint = true,
+                Layout = new LinearLayout()
+                {
+                    LinearOrientation = LinearLayout.Orientation.Horizontal,
+                    CellPadding = new Size2D(indicatorSpacing, 0),
+                },
+                Padding = new Extents(8, 8, 0, 0),
             };
             this.Add(container);
 
             //TODO: Apply color properties from PaginationStyle class.
-            indicatorColor = new Color(1.0f, 1.0f, 1.0f, 0.5f);
-            selectedIndicatorColor = new Color(1.0f, 1.0f, 1.0f, 1.0f);
+            indicatorColor = new Color(DefaultIndicatorColor);
+            selectedIndicatorColor = new Color(DefaultSelectedIndicatorColor);
         }
 
         /// <summary>
@@ -533,14 +541,15 @@ namespace Tizen.NUI.Components
         /// <since_tizen> 8 </since_tizen>
         protected virtual void SelectOut(VisualMap selectOutIndicator)
         {
+            // Currently, this method is not used in this file anymore.
+            // However, the implementation inside should remain because someone could be used by overriding it.
             if (!(selectOutIndicator is ImageVisual visual)) return;
             visual.URL = ((IsLastSelected && lastIndicatorImageUrl != null) ? lastIndicatorImageUrl : indicatorImageUrl)?.Normal;
 
             if (indicatorColor == null)
             {
-                //TODO: Apply color properties from PaginationStyle class.
-                visual.MixColor = new Color(1.0f, 1.0f, 1.0f, 0.5f);
-                visual.Opacity = 0.5f;
+                visual.MixColor = new Color(DefaultIndicatorColor);
+                visual.Opacity = 1.0f;
             }
             else
             {
@@ -556,13 +565,14 @@ namespace Tizen.NUI.Components
         /// <since_tizen> 8 </since_tizen>
         protected virtual void SelectIn(VisualMap selectInIndicator)
         {
+            // Currently, this method is not used in this file anymore.
+            // However, the implementation inside should remain because someone could be used by overriding it.
             if (!(selectInIndicator is ImageVisual visual)) return;
             visual.URL = ((IsLastSelected && lastIndicatorImageUrl != null) ? lastIndicatorImageUrl : indicatorImageUrl)?.Selected;
 
             if (selectedIndicatorColor == null)
             {
-                //TODO: Apply color properties from PaginationStyle class.
-                visual.MixColor = new Color(1.0f, 1.0f, 1.0f, 1.0f);
+                visual.MixColor = new Color(DefaultSelectedIndicatorColor);
                 visual.Opacity = 1.0f;
             }
             else
@@ -596,7 +606,10 @@ namespace Tizen.NUI.Components
 
             if (type == DisposeTypes.Explicit)
             {
-                container.RemoveAll();
+                for (int i = 0; i < indicatorCount; i++)
+                {
+                    container.Remove(indicatorList[i]);
+                }
                 indicatorList.Clear();
 
                 this.Remove(container);
@@ -607,25 +620,68 @@ namespace Tizen.NUI.Components
             base.Dispose(type);
         }
 
+        private void UpdateUnselectedIndicator(ImageView indicator)
+        {
+            if (indicator == null) return;
+
+            if (IsLastSelected && lastIndicatorImageUrl != null)
+            {
+                indicator.ResourceUrl = lastIndicatorImageUrl.Normal;
+            }
+            else
+            {
+                indicator.ResourceUrl = indicatorImageUrl.Normal;
+            }
+
+            if (indicatorColor == null)
+            {
+                indicator.Color = new Color(DefaultIndicatorColor);
+            }
+            else
+            {
+                indicator.Color = indicatorColor;
+            }
+        }
+
+        private void UpdateSelectedIndicator(ImageView indicator)
+        {
+            if (indicator == null) return;
+
+            if (IsLastSelected && lastIndicatorImageUrl != null)
+            {
+                indicator.ResourceUrl = lastIndicatorImageUrl.Selected;
+            }
+            else
+            {
+                indicator.ResourceUrl = indicatorImageUrl.Selected;
+            }
+
+            if (indicatorColor == null)
+            {
+                indicator.Color = new Color(DefaultSelectedIndicatorColor);
+            }
+            else
+            {
+                indicator.Color = indicatorColor;
+            }            
+        }
+
         private void CreateIndicator(int index)
         {
             Debug.Assert(indicatorSize != null);
 
-            ImageVisual indicator = new ImageVisual
+            ImageView indicator = new ImageView
             {
-                URL = indicatorImageUrl?.Normal,
+                ResourceUrl = indicatorImageUrl?.Normal,
                 Size = indicatorSize,
-                //TODO: Apply color properties from PaginationStyle class.
-                MixColor = (indicatorColor == null) ? new Color(1.0f, 1.0f, 1.0f, 0.5f) : indicatorColor,
-                Opacity = (indicatorColor == null) ? 0.5f : indicatorColor.A
+                Color = (indicatorColor == null) ? new Color(DefaultIndicatorColor) : indicatorColor,
             };
-            indicator.Position = new Vector2((int)(indicatorSize.Width + indicatorSpacing) * indicatorList.Count, 0);
-            container.AddVisual("Indicator" + indicatorList.Count, indicator);
             indicatorList.Add(indicator);
+            container.Add(indicator);
 
             if (index == selectedIndex)
             {
-                SelectIn(indicatorList[selectedIndex]);
+                UpdateSelectedIndicator(indicatorList[selectedIndex]);
             }
         }
 
@@ -654,17 +710,21 @@ namespace Tizen.NUI.Components
                 return;
             }
 
+            if (container != null && container.Layout is LinearLayout)
+            {
+                (container.Layout as LinearLayout).CellPadding = new Size2D(indicatorSpacing, 0);
+            }
+
             for (int i = 0; i < indicatorList.Count; i++)
             {
-                ImageVisual indicator = indicatorList[i];
-                indicator.URL = indicatorImageUrl?.Normal;
+                ImageView indicator = indicatorList[i];
+                indicator.ResourceUrl = indicatorImageUrl?.Normal;
                 indicator.Size = indicatorSize;
-                indicator.Position = new Vector2((int)(indicatorSize.Width + indicatorSpacing) * i, 0);
             }
 
             if (lastIndicatorImageUrl != null && indicatorCount > 0)
             {
-                indicatorList[LastIndicatorIndex].URL = lastIndicatorImageUrl.Normal;
+                indicatorList[LastIndicatorIndex].ResourceUrl = lastIndicatorImageUrl.Normal;
             }
         }
 

diff --git a/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs b/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
index 735a75a..c3ee27f 100755 (executable)
--- a/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
+++ b/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
@@ -277,12 +277,14 @@ namespace Tizen.NUI.Components
             // Pagination base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Pagination", new PaginationStyle()
             {
+                Size = new Size(450, 24),
                 IndicatorImageUrl = new Selector<string>()
                 {
                     Normal = FrameworkInformation.ResourcePath + "nui_component_default_pagination_normal_dot.png",
                     Selected = FrameworkInformation.ResourcePath + "nui_component_default_pagination_focus_dot.png",
                 },
-                IndicatorSize = new Size(10, 10),
+                IndicatorSize = new Size(64, 8),
+                IndicatorSpacing = 16,
             });
 
             // Scrollbar base style

diff --git a/src/Tizen.NUI.Components/res/nui_component_default_pagination_focus_dot.png b/src/Tizen.NUI.Components/res/nui_component_default_pagination_focus_dot.png
index 0737934..474d457 100644 (file)
Binary files a/src/Tizen.NUI.Components/res/nui_component_default_pagination_focus_dot.png and b/src/Tizen.NUI.Components/res/nui_component_default_pagination_focus_dot.png differ

diff --git a/src/Tizen.NUI.Components/res/nui_component_default_pagination_normal_dot.png b/src/Tizen.NUI.Components/res/nui_component_default_pagination_normal_dot.png
index 8aa8044..5d2271e 100644 (file)
Binary files a/src/Tizen.NUI.Components/res/nui_component_default_pagination_normal_dot.png and b/src/Tizen.NUI.Components/res/nui_component_default_pagination_normal_dot.png differ

diff --git a/test/Tizen.NUI.StyleGuide/Examples/PaginationExample.cs b/test/Tizen.NUI.StyleGuide/Examples/PaginationExample.cs
index baafd8a..5ff6d7a 100644 (file)
--- a/test/Tizen.NUI.StyleGuide/Examples/PaginationExample.cs
+++ b/test/Tizen.NUI.StyleGuide/Examples/PaginationExample.cs
@@ -129,7 +129,7 @@ namespace Tizen.NUI.StyleGuide
             var path = Tizen.Applications.Application.Current.DirectoryInfo.Resource;
             var indicatorImageUrlStyle = new PaginationStyle()
             {
-                IndicatorSize = new Size(26, 26),
+                IndicatorSize = new Size(64, 8),
                 IndicatorSpacing = 8,
                 IndicatorImageUrl = new Selector<string>
                 {
@@ -139,7 +139,7 @@ namespace Tizen.NUI.StyleGuide
             };
             pagination[0].ApplyStyle(indicatorImageUrlStyle);
             pagination[0].Name = "Pagination1";
-            pagination[0].Size = new Size(300, 50);
+            pagination[0].Size = new Size(450, 50);
             pagination[0].BackgroundColor = new Color(1.0f, 1.0f, 1.0f, 0.6f);
             pagination[0].IndicatorCount = PAGE_COUNT;
             pagination[0].SelectedIndex = 0;
@@ -157,7 +157,7 @@ namespace Tizen.NUI.StyleGuide
             // Create by Attributes
             PaginationStyle style = new PaginationStyle()
             {
-                IndicatorSize = new Size(15, 15),
+                IndicatorSize = new Size(32, 4),
                 IndicatorSpacing = 20,
                 IndicatorImageUrl = new Selector<string>
                 {
@@ -167,7 +167,7 @@ namespace Tizen.NUI.StyleGuide
             };
             pagination[1] = new Pagination(style);
             pagination[1].Name = "Pagination2";
-            pagination[1].Size = new Size(300, 50);
+            pagination[1].Size = new Size(400, 50);
             pagination[1].BackgroundColor = new Color(1.0f, 1.0f, 1.0f, 0.6f);
             pagination[1].IndicatorCount = PAGE_COUNT;
             pagination[1].SelectedIndex = 0;

diff --git a/test/Tizen.NUI.StyleGuide/res/pagination/pagination_ic_nor.png b/test/Tizen.NUI.StyleGuide/res/pagination/pagination_ic_nor.png
index f7eda28..5d2271e 100644 (file)
Binary files a/test/Tizen.NUI.StyleGuide/res/pagination/pagination_ic_nor.png and b/test/Tizen.NUI.StyleGuide/res/pagination/pagination_ic_nor.png differ

diff --git a/test/Tizen.NUI.StyleGuide/res/pagination/pagination_ic_sel.png b/test/Tizen.NUI.StyleGuide/res/pagination/pagination_ic_sel.png
index d5dc8ac..474d457 100644 (file)
Binary files a/test/Tizen.NUI.StyleGuide/res/pagination/pagination_ic_sel.png and b/test/Tizen.NUI.StyleGuide/res/pagination/pagination_ic_sel.png differ