[NUI] Apply Progress and Loading UX
authorSeoyeon Kim <seoyeon2.kim@samsung.com>
Mon, 2 May 2022 07:19:45 +0000 (16:19 +0900)
committerTaehyub Kim <taehyub.kim@samsung.com>
Tue, 3 May 2022 09:00:21 +0000 (02:00 -0700)
- The latest Progress and Loading UX have been applied. (Based on API10)
  The colors and sizes of Progress and Track are changed.
  Indeterminate image is changed.

Signed-off-by: Seoyeon Kim <seoyeon2.kim@samsung.com>
src/Tizen.NUI.Components/Controls/Progress.cs
src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
src/Tizen.NUI.Components/res/IoT_progress_indeterminate.png [changed mode: 0755->0644]
test/Tizen.NUI.StyleGuide/Examples/ProgressExample.cs
test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_1.png [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_2.png [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_3.png [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_4.png [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_5.png [new file with mode: 0644]
test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_6.png [new file with mode: 0644]

index ee8c73c..fe619b6 100755 (executable)
@@ -141,7 +141,7 @@ namespace Tizen.NUI.Components
         private ImageView trackImage = null;
         private ImageView progressImage = null;
         private ImageView bufferImage = null;
-        private ImageVisual indeterminateImage = null;
+        private ImageView indeterminateImage = null;
         private float maxValue = 100;
         private float minValue = 0;
         private float currentValue = 0;
@@ -305,7 +305,7 @@ namespace Tizen.NUI.Components
                 }
                 else
                 {
-                    return indeterminateImage?.URL;
+                    return indeterminateImage?.ResourceUrl;
                 }
             }
             set
@@ -316,7 +316,7 @@ namespace Tizen.NUI.Components
                 }
                 else
                 {
-                    indeterminateImage.URL = value;
+                    indeterminateImage.ResourceUrl = value;
                 }
             }
         }
@@ -498,6 +498,7 @@ namespace Tizen.NUI.Components
                 Debug.Assert(trackImage != null);
                 Debug.Assert(progressImage != null);
                 Debug.Assert(bufferImage != null);
+                Debug.Assert(indeterminateImage != null);
 
                 trackImage.ApplyStyle(progressStyle.Track);
                 progressImage.ApplyStyle(progressStyle.Progress);
@@ -505,7 +506,7 @@ namespace Tizen.NUI.Components
 
                 if (null != indeterminateImage && null != progressStyle.IndeterminateImageUrl)
                 {
-                    indeterminateImage.URL = progressStyle.IndeterminateImageUrl;
+                    indeterminateImage.ResourceUrl = progressStyle.IndeterminateImageUrl;
                 }
             }
         }
@@ -599,7 +600,7 @@ namespace Tizen.NUI.Components
                 Utility.Dispose(trackImage);
                 Utility.Dispose(progressImage);
                 Utility.Dispose(bufferImage);
-                indeterminateImage = null;
+                Utility.Dispose(indeterminateImage);
             }
 
             //You must call base.Dispose(type) just before exit.
@@ -680,7 +681,21 @@ namespace Tizen.NUI.Components
 
             if (null != indeterminateImage)
             {
-                indeterminateAnimation = AnimateVisual(indeterminateImage, "pixelArea", destinationValue, 0, 1000,  AlphaFunction.BuiltinFunctions.Default, initialValue);
+                if (indeterminateAnimation == null)
+                {
+                    indeterminateAnimation = new Animation(2000);
+                }
+                
+                float destination = (this.SizeWidth - indeterminateImage.SizeWidth);
+
+                KeyFrames keyFrames = new KeyFrames();
+                keyFrames.Add(0.0f /*  0%*/, new Position(0, 0));
+                AlphaFunction ease = new AlphaFunction(AlphaFunction.BuiltinFunctions.EaseInOut);
+                keyFrames.Add(0.5f /* 50%*/, new Position(destination, 0), ease);
+                keyFrames.Add(1.0f /*100%*/, new Position(0, 0), ease);
+                ease.Dispose();
+
+                indeterminateAnimation.AnimateBetween(indeterminateImage, "Position", keyFrames);
                 indeterminateAnimation.Looping = true;
                 indeterminateAnimation.Play();
             }
