[mac] Update arrange mode to tabs

1 files changed, 72 insertions, 60 deletions

diff --git a/Xamarin.PropertyEditing.Mac/PropertyEditorPanel.cs b/Xamarin.PropertyEditing.Mac/PropertyEditorPanel.cs
index 5f7d0d2..f56c497 100644
--- a/Xamarin.PropertyEditing.Mac/PropertyEditorPanel.cs
+++ b/Xamarin.PropertyEditing.Mac/PropertyEditorPanel.cs
@@ -1,4 +1,5 @@
 using System;
+using System.Linq;
 using System.Collections.Generic;
 using System.ComponentModel;
 
@@ -43,13 +44,6 @@ namespace Xamarin.PropertyEditing.Mac
 					return;
 
 				this.isArrangeEnabled = value;
-				if (value) {
-					AddSubview (this.propertyArrangeMode);
-					AddSubview (this.propertyArrangeModeLabel);
-				} else {
-					this.propertyArrangeMode.RemoveFromSuperview ();
-					this.propertyArrangeModeLabel.RemoveFromSuperview ();
-				}
 			}
 		}
 
@@ -77,6 +71,11 @@ namespace Xamarin.PropertyEditing.Mac
 				if (this.viewModel != null) {
 					this.viewModel.ArrangedPropertiesChanged -= OnPropertiesChanged;
 					this.viewModel.PropertyChanged -= OnVmPropertyChanged;
+
+					var views = this.tabStack.Views;
+					for (int i = 0; i < views.Length; i++) {
+						((TabButton)views[i]).Clicked -= OnArrangeModeChanged;
+					}
 				}
 
 				this.targetPlatform = value;
@@ -90,12 +89,18 @@ namespace Xamarin.PropertyEditing.Mac
 					this.viewModel.ArrangedPropertiesChanged += OnPropertiesChanged;
 					this.viewModel.PropertyChanged += OnVmPropertyChanged;
 
-					this.propertyArrangeMode.RemoveAll ();
-					foreach (ArrangeModeViewModel item in this.viewModel.ArrangeModes) {
-						var itemAsString = new NSString (item.ArrangeMode.ToString ());
-						this.propertyArrangeMode.Add (itemAsString);
-						if (item.IsChecked)
-							this.propertyArrangeMode.Select (itemAsString);
+					for (int i = 0; i < this.viewModel.ArrangeModes.Count; i++) {
+						var item = this.viewModel.ArrangeModes[i];
+						string imageName = GetIconName (item.ArrangeMode);
+						TabButton arrangeMode = new TabButton (this.hostResources, imageName) {
+							Bounds = new CGRect (0, 0, 32, 30),
+							Tag = i,
+							Selected = item.IsChecked
+						};
+
+						arrangeMode.Clicked += OnArrangeModeChanged;
+
+						this.tabStack.AddView (arrangeMode, NSStackViewGravity.Top);
 					}
 				}
 			}
@@ -113,12 +118,9 @@ namespace Xamarin.PropertyEditing.Mac
 
 		public override void ViewDidChangeEffectiveAppearance ()
 		{
-			if (this.propertyArrangeMode == null)
+			if (this.propertyTable == null)
 				return;
 
-			this.propertyArrangeMode.Font = HostResourceProvider.GetNamedFont (PropertyEditorControl.DefaultFontName, PropertyEditorControl.DefaultFontSize);
-			this.propertyFilter.Font = HostResourceProvider.GetNamedFont (PropertyEditorControl.DefaultFontName, PropertyEditorControl.DefaultFontSize);
-
 			this.propertyTable.BackgroundColor = this.hostResources.GetNamedColor (NamedResources.PadBackgroundColor);
 		}
 
@@ -130,8 +132,7 @@ namespace Xamarin.PropertyEditing.Mac
 		private PanelViewModel viewModel;
 
 		private NSSearchField propertyFilter;
-		private NSComboBox propertyArrangeMode;
-		private NSTextField propertyArrangeModeLabel;
+		private NSStackView tabStack;
 
 		// Shared initialization code
 		private void Initialize ()
@@ -140,79 +141,73 @@ namespace Xamarin.PropertyEditing.Mac
 
 			NSControlSize controlSize = NSControlSize.Small;
 
