Add an "About Scribble" Window

Author: TruePadawan

Scribble/Assets/about.png

@@ -1,5 +1,6 @@
 using System;
 using System.Collections.Generic;
+using System.Diagnostics;
 using System.IO;
 using System.Linq;
 using System.Text.Json;
@@ -10,6 +11,7 @@
 using Avalonia.Platform.Storage;
 using Avalonia.Threading;
 using CommunityToolkit.Mvvm.ComponentModel;
+using CommunityToolkit.Mvvm.Input;
 using Microsoft.AspNetCore.SignalR.Client;
 using Microsoft.Extensions.Configuration;
 using MsBox.Avalonia;
@@ -696,4 +698,22 @@ public async Task LeaveRoom()
     }
 
     public HubConnectionState GetLiveDrawingServiceConnectionState() => _collaborativeDrawingService.ConnectionState;
+
+    [RelayCommand]
+    private void OpenUrl(string url)
+    {
+        if (!string.IsNullOrEmpty(url))
+        {
+            try
+            {
+                Process.Start(new ProcessStartInfo(url) { UseShellExecute = true });
+            }
+            catch (Exception ex)
+            {
+                // Hack for Linux if the above fails
+                Process.Start("xdg-open", url);
+                Console.WriteLine($"Could not open URL: {ex.Message}");
+            }
+        }
+    }
 }

Scribble/ViewModels/MainViewModel.cs

@@ -146,6 +146,12 @@
                             </StackPanel>
                         </Button>
                         <Rectangle Height="2" Fill="#49808080" />
+                        <Button Name="AboutOption" Margin="0" HorizontalAlignment="Stretch" Click="AboutOption_OnClick">
+                            <StackPanel Orientation="Horizontal" Spacing="4">
+                                <Image Source="avares://Scribble/Assets/about.png" Width="18" Height="18" />
+                                <Label FontSize="12">About Scribble</Label>
+                            </StackPanel>
+                        </Button>
                         <Button Name="ExitOption" Margin="0" Click="ExitOption_OnClick" HorizontalAlignment="Stretch">
                             <StackPanel Orientation="Horizontal" Spacing="4">
                                 <Image Source="avares://Scribble/Assets/exit.png" Width="18" Height="18" />
@@ -297,17 +303,17 @@
             </StackPanel.Styles>
         </StackPanel>
 
-        <!-- Multi-User Drawing Dialog -->
-        <Panel>
+        <!-- Collaborative Drawing Dialog -->
+        <Panel Name="LiveDrawingWindow" IsVisible="False">
             <!-- Invisible Background that catches clicks -->
             <Rectangle Name="LiveDrawingWindowOverlay"
                        Fill="Transparent"
                        IsVisible="False" PointerPressed="LiveDrawingWindowOverlay_OnPointerPressed" />
 
-            <Border Name="LiveDrawingWindow" HorizontalAlignment="Center" VerticalAlignment="Center"
+            <Border HorizontalAlignment="Center" VerticalAlignment="Center"
                     Background="#2B2B2B"
                     Padding="18"
-                    CornerRadius="12" IsVisible="False">
+                    CornerRadius="12">
                 <StackPanel MinWidth="400" Spacing="12">
                     <TextBlock HorizontalAlignment="Center" Foreground="#AAAAAA" Margin="0, 0, 0, 12">Collaborative Drawing (DEMO)</TextBlock>
                     <StackPanel Orientation="Vertical" Spacing="8">
@@ -353,5 +359,49 @@
                 </StackPanel>
             </Border>
         </Panel>
+
+        <!-- About Scribble Modal -->
+        <Panel Name="AboutScribbleWindow" IsVisible="False">
+            <!-- Invisible Background that catches clicks -->
+            <Rectangle Name="AboutScribbleWindowOverlay"
+                       Fill="Transparent"
+                       IsVisible="False" PointerPressed="AboutScribbleOverlay_OnPointerPressed" />
+
+            <Border HorizontalAlignment="Center" VerticalAlignment="Center"
+                    Background="#2B2B2B"
+                    Padding="18"
+                    CornerRadius="12">
+                <StackPanel MaxWidth="600" Spacing="12">
+                    <TextBlock HorizontalAlignment="Center" Foreground="#AAAAAA" Margin="0, 0, 0, 12">About Scribble</TextBlock>
+                    <StackPanel Orientation="Vertical" Spacing="12">
+                        <StackPanel Orientation="Vertical" Spacing="4">
+                            <TextBlock TextWrapping="Wrap" FontWeight="ExtraLight">
+                                Scribble is a cross-platform digital whiteboard program built with C#/.NET, AvaloniaUI, SignalR, SkiaSharp.
+                            </TextBlock>
+                            <TextBlock TextWrapping="Wrap" FontWeight="ExtraLight">
+                                I got bored of doing another web-based project so I decided to pick up C#/.NET and Avalonia by building this
+                            </TextBlock>
+                        </StackPanel>
+
+                        <StackPanel Orientation="Vertical" Spacing="4">
+                            <TextBlock TextWrapping="Wrap" Foreground="WhiteSmoke">
+                                Scribble v0.1.0-alpha, by
+                                <HyperlinkButton Content="Hermes"
+                                                 Padding="0"
+                                                 Margin="0"
+                                                 Command="{Binding OpenUrlCommand}"
+                                                 CommandParameter="https://github.com/TruePadawan" />
+                            </TextBlock>
+                            <HyperlinkButton Name="Icons8Button"
+                                             Content="Icons by Icons8"
+                                             Padding="0"
+                                             Margin="0"
+                                             Command="{Binding OpenUrlCommand}"
+                                             CommandParameter="http://icons8.com/icons" />
+                        </StackPanel>
+                    </StackPanel>
+                </StackPanel>
+            </Border>
+        </Panel>
     </Panel>
 </UserControl>

Scribble/Views/MainView.axaml

@@ -475,7 +475,13 @@ private void CloseLiveDrawingWindow()
     {
         LiveDrawingWindow.IsVisible = false;
         LiveDrawingWindowOverlay.IsVisible = false;
+        Dispatcher.UIThread.Post(() => CanvasContainer.Focus());
+    }
 
+    private void CloseAboutScribbleWindow()
+    {
+        AboutScribbleWindow.IsVisible = false;
+        AboutScribbleWindowOverlay.IsVisible = false;
         Dispatcher.UIThread.Post(() => CanvasContainer.Focus());
     }
 
@@ -677,4 +683,16 @@ private void RoomIdTextBox_OnTextChanged(object? sender, TextChangedEventArgs e)
             }
         }
     }
+
+    private void AboutScribbleOverlay_OnPointerPressed(object? sender, PointerPressedEventArgs e)
+    {
+        CloseAboutScribbleWindow();
+    }
+
+    private void AboutOption_OnClick(object? sender, RoutedEventArgs e)
+    {
+        CloseMenu();
+        AboutScribbleWindow.IsVisible = true;
+        AboutScribbleWindowOverlay.IsVisible = true;
+    }
 }