UX improvements

SuperJMN · Oct 18, 2023 · 89d4272 · 89d4272
1 parent bfcd38f
commit 89d4272
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 21 deletions.
diff --git a/src/AvaloniaSyncer/ExplorerSectionViewModelDesign.cs b/src/AvaloniaSyncer/ExplorerSectionViewModelDesign.cs
@@ -0,0 +1,35 @@
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Reactive;
+using AvaloniaSyncer.Sections.Explorer;
+using AvaloniaSyncer.Sections.Explorer.FileSystemConnections.Serialization;
+using CSharpFunctionalExtensions;
+using ReactiveUI;
+using Zafiro.FileSystem;
+
+namespace AvaloniaSyncer;
+
+public class ExplorerSectionViewModelDesign : IExplorerSectionViewModel
+{
+    public ExplorerSectionViewModelDesign()
+    {
+        Connections = new ReadOnlyObservableCollection<IFileSystemConnectionViewModel>(new ObservableCollection<IFileSystemConnectionViewModel>(new List<IFileSystemConnectionViewModel>()
+        {
+            (IFileSystemConnectionViewModel)new FileSystemConnectionDesign("Test1"),
+            (IFileSystemConnectionViewModel)new FileSystemConnectionDesign("Test2"),
+        }));
+    }
+
+    public ReadOnlyObservableCollection<IFileSystemConnectionViewModel> Connections { get; }
+}
+
+public class FileSystemConnectionDesign : IFileSystemConnectionViewModel
+{
+    public FileSystemConnectionDesign(string name)
+    {
+        Name = name;
+    }
+
+    public ReactiveCommand<Unit, Result<IFileSystem>> Load { get; set; }
+    public string Name { get; }
+}
diff --git a/src/AvaloniaSyncer/Sections/Explorer/ExplorerSectionView.axaml b/src/AvaloniaSyncer/Sections/Explorer/ExplorerSectionView.axaml
@@ -3,21 +3,40 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:explorer="clr-namespace:AvaloniaSyncer.Sections.Explorer"
+             xmlns:avaloniaSyncer="clr-namespace:AvaloniaSyncer"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="AvaloniaSyncer.Sections.Explorer.ExplorerSectionView"
-             x:DataType="explorer:ExplorerSectionViewModel">
+             x:DataType="explorer:IExplorerSectionViewModel">
 
-    <TabControl ItemsSource="{Binding Connections}">
-        <TabControl.ItemTemplate>
-            <DataTemplate DataType="explorer:FileSystemConnectionViewModel">
-                <TextBlock Text="{Binding Name}" />
-            </DataTemplate>
-        </TabControl.ItemTemplate>
-        <TabControl.ContentTemplate>
-            <DataTemplate DataType="explorer:FileSystemConnectionViewModel">
-                <ContentControl Content="{Binding}" />
-            </DataTemplate>
-        </TabControl.ContentTemplate>
-    </TabControl>
+	<Design.DataContext>
+		<avaloniaSyncer:ExplorerSectionViewModelDesign />
+	</Design.DataContext>
+
+	<UserControl.Resources>
+		<SolidColorBrush x:Key="BorderBrush" Opacity="0.4" Color="{StaticResource SystemChromeAltLowColor}"></SolidColorBrush>
+    </UserControl.Resources>
+
+	<UserControl.Styles>
+		<Style Selector="TabItem">
+			<Setter Property="MinHeight" Value="27" />
+			<Setter Property="TextElement.FontSize" Value="16" />
+			<Setter Property="BorderBrush" Value="{StaticResource BorderBrush}" />
+            <Setter Property="BorderThickness" Value="1 1 1 1" />
+
+		</Style>
+	</UserControl.Styles>
+
+	<TabControl Padding="0" ItemsSource="{Binding Connections}" TabStripPlacement="Top">
+		<TabControl.ItemTemplate>
+			<DataTemplate DataType="explorer:IFileSystemConnectionViewModel">
+				<TextBlock Text="{Binding Name}" />
+			</DataTemplate>
+		</TabControl.ItemTemplate>
+		<TabControl.ContentTemplate>
+			<DataTemplate DataType="explorer:IFileSystemConnectionViewModel">
+				<ContentControl Padding="8" BorderBrush="{StaticResource SystemControlBackgroundBaseHighBrush}" Content="{Binding}" />
+			</DataTemplate>
+		</TabControl.ContentTemplate>
+	</TabControl>
 
 </UserControl>
