Improve UI

DiscordChatExporter.Gui/App.xaml

@@ -77,11 +77,6 @@
                 Color="{DynamicResource InverseTextColor}" />
 
             <!--  Styles  -->
-            <Style TargetType="{x:Type Image}">
-                <Setter Property="RenderOptions.BitmapScalingMode" Value="HighQuality" />
-                <Setter Property="RenderOptions.EdgeMode" Value="Aliased" />
-            </Style>
-
             <Style BasedOn="{StaticResource MaterialDesignLinearProgressBar}" TargetType="{x:Type ProgressBar}">
                 <Setter Property="BorderThickness" Value="0" />
                 <Setter Property="Foreground" Value="{DynamicResource SecondaryAccentBrush}" />
@@ -102,6 +97,17 @@
                 <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}" />
             </Style>
 
+            <Style
+                x:Key="MaterialDesignFlatDarkButton"
+                BasedOn="{StaticResource MaterialDesignFlatButton}"
+                TargetType="{x:Type Button}">
+                <Style.Resources>
+                    <SolidColorBrush x:Key="MaterialDesignFlatButtonClick" Color="#4C4C4C" />
+                </Style.Resources>
+
+                <Setter Property="Foreground" Value="{DynamicResource PrimaryHueMidForegroundBrush}" />
+            </Style>
+
             <Style
                 x:Key="MaterialDesignFlatActionToggleButton"
                 BasedOn="{StaticResource MaterialDesignActionToggleButton}"
@@ -116,7 +122,6 @@
                     </Trigger>
                 </Style.Triggers>
             </Style>
-
         </s:ApplicationLoader>
     </Application.Resources>
 </Application>

DiscordChatExporter.Gui/ViewModels/RootViewModel.cs

@@ -1,6 +1,5 @@
 using System;
 using System.Collections.Generic;
-using System.Diagnostics;
 using System.Linq;
 using System.Net;
 using System.Reflection;
@@ -112,11 +111,6 @@ namespace DiscordChatExporter.Gui.ViewModels
             await _dialogManager.ShowDialogAsync(dialog);
         }
 
-        public void ShowAbout()
-        {
-            Process.Start("https://github.com/Tyrrrz/DiscordChatExporter");
-        }
-
         public bool CanPopulateGuildsAndChannels => IsEnabled && TokenValue.IsNotBlank();
 
         public async void PopulateGuildsAndChannels()

DiscordChatExporter.Gui/Views/Dialogs/ExportSetupView.xaml

@@ -10,6 +10,7 @@
     xmlns:s="https://github.com/canton7/Stylet"
     Width="380"
     d:DataContext="{d:DesignInstance Type=dialogs:ExportSetupViewModel}"
+    RenderOptions.BitmapScalingMode="HighQuality"
     SnapsToDevicePixels="True"
     TextElement.FontSize="13"
     TextElement.FontWeight="Regular"

DiscordChatExporter.Gui/Views/Dialogs/SettingsView.xaml

@@ -9,6 +9,7 @@
     xmlns:s="https://github.com/canton7/Stylet"
     Width="300"
     d:DataContext="{d:DesignInstance Type=dialogs:SettingsViewModel}"
+    RenderOptions.BitmapScalingMode="HighQuality"
     SnapsToDevicePixels="True"
     TextElement.FontSize="13"
     TextElement.FontWeight="Regular"

DiscordChatExporter.Gui/Views/RootView.xaml

@@ -15,6 +15,7 @@
     FocusManager.FocusedElement="{Binding ElementName=TokenValueTextBox}"
     FontFamily="{DynamicResource MaterialDesignFont}"
     Icon="/DiscordChatExporter;component/favicon.ico"
+    RenderOptions.BitmapScalingMode="HighQuality"
     SnapsToDevicePixels="True"
     TextElement.FontSize="13"
     TextElement.FontWeight="Regular"
@@ -24,7 +25,7 @@
     UseLayoutRounding="True"
     WindowStartupLocation="CenterScreen"
     mc:Ignorable="d">
-    <materialDesign:DialogHost CloseOnClickAway="True" SnackbarMessageQueue="{Binding Notifications}">
+    <materialDesign:DialogHost SnackbarMessageQueue="{Binding Notifications}">
         <Grid>
             <Grid.RowDefinitions>
                 <RowDefinition Height="Auto" />
@@ -43,6 +44,8 @@
                     <ColumnDefinition Width="*" />
                     <ColumnDefinition Width="Auto" />
                 </Grid.ColumnDefinitions>
+
+                <!--  Token and pull data button  -->
                 <materialDesign:Card
                     Grid.Row="0"
                     Grid.Column="0"
@@ -103,17 +106,18 @@
                     </Grid>
                 </materialDesign:Card>
 
-                <!--  Menu  -->
-                <materialDesign:PopupBox
-                    Grid.Row="0"
+                <!--  Settings button  -->
+                <Button
                     Grid.Column="1"
