[NUI] Apply AlertDialog UX - Sizes and Colors

The latest AlertDialog UX have been applied.
Sizes and Colors have been changed.

To align action items at the center with space between them,
LinearLayout and FlexLayout are used.
i.e.
- LinearLayout is used for 1 action item.
- FlexLayout is used for action items more than 1.

diff --git a/src/Tizen.NUI.Components/Controls/AlertDialog.cs b/src/Tizen.NUI.Components/Controls/AlertDialog.cs
index c37f63b..754c88a 100755 (executable)
--- a/src/Tizen.NUI.Components/Controls/AlertDialog.cs
+++ b/src/Tizen.NUI.Components/Controls/AlertDialog.cs
@@ -39,10 +39,6 @@ namespace Tizen.NUI.Components
         private View defaultTitleContent = null;
         private View defaultContent = null;
         private View defaultActionContent = null;
-        // FIXME: Now AlertDialog.Padding Top and Bottom increases AlertDialog size incorrectly.
-        //        Until the bug is fixed, padding view is added after action content.
-        private View defaultActionContentPadding = null;
-
         private bool styleApplied = false;
 
         /// <summary>
@@ -99,13 +95,6 @@ namespace Tizen.NUI.Components
                 {
                     Utility.Dispose(actionContent);
                 }
-
-                // FIXME: Now AlertDialog.Padding Top and Bottom increases AlertDialog size incorrectly.
-                //        Until the bug is fixed, padding view is added after action content.
-                if (defaultActionContentPadding != null)
-                {
-                    Utility.Dispose(defaultActionContentPadding);
-                }
             }
 
             base.Dispose(type);
@@ -129,6 +118,12 @@ namespace Tizen.NUI.Components
                 return;
             }
 
+            // Apply ItemSpacing.
+            if ((alertDialogStyle.ItemSpacing != null) && Layout is LinearLayout)
+            {
+                (Layout as LinearLayout).CellPadding = new Size2D(alertDialogStyle.ItemSpacing.Width, alertDialogStyle.ItemSpacing.Height);
+            }
+
             // Apply Title style.
             if ((alertDialogStyle.TitleTextLabel != null) && (DefaultTitleContent is TextLabel))
             {
@@ -189,6 +184,8 @@ namespace Tizen.NUI.Components
                 if (TitleContent is TextLabel textLabel)
                 {
                     textLabel.Text = title;
+
+                    ResetContent();
                 }
             }
         }
@@ -239,9 +236,9 @@ namespace Tizen.NUI.Components
                 if (titleContent is TextLabel textLabel)
                 {
                     textLabel.Text = Title;
-                }
 
-                ResetContent();
+                    ResetContent();
+                }
             }
         }
 
@@ -282,6 +279,8 @@ namespace Tizen.NUI.Components
                 {
                     textLabel.Text = message;
                 }
+
+                ResetContent();
             }
         }
 
@@ -540,25 +539,26 @@ namespace Tizen.NUI.Components
                     defaultActionContent = CreateDefaultActionContent();
                 }
 
-                // FIXME: Now AlertDialog.Padding Top and Bottom increases AlertDialog size incorrectly.
-                //        Until the bug is fixed, padding view is added after action content.
-                if (defaultActionContentPadding == null)
-                {
-                    defaultActionContentPadding = CreateDefaultActionContentPadding();
-                }
-
                 return defaultActionContent;
             }
         }
 
         private void Initialize()
         {
+            var alertDialogStyle = ViewStyle as AlertDialogStyle;
+
             Layout = new LinearLayout()
             {
                 LinearOrientation = LinearLayout.Orientation.Vertical,
-                LinearAlignment = LinearLayout.Alignment.CenterHorizontal,
+                HorizontalAlignment = HorizontalAlignment.Center,
+                VerticalAlignment = VerticalAlignment.Center,
             };
 
+            if (styleApplied && (alertDialogStyle != null) && (alertDialogStyle.ItemSpacing != null) && (Layout is LinearLayout))
+            {
+                (Layout as LinearLayout).CellPadding = new Size2D(alertDialogStyle.ItemSpacing.Width, alertDialogStyle.ItemSpacing.Height);
+            }
+
             this.Relayout += OnRelayout;
 
             TitleContent = DefaultTitleContent;
@@ -589,27 +589,33 @@ namespace Tizen.NUI.Components
 
             if (titleContent != null)
             {
-                Add(titleContent);
+                var textLabel = titleContent as TextLabel;
+                if (textLabel == null)
+                {
+                    Add(titleContent);
+                }
+                else if (!String.IsNullOrEmpty(textLabel.Text))
+                {
+                    Add(titleContent);
+                }
             }
 
             if (content != null)
             {
-                Add(content);
+                var textLabel = content as TextLabel;
+                if (textLabel == null)
+                {
+                    Add(content);
+                }
+                else if (!String.IsNullOrEmpty(textLabel.Text))
+                {
+                    Add(content);
+                }
             }
 
             if (actionContent != null)
             {
                 Add(actionContent);
-
-                // FIXME: Now AlertDialog.Padding Top and Bottom increases AlertDialog size incorrectly.
-                //        Until the bug is fixed, padding view is added after action content.
-                if (actionContent == defaultActionContent)
-                {
-                    if (defaultActionContentPadding != null)
-                    {
-                        Add(defaultActionContentPadding);
-                    }
-                }
             }
         }
 
