Submission wizard - Style tweaks to

Profile details - Started work on side pane

src/Artemis.UI/Screens/ProfileEditor/ProfileEditorView.axaml

@@ -81,7 +81,7 @@
                             </ItemsControl.ItemTemplate>
                         </ItemsControl>
                     </Border>
-                    <ContentControl Grid.Column="1" Content="{CompiledBinding VisualEditorViewModel}" Classes="fade-in"
+                    <ContentControl Grid.Column="1" Content="{CompiledBinding VisualEditorViewModel}" 
                                     IsVisible="{CompiledBinding ProfileConfiguration, Converter={x:Static ObjectConverters.IsNotNull}}" />
                 </Grid>
             </Border>

src/Artemis.UI/Screens/Workshop/Profile/ProfileDetailsView.axaml

@@ -3,18 +3,54 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:profile="clr-namespace:Artemis.UI.Screens.Workshop.Profile"
+             xmlns:avalonia="clr-namespace:Material.Icons.Avalonia;assembly=Material.Icons.Avalonia"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.Screens.Workshop.Profile.ProfileDetailsView"
              x:DataType="profile:ProfileDetailsViewModel">
     <Border Classes="router-container">
         <Grid ColumnDefinitions="300,*" RowDefinitions="Auto,*" Margin="10">
-            <StackPanel Grid.Row="0" Grid.ColumnSpan="2" >
+            <Border Classes="card" Grid.Row="1" Grid.Column="0" Margin="0 0 10 0">
-                <TextBlock Text="{CompiledBinding Entry.Name, FallbackValue=Profile}" Classes="h3 no-margin"/>
+                <StackPanel>
-                <TextBlock Text="{CompiledBinding Entry.Author, FallbackValue=Author}" Classes="subtitle" Margin="0 0 0 5"/>
+                    <Border CornerRadius="12"
-            </StackPanel>
+                            Background="{StaticResource ControlStrokeColorOnAccentDefault}"
-        
+                            HorizontalAlignment="Left"
-            <Border Classes="card-condensed" Grid.Row="1" Grid.Column="0" Margin="0 0 10 0">
+                            Margin="0 0 10 0"
-                <TextBlock>Side panel</TextBlock>
+                            Width="80"
+                            Height="80"
+                            ClipToBounds="True">
+                        <Image Source="{CompiledBinding EntryIcon}"
+                               Stretch="UniformToFill"
+                               Classes="fade-in"
+                               Classes.faded-in="{CompiledBinding EntryIcon, Converter={x:Static ObjectConverters.IsNotNull}}" />
+                    </Border>
+
+                    <TextBlock Theme="{StaticResource TitleTextBlockStyle}" 
+                               MaxLines="3"
+                               TextTrimming="CharacterEllipsis" 
+                               Text="{CompiledBinding Entry.Name, FallbackValue=Title }"/>
+
+                    <TextBlock Classes="subtitle" TextTrimming="CharacterEllipsis" Text="{CompiledBinding Entry.Author, FallbackValue=Author}"/>
+                    
+
+
+                    <TextBlock Margin="0 8" TextWrapping="Wrap" Text="{CompiledBinding Entry.Summary, FallbackValue=Summary}" />
+
+                    <ItemsControl ItemsSource="{CompiledBinding Entry.Categories}" Margin="0 0 -8 0">
+                        <ItemsControl.ItemsPanel>
+                            <ItemsPanelTemplate>
+                                <WrapPanel Orientation="Horizontal"></WrapPanel>
+                            </ItemsPanelTemplate>
+                        </ItemsControl.ItemsPanel>
+                        <ItemsControl.ItemTemplate>
+                            <DataTemplate>
+                                <StackPanel Orientation="Horizontal" Margin="0 0 8 0">
+                                    <avalonia:MaterialIcon Kind="{CompiledBinding Icon}" Margin="0 0 3 0"></avalonia:MaterialIcon>
+                                    <TextBlock Text="{CompiledBinding Name}" TextTrimming="CharacterEllipsis" />
+                                </StackPanel>
+                            </DataTemplate>
+                        </ItemsControl.ItemTemplate>
+                    </ItemsControl>
+                </StackPanel>
             </Border>
 
             <Border Classes="card-condensed" Grid.Row="1" Grid.Column="1">

