avalonia: Improved interface of MonthView

InABox.Avalonia/Components/MonthView/MonthView.axaml

@@ -17,9 +17,7 @@
             <Canvas Name="Canvas"
                     Grid.Row="1"
                     Background="WhiteSmoke"
-                    SizeChanged="Canvas_SizeChanged"
-                    PointerPressed="Canvas_PointerPressed"
-                    PointerReleased="Canvas_PointerReleased"/>
+                    SizeChanged="Canvas_SizeChanged"/>
         </Grid>
     </Border>
 </UserControl>

InABox.Avalonia/Components/MonthView/MonthView.axaml.cs

@@ -406,7 +406,7 @@ public partial class MonthView : UserControl
 
         var dayBlocks = new Dictionary<DateTime, DayBlock>();
 
-        // Day Labels
+        // Cells and Day Labels
         for(int week = 0; week < 6; ++week)
         {
             for(int day = 0; day < 7; ++day)
@@ -415,6 +415,19 @@ public partial class MonthView : UserControl
                 var dayBlock = dayBlocks.GetValueOrAdd(date);
                 dayBlock.Date = date;
 
+                var cell = new Rectangle
+                {
+                    Fill = new SolidColorBrush(Colors.Transparent),
+                    Width = _colWidth,
+                    Height = _rowHeight
+                };
+                cell.PointerPressed += Cell_PointerPressed;
+                cell.PointerReleased += Cell_PointerReleased;
+
+                Canvas.SetLeft(cell, day * (columnWidth + colSpace));
+                Canvas.SetTop(cell, week * (rowHeight + colSpace));
+                Canvas.Children.Add(cell);
+
                 var border = new Border
                 {
                     Margin = new(2),
@@ -661,20 +674,66 @@ public partial class MonthView : UserControl
         Canvas.Children.InsertRange(0, lines);*/
     }
 
+    private Rectangle? _selectedRectangle;
+
+    private void Cell_PointerPressed(object? sender, PointerPressedEventArgs e)
+    {
+        if (sender is not Rectangle rectangle) return;
+        if(_selectedRectangle is not null)
+        {
+            _selectedRectangle.Fill = new SolidColorBrush(Colors.Transparent);
+            _selectedRectangle = null;
+        }
+
+        if (ClosePopup()) return;
+        if (!TryGetDateFromPosition(e, out var date)) return;
+
+        _selectedRectangle = rectangle;
+        _selectedRectangle.Fill = new SolidColorBrush(Colors.LightBlue, opacity: 0.5);
+
+        PressedAction(() => CellHeld?.Invoke(this, new(date)));
+    }
+
+    private void Cell_PointerReleased(object? sender, PointerReleasedEventArgs e)
+    {
+        if (sender is not Rectangle rectangle) return;
+
+        if (!TryGetDateFromPosition(e, out var date)) return;
+        ReleasedAction(() =>
+        {
+            if(_selectedRectangle is not null)
+            {
+                _selectedRectangle.Fill = new SolidColorBrush(Colors.Transparent);
+                _selectedRectangle = null;
+            }
+
+            CellClicked?.Invoke(this, new(date));
+        });
+    }
+
     private void RootPointerPressed(object? sender, PointerPressedEventArgs e)
     {
     }
 
+    private Control? _magnifiedDayBackground;
     private Control? _magnifiedDayControl;
     private DayBlock? _magnifiedDay;
 
-    private void ClosePopup()
+    private bool ClosePopup()
     {
         if(_magnifiedDayControl is not null)
         {
             _magnifiedDay = null;
             Canvas.Children.Remove(_magnifiedDayControl);
+            Canvas.Children.Remove(_magnifiedDayBackground!);
+
             _magnifiedDayControl = null;
+            _magnifiedDayBackground = null;
+            return true;
+        }
+        else
+        {
+            return false;
         }
     }
 
@@ -692,10 +751,20 @@ public partial class MonthView : UserControl
         if(_magnifiedDayControl is not null)
         {
             Canvas.Children.Remove(_magnifiedDayControl);
+            Canvas.Children.Remove(_magnifiedDayBackground!);
         }
 
         _magnifiedDay = dayBlock;
 
+        _magnifiedDayBackground = new Rectangle
+        {
+            Fill = new SolidColorBrush(Colors.Black, opacity: 0.2),
+            Width = Canvas.Bounds.Width,
+            Height = Canvas.Bounds.Height,
+        };
+        Canvas.Children.Add(_magnifiedDayBackground);
+        _magnifiedDayBackground.PointerReleased += _magnifiedDayBackground_PointerReleased;
+
         var popoutBorder = new Border
         {
             BorderBrush = new SolidColorBrush(Colors.LightGray),
@@ -755,57 +824,88 @@ public partial class MonthView : UserControl
         };
 
         var animation = new Animation();
-        animation.Duration = TimeSpan.FromSeconds(0.1);
-        var startFrame = new KeyFrame
-        {
-            Cue = new(0),
-        };
-        var startTransform = TransformOperations.CreateBuilder(1);
-        startTransform.AppendScale(0, 0);
-        startFrame.Setters.Add(new Setter()
         {
-            Property = Border.OpacityProperty,
-            Value = 0.0
-        });
-        startFrame.Setters.Add(new Setter()
-        {
-            Property = ScaleTransform.ScaleXProperty,
-            Value = 0.0
-        });
-        startFrame.Setters.Add(new Setter()
-        {
-            Property = ScaleTransform.ScaleYProperty,
-            Value = 0.0
-        });
-        animation.Children.Add(startFrame);
+            animation.Duration = TimeSpan.FromSeconds(0.1);
+            var startFrame = new KeyFrame
+            {
+                Cue = new(0),
+            };
+            startFrame.Setters.Add(new Setter()
+            {
+                Property = Border.OpacityProperty,
+                Value = 0.0
+            });
+            startFrame.Setters.Add(new Setter()
+            {
+                Property = ScaleTransform.ScaleXProperty,
+                Value = 0.0
+            });
+            startFrame.Setters.Add(new Setter()
+            {
+                Property = ScaleTransform.ScaleYProperty,
+                Value = 0.0
+            });
+            animation.Children.Add(startFrame);
 
-        var endTransform = TransformOperations.CreateBuilder(1);
-        endTransform.AppendScale(1, 1);
-        var endFrame = new KeyFrame
-        {
-            Cue = new(1.0),
-        };
-        endFrame.Setters.Add(new Setter()
-        {
-            Property = Border.OpacityProperty,
-            Value = 1.0
-        });
-        endFrame.Setters.Add(new Setter()
-        {
-            Property = ScaleTransform.ScaleXProperty,
-            Value = 1.0
-        });
-        endFrame.Setters.Add(new Setter()
+            var endFrame = new KeyFrame
+            {
+                Cue = new(1.0),
+            };
+            endFrame.Setters.Add(new Setter()
+            {
+                Property = Border.OpacityProperty,
+                Value = 1.0
+            });
+            endFrame.Setters.Add(new Setter()
+            {
+                Property = ScaleTransform.ScaleXProperty,
+                Value = 1.0
+            });
+            endFrame.Setters.Add(new Setter()
+            {
+                Property = ScaleTransform.ScaleYProperty,
+                Value = 1.0
+            });
+            animation.Children.Add(endFrame);
+        }
+
+        var backgroundAnimation = new Animation();
         {
-            Property = ScaleTransform.ScaleYProperty,
-            Value = 1.0
-        });
-        animation.Children.Add(endFrame);
+            backgroundAnimation.Duration = TimeSpan.FromSeconds(0.1);
+            var startFrame = new KeyFrame
+            {
+                Cue = new(0),
+            };
+            startFrame.Setters.Add(new Setter()
+            {
+                Property = Border.OpacityProperty,
+                Value = 0.0
+            });
+            backgroundAnimation.Children.Add(startFrame);
+
+            var endFrame = new KeyFrame
+            {
+                Cue = new(1.0),
+            };
+            endFrame.Setters.Add(new Setter()
+            {
+                Property = Border.OpacityProperty,
+                Value = 1.0
+            });
+            backgroundAnimation.Children.Add(endFrame);
+        }
+
         animation.RunAsync(popoutBorder).LogIfFail();
+        backgroundAnimation.RunAsync(_magnifiedDayBackground).LogIfFail();
 
         Canvas.Children.Add(_magnifiedDayControl);
     }
 
+    private void _magnifiedDayBackground_PointerReleased(object? sender, PointerReleasedEventArgs e)
+    {
+        ClosePopup();
+    }
+
     private void OverflowBorder_PointerPressed(object? sender, PointerPressedEventArgs e)
     {
         if (sender is not Border border
@@ -928,20 +1028,6 @@ public partial class MonthView : UserControl
         }
     }
 
-    private void Canvas_PointerPressed(object? sender, PointerPressedEventArgs e)
-    {
-        ClosePopup();
-
-        if (!TryGetDateFromPosition(e, out var date)) return;
-        PressedAction(() => CellHeld?.Invoke(this, new(date)));
-    }
-
-    private void Canvas_PointerReleased(object? sender, PointerReleasedEventArgs e)
-    {
-        if (!TryGetDateFromPosition(e, out var date)) return;
-        ReleasedAction(() => CellClicked?.Invoke(this, new(date)));
-    }
-
     private void HeaderBlock_SizeChanged(object? sender, SizeChangedEventArgs e)
     {
         if (sender is not TextBlock block) return;