@@ -625,50 +631,47 @@ namespace Tizen.NUI.Components
 
         private View CreateDefaultActionContent()
         {
-            return new View()
+            var view = new View()
             {
-                Layout = new LinearLayout()
+                Layout = new FlexLayout()
                 {
-                    LinearOrientation = LinearLayout.Orientation.Horizontal,
-                    LinearAlignment = LinearLayout.Alignment.Center,
-                    // FIXME: This CellPadding value should be written in AlertDialogStyle.
-                    //        However, if this is called in other place, then flicking issue happens.
-                    CellPadding = new Size2D(80, 0),
+                    Direction = FlexLayout.FlexDirection.Row,
+                    WrapType = FlexLayout.FlexWrapType.NoWrap,
+                    Justification = FlexLayout.FlexJustification.SpaceBetween,
                 },
             };
-        }
-
-        // FIXME: Now AlertDialog.Padding Top and Bottom increases AlertDialog size incorrectly.
-        //        Until the bug is fixed, padding view is added after action content.
-        private View CreateDefaultActionContentPadding()
-        {
-            var layout = Layout as LinearLayout;
 
-            if ((layout == null) || (defaultActionContent == null))
+            view.ChildAdded += (object sender, ChildAddedEventArgs args) =>
             {
-                return null;
-            }
-
-            View paddingView = null;
-
-            using (Size2D size = new Size2D(defaultActionContent.Size2D.Width, defaultActionContent.Size2D.Height))
-            {
-                if (layout.LinearOrientation == LinearLayout.Orientation.Horizontal)
+                // To align action items with space between them, FlexLayout is used.
+                if (view.Layout is FlexLayout)
                 {
-                    size.Width = 40;
+                    if (view.ChildCount == 1)
+                    {
+                        view.Layout = new LinearLayout()
+                        {
+                            LinearOrientation = LinearLayout.Orientation.Horizontal,
+                            HorizontalAlignment = HorizontalAlignment.Center,
+                            VerticalAlignment = VerticalAlignment.Center,
+                        };
+                    }
                 }
+                // To allign 1 action item at the center, LinearLayout is used.
                 else
                 {
-                    size.Height = 40;
+                    if (view.ChildCount > 1)
+                    {
+                        view.Layout = new FlexLayout()
+                        {
+                            Direction = FlexLayout.FlexDirection.Row,
+                            WrapType = FlexLayout.FlexWrapType.NoWrap,
+                            Justification = FlexLayout.FlexJustification.SpaceBetween,
+                        };
+                    }
                 }
+            };
 
-                paddingView = new View()
-                {
-                    Size2D = new Size2D(size.Width, size.Height),
-                };
-            }
-
-            return paddingView;
+            return view;
         }
 
         private void OnRelayout(object sender, EventArgs e)

diff --git a/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs b/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
index 66207cf..a16f417 100755 (executable)
--- a/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
+++ b/src/Tizen.NUI.Components/Theme/DefaultThemeCommon.cs
@@ -601,34 +601,33 @@ namespace Tizen.NUI.Components
             theme.AddStyleWithoutClone("Tizen.NUI.Components.AlertDialog", new AlertDialogStyle()
             {
                 Size = new Size(-2, -2),
-                Padding = new Extents(80, 80, 0, 0),
-                BackgroundColor = Color.White,
-                CornerRadius = 28.0f,
-                BoxShadow = new Shadow(2.0f, new Color("#00000029"), new Vector2(2.0f, 2.0f)),
+                Padding = new Extents(32, 32, 32, 32),
+                ItemSpacing = new Size2D(0, 32),
+                BackgroundColor = new Color("#FAFAFA"),
+                CornerRadius = 12.0f,
+                BoxShadow = new Shadow(8.0f, new Color(0.0f, 0.0f, 0.0f, 0.16f), new Vector2(0.0f, 2.0f)),
                 TitleTextLabel = new TextLabelStyle()
                 {
-                    Size = new Size(720, -2),
-                    Margin = new Extents(0, 0, 40, 40),
-                    PixelSize = 40,
+                    Size = new Size(626, -2),
+                    PixelSize = 24,
                     HorizontalAlignment = HorizontalAlignment.Center,
                     VerticalAlignment = VerticalAlignment.Center,
-                    TextColor = new Color("#000C2B"),
+                    TextColor = new Color("#090E21"),
                     ThemeChangeSensitive = false,
                 },
                 MessageTextLabel = new TextLabelStyle()
                 {
-                    Size = new Size(720, -2),
-                    Margin = new Extents(0, 0, 0, 64),
-                    PixelSize = 32,
+                    Size = new Size(626, -2),
+                    PixelSize = 24,
                     MultiLine = true,
                     HorizontalAlignment = HorizontalAlignment.Center,
                     VerticalAlignment = VerticalAlignment.Center,
-                    TextColor = new Color("#000C2B"),
+                    TextColor = new Color("#090E21"),
                     ThemeChangeSensitive = false,
                 },
                 ActionContent = new ViewStyle()
                 {
-                    Size = new Size(720, -2),
+                    Size = new Size(626, -2),
                 },
             });