Port discord rich present preview

src/PixiEditor.AvaloniaUI/ViewModels/SubViewModels/WindowViewModel.cs

@@ -7,7 +7,7 @@ using PixiEditor.AvaloniaUI.ViewModels.Document;
 using PixiEditor.AvaloniaUI.Views.Windows;
 using PixiEditor.Views.UserControls;
 using Command = PixiEditor.AvaloniaUI.Models.Commands.Attributes.Commands.Command;
-using SettingsWindow = PixiEditor.AvaloniaUI.Views.Settings.SettingsWindow;
+using SettingsWindow = PixiEditor.AvaloniaUI.Views.Windows.Settings.SettingsWindow;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.SubViewModels;
 

src/PixiEditor.AvaloniaUI/Views/Windows/Settings/DiscordRichPresencePreview.axaml

@@ -0,0 +1,81 @@
+<UserControl
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
+    mc:Ignorable="d"
+    d:DesignWidth="300"
+    x:Class="PixiEditor.AvaloniaUI.Views.Windows.Settings.DiscordRichPresencePreview"
+    Name="uc">
+    <Grid>
+        <Border CornerRadius="5" Background="#292b2f" x:Name="OutsideBorder">
+            <Grid>
+                <Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="Auto"/>
+                </Grid.RowDefinitions>
+
+                <Grid>
+                    <Border CornerRadius="5,5,0,0" Background="#e3042c" Height="60" VerticalAlignment="Top"/>
+                    <StackPanel>
+                        <Border HorizontalAlignment="Left" Width="85" Height="85" Margin="15" BorderThickness="6" BorderBrush="#292b2f" CornerRadius="90">
+                            <Grid>
+                                <Image Source="{Binding #uc.UserSource, Converter={converters:ImagePathToBitmapConverter}}"/>
+                                <Border Height="30" Width="30" Background="#FF43B581" CornerRadius="90" BorderThickness="6" BorderBrush="#292b2f">
+                                    <Border.RenderTransform>
+                                        <TransformGroup>
+                                            <TranslateTransform X="27" Y="27"></TranslateTransform>
+                                        </TransformGroup>
+                                    </Border.RenderTransform>
+                                </Border>
+                            </Grid>
+                        </Border>
+                    </StackPanel>
+                </Grid>
+                <Border Grid.Row="1" Background="#18191C" Margin="10,10" CornerRadius="5" Padding="10">
+                    <StackPanel>
+                        <StackPanel Orientation="Horizontal" Margin="0,0">
+                            <TextBlock Foreground="White" FontWeight="DemiBold" FontSize="22">PixiBot</TextBlock>
+                            <TextBlock Foreground="White" FontWeight="DemiBold" FontSize="22">#8523</TextBlock>
+                            <Border CornerRadius="3" BorderThickness="1" Background="#5865f2" Margin="5,0,0,0" VerticalAlignment="Center">
+                                <TextBlock Foreground="White" FontSize="10" Margin="4,2,4,2" FontWeight="Medium">BOT</TextBlock>
+                            </Border>
+                        </StackPanel>
+                        <Grid Margin="0,5">
+                            <StackPanel Orientation="Vertical">
+                                <Grid Margin="0,15" Background="#262729" Height="2"/>
+                                <TextBlock FontWeight="Bold" FontSize="12" Foreground="White" Margin="0,0,0,10" Text="ABOUT ME"/>
+                                <TextBlock Foreground="White" Text="Use me to display your .pixi files in Discord. &#10;Start by sending a file in any appropriate channel" />
+                            </StackPanel>
+                        </Grid>
+                        <Grid Margin="0,5">
+                            <StackPanel Orientation="Vertical">
+                                <TextBlock FontWeight="Bold" Foreground="White" Margin="0,0,0,10" Text="DISCORD MEMBER SINCE"/>
+                                <TextBlock Foreground="White" Text="Oct 29, 2020"></TextBlock>
+                            </StackPanel>
+                        </Grid>
+                        <Grid IsVisible="{Binding #uc.IsPlaying}" Margin="0,5, 0, 0">
+                            <StackPanel Orientation="Vertical">
+                                <TextBlock FontWeight="Bold" FontSize="12" Foreground="White" Margin="0,0,0,10" Text="PLAYING A GAME"/>
+                                <StackPanel Orientation="Horizontal">
+                                    <Image Source="/Images/PixiEditorLogo.png" Height="60"/>
+                                    <StackPanel Margin="15,0,0,0" VerticalAlignment="Center">
+                                        <TextBlock Foreground="White" FontSize="12" FontWeight="SemiBold">PixiEditor</TextBlock>
+                                        <TextBlock Foreground="White" FontSize="12" 
+                                                   Text="{Binding #uc.Detail}" 
+                                                   IsVisible="{Binding #uc.Detail, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
+                                        <TextBlock Foreground="White" FontSize="12" 
+                                                   Text="{Binding ElementName=uc, Path=State}" 
+                                                   IsVisible="{Binding #uc.State, Converter={x:Static StringConverters.IsNotNullOrEmpty}}"/>
+                                        <TextBlock Foreground="White" FontSize="12" Text="00:00 elapsed"/>
+                                    </StackPanel>
+                                </StackPanel>
+                            </StackPanel>
+                        </Grid>
+                    </StackPanel>
+                </Border>
+            </Grid>
+        </Border>
+    </Grid>
+</UserControl>

src/PixiEditor.AvaloniaUI/Views/Windows/Settings/DiscordRichPresencePreview.axaml.cs

