[Mac] Make Material View Tabbable. (#705)

* [Mac] Make Material View Tabbable.

* [Mac] Call RecalculateKeyViewLoop in MaterialBrushEditorViewController.ViewDidLayout

The first time it is called in MaterialView.CreateColourPallette, Window is null,
so it had no effect.

Co-authored-by: Alex Corrado <alexander.corrado@gmail.com>

2 files changed, 106 insertions, 94 deletions

diff --git a/Xamarin.PropertyEditing.Mac/Controls/Custom/MaterialBrushEditorViewController.cs b/Xamarin.PropertyEditing.Mac/Controls/Custom/MaterialBrushEditorViewController.cs
index a9026f7..2d226b1 100644
--- a/Xamarin.PropertyEditing.Mac/Controls/Custom/MaterialBrushEditorViewController.cs
+++ b/Xamarin.PropertyEditing.Mac/Controls/Custom/MaterialBrushEditorViewController.cs
@@ -77,8 +77,13 @@ namespace Xamarin.PropertyEditing.Mac
 		{
 			base.ViewDidLayout ();
 
-			if (this.alphaSpinEditor.NumericEditor.CanBecomeKeyView) {
-				View.Window?.MakeFirstResponder (this.alphaSpinEditor.NumericEditor);
+			var window = View.Window;
+			window?.RecalculateKeyViewLoop ();
+
+			if (this.materialEditor.Subviews.Length > 0
+				&& this.materialEditor.Subviews[0] is FocusableButton fb
+				&& fb.CanBecomeKeyView) {
+				window?.MakeFirstResponder (fb);
 			}
 		}
 
diff --git a/Xamarin.PropertyEditing.Mac/Controls/Custom/MaterialView.cs b/Xamarin.PropertyEditing.Mac/Controls/Custom/MaterialView.cs
index 8d35754..e259878 100644
--- a/Xamarin.PropertyEditing.Mac/Controls/Custom/MaterialView.cs
+++ b/Xamarin.PropertyEditing.Mac/Controls/Custom/MaterialView.cs
@@ -18,40 +18,22 @@ namespace Xamarin.PropertyEditing.Mac
 			return false;
 		}
 
-		public override bool IsFlipped => true;
-
-		public MaterialView ()
-		{
-			Initialize ();
-		}
-
-		private void Initialize ()
-		{
-			WantsLayer = true;
-		}
-
 		public override void OnViewModelChanged (MaterialDesignColorViewModel oldModel)
 		{
-			NeedsLayout = true;
-		}
+			base.OnViewModelChanged (oldModel);
 
-		public override void OnPropertyChanged (object sender, PropertyChangedEventArgs e)
-		{
-			switch (e.PropertyName) {
-			case nameof (ViewModel.ColorName):
-			case nameof (ViewModel.AccentColor):
-			case nameof (ViewModel.NormalColor):
-				NeedsLayout = true;
-				break;
-			}
+			CreateColourPallette ();
 		}
 
-		public override void Layout ()
+		private void CreateColourPallette ()
 		{
-			if (Layer?.Sublayers != null) {
-				foreach (var l in Layer.Sublayers) {
-					l.RemoveFromSuperLayer ();
-					l.Dispose ();
+			var subViews = Subviews;
+			if (subViews.Length > 0) {
+				foreach (var sv in subViews) {
+					if (sv is FocusableButton fb)
+						fb.Activated -= MaterialColourButton_Activated;
+					sv.RemoveFromSuperview ();
+					sv.Dispose ();
 				}
 			}
 
@@ -62,8 +44,11 @@ namespace Xamarin.PropertyEditing.Mac
 			int col = 0;
 			nfloat x = 0;
 			nfloat y = 6;
-			var width = (Frame.Width - 54) / 10;
-			var height = (Frame.Height - 49) / 4;
+			const int FrameWidth = 430; // TODO Get proper Frame.Width, but hacking to get this working
+			const int FrameHeight = 202; // TODO Get proper Frame.Height, but hacking to get this working
+			var width = (FrameWidth - 54) / 10;
+			var height = (FrameHeight - 49) / 4;
+
 
 			MaterialColorLayer CreateLayer (CommonColor color)
 			{
@@ -82,7 +67,7 @@ namespace Xamarin.PropertyEditing.Mac
 				var frame = new CGRect (x, y, width, height);
 				var selectedColor = p.Color.Lightness > 0.58 ? NSColor.Black : NSColor.White;
 				var l = new MaterialColorLayer {
-					Frame = frame,
+					Frame = new CGRect (0, 0, width, height),
 					ForegroundColor = selectedColor.CGColor,
 					BackgroundColor = p.Color,
 					CornerRadius = 3,
@@ -91,10 +76,19 @@ namespace Xamarin.PropertyEditing.Mac
 					IsSelected = ViewModel.Color == p.Color || ViewModel.ColorName == p.Name
 				};
 
-				l.BorderColor = new CGColor (.5f, .5f, .5f, .5f);
-				l.Frame = new CGRect (x, y, width, height);
-				Layer.AddSublayer (l);
-				AddToolTip (new CGRect (x, y, width, height), new NSString(p.Name), IntPtr.Zero);
+				var materialColourButton = new FocusableButton {
+					Frame = frame,
+					WantsLayer = true,
+					Layer = l,
+					ToolTip = p.Name,
+					Transparent = false,
+					TranslatesAutoresizingMaskIntoConstraints = true,
+				};
+
+				materialColourButton.Activated += MaterialColourButton_Activated;
+
+				AddSubview (materialColourButton);
+
 				x += width + 6;
 				col++;
 				if (col >= 10) {
@@ -104,90 +98,103 @@ namespace Xamarin.PropertyEditing.Mac
 				}
 			}
 
-			Layer.AddSublayer (new CATextLayer {
-				ForegroundColor = NSColor.ControlText.CGColor,
-				Frame = new CGRect (x, y + 6, Frame.Width, 25),
-				String = ViewModel.ColorName,
-				FontSize = NSFont.SmallSystemFontSize,
-				ContentsScale = Window?.Screen?.BackingScaleFactor ?? NSScreen.MainScreen.BackingScaleFactor
-			});
+			var colourName = new UnfocusableTextField {
+				Frame = new CGRect (x, y + 6, FrameWidth, PropertyEditorControl.DefaultControlHeight),
+				StringValue = ViewModel.ColorName,
+				TranslatesAutoresizingMaskIntoConstraints = true,
+			};
+
+			AddSubview (colourName);
 
 			y += 25;
 			x = 0;
-			width = Frame.Width / ViewModel.NormalColorScale.Count ();
-			var normal = new CALayer {
-				CornerRadius = 3,
-				MasksToBounds = true,
-				Frame = new CGRect (x, y, Frame.Width, height),
-				BorderColor = new CGColor (.5f, .5f, .5f, .5f),
-				BorderWidth = 1
-			};
-			Layer.AddSublayer (normal);
+			width = FrameWidth / ViewModel.NormalColorScale.Count ();
+
 			foreach (var color in ViewModel.NormalColorScale) {
 				var l = CreateLayer (color.Value);
 				l.ColorType = MaterialColorType.Normal;
 				l.IsSelected = color.Value == ViewModel.NormalColor || color.Value == ViewModel.Color;
-				l.Frame = new CGRect (x, 0, width, height);
-				AddToolTip (new CGRect (x, y, width, height), new NSString (color.ToString ()), IntPtr.Zero);
-				normal.AddSublayer (l);
+				l.Frame = new CGRect (0, 0, width, height);
+
+				var normalColourButton = new FocusableButton {
+					Frame = new CGRect (x, y, width, height),
+					WantsLayer = true,
+					Layer = l,
+					ToolTip = color.ToString (),
+					Transparent = false,
+					TranslatesAutoresizingMaskIntoConstraints = true,
+				};
+
+				normalColourButton.Activated += MaterialColourButton_Activated;
+
+				AddSubview (normalColourButton);
+
 				x += width;
 			}
 
-			if (ViewModel.AccentColorScale.Count () <= 0)
+			if (ViewModel.AccentColorScale.Count () <= 0) {
+				Window?.RecalculateKeyViewLoop (); // Still needs to be called for the Buttons above.
 				return;
+			}
 
 			y += height + 6;
 			x = 0;
 
-			var accent = new CALayer {
-				CornerRadius = 3,
-				MasksToBounds = true,
-				Frame = new CGRect (x, y, Frame.Width, height),
-				BorderColor = new CGColor (.5f, .5f, .5f, .5f),
-				BorderWidth = 1
-			};
-			Layer.AddSublayer (accent);
-			width = Frame.Width / ViewModel.AccentColorScale.Count ();
+			width = FrameWidth / ViewModel.AccentColorScale.Count ();
 			foreach (var color in ViewModel.AccentColorScale) {
 				var l = CreateLayer (color.Value);
 				l.ColorType = MaterialColorType.Accent;
 				l.IsSelected = color.Value == ViewModel.AccentColor || color.Value == ViewModel.Color;
-				l.Frame = new CGRect (x, 0, width, height);
-				AddToolTip (new CGRect (x, y, width, height), new NSString (color.ToString ()), IntPtr.Zero);
-				accent.AddSublayer (l);
+				l.Frame = new CGRect (0, 0, width, height);
+
+				var accentColourButton = new FocusableButton {
+					Frame = new CGRect (x, y, width, height),
+					WantsLayer = true,
+					Layer = l,
+					ToolTip = color.ToString (),
+					Transparent = false,
+					TranslatesAutoresizingMaskIntoConstraints = true,
+				};
+
+				accentColourButton.Activated += MaterialColourButton_Activated;
+
+				AddSubview (accentColourButton);
+
 				x += width;
 			}
+
+			Window?.RecalculateKeyViewLoop ();
 		}
 
-		public override void MouseDown (NSEvent theEvent)
+		private void MaterialColourButton_Activated (object sender, EventArgs e)
 		{
-			UpdateFromEvent (theEvent);
+			var button = sender as FocusableButton;
+			var editor = button?.Layer as MaterialColorLayer;
+
+			if (editor != null) {
+				switch (editor.ColorType) {
+					case MaterialColorType.Accent:
+						ViewModel.AccentColor = editor.BackgroundColor;
+						break;
+					case MaterialColorType.Normal:
+						ViewModel.NormalColor = editor.BackgroundColor;
+						break;
+					case MaterialColorType.Palette:
+						var match = ViewModel.Palettes.First (palette => palette.MainColor == editor.BackgroundColor);
+						ViewModel.ColorName = match.Name;
+						break;
+				}
+			}
 		}
 
-		public void UpdateFromEvent (NSEvent theEvent)
+		public override void OnPropertyChanged (object sender, PropertyChangedEventArgs e)
 		{
-			var location = ConvertPointToLayer (ConvertPointFromView (theEvent.LocationInWindow, null));
-
-			foreach (var layer in Layer.Sublayers) {
-				var hit = layer.HitTest (location);
-				for (var c = hit; c != null; c = c.SuperLayer) {
-					var editor = c as MaterialColorLayer;
-					if (editor != null) {
-						switch (editor.ColorType) {
-						case MaterialColorType.Accent:
-							ViewModel.AccentColor = editor.BackgroundColor;
-							break;
-						case MaterialColorType.Normal:
-							ViewModel.NormalColor = editor.BackgroundColor;
-							break;
-						case MaterialColorType.Palette:
-							var match = ViewModel.Palettes.First (palette => palette.MainColor == editor.BackgroundColor);
-							ViewModel.ColorName = match.Name;
-							break;
-						}
-						NeedsLayout = true;
-					}
-				}
+			switch (e.PropertyName) {
+				case nameof (ViewModel.ColorName):
+				case nameof (ViewModel.AccentColor):
+				case nameof (ViewModel.NormalColor):
+					CreateColourPallette ();
+					break;
 			}
 		}
 	}