-                    Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"
-                    PlacementMode="LeftAndAlignTopEdges">
-                    <StackPanel>
-                        <Button Command="{s:Action ShowSettings}" Content="Settings" />
-                        <Button Command="{s:Action ShowAbout}" Content="About" />
-                    </StackPanel>
-                </materialDesign:PopupBox>
+                    Margin="6"
+                    Padding="4"
+                    Command="{s:Action ShowSettings}"
+                    Style="{DynamicResource MaterialDesignFlatDarkButton}">
+                    <materialDesign:PackIcon
+                        Width="24"
+                        Height="24"
+                        Kind="Settings" />
+                </Button>
             </Grid>
 
             <!--  Progress bar  -->
@@ -125,7 +129,7 @@
 
             <!--  Content  -->
             <Grid Grid.Row="2">
-                <!--  Placeholder usage instructions  -->
+                <!--  Placeholder / usage instructions  -->
                 <Grid Margin="32,32,8,8" Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
                     <!--  For user token  -->
                     <StackPanel Visibility="{Binding IsBotToken, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
@@ -207,14 +211,29 @@
                         <ListBox
                             ItemsSource="{Binding AvailableGuilds}"
                             ScrollViewer.VerticalScrollBarVisibility="Hidden"
-                            SelectedItem="{Binding SelectedGuild}"
-                            VirtualizingStackPanel.IsVirtualizing="False">
+                            SelectedItem="{Binding SelectedGuild}">
+                            <ListBox.ItemContainerStyle>
+                                <Style BasedOn="{StaticResource {x:Type ListBoxItem}}" TargetType="{x:Type ListBoxItem}">
+                                    <Style.Triggers>
+                                        <EventTrigger RoutedEvent="Loaded">
+                                            <EventTrigger.Actions>
+                                                <BeginStoryboard>
+                                                    <Storyboard>
+                                                        <DoubleAnimation
+                                                            Storyboard.TargetProperty="Opacity"
+                                                            From="0"
+                                                            To="1"
+                                                            Duration="0:0:0.4" />
+                                                    </Storyboard>
+                                                </BeginStoryboard>
+                                            </EventTrigger.Actions>
+                                        </EventTrigger>
+                                    </Style.Triggers>
+                                </Style>
+                            </ListBox.ItemContainerStyle>
+
                             <ListBox.ItemTemplate>
                                 <DataTemplate>
-                                    <materialDesign:TransitioningContent>
-                                        <materialDesign:TransitioningContent.OpeningEffect>
-                                            <materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:0.3" />
-                                        </materialDesign:TransitioningContent.OpeningEffect>
                                     <Grid
                                         Margin="-8"
                                         Background="Transparent"
@@ -237,7 +256,6 @@
                                             </Ellipse.Fill>
                                         </Ellipse>
                                     </Grid>
-                                    </materialDesign:TransitioningContent>
                                 </DataTemplate>
                             </ListBox.ItemTemplate>
                         </ListBox>
@@ -245,16 +263,29 @@
 
                     <!--  Channels  -->
                     <Border Grid.Column="1">
-                        <ListBox
-                            HorizontalContentAlignment="Stretch"
-                            ItemsSource="{Binding AvailableChannels}"
-                            VirtualizingStackPanel.IsVirtualizing="False">
+                        <ListBox HorizontalContentAlignment="Stretch" ItemsSource="{Binding AvailableChannels}">
+                            <ListBox.ItemContainerStyle>
+                                <Style BasedOn="{StaticResource {x:Type ListBoxItem}}" TargetType="{x:Type ListBoxItem}">
+                                    <Style.Triggers>
+                                        <EventTrigger RoutedEvent="Loaded">
+                                            <EventTrigger.Actions>
+                                                <BeginStoryboard>
+                                                    <Storyboard>
+                                                        <DoubleAnimation
+                                                            Storyboard.TargetProperty="Opacity"
+                                                            From="0"
+                                                            To="1"
+                                                            Duration="0:0:0.4" />
+                                                    </Storyboard>
+                                                </BeginStoryboard>
+                                            </EventTrigger.Actions>
+                                        </EventTrigger>
+                                    </Style.Triggers>
+                                </Style>
+                            </ListBox.ItemContainerStyle>
+
                             <ListBox.ItemTemplate>
                                 <DataTemplate>
-                                    <materialDesign:TransitioningContent>
-                                        <materialDesign:TransitioningContent.OpeningEffect>
-                                            <materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:0.3" />
-                                        </materialDesign:TransitioningContent.OpeningEffect>
                                     <StackPanel
                                         Margin="-8"
                                         Background="Transparent"
@@ -276,7 +307,6 @@
                                             FontSize="14"
                                             Text="{Binding Name}" />
                                     </StackPanel>
-                                    </materialDesign:TransitioningContent>
                                 </DataTemplate>
                             </ListBox.ItemTemplate>
                         </ListBox>