[mac] Update arrange mode to tabs

Author: Eric Maupin

Xamarin.PropertyEditing.Mac.Standalone/Assets.xcassets/PanelTabBackground.colorset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  },
+  "colors" : [
+    {
+      "idiom" : "universal",
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0xF8",
+          "alpha" : "1.000",
+          "blue" : "0xF7",
+          "green" : "0xF8"
+        }
+      }
+    },
+    {
+      "idiom" : "universal",
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "red" : "0x55",
+          "alpha" : "1.000",
+          "blue" : "0x55",
+          "green" : "0x55"
+        }
+      }
+    }
+  ]
+}

Xamarin.PropertyEditing.Mac.Standalone/Xamarin.PropertyEditing.Mac.Standalone.csproj

@@ -75,6 +75,7 @@
     <ImageAsset Include="Assets.xcassets\ValueBlockBackgroundColor.colorset\Contents.json" />
     <ImageAsset Include="Assets.xcassets\DescriptionLabelColor.colorset\Contents.json" />
     <ImageAsset Include="Assets.xcassets\TabBorderColor.colorset\Contents.json" />
+    <ImageAsset Include="Assets.xcassets\PanelTabBackground.colorset\Contents.json" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="Resources\" />

Xamarin.PropertyEditing.Mac/Controls/Custom/TabButton.cs

@@ -0,0 +1,82 @@
+using System;
+using AppKit;
+using CoreGraphics;
+using Foundation;
+
+namespace Xamarin.PropertyEditing.Mac
+{
+	internal class TabButton
+		: NSButton
+	{
+		public TabButton (IHostResourceProvider hostResource, string imageName)
+		{
+			if (hostResource == null)
+				throw new ArgumentNullException (nameof (hostResource));
+			if (imageName == null)
+				throw new ArgumentNullException (nameof (imageName));
+
+			Bordered = false;
+			Action = new ObjCRuntime.Selector (ClickedName);
+
+			var clicked = new NSClickGestureRecognizer (OnClicked);
+			AddGestureRecognizer (clicked);
+
+			this.hostResource = hostResource;
+			this.imageName = imageName;
+
+			ViewDidChangeEffectiveAppearance ();
+		}
+
+		public event EventHandler Clicked;
+
+		public bool Selected
+		{
+			get { return this.selected; }
+			set
+			{
+				Enabled = value;
+				this.selected = value;
+				NeedsDisplay = true;
+			}
+		}
+
+		public override CGSize IntrinsicContentSize
+		{
+			get
+			{
+				var size = base.IntrinsicContentSize;
+				return new CGSize (size.Width + 2 + 10, size.Height + 2 + 10);
+			}
+		}
+
+		public override void ViewDidChangeEffectiveAppearance ()
+		{
+			base.ViewDidChangeEffectiveAppearance ();
+			Image = this.hostResource.GetNamedImage (this.imageName);
+		}
+
+		public override void DrawRect (CGRect dirtyRect)
+		{
+			base.DrawRect (dirtyRect);
+			if (!Selected)
+				return;
+
+			NSBezierPath path = new NSBezierPath ();
+			path.AppendPathWithRect (new CGRect (Bounds.X, Bounds.Height - 2, Bounds.Width, 2));
+			(Selected ? NSColor.Text : NSColor.DisabledControlText).Set ();
+			path.Fill ();
+		}
+
+		private readonly string imageName;
+		private readonly IHostResourceProvider hostResource;
+		private bool selected;
+
+		private const string ClickedName = "OnClicked";
+
+		[Export (ClickedName)]
+		private void OnClicked()
+		{
+			Clicked?.Invoke (this, EventArgs.Empty);
+		}
+	}
+}

Xamarin.PropertyEditing.Mac/HostResourceProvider.cs

@@ -52,5 +52,6 @@ public static class NamedResources
 		public const string DescriptionLabelColor = "DescriptionLabelColor";
 		public const string ValueBlockBackgroundColor = "ValueBlockBackgroundColor";
 		public const string TabBorderColor = "TabBorderColor";
+		public const string PanelTabBackground = "PanelTabBackground";
 	}
 }

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 @@ public bool IsArrangeEnabled
 					return;
 
 				this.isArrangeEnabled = value;
-				if (value) {
-					AddSubview (this.propertyArrangeMode);
-					AddSubview (this.propertyArrangeModeLabel);
-				} else {
-					this.propertyArrangeMode.RemoveFromSuperview ();
-					this.propertyArrangeModeLabel.RemoveFromSuperview ();
-				}
 			}
 		}
 
@@ -77,6 +71,11 @@ public TargetPlatform TargetPlatform
 				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 @@ public TargetPlatform TargetPlatform
 					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 @@ public void Select (IEnumerable<object> selectedItems)
 
 		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 @@ public override void ViewDidChangeEffectiveAppearance ()
 		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 @@ private void Initialize ()
 
 			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 @@ private void OnPropertiesChanged (object sender, EventArgs e)
 
 		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 @@ private void OnPropertyFilterChanged (object sender, EventArgs e)
 
 		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