src/Artemis.UI/Screens/Workshop/Profile/ProfileDetailsViewModel.cs

@@ -5,6 +5,8 @@ using Artemis.UI.Screens.Workshop.Parameters;
 using Artemis.UI.Shared;
 using Artemis.UI.Shared.Routing;
 using Artemis.WebClient.Workshop;
+using Artemis.WebClient.Workshop.Services;
+using Avalonia.Media.Imaging;
 using StrawberryShake;
 
 namespace Artemis.UI.Screens.Workshop.Profile;
@@ -12,11 +14,14 @@ namespace Artemis.UI.Screens.Workshop.Profile;
 public class ProfileDetailsViewModel : RoutableScreen<ActivatableViewModelBase, WorkshopDetailParameters>, IWorkshopViewModel
 {
     private readonly IWorkshopClient _client;
+    private readonly IWorkshopService _workshopService;
     private IGetEntryById_Entry? _entry;
+    private Bitmap? _entryIcon;
 
-    public ProfileDetailsViewModel(IWorkshopClient client)
+    public ProfileDetailsViewModel(IWorkshopClient client, IWorkshopService workshopService)
     {
         _client = client;
+        _workshopService = workshopService;
     }
 
     public EntryType? EntryType => null;
@@ -27,6 +32,12 @@ public class ProfileDetailsViewModel : RoutableScreen<ActivatableViewModelBase,
         set => RaiseAndSetIfChanged(ref _entry, value);
     }
 
+    public Bitmap? EntryIcon
+    {
+        get => _entryIcon;
+        set => RaiseAndSetIfChanged(ref _entryIcon, value);
+    }
+
     public override async Task OnNavigating(WorkshopDetailParameters parameters, NavigationArguments args, CancellationToken cancellationToken)
     {
         await GetEntry(parameters.EntryId, cancellationToken);
@@ -38,6 +49,10 @@ public class ProfileDetailsViewModel : RoutableScreen<ActivatableViewModelBase,
         if (result.IsErrorResult())
             return;
 
+        Bitmap? oldEntryIcon = EntryIcon;
         Entry = result.Data?.Entry;
+        EntryIcon = await _workshopService.GetEntryIcon(entryId, cancellationToken);
+
+        oldEntryIcon?.Dispose();
     }
 }

src/Artemis.UI/Screens/Workshop/SubmissionWizard/Steps/LoginStepView.axaml

@@ -6,7 +6,7 @@
              mc:Ignorable="d" d:DesignWidth="970" d:DesignHeight="625"
              x:Class="Artemis.UI.Screens.Workshop.SubmissionWizard.Steps.LoginStepView"
              x:DataType="steps:LoginStepViewModel">
-    <StackPanel>
+    <StackPanel Margin="0 50 0 0">
         <StackPanel.Styles>
             <Styles>
                 <Style Selector="TextBlock">
@@ -22,10 +22,10 @@
             <Run>Creating an account is free and we'll not bother you with a newsletter or crap like that.</Run>
         </TextBlock>
         
-        <Lottie Path="/Assets/Animations/login-pending.json" RepeatCount="-1" Width="250" Height="250"></Lottie>
+        <Lottie Path="/Assets/Animations/login-pending.json" RepeatCount="1" Width="350" Height="350"></Lottie>
         
         <TextBlock>
-            <Run>Click continue to (create an account) and log in.</Run>
+            <Run>Click Log In below to (create an account) and log in.</Run>
             <LineBreak/>
             <Run>You'll also be able to log in with Google or Discord.</Run>
         </TextBlock>

