UI - Replaced Consolas with Roboto Mono

Workshop library - Added most of submission management

src/Artemis.UI/Screens/Workshop/Entries/EntrySpecificationsView.axaml

@@ -7,99 +7,133 @@
              xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
              xmlns:categories="clr-namespace:Artemis.UI.Screens.Workshop.Categories"
              xmlns:avaloniaEdit="https://github.com/avaloniaui/avaloniaedit"
+             xmlns:mdxaml="https://github.com/whistyun/Markdown.Avalonia.Tight"
+             xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="800"
              x:Class="Artemis.UI.Screens.Workshop.Entries.EntrySpecificationsView"
              x:DataType="entries:EntrySpecificationsViewModel">
-    <StackPanel>
-        <StackPanel.Styles>
-            <Styles>
-                <Style Selector="TextBlock">
-                    <Setter Property="TextWrapping" Value="Wrap"></Setter>
-                </Style>
-                <Style Selector="Label">
-                    <Setter Property="Margin" Value="0 8 0 0"></Setter>
-                </Style>
-            </Styles>
-        </StackPanel.Styles>
+    <Grid RowDefinitions="Auto,*,Auto">
+        <StackPanel>
+            <StackPanel.Styles>
+                <Styles>
+                    <Style Selector="TextBlock">
+                        <Setter Property="TextWrapping" Value="Wrap"></Setter>
+                    </Style>
+                    <Style Selector="Label">
+                        <Setter Property="Margin" Value="0 8 0 0"></Setter>
+                    </Style>
+                </Styles>
+            </StackPanel.Styles>
 
-        <Grid ColumnDefinitions="103,*">
-            <StackPanel Grid.Column="0" Width="95">
-                <Label Target="Name">Icon</Label>
-                <Button Width="95"
-                        Height="95"
-                        Command="{CompiledBinding SelectIcon}"
-                        IsVisible="{CompiledBinding IconBitmap, Converter={x:Static ObjectConverters.IsNull}}">
-                    <avalonia:MaterialIcon Kind="FolderOpen"
-                                           Foreground="{DynamicResource TextFillColorSecondaryBrush}"
-                                           Width="30"
-                                           Height="30" />
-                </Button>
-                <Border IsVisible="{CompiledBinding IconBitmap, Converter={x:Static ObjectConverters.IsNotNull}}"
-                        ClipToBounds="True"
-                        CornerRadius="6"
-                        VerticalAlignment="Center"
-                        Width="95"
-                        Height="95">
-                    <Panel>
-                        <Image Source="{CompiledBinding IconBitmap}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></Image>
-                        <Button Classes="icon-button image-picker"
-                                VerticalAlignment="Stretch"
-                                HorizontalAlignment="Stretch"
-                                Cursor="Hand"
-                                Command="{CompiledBinding SelectIcon}"
-                                ToolTip.Tip="Click to browse">
-                        </Button>
-                    </Panel>
+            <Grid ColumnDefinitions="103,*">
+                <StackPanel Grid.Column="0" Width="95">
+                    <Label Target="Name" Margin="0">Icon</Label>
+                    <Button Width="95"
+                            Height="95"
+                            Command="{CompiledBinding SelectIcon}"
+                            IsVisible="{CompiledBinding IconBitmap, Converter={x:Static ObjectConverters.IsNull}}">
+                        <avalonia:MaterialIcon Kind="FolderOpen"
+                                               Foreground="{DynamicResource TextFillColorSecondaryBrush}"
+                                               Width="30"
+                                               Height="30" />
+                    </Button>
+                    <Border IsVisible="{CompiledBinding IconBitmap, Converter={x:Static ObjectConverters.IsNotNull}}"
+                            ClipToBounds="True"
+                            CornerRadius="6"
+                            VerticalAlignment="Center"
+                            Width="95"
+                            Height="95">
+                        <Panel>
+                            <Image Source="{CompiledBinding IconBitmap}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></Image>
+                            <Button Classes="icon-button image-picker"
+                                    VerticalAlignment="Stretch"
+                                    HorizontalAlignment="Stretch"
+                                    Cursor="Hand"
+                                    Command="{CompiledBinding SelectIcon}"
+                                    ToolTip.Tip="Click to browse">
+                            </Button>
+                        </Panel>
 