@@ -712,7 +727,7 @@ namespace Tizen.NUI.Components
 
                 if (null != indeterminateImage)
                 {
-                    indeterminateImage.Opacity = 0.0f;
+                    indeterminateImage.Hide();
                 }
                 progressImage.Hide();
                 bufferImage.Hide();
@@ -726,7 +741,7 @@ namespace Tizen.NUI.Components
 
                 if (null != indeterminateImage)
                 {
-                    indeterminateImage.Opacity = 0.0f;
+                    indeterminateImage.Hide();
                 }
                 progressImage.Hide();
                 bufferImage.Show();
@@ -738,7 +753,7 @@ namespace Tizen.NUI.Components
 
                 if (null != indeterminateImage)
                 {
-                    indeterminateImage.Opacity = 0.0f;
+                    indeterminateImage.Hide();
                 }
                 bufferImage.Hide();
                 progressImage.Show();
@@ -751,7 +766,7 @@ namespace Tizen.NUI.Components
                 progressImage.Hide();
                 if (null != indeterminateImage)
                 {
-                    indeterminateImage.Opacity = 1.0f;
+                    indeterminateImage.Show();
                 }
 
                 UpdateIndeterminateAnimation();
@@ -822,22 +837,19 @@ namespace Tizen.NUI.Components
 
         private void InitializeIndeterminate()
         {
-            indeterminateImage = new ImageVisual
+            indeterminateImage = new ImageView
             {
-                PixelArea = new Vector4(0.0f, 0.0f, 10.0f, 1.0f),
-                WrapModeU = WrapModeType.Repeat,
-                SizePolicy = VisualTransformPolicyType.Relative,
-                Origin = Visual.AlignType.Center,
-                AnchorPoint = Visual.AlignType.Center,
-                Opacity = 0.0f,
-                Size = new Size2D(1, 1),
-                URL = Tizen.Applications.Application.Current.DirectoryInfo.Resource + "nui_component_default_progress_indeterminate.png"
+                Size = new Size(16, 16),
+                PositionUsesPivotPoint = true,
+                ParentOrigin = Tizen.NUI.ParentOrigin.CenterLeft,
+                PivotPoint = Tizen.NUI.PivotPoint.CenterLeft
             };
-            AddVisual("Indeterminate", indeterminateImage);
+            trackImage.Add(indeterminateImage);
+            indeterminateImage.Hide();
 
             if (state == ProgressStatusType.Indeterminate)
             {
-                indeterminateImage.Opacity = 1.0f;
+                indeterminateImage.Show();
             }
         }
     }
index 16e52f3..9ef6cd5 100755 (executable)
@@ -129,26 +129,27 @@ namespace Tizen.NUI.Components
             // Progress base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Progress", new ProgressStyle()
             {
-                Size = new Size(200, 25),
+                Size = new Size(508, 16),
                 Track = new ImageViewStyle()
                 {
-                    BorderlineWidth = 0.5f,
-                    BorderlineColor = new Color(0.92f, 0.93f, 0.94f, 1.0f),
+                    CornerRadius = 8.0f,
                     BackgroundColor = new Selector<Color>()
                     {
-                        Normal = new Color(1.0f, 1.0f, 1.0f, 0.5f),
-                        Disabled = new Color(0.73f, 0.76f, 0.79f, 1),
+                        Normal = new Color(0.82f, 0.31f, 0.0f, 0.1f),
+                        Disabled = new Color(0.82f, 0.31f, 0.0f, 0.1f),
                     },
                 },
                 Buffer = new ImageViewStyle()
                 {
-                    BackgroundColor = new Color(0.05f, 0.63f, 0.9f, 0.3f),
+                    CornerRadius = 8.0f,
+                    BackgroundColor = new Color(0.82f, 0.31f, 0.0f, 0.1f),
                 },
                 Progress = new ImageViewStyle()
                 {
-                    BackgroundColor = new Color(0.03f, 0.05f, 0.29f, 1),
+                    CornerRadius = 8.0f,
+                    BackgroundColor = new Color("#D25000"),
                 },
-                IndeterminateImageUrl = FrameworkInformation.ResourcePath + "nui_component_default_progress_indeterminate.png",
+                IndeterminateImageUrl = FrameworkInformation.ResourcePath + "IoT_progress_indeterminate.png",
             });
 
             // RadioButton base style