src/Artemis.UI/Screens/Workshop/SubmissionWizard/Steps/SpecificationsStepView.axaml

@@ -39,18 +39,9 @@
 
                 <Grid ColumnDefinitions="103,*">
                     <StackPanel Grid.Column="0" Width="95">
-                        <DockPanel>
+
-                            <Button DockPanel.Dock="Right"
+                        
-                                    VerticalAlignment="Bottom"
+                        <Label  Target="Name" Margin="0 15 0 0">Icon</Label>
-                                    Classes="icon-button"
-                                    Command="{CompiledBinding ClearIcon}"
-                                    IsVisible="{CompiledBinding IconBitmap, Converter={x:Static ObjectConverters.IsNotNull}}"
-                                    Width="22"
-                                    Height="22">
-                                <avalonia:MaterialIcon Kind="Trash"></avalonia:MaterialIcon>
-                            </Button>
-                            <Label DockPanel.Dock="Left" Target="Name" Margin="0 15 0 0">Icon</Label>
-                        </DockPanel>
 
                         <Button Width="95"
                                 Height="95"
@@ -68,7 +59,17 @@
                                 VerticalAlignment="Center"
                                 Width="95"
                                 Height="95">
-                            <Image Source="{CompiledBinding IconBitmap}" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"></Image>
+                            <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}"

src/Artemis.UI/Screens/Workshop/SubmissionWizard/Steps/SpecificationsStepViewModel.cs

@@ -40,7 +40,6 @@ public class SpecificationsStepViewModel : SubmissionViewModel
         GoBack = ReactiveCommand.Create(ExecuteGoBack);
         Continue = ReactiveCommand.Create(ExecuteContinue, ValidationContext.Valid);
         SelectIcon = ReactiveCommand.CreateFromTask(ExecuteSelectIcon);
-        ClearIcon = ReactiveCommand.Create(ExecuteClearIcon);
 
         this.WhenActivated(d =>
         {
@@ -53,14 +52,13 @@ public class SpecificationsStepViewModel : SubmissionViewModel
             ApplyFromState();
 
             this.ClearValidationRules();
-            Disposable.Create(ExecuteClearIcon).DisposeWith(d);
+            Disposable.Create(ClearIcon).DisposeWith(d);
         });
     }
 
     public override ReactiveCommand<Unit, Unit> Continue { get; }
     public override ReactiveCommand<Unit, Unit> GoBack { get; }
     public ReactiveCommand<Unit, Unit> SelectIcon { get; }
-    public ReactiveCommand<Unit, Unit> ClearIcon { get; }
 
     public ObservableCollection<CategoryViewModel> Categories { get; } = new();
     public ObservableCollection<string> Tags { get; } = new();
@@ -141,7 +139,7 @@ public class SpecificationsStepViewModel : SubmissionViewModel
         IconBitmap = BitmapExtensions.LoadAndResize(result[0], 128);
     }
 
-    private void ExecuteClearIcon()
+    private void ClearIcon()
     {
         IconBitmap?.Dispose();
         IconBitmap = null;

src/Artemis.UI/Screens/Workshop/SubmissionWizard/Steps/ValidateEmailStepView.axaml

@@ -7,7 +7,7 @@
              mc:Ignorable="d" d:DesignWidth="970" d:DesignHeight="625"
              x:Class="Artemis.UI.Screens.Workshop.SubmissionWizard.Steps.ValidateEmailStepView"
              x:DataType="steps:ValidateEmailStepViewModel">
-    <StackPanel >
+    <StackPanel Margin="0 50 0 0">
         <StackPanel.Styles>
             <Styles>
                 <Style Selector="TextBlock">

src/Artemis.WebClient.Workshop/Queries/GetEntryById.graphql

@@ -1,7 +1,16 @@
 query GetEntryById($id: UUID!) {
     entry(id: $id) {
+        id
         author
         name
+        summary
         entryType
+        downloads
+        createdAt
+        description
+        categories {
+            name
+            icon
+        }
     }
 }