-                </Border>
-                <TextBlock Foreground="{DynamicResource SystemFillColorCriticalBrush}" Margin="2 0" IsVisible="{CompiledBinding !IconValid}" TextWrapping="Wrap">
-                    Icon required
-                </TextBlock>
-            </StackPanel>
-            <StackPanel Grid.Column="1">
-                <Label Target="Name">Name</Label>
-                <TextBox Name="Name" Text="{CompiledBinding Name}"></TextBox>
+                    </Border>
+                    <TextBlock Foreground="{DynamicResource SystemFillColorCriticalBrush}" Margin="2 0" IsVisible="{CompiledBinding !IconValid}" TextWrapping="Wrap">
+                        Icon required
+                    </TextBlock>
+                </StackPanel>
+                <StackPanel Grid.Column="1">
+                    <Label Target="Name" Margin="0">Name</Label>
+                    <TextBox Name="Name" Text="{CompiledBinding Name}"></TextBox>
 
-                <Label Target="Summary" Margin="0 5 0 0">Summary</Label>
-                <TextBox Name="Summary" Text="{CompiledBinding Summary}"></TextBox>
-            </StackPanel>
+                    <Label Target="Summary" Margin="0 5 0 0">Summary</Label>
+                    <TextBox Name="Summary" Text="{CompiledBinding Summary}"></TextBox>
+                </StackPanel>
+            </Grid>
+
+            <Label Margin="0 28 0 0">Categories</Label>
+            <ItemsControl ItemsSource="{CompiledBinding Categories}">
+                <ItemsControl.ItemsPanel>
+                    <ItemsPanelTemplate>
+                        <WrapPanel />
+                    </ItemsPanelTemplate>
+                </ItemsControl.ItemsPanel>
+                <ItemsControl.ItemTemplate>
+                    <DataTemplate DataType="categories:CategoryViewModel">
+                        <ToggleButton IsChecked="{CompiledBinding IsSelected}" Margin="0 0 5 5">
+                            <StackPanel Orientation="Horizontal" Spacing="5">
+                                <avalonia:MaterialIcon Kind="{CompiledBinding Icon}" />
+                                <TextBlock Text="{CompiledBinding Name}" VerticalAlignment="Center" />
+                            </StackPanel>
+                        </ToggleButton>
+                    </DataTemplate>
+                </ItemsControl.ItemTemplate>
+            </ItemsControl>
+            <TextBlock Foreground="{DynamicResource SystemFillColorCriticalBrush}" Margin="2 0" IsVisible="{CompiledBinding !CategoriesValid}">
+                At least one category is required
+            </TextBlock>
+
+            <Label>Tags</Label>
+            <tagsInput:TagsInput Tags="{CompiledBinding Tags}" />
+
+            <Label Target="DescriptionEditor" Margin="0 28 0 0">Description</Label>
+        </StackPanel>
+
+
+        <Grid Grid.Row="1" ColumnDefinitions="*,Auto,*">
+            <Border Grid.Column="0" BorderThickness="1"
+                    BorderBrush="{DynamicResource TextControlBorderBrush}"
+                    CornerRadius="{DynamicResource ControlCornerRadius}"
+                    Background="{DynamicResource TextControlBackground}"
+                    Padding="{DynamicResource TextControlThemePadding}">
+                <avaloniaEdit:TextEditor
+                    FontFamily="{StaticResource RobotoMono}"
+                    Name="DescriptionEditor"
+                    Document="{CompiledBinding MarkdownDocument}"
+                    WordWrap="True" />
+            </Border>
+
+            <GridSplitter Grid.Column="1" Margin="5 0"></GridSplitter>
+            <Border  Grid.Column="2" Classes="card-condensed">
+                <mdxaml:MarkdownScrollViewer Margin="5 0"
+                                             Name="DescriptionPreview"
+                                             Markdown="{CompiledBinding Description}"
+                                             MarkdownStyleName="FluentAvalonia"
+                                             SaveScrollValueWhenContentUpdated="True">
+                    <mdxaml:MarkdownScrollViewer.Styles>
+                        <StyleInclude Source="/Styles/Markdown.axaml" />
+                    </mdxaml:MarkdownScrollViewer.Styles>
+                </mdxaml:MarkdownScrollViewer>
+            </Border>
         </Grid>
 