@@ -0,0 +1,50 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace PixiEditor.AvaloniaUI.Views.Windows.Settings;
+
+public partial class DiscordRichPresencePreview : UserControl
+{
+    public DiscordRichPresencePreview()
+    {
+        InitializeComponent();
+    }
+    
+    public static readonly StyledProperty<string> StateProperty =
+        AvaloniaProperty.Register<DiscordRichPresencePreview, string>(nameof(State), "16x16, 2 Layers");
+
+    public string State
+    {
+        get => (string)GetValue(StateProperty);
+        set => SetValue(StateProperty, value);
+    }
+
+    public static readonly StyledProperty<string> DetailProperty =
+        AvaloniaProperty.Register<DiscordRichPresencePreview, string>(nameof(Detail), "Editing an image");
+
+    public string Detail
+    {
+        get => (string)GetValue(DetailProperty);
+        set => SetValue(DetailProperty, value);
+    }
+
+    public static readonly StyledProperty<string> UserSourceProperty =
+        AvaloniaProperty.Register<DiscordRichPresencePreview, string>(nameof(UserSource), "/Images/PixiBotLogo.png");
+
+    public string UserSource
+    {
+        get => (string)GetValue(UserSourceProperty);
+        set => SetValue(UserSourceProperty, value);
+    }
+
+    public static readonly StyledProperty<bool> IsPlayingProperty =
+        AvaloniaProperty.Register<DiscordRichPresencePreview, bool>(nameof(IsPlaying), true);
+
+    public bool IsPlaying
+    {
+        get => GetValue(IsPlayingProperty);
+        set => SetValue(IsPlayingProperty, value);
+    }
+}
+

src/PixiEditor.AvaloniaUI/Views/Windows/Settings/SettingsWindow.axaml

@@ -15,9 +15,9 @@
     xmlns:markupExtensions="clr-namespace:PixiEditor.AvaloniaUI.Helpers.MarkupExtensions"
     xmlns:preferences="clr-namespace:PixiEditor.AvaloniaUI.Models.Preferences"
     xmlns:dialogs="clr-namespace:PixiEditor.AvaloniaUI.Views.Dialogs"
-    xmlns:settings="clr-namespace:PixiEditor.AvaloniaUI.Views.Settings"
+    xmlns:settings="clr-namespace:PixiEditor.AvaloniaUI.Views.Windows.Settings"
     mc:Ignorable="d"
-    x:Class="PixiEditor.AvaloniaUI.Views.Settings.SettingsWindow"
+    x:Class="PixiEditor.AvaloniaUI.Views.Windows.Settings.SettingsWindow"
     Name="window"
     d:DesignWidth="780" d:DesignHeight="688"
     Width="780" Height="688"
@@ -235,13 +235,14 @@
                     <CheckBox IsEnabled="{Binding SettingsSubViewModel.Discord.EnableRichPresence}" 
                               IsChecked="{Binding SettingsSubViewModel.Discord.ShowLayerCount}"
                               ui:Translator.Key="SHOW_LAYER_COUNT" d:Content="Show layer count"/>
-
-                    <!--<usercontrols:DiscordRPPreview 
-                        Width="280"
-                        State="{Binding SettingsSubViewModel.Discord.StatePreview}" 
-                        Detail="{Binding SettingsSubViewModel.Discord.DetailPreview}" 
-                        IsPlaying="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"/>-->
                 </controls:FixedSizeStackPanel>
+                
+                <settings:DiscordRichPresencePreview
+                    HorizontalAlignment="Center"
+                    Width="280"
+                    State="{Binding SettingsSubViewModel.Discord.StatePreview}" 
+                    Detail="{Binding SettingsSubViewModel.Discord.DetailPreview}" 
+                    IsPlaying="{Binding SettingsSubViewModel.Discord.EnableRichPresence}"/>
             </StackPanel>
 
             <Grid Height="{Binding ElementName=window, Path=Height, Converter={converters:SubtractConverter}, ConverterParameter=50}">

src/PixiEditor.AvaloniaUI/Views/Windows/Settings/SettingsWindow.axaml.cs

@@ -1,7 +1,7 @@
 using Avalonia.Controls;
 using PixiEditor.AvaloniaUI.ViewModels;
 
-namespace PixiEditor.AvaloniaUI.Views.Settings;
+namespace PixiEditor.AvaloniaUI.Views.Windows.Settings;
 
 public partial class SettingsWindow : Window
 {

src/PixiEditor.AvaloniaUI/Views/Windows/Settings/ShortcutsBinder.axaml

@@ -8,7 +8,7 @@
     xmlns:commands="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands"
     mc:Ignorable="d"
     d:DesignHeight="600" d:DesignWidth="400"
-    x:Class="PixiEditor.AvaloniaUI.Views.Settings.ShortcutsBinder">
+    x:Class="PixiEditor.AvaloniaUI.Views.Windows.Settings.ShortcutsBinder">
     
     <Grid>
     <ScrollViewer x:Name="commandScroll">

src/PixiEditor.AvaloniaUI/Views/Windows/Settings/ShortcutsBinder.axaml.cs

@@ -1,6 +1,6 @@
 using Avalonia.Controls;
 
-namespace PixiEditor.AvaloniaUI.Views.Settings;
+namespace PixiEditor.AvaloniaUI.Views.Windows.Settings;
 
 public partial class ShortcutsBinder : UserControl
 {