[Tizen] Update bottom tabs of Shell (dotnet#552)

* [Tizen] Update bottom tabs of Shell * Apply review feedback * Update ShellSectionItemView based on PR feedback
shyunMin · Nov 24, 2022 · 746aca0 · 746aca0
1 parent 2921206
commit 746aca0
Show file tree

Hide file tree

Showing 12 changed files with 269 additions and 124 deletions.
diff --git a/src/Controls/src/Core/Handlers/Shell/Tizen/ShellContentItemAdaptor.cs b/src/Controls/src/Core/Handlers/Shell/Tizen/ShellContentItemAdaptor.cs
@@ -0,0 +1,22 @@
+#nullable enable
+
+using System.Collections;
+using Microsoft.Maui.Controls.Handlers.Items;
+
+namespace Microsoft.Maui.Controls.Platform
+{
+	class ShellContentItemAdaptor : ItemTemplateAdaptor
+	{
+		public ShellContentItemAdaptor(Element element, IEnumerable items) : base(element, items, GetTemplate()) { }
+
+		protected override bool IsSelectable => true;
+
+		static DataTemplate GetTemplate()
+		{
+			return new DataTemplate(() =>
+			{
+				return new ShellContentItemView();
+			});
+		}
+	}
+}
diff --git a/...ll/Tizen/ShellContentItemTemplatedView.cs → ...dlers/Shell/Tizen/ShellContentItemView.cs b/...ll/Tizen/ShellContentItemTemplatedView.cs → ...dlers/Shell/Tizen/ShellContentItemView.cs
@@ -4,9 +4,9 @@
 
 namespace Microsoft.Maui.Controls.Platform
 {
-	class ShellContentItemTemplatedView : Frame
+	class ShellContentItemView : Frame
 	{
-		static readonly BindableProperty SelectedStateProperty = BindableProperty.Create(nameof(IsSelected), typeof(bool), typeof(ShellContentItemTemplatedView), false, propertyChanged: (b, o, n) => ((ShellContentItemTemplatedView)b).UpdateSelectedState());
+		static readonly BindableProperty SelectedStateProperty = BindableProperty.Create(nameof(IsSelected), typeof(bool), typeof(ShellContentItemView), false, propertyChanged: (b, o, n) => ((ShellContentItemView)b).UpdateSelectedState());
 
 		BoxView _bar;
 
@@ -17,7 +17,7 @@ public bool IsSelected
 		}
 
 #pragma warning disable CS8618
-		public ShellContentItemTemplatedView()
+		public ShellContentItemView()
 #pragma warning restore CS8618
 		{
 			InitializeComponent();
@@ -72,7 +72,7 @@ void InitializeComponent()
 			VisualState selected = new VisualState()
 			{
 				Name = VisualStateManager.CommonStates.Selected,
-				TargetType = typeof(ShellContentItemTemplatedView),
+				TargetType = typeof(ShellContentItemView),
 				Setters =
 				{
 					new Setter
@@ -86,7 +86,7 @@ void InitializeComponent()
 			VisualState normal = new VisualState()
 			{
 				Name = VisualStateManager.CommonStates.Normal,
-				TargetType = typeof(ShellContentItemTemplatedView),
+				TargetType = typeof(ShellContentItemView),
 				Setters =
 				{
 					new Setter

diff --git a/...l/Tizen/ShellFlyoutItemTemplateAdaptor.cs → ...ers/Shell/Tizen/ShellFlyoutItemAdaptor.cs b/...l/Tizen/ShellFlyoutItemTemplateAdaptor.cs → ...ers/Shell/Tizen/ShellFlyoutItemAdaptor.cs
@@ -5,12 +5,12 @@
 
 namespace Microsoft.Maui.Controls.Platform
 {
-	class ShellFlyoutItemTemplateAdaptor : ItemTemplateAdaptor
+	class ShellFlyoutItemAdaptor : ItemTemplateAdaptor
 	{
 		Shell _shell;
 		bool _hasHeader;
 
-		public ShellFlyoutItemTemplateAdaptor(Shell shell, IEnumerable items, bool hasHeader) : base(shell, items, GetTemplate())
+		public ShellFlyoutItemAdaptor(Shell shell, IEnumerable items, bool hasHeader) : base(shell, items, GetTemplate())
 		{
 			_shell = shell;
 			_hasHeader = hasHeader;
@@ -34,7 +34,7 @@ static DataTemplate GetTemplate()
 		{
 			return new DataTemplate(() =>
 			{
-				return new ShellItemTemplatedView();
+				return new ShellFlyoutItemView();
 			});
 		}
 	}

diff --git a/...ell/Tizen/ShellFlyoutItemTemplatedView.cs → ...ndlers/Shell/Tizen/ShellFlyoutItemView.cs b/...ell/Tizen/ShellFlyoutItemTemplatedView.cs → ...ndlers/Shell/Tizen/ShellFlyoutItemView.cs
@@ -4,9 +4,9 @@
 
 namespace Microsoft.Maui.Controls.Platform
 {
-	class ShellItemTemplatedView : Frame
+	class ShellFlyoutItemView : Frame
 	{
-		static readonly BindableProperty SelectedStateProperty = BindableProperty.Create(nameof(IsSelected), typeof(bool), typeof(ShellItemTemplatedView), false, propertyChanged: (b, o, n) => ((ShellItemTemplatedView)b).UpdateSelectedState());
+		static readonly BindableProperty SelectedStateProperty = BindableProperty.Create(nameof(IsSelected), typeof(bool), typeof(ShellFlyoutItemView), false, propertyChanged: (b, o, n) => ((ShellFlyoutItemView)b).UpdateSelectedState());
 
 		Grid _grid;
 
@@ -17,7 +17,7 @@ public bool IsSelected
 		}
 
 #pragma warning disable CS8618
-		public ShellItemTemplatedView()
+		public ShellFlyoutItemView()
 #pragma warning restore CS8618
 		{
 			InitializeComponent();
@@ -27,7 +27,6 @@ void InitializeComponent()
 		{
 			Padding = new Thickness(0);
 			HasShadow = false;
-			BorderColor = GColors.DarkGray;
 			BackgroundColor = GColors.White;
 
 			var icon = new Image
@@ -40,28 +39,30 @@ void InitializeComponent()
 
 			var label = new Label
 			{
-				Margin = new Thickness(10, 10),
+				Margin = new Thickness(15, 15),
 				FontSize = 16,
 				VerticalTextAlignment = TextAlignment.Center,
 			};
 			label.SetBinding(Label.TextProperty, new Binding("Title"));
 
-			_grid = new Controls.Grid
+			_grid = new Grid
 			{
 				ColumnDefinitions =
 				{
 					new ColumnDefinition
 					{
-						Width = 40,
+						Width = 50,
 					},
 					new ColumnDefinition
 					{
 						Width = GridLength.Star,
 					},
-				}
+				},
+				HeightRequest = 50
 			};
 			_grid.Add(icon, 0, 0);
 			_grid.Add(label, 1, 0);
+
 			Content = _grid;
 
 			var groups = new VisualStateGroupList();
@@ -74,7 +75,7 @@ void InitializeComponent()
 			VisualState selected = new VisualState()
 			{
 				Name = VisualStateManager.CommonStates.Selected,
-				TargetType = typeof(ShellItemTemplatedView),
+				TargetType = typeof(ShellFlyoutItemView),
 				Setters =
 				{
 					new Setter
@@ -88,7 +89,7 @@ void InitializeComponent()
 			VisualState normal = new VisualState()
 			{
 				Name = VisualStateManager.CommonStates.Normal,
-				TargetType = typeof(ShellItemTemplatedView),
+				TargetType = typeof(ShellFlyoutItemView),
 				Setters =
 				{
 					new Setter

diff --git a/src/Controls/src/Core/Handlers/Shell/Tizen/ShellItemTemplateAdaptor.cs b/src/Controls/src/Core/Handlers/Shell/Tizen/ShellItemTemplateAdaptor.cs
diff --git a/src/Controls/src/Core/Handlers/Shell/Tizen/ShellItemView.cs b/src/Controls/src/Core/Handlers/Shell/Tizen/ShellItemView.cs
@@ -1,7 +1,9 @@
 #nullable enable
 
+using System.Collections;
 using System.Collections.Generic;
 using System.Collections.Specialized;
+using System.Linq;
 using Microsoft.Maui.Controls.Handlers.Items;
 using Tizen.NUI;
 using Tizen.NUI.BaseComponents;
@@ -10,6 +12,7 @@
 using NCollectionView = Tizen.UIExtensions.NUI.CollectionView;
 using NColor = Tizen.NUI.Color;
 using NLayoutGroup = Tizen.NUI.LayoutGroup;
+using NShadow = Tizen.NUI.Shadow;
 using NView = Tizen.NUI.BaseComponents.View;
 
 namespace Microsoft.Maui.Controls.Platform
@@ -32,6 +35,8 @@ public class ShellItemView : NView
 		protected IMauiContext MauiContext { get; private set; }
 
 		protected NColor DefaultBackgroundColor = NColor.White;
+		protected NColor DefaultBackdropColor = new NColor(0.2f, 0.2f, 0.2f, 0.2f);
+		protected int MaxBottomItems = 5;
 
 		public ShellItemView(ShellItem item, IMauiContext context) : base()
 		{
@@ -99,9 +104,9 @@ public void UpdateTabbarBackgroundColor(GColor? color)
 				_tabbedView.BackgroundColor = color?.ToNUIColor();
 		}
 
-		protected virtual ItemTemplateAdaptor CreateItemAdaptor()
+		protected virtual ItemTemplateAdaptor CreateItemAdaptor(IEnumerable items)
 		{
-			return new ShellItemTemplateAdaptor(ShellItem, ShellItem.Items);
+			return new ShellSectionItemAdaptor(ShellItem, items);
 		}
 
 		void OnTabItemSelected(object? sender, CollectionViewSelectionChangedEventArgs e)
@@ -119,8 +124,54 @@ void OnTabItemSelected(object? sender, CollectionViewSelectionChangedEventArgs e
 			{
 				Shell.CurrentItem = shellContent;
 			}
+			else
+			{
+				MakeSimplePopup()?.Open();
+			} 
+		}
+
+		Popup? MakeSimplePopup()
+		{
+			Popup popup = new Popup
+			{
+				Layout = new LinearLayout
+				{
+					VerticalAlignment = VerticalAlignment.Bottom
+				},
+				BackgroundColor = DefaultBackdropColor,
+			};
+
+			var items = ShellItem.Items.ToList().GetRange(MaxBottomItems - 1, ShellItem.Items.Count - MaxBottomItems + 1);
+			var itemsView = new NCollectionView
+			{
+				WidthSpecification = LayoutParamPolicies.MatchParent,
+				LayoutManager = new LinearLayoutManager(false),
+				SelectionMode = CollectionViewSelectionMode.SingleAlways,
+				SizeHeight = 50d.ToScaledPixel() * items.Count,
+			};
+
+			var adaptor = new ShellFlyoutItemAdaptor(Shell, items, false);
+			adaptor.SelectionChanged += (s, e) =>
+			{
+				popup.Close();
+				OnTabItemSelected(s, e);
+			};
+
+			itemsView.Adaptor = adaptor;
+			itemsView.ScrollView.HideScrollbar = true;
+			itemsView.BoxShadow = new NShadow(10d.ToPixel(), DefaultBackdropColor);
+
+			popup.OutsideClicked += (s, e) =>
+			{
+				popup.Close();
+			};
+
+			popup.Content = itemsView;
+
+			return popup;
 		}
 
+
 		void OnShellItemsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
 		{
 			UpdateTabBar(_isTabBarVisible);
@@ -159,26 +210,48 @@ void ShowTabBar()
 				{
 					SizeHeight = 80d.ToScaledPixel(),
 					WidthSpecification = LayoutParamPolicies.MatchParent,
-					LayoutManager = new LinearLayoutManager(true),
 					SelectionMode = CollectionViewSelectionMode.SingleAlways,
 					BackgroundColor = DefaultBackgroundColor
 				};
 				_tabbedView.ScrollView.HideScrollbar = true;
+				_tabbedView.ScrollView.ScrollEnabled = false;
 				Add(_tabbedView);
 			}
 
 			if (_adaptor != null)
 				_adaptor.SelectionChanged -= OnTabItemSelected;
 
-			_tabbedView.Adaptor = _adaptor = CreateItemAdaptor();
+			if (ShellItem.Items.Count <= MaxBottomItems)
+			{
+				_adaptor = CreateItemAdaptor(ShellItem.Items);
+			}
+			else
+			{
+				var items = ShellItem.Items.ToList<object>().GetRange(0, MaxBottomItems - 1);
+				items.Add(new MoreItem());
+				_adaptor = CreateItemAdaptor(items);
+			}
+
+			_tabbedView.LayoutManager = new GridLayoutManager(false, ShellItem.Items.Count > MaxBottomItems ? MaxBottomItems : ShellItem.Items.Count);
+			_tabbedView.Adaptor = _adaptor;
 			_adaptor.SelectionChanged += OnTabItemSelected;
-			_cachedGroups = ShellItem.Items;
+
+			_cachedGroups = ShellItem.Items.ToList();
 		}
 
 		void HideTabBar()
 		{
 			if (_tabbedView != null)
 				Remove(_tabbedView);
 		}
+
+		class MoreItem
+		{
+			const string PathMoreVert = "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z";
+
+			public string Title { get; set; } = "More";
+
+			public string? IconPath { get; set; } = PathMoreVert;
+		}
 	}
 }