-        <Label Margin="0 28 0 0">Categories</Label>
-        <ItemsControl ItemsSource="{CompiledBinding Categories}">
-            <ItemsControl.ItemsPanel>
-                <ItemsPanelTemplate>
-                    <WrapPanel />
-                </ItemsPanelTemplate>
-            </ItemsControl.ItemsPanel>
-            <ItemsControl.ItemTemplate>
-                <DataTemplate DataType="categories:CategoryViewModel">
-                    <ToggleButton IsChecked="{CompiledBinding IsSelected}" Margin="0 0 5 5">
-                        <StackPanel Orientation="Horizontal" Spacing="5">
-                            <avalonia:MaterialIcon Kind="{CompiledBinding Icon}" />
-                            <TextBlock Text="{CompiledBinding Name}" VerticalAlignment="Center" />
-                        </StackPanel>
-                    </ToggleButton>
-                </DataTemplate>
-            </ItemsControl.ItemTemplate>
-        </ItemsControl>
-        <TextBlock Foreground="{DynamicResource SystemFillColorCriticalBrush}" Margin="2 0" IsVisible="{CompiledBinding !CategoriesValid}">
-            At least one category is required
-        </TextBlock>
 
-        <Label>Tags</Label>
-        <tagsInput:TagsInput Tags="{CompiledBinding Tags}" />
+        <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right">
+            <CheckBox Name="SynchronizedScrolling" IsChecked="True" VerticalAlignment="Bottom">Synchronized scrolling</CheckBox>
+            <controls:HyperlinkButton
+                Margin="0 5 0 0"
+                Content="Learn more about Markdown on the wiki"
+                NavigateUri="https://wiki.artemis-rgb.com/guides/user/markdown?mtm_campaign=artemis&amp;mtm_kwd=markdown-editor"
+                HorizontalAlignment="Right"
+                VerticalAlignment="Top" />
+        </StackPanel>
 
-        <Label Target="DescriptionEditor" Margin="0 28 0 0">Description</Label>
-        <Border Classes="card">
-            <avaloniaEdit:TextEditor Height="250" Name="DescriptionEditor" Document="{CompiledBinding MarkdownDocument}"/>    
-        </Border>
-        
-        
-        <DockPanel HorizontalAlignment="Stretch">
-            <TextBlock Theme="{StaticResource CaptionTextBlockStyle}">Markdown supported, a better editor planned</TextBlock>
-            <Button Margin="0 5" HorizontalAlignment="Right" Command="{CompiledBinding OpenMarkdownPreview}">Open preview</Button>    
-        </DockPanel>
-        
-    </StackPanel>
+    </Grid>
 </UserControl>

src/Artemis.UI/Screens/Workshop/Entries/EntrySpecificationsView.axaml.cs

@@ -1,34 +1,100 @@
+using System.Linq;
+using Artemis.UI.Shared.Extensions;
 using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Media;
 using Avalonia.Media.Immutable;
 using Avalonia.ReactiveUI;
 using AvaloniaEdit.TextMate;
+using ReactiveUI;
 using TextMateSharp.Grammars;
 
 namespace Artemis.UI.Screens.Workshop.Entries;
 
 public partial class EntrySpecificationsView : ReactiveUserControl<EntrySpecificationsViewModel>
 {
+    private ScrollViewer? _editorScrollViewer;
+    private ScrollViewer? _previewScrollViewer;
+    private bool _updating;
+
     public EntrySpecificationsView()
     {
         InitializeComponent();
 
+        DescriptionEditor.Options.AllowScrollBelowDocument = false;
         RegistryOptions options = new(ThemeName.Dark);
         TextMate.Installation? install = DescriptionEditor.InstallTextMate(options);
 
         install.SetGrammar(options.GetScopeByExtension(".md"));
+
+        this.WhenActivated(_ => SetupScrollSync());
     }
 
-    #region Overrides of Visual
-
-    /// <inheritdoc />
     protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
     {
         if (this.TryFindResource("SystemAccentColorLight3", out object? resource) && resource is Color color)
             DescriptionEditor.TextArea.TextView.LinkTextForegroundBrush = new ImmutableSolidColorBrush(color);
+
         base.OnAttachedToVisualTree(e);
     }
 
-    #endregion
+    private void SetupScrollSync()
+    {
+        if (_editorScrollViewer != null)
+            _editorScrollViewer.PropertyChanged -= EditorScrollViewerOnPropertyChanged;
+        if (_previewScrollViewer != null)
+            _previewScrollViewer.PropertyChanged -= PreviewScrollViewerOnPropertyChanged;
+
+        _editorScrollViewer = DescriptionEditor.GetVisualChildrenOfType<ScrollViewer>().FirstOrDefault();
+        _previewScrollViewer = DescriptionPreview.GetVisualChildrenOfType<ScrollViewer>().FirstOrDefault();
+
+        if (_editorScrollViewer != null)
+            _editorScrollViewer.PropertyChanged += EditorScrollViewerOnPropertyChanged;
+        if (_previewScrollViewer != null)
+            _previewScrollViewer.PropertyChanged += PreviewScrollViewerOnPropertyChanged;
+    }
+
+    private void EditorScrollViewerOnPropertyChanged(object? sender, AvaloniaPropertyChangedEventArgs e)
+    {
+        if (e.Property.Name != nameof(ScrollViewer.Offset) || _updating || SynchronizedScrolling.IsChecked != true)
+            return;
+
+        try
+        {
+            _updating = true;
+            SynchronizeScrollViewers(_editorScrollViewer, _previewScrollViewer);
+        }
+        finally
+        {
+            _updating = false;
+        }
+    }
+
+    private void PreviewScrollViewerOnPropertyChanged(object? sender, AvaloniaPropertyChangedEventArgs e)
+    {
+        if (e.Property.Name != nameof(ScrollViewer.Offset) || _updating || SynchronizedScrolling.IsChecked != true)
+            return;
+
+        try
+        {
+            _updating = true;
+            SynchronizeScrollViewers(_previewScrollViewer, _editorScrollViewer);
+        }
+        finally
+        {
+            _updating = false;
+        }
+    }
+
+    private void SynchronizeScrollViewers(ScrollViewer? source, ScrollViewer? target)
+    {
+        if (source == null || target == null)
+            return;
+
+        double sourceScrollableHeight = source.Extent.Height - source.Viewport.Height;
+        double targetScrollableHeight = target.Extent.Height - target.Viewport.Height;
+
+        if (sourceScrollableHeight != 0)
+            target.Offset = new Vector(target.Offset.X, targetScrollableHeight * (source.Offset.Y / sourceScrollableHeight));
+    }
 }