@@ -265,7 +266,7 @@ namespace Tizen.NUI.Components
             // Loading base style
             theme.AddStyleWithoutClone("Tizen.NUI.Components.Loading", new LoadingStyle()
             {
-                LoadingSize = new Size(100, 100),
+                LoadingSize = new Size(200, 200),
             });
 
             // Pagination base style
old mode 100755 (executable)
new mode 100644 (file)
index f5a6ff0..9d12f5c
Binary files a/src/Tizen.NUI.Components/res/IoT_progress_indeterminate.png and b/src/Tizen.NUI.Components/res/IoT_progress_indeterminate.png differ
index 6a4f9c7..f9cf32b 100644 (file)
@@ -62,12 +62,13 @@ namespace Tizen.NUI.StyleGuide
                 },
             };
 
-            // CheckBox examples.
+            // Progress examples.
             bufferingProgress = new Progress()
             {
                 MinValue = 0,
                 MaxValue = 100,
                 BufferValue = 10,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
                 ProgressState = Progress.ProgressStatusType.Buffering,
             };
             rootContent.Add(bufferingProgress);
@@ -77,6 +78,7 @@ namespace Tizen.NUI.StyleGuide
                 MinValue = 0,
                 MaxValue = 100,
                 CurrentValue = 80,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
                 ProgressState = Progress.ProgressStatusType.Determinate,
             };
             rootContent.Add(determinatedProgress);
@@ -85,6 +87,7 @@ namespace Tizen.NUI.StyleGuide
             {
                 MinValue = 0,
                 MaxValue = 100,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
                 ProgressState = Progress.ProgressStatusType.Indeterminate,
             };
             rootContent.Add(indeterminatedProgress);
@@ -95,7 +98,8 @@ namespace Tizen.NUI.StyleGuide
                 MinValue = 0,
                 MaxValue = 100,
                 IsEnabled = false,
-                ProgressState = Progress.ProgressStatusType.Indeterminate,
+                WidthSpecification = LayoutParamPolicies.MatchParent,
+                ProgressState = Progress.ProgressStatusType.Determinate,
             };
             rootContent.Add(disabledProgress);
             Content = rootContent;
diff --git a/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_1.png b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_1.png
new file mode 100644 (file)
index 0000000..99a46ce
Binary files /dev/null and b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_1.png differ
diff --git a/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_2.png b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_2.png
new file mode 100644 (file)
index 0000000..7d88032
Binary files /dev/null and b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_2.png differ
diff --git a/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_3.png b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_3.png
new file mode 100644 (file)
index 0000000..eb91c32
Binary files /dev/null and b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_3.png differ
diff --git a/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_4.png b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_4.png
new file mode 100644 (file)
index 0000000..87eb621
Binary files /dev/null and b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_4.png differ
diff --git a/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_5.png b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_5.png
new file mode 100644 (file)
index 0000000..99a46ce
Binary files /dev/null and b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_5.png differ
diff --git a/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_6.png b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_6.png
new file mode 100644 (file)
index 0000000..99a46ce
Binary files /dev/null and b/test/Tizen.NUI.StyleGuide/res/loading/Iot_Loading_6.png differ