-			this.propertyArrangeModeLabel = new NSTextField {
-				ControlSize = controlSize,
-				BackgroundColor = NSColor.Clear,
-				Bezeled = false,
-				Editable = false,
-				StringValue = LocalizationResources.ArrangeByLabel,
-				TranslatesAutoresizingMaskIntoConstraints = false,
+			var header = new DynamicFillBox (HostResourceProvider, NamedResources.PanelTabBackground) {
+				ContentViewMargins = new CGSize (0, 0),
+				ContentView = new NSView ()
 			};
+			AddSubview (header);
 
-			this.propertyArrangeMode = new NSComboBox {
-				ControlSize = controlSize,
-				Editable = false,
-				TranslatesAutoresizingMaskIntoConstraints = false,
+			var border = new DynamicFillBox (HostResourceProvider, NamedResources.TabBorderColor) {
+				Frame = new CGRect (0, 0, 1, 1)
 			};
-
-			if (IsArrangeEnabled) {
-				AddSubview (this.propertyArrangeMode);
-				AddSubview (this.propertyArrangeModeLabel);
-			}
+			header.AddSubview (border);
 
 			this.propertyFilter = new NSSearchField {
 				ControlSize = controlSize,
 				PlaceholderString = LocalizationResources.PropertyFilterLabel,
 				TranslatesAutoresizingMaskIntoConstraints = false,
 			};
-			AddSubview (this.propertyFilter);
+			((NSView)header.ContentView).AddSubview (this.propertyFilter);
 
-			// If either the Filter Mode or PropertySearchFilter Change Filter the Data
-			this.propertyArrangeMode.SelectionChanged += OnArrangeModeChanged;
 			this.propertyFilter.Changed += OnPropertyFilterChanged;
 
+			this.tabStack = new NSStackView {
+				Orientation = NSUserInterfaceLayoutOrientation.Horizontal,
+				TranslatesAutoresizingMaskIntoConstraints = false,
+				EdgeInsets = new NSEdgeInsets (0, 0, 0, 0)
+			};
+
+			((NSView)header.ContentView).AddSubview (this.tabStack);
+
 			this.propertyTable = new FirstResponderOutlineView {
 				RefusesFirstResponder = true,
-				AutoresizingMask = NSViewResizingMask.WidthSizable,
 				SelectionHighlightStyle = NSTableViewSelectionHighlightStyle.None,
 				HeaderView = null,
 			};
 
-#if DESIGNER_DEBUG
-			propertyTable.GridStyleMask = NSTableViewGridStyle.SolidHorizontalLine | NSTableViewGridStyle.SolidVerticalLine;
-#endif
-
 			var propertyEditors = new NSTableColumn (PropertyEditorColId);
 			this.propertyTable.AddColumn (propertyEditors);
 
 			// Set OutlineTableColumn or the arrows showing children/expansion will not be drawn
 			this.propertyTable.OutlineTableColumn = propertyEditors;
 
-			// create a table view and a scroll view
 			var tableContainer = new NSScrollView {
 				TranslatesAutoresizingMaskIntoConstraints = false,
 			};
 
-			// add the panel to the window
 			tableContainer.DocumentView = this.propertyTable;
 			AddSubview (tableContainer);
 
 			this.AddConstraints (new[] {
-				NSLayoutConstraint.Create (this.propertyArrangeModeLabel, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this, NSLayoutAttribute.Top, 1f, 5f),
-				NSLayoutConstraint.Create (this.propertyArrangeModeLabel, NSLayoutAttribute.Left, NSLayoutRelation.Equal, this, NSLayoutAttribute.Left, 1f, 10f),
+				NSLayoutConstraint.Create (header, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this, NSLayoutAttribute.Top, 1, 0),
+				NSLayoutConstraint.Create (header, NSLayoutAttribute.Width, NSLayoutRelation.Equal, this, NSLayoutAttribute.Width, 1, 0),
+				NSLayoutConstraint.Create (header, NSLayoutAttribute.Height, NSLayoutRelation.Equal, 1, 30),
+
+				NSLayoutConstraint.Create (this.tabStack, NSLayoutAttribute.Left, NSLayoutRelation.Equal, header,  NSLayoutAttribute.Left, 1, 0),
+				NSLayoutConstraint.Create (this.tabStack, NSLayoutAttribute.Top, NSLayoutRelation.Equal, header, NSLayoutAttribute.Top, 1, 0),
+				NSLayoutConstraint.Create (this.tabStack, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, header, NSLayoutAttribute.Bottom, 1, 0),
+				NSLayoutConstraint.Create (this.tabStack, NSLayoutAttribute.Right, NSLayoutRelation.LessThanOrEqual, this.propertyFilter, NSLayoutAttribute.Left, 1, 0),
 
-				NSLayoutConstraint.Create (this.propertyArrangeMode, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this, NSLayoutAttribute.Top, 1f, 4f),
-				NSLayoutConstraint.Create (this.propertyArrangeMode, NSLayoutAttribute.Left, NSLayoutRelation.Equal, this, NSLayoutAttribute.Left, 1f, 90f),
-				NSLayoutConstraint.Create (this.propertyArrangeMode, NSLayoutAttribute.Width, NSLayoutRelation.Equal, 1f, 130f),
+				NSLayoutConstraint.Create (this.propertyFilter, NSLayoutAttribute.Right, NSLayoutRelation.Equal, header, NSLayoutAttribute.Right, 1, -15),
+				NSLayoutConstraint.Create (this.propertyFilter, NSLayoutAttribute.Width, NSLayoutRelation.Equal, 1, 150),
+				NSLayoutConstraint.Create (this.propertyFilter, NSLayoutAttribute.CenterY, NSLayoutRelation.Equal, header, NSLayoutAttribute.CenterY, 1, 0),
 
-				NSLayoutConstraint.Create (this.propertyFilter, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this, NSLayoutAttribute.Top, 1f, 3f),
-				NSLayoutConstraint.Create (this.propertyFilter, NSLayoutAttribute.Left, NSLayoutRelation.Equal, this, NSLayoutAttribute.Left, 1f, 255f),
-				NSLayoutConstraint.Create (this.propertyFilter, NSLayoutAttribute.Width, NSLayoutRelation.Equal, this, NSLayoutAttribute.Width, 1f, -265f),
+				NSLayoutConstraint.Create (border, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, header, NSLayoutAttribute.Bottom, 1, 0),
+				NSLayoutConstraint.Create (border, NSLayoutAttribute.Width, NSLayoutRelation.Equal, header, NSLayoutAttribute.Width, 1, 0),
 
-				NSLayoutConstraint.Create (tableContainer, NSLayoutAttribute.Top, NSLayoutRelation.Equal, this, NSLayoutAttribute.Top, 1f, 30f),
-				NSLayoutConstraint.Create (tableContainer, NSLayoutAttribute.Left, NSLayoutRelation.Equal, this, NSLayoutAttribute.Left, 1f, 10f),
-				NSLayoutConstraint.Create (tableContainer, NSLayoutAttribute.Width, NSLayoutRelation.Equal, this, NSLayoutAttribute.Width, 1f, -20f),
-				NSLayoutConstraint.Create (tableContainer, NSLayoutAttribute.Height, NSLayoutRelation.Equal, this, NSLayoutAttribute.Height, 1f, -37f),
+				NSLayoutConstraint.Create (tableContainer, NSLayoutAttribute.Top, NSLayoutRelation.Equal, border, NSLayoutAttribute.Bottom, 1, 0),
+				NSLayoutConstraint.Create (tableContainer, NSLayoutAttribute.Bottom, NSLayoutRelation.Equal, this, NSLayoutAttribute.Bottom, 1, 0),
+				NSLayoutConstraint.Create (tableContainer, NSLayoutAttribute.Width, NSLayoutRelation.Equal, this, NSLayoutAttribute.Width, 1, 0),
 			});
 
 			ViewDidChangeEffectiveAppearance ();
@@ -227,7 +222,7 @@ namespace Xamarin.PropertyEditing.Mac
 
 		private void OnArrangeModeChanged (object sender, EventArgs e)
 		{
-			this.viewModel.ArrangeMode = this.viewModel.ArrangeModes[(int)this.propertyArrangeMode.SelectedIndex].ArrangeMode;
+			this.viewModel.ArrangeMode = this.viewModel.ArrangeModes[(int)((NSView)sender).Tag].ArrangeMode;
 		}
 
 		private void OnPropertyFilterChanged (object sender, EventArgs e)
@@ -239,8 +234,25 @@ namespace Xamarin.PropertyEditing.Mac
 
 		private void OnVmPropertyChanged (object sender, PropertyChangedEventArgs e)
 		{
-			if (e.PropertyName == nameof (PanelViewModel.ArrangeMode) || String.IsNullOrEmpty (e.PropertyName))
-				this.propertyArrangeMode.Select (new NSString (this.viewModel.ArrangeMode.ToString ()));
+			if (e.PropertyName == nameof (PanelViewModel.ArrangeMode) || String.IsNullOrEmpty (e.PropertyName)) {
+				int selected = this.viewModel.ArrangeModes.Select (vm => vm.ArrangeMode).IndexOf (this.viewModel.ArrangeMode);
+				var views = this.tabStack.Views;
+				for (int i = 0; i < views.Length; i++) {
+					((TabButton)views[i]).Selected = (i == selected);
+				}
+			}
+		}
+
+		private string GetIconName (PropertyArrangeMode mode)
+		{
+			switch (mode) {
+			case PropertyArrangeMode.Name:
+				return "sort-alphabetically-16";
+			case PropertyArrangeMode.Category:
+				return "group-by-category-16";
+			default:
+				throw new ArgumentException();
+			}
 		}
 
 		private class FirstResponderOutlineView : NSOutlineView