src/Artemis.UI/Screens/Workshop/Entries/EntrySpecificationsViewModel.cs

@@ -5,15 +5,12 @@ using System.Linq;
 using System.Reactive;
 using System.Reactive.Disposables;
 using System.Reactive.Linq;
-using System.Threading;
 using System.Threading.Tasks;
 using Artemis.UI.Extensions;
 using Artemis.UI.Screens.Workshop.Categories;
-using Artemis.UI.Screens.Workshop.Entries.Windows;
 using Artemis.UI.Shared;
 using Artemis.UI.Shared.Services;
 using Artemis.WebClient.Workshop;
-using Avalonia.Controls;
 using AvaloniaEdit.Document;
 using DynamicData;
 using DynamicData.Aggregation;
@@ -35,16 +32,13 @@ public class EntrySpecificationsViewModel : ValidatableViewModelBase
     private string _name = string.Empty;
     private string _summary = string.Empty;
     private Bitmap? _iconBitmap;
-    private Window? _previewWindow;
     private TextDocument? _markdownDocument;
 
     public EntrySpecificationsViewModel(IWorkshopClient workshopClient, IWindowService windowService)
     {
         _windowService = windowService;
         SelectIcon = ReactiveCommand.CreateFromTask(ExecuteSelectIcon);
-        OpenMarkdownPreview = ReactiveCommand.Create(ExecuteOpenMarkdownPreview);
 
-        // this.WhenAnyValue(vm => vm.Description).Subscribe(d => MarkdownDocument.Text = d);
         this.WhenActivated(d =>
         {
             // Load categories
@@ -56,7 +50,6 @@ public class EntrySpecificationsViewModel : ValidatableViewModelBase
             MarkdownDocument.TextChanged += MarkdownDocumentOnTextChanged;
             Disposable.Create(() =>
             {
-                _previewWindow?.Close();
                 MarkdownDocument.TextChanged -= MarkdownDocumentOnTextChanged;
                 MarkdownDocument = null;
                 ClearIcon();
@@ -66,11 +59,10 @@ public class EntrySpecificationsViewModel : ValidatableViewModelBase
 
     private void MarkdownDocumentOnTextChanged(object? sender, EventArgs e)
     {
-        Description = MarkdownDocument.Text;
+        Description = MarkdownDocument?.Text ?? string.Empty;
     }
 
     public ReactiveCommand<Unit, Unit> SelectIcon { get; }
-    public ReactiveCommand<Unit, Unit> OpenMarkdownPreview { get; }
 
     public ObservableCollection<CategoryViewModel> Categories { get; } = new();
     public ObservableCollection<string> Tags { get; } = new();
@@ -139,25 +131,6 @@ public class EntrySpecificationsViewModel : ValidatableViewModelBase
         IconBitmap = BitmapExtensions.LoadAndResize(result[0], 128);
     }
 
-    private void ExecuteOpenMarkdownPreview()
-    {
-        if (_previewWindow != null)
-        {
-            _previewWindow.Activate();
-            return;
-        }
-
-        _previewWindow = _windowService.ShowWindow(out MarkdownPreviewViewModel _, this.WhenAnyValue(vm => vm.Description));
-        _previewWindow.Closed += PreviewWindowOnClosed;
-    }
-
-    private void PreviewWindowOnClosed(object? sender, EventArgs e)
-    {
-        if (_previewWindow != null)
-            _previewWindow.Closed -= PreviewWindowOnClosed;
-        _previewWindow = null;
-    }
-
     private void ClearIcon()
     {
         IconBitmap?.Dispose();

src/Artemis.UI/Screens/Workshop/Entries/Windows/MarkdownPreviewView.axaml

@@ -1,43 +0,0 @@
-<windowing:AppWindow 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:windows="clr-namespace:Artemis.UI.Screens.Workshop.Entries.Windows"
-                     xmlns:windowing="clr-namespace:FluentAvalonia.UI.Windowing;assembly=FluentAvalonia"
-                     xmlns:mdxaml="https://github.com/whistyun/Markdown.Avalonia.Tight"
-                     xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
-                     mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
-                     x:Class="Artemis.UI.Screens.Workshop.Entries.Windows.MarkdownPreviewView"
-                     x:DataType="windows:MarkdownPreviewViewModel"
-                     Icon="/Assets/Images/Logo/application.ico"
-                     Title="Artemis | Markdown Preview"
-                     Width="1200"
-                     Height="800">
-    <Grid RowDefinitions="Auto,*" Margin="15">
-        <StackPanel Grid.Row="0">
-            <TextBlock Theme="{StaticResource TitleTextBlockStyle}">Markdown Previewer</TextBlock>
-            <TextBlock TextWrapping="Wrap" Margin="0 10">
-                <Run>In this window you can preview the Markdown you're writing in the main window of the application.</Run>
-                <LineBreak/>
-                <Run>The preview updates realtime, so it might be a good idea to keep this window visible while you're typing.</Run>
-            </TextBlock>
-        </StackPanel>
-        
-        <controls:HyperlinkButton
-            Grid.Row="0"
-            Content="Learn more about Markdown on the wiki"
-            NavigateUri="https://wiki.artemis-rgb.com/guides/user/markdown?mtm_campaign=artemis&amp;mtm_kwd=markdown-editor"
-            HorizontalAlignment="Right"
-            VerticalAlignment="Top" />
-
-        <Border Grid.Row="1" Classes="card">
-            <mdxaml:MarkdownScrollViewer Markdown="{CompiledBinding Markdown^}" MarkdownStyleName="FluentAvalonia" SaveScrollValueWhenContentUpdated="True">
-                <mdxaml:MarkdownScrollViewer.Styles>
-                    <StyleInclude Source="/Styles/Markdown.axaml" />
-                </mdxaml:MarkdownScrollViewer.Styles>
-            </mdxaml:MarkdownScrollViewer>
-        </Border>
-
-    </Grid>
-
-</windowing:AppWindow>

src/Artemis.UI/Screens/Workshop/Entries/Windows/MarkdownPreviewView.axaml.cs

@@ -1,12 +0,0 @@
-
-using Artemis.UI.Shared;
-
-namespace Artemis.UI.Screens.Workshop.Entries.Windows;
-
-public partial class MarkdownPreviewView : ReactiveAppWindow<MarkdownPreviewViewModel>
-{
-    public MarkdownPreviewView()
-    {
-        InitializeComponent();
-    }
-}

src/Artemis.UI/Screens/Workshop/Entries/Windows/MarkdownPreviewViewModel.cs

@@ -1,21 +0,0 @@
-using System;
-using Artemis.UI.Shared;
-
-namespace Artemis.UI.Screens.Workshop.Entries.Windows;
-
-public class MarkdownPreviewViewModel : ActivatableViewModelBase
-{
-    public event EventHandler? Closed;
-    
-    public IObservable<string> Markdown { get; }
-
-    public MarkdownPreviewViewModel(IObservable<string> markdown)
-    {
-        Markdown = markdown;
-    }
-
-    protected virtual void OnClosed()
-    {
-        Closed?.Invoke(this, EventArgs.Empty);
-    }
-}