diff --git a/src/AvaloniaSyncer/Sections/Explorer/ExplorerSectionViewModel.cs b/src/AvaloniaSyncer/Sections/Explorer/ExplorerSectionViewModel.cs
@@ -12,18 +12,23 @@
 
 namespace AvaloniaSyncer.Sections.Explorer;
 
-public class ExplorerSectionViewModel : ReactiveObject
+public interface IExplorerSectionViewModel
 {
-    private readonly ReadOnlyObservableCollection<FileSystemConnectionViewModel> connections;
+    ReadOnlyObservableCollection<IFileSystemConnectionViewModel> Connections { get; }
+}
+
+public class ExplorerSectionViewModel : ReactiveObject, IExplorerSectionViewModel
+{
+    private readonly ReadOnlyObservableCollection<IFileSystemConnectionViewModel> connections;
 
     public ExplorerSectionViewModel(IConnectionsRepository repository, INotificationService notificationService, IClipboard clipboard, ITransferManager transferManager, Maybe<ILogger> logger)
     {
         repository.Connections
             .ToObservableChangeSet(x => x.Name)
-            .Transform(connection => new FileSystemConnectionViewModel(connection, notificationService, clipboard, transferManager))
+            .Transform(connection => (IFileSystemConnectionViewModel)new FileSystemConnectionViewModel(connection, notificationService, clipboard, transferManager))
             .Bind(out connections)
             .Subscribe();
     }
 
-    public ReadOnlyObservableCollection<FileSystemConnectionViewModel> Connections => connections;
+    public ReadOnlyObservableCollection<IFileSystemConnectionViewModel> Connections => connections;
 }
diff --git a/src/AvaloniaSyncer/Sections/Explorer/FileSystemConnectionView.axaml b/src/AvaloniaSyncer/Sections/Explorer/FileSystemConnectionView.axaml
@@ -10,7 +10,7 @@
              x:DataType="explorer:FileSystemConnectionViewModel">
     <DockPanel>
       <Button IsVisible="False" Content="Load" DockPanel.Dock="Top" Command="{Binding Load}" />
-      <ContentControl Margin="0 12" Content="{Binding FileSystemExplorer}">
+      <ContentControl Margin="0" Content="{Binding FileSystemExplorer}">
           <ContentControl.ContentTemplate>
               <DataTemplate DataType="explorer1:FileSystemExplorer">
                   <Panel>

diff --git a/src/AvaloniaSyncer/Sections/Explorer/FileSystemConnectionViewModel.cs b/src/AvaloniaSyncer/Sections/Explorer/FileSystemConnectionViewModel.cs
@@ -12,7 +12,13 @@
 
 namespace AvaloniaSyncer.Sections.Explorer;
 
-public class FileSystemConnectionViewModel : ReactiveObject
+public interface IFileSystemConnectionViewModel
+{
+    ReactiveCommand<Unit, Result<IFileSystem>> Load { get; set; }
+    string Name { get; }
+}
+
+public class FileSystemConnectionViewModel : ReactiveObject, IFileSystemConnectionViewModel
 {
     private readonly IFileSystemConnection connection;
     private readonly ObservableAsPropertyHelper<IFileSystemExplorer> explorer;

diff --git a/src/AvaloniaSyncer/ViewModels/MainViewModel.cs b/src/AvaloniaSyncer/ViewModels/MainViewModel.cs
@@ -13,7 +13,6 @@ public class MainViewModel : ReactiveObject
     public MainViewModel(Func<Task<IEnumerable<Section>>> sectionsFactory)
     {
         LoadSections = ReactiveCommand.CreateFromTask(sectionsFactory);
-        LoadSections.ThrownExceptions.Subscribe(exception => { });
         sectionsHelper = LoadSections.ToProperty(this, x => x.Sections);
     }
 

diff --git a/src/AvaloniaSyncer/Views/MainView.axaml b/src/AvaloniaSyncer/Views/MainView.axaml
@@ -8,7 +8,7 @@
              x:Class="AvaloniaSyncer.Views.MainView"
              x:DataType="vm:MainViewModel">
 
-    <controls:MasterDetailsView ItemsSource="{Binding Sections}">
+    <controls:MasterDetailsView ItemsSource="{Binding Sections}" MasterPaneWidth="120">
         <controls:MasterDetailsView.ItemTemplate>
             <DataTemplate x:DataType="vm:Section">
                 <TextBlock Text="{Binding Name}" />