Improve UX of ExportSetupDialog

Closes #11

DiscordChatExporter/Views/ExportSetupDialog.ammy

@@ -1,8 +1,9 @@
-using MaterialDesignThemes.Wpf
+using DiscordChatExporter.Models
+using MaterialDesignThemes.Wpf
 
 UserControl "DiscordChatExporter.Views.ExportSetupDialog" {
   DataContext: bind ExportSetupViewModel from $resource Container
-  Width: 350
+  Width: 325
 
   StackPanel {
     // File path
@@ -15,13 +16,29 @@ UserControl "DiscordChatExporter.Views.ExportSetupDialog" {
             set [ UpdateSourceTrigger: PropertyChanged ]
     }
 
+    // Format
+    ComboBox {
+      Margin: "16 8 16 8"
+      HintAssist.Hint: "Export format"
+      HintAssist.IsFloating: true
+      IsReadOnly: true
+      ItemsSource: bind AvailableFormats
+      ItemTemplate: DataTemplate {
+        TextBlock {
+          Text: bind
+                convert (ExportFormat f) => Extensions.GetDisplayName(f)
+        }
+      }
+      SelectedItem: bind SelectedFormat
+    }
+
     // Date range
     Grid {
       #TwoColumns("*", "*")
 
       DatePicker {
         Grid.Column: 0
-        Margin: "16 16 8 8"
+        Margin: "16 20 8 8"
         HintAssist.Hint: "From"
         HintAssist.IsFloating: true
         SelectedDate: bind From
@@ -29,7 +46,7 @@ UserControl "DiscordChatExporter.Views.ExportSetupDialog" {
 
       DatePicker {
         Grid.Column: 1
-        Margin: "8 16 16 8"
+        Margin: "8 20 16 8"
         HintAssist.Hint: "To"
         HintAssist.IsFloating: true
         SelectedDate: bind To
@@ -40,6 +57,14 @@ UserControl "DiscordChatExporter.Views.ExportSetupDialog" {
     @StackPanelHorizontal {
       HorizontalAlignment: Right
 
+      // Browse
+      Button "BrowseButton" {
+        Click: BrowseButton_Click
+        Content: "BROWSE"
+        Margin: 8
+        Style: resource dyn "MaterialDesignFlatButton"
+      }
+
       // Export
       Button "ExportButton" {
         Click: ExportButton_Click
@@ -49,14 +74,6 @@ UserControl "DiscordChatExporter.Views.ExportSetupDialog" {
         Style: resource dyn "MaterialDesignFlatButton"
       }
 
-      // Browse
-      Button "BrowseButton" {
-        Click: BrowseButton_Click
-        Content: "BROWSE"
-        Margin: 8
-        Style: resource dyn "MaterialDesignFlatButton"
-      }
-
       // Cancel
       Button {
         Command: DialogHost.CloseDialogCommand

DiscordChatExporter/Views/ExportSetupDialog.ammy.cs

@@ -1,10 +1,8 @@
-using System.Collections.Generic;
-using System.Windows;
+using System.Windows;
 using DiscordChatExporter.Models;
 using DiscordChatExporter.ViewModels;
 using MaterialDesignThemes.Wpf;
 using Microsoft.Win32;
-using Tyrrrz.Extensions;
 
 namespace DiscordChatExporter.Views
 {
@@ -17,39 +15,30 @@ namespace DiscordChatExporter.Views
             InitializeComponent();
         }
 
-        private string GetFilter()
+        public void BrowseButton_Click(object sender, RoutedEventArgs args)
         {
-            var filters = new List<string>();
-            foreach (var format in ViewModel.AvailableFormats)
-            {
-                var ext = format.GetFileExtension();
-                filters.Add($"{format} (*.{ext})|*.{ext}");
-            }
+            // Get file extension of the selected format
+            var ext = ViewModel.SelectedFormat.GetFileExtension();
 
-            return filters.JoinToString("|");
+            // Open dialog
+            var sfd = new SaveFileDialog
+            {
+                FileName = ViewModel.FilePath,
+                Filter = $"{ext.ToUpperInvariant()} Files|*.{ext}|All Files|*.*",
+                AddExtension = true,
+                Title = "Select output file"
+            };
+
+            // Assign new file path if dialog was successful
+            if (sfd.ShowDialog() == true)
+            {
+                ViewModel.FilePath = sfd.FileName;
+            }
         }
 
         public void ExportButton_Click(object sender, RoutedEventArgs args)
         {
             DialogHost.CloseDialogCommand.Execute(null, null);
         }
-
-        public void BrowseButton_Click(object sender, RoutedEventArgs args)
-        {
-            var sfd = new SaveFileDialog
-            {
-                FileName = ViewModel.FilePath,
-                Filter = GetFilter(),
-                FilterIndex = ViewModel.AvailableFormats.IndexOf(ViewModel.SelectedFormat) + 1,
-                AddExtension = true,
-                Title = "Select output file"
-            };
-
-            if (sfd.ShowDialog() == true)
-            {
-                ViewModel.FilePath = sfd.FileName;
-                ViewModel.SelectedFormat = ViewModel.AvailableFormats[sfd.FilterIndex - 1];
-            }
-        }
     }
 }

DiscordChatExporter/Views/MainWindow.ammy

@@ -46,6 +46,8 @@ Window "DiscordChatExporter.Views.MainWindow" {
                   FontSize: 16
                   Text: bind Token
                         set [ UpdateSourceTrigger: PropertyChanged ]
+                  TextFieldAssist.DecorationVisibility: Hidden
+                  TextFieldAssist.TextBoxViewMargin: "0 0 2 0"
                 }
 
                 // Submit

DiscordChatExporter/Views/SettingsDialog.ammy

@@ -5,19 +5,9 @@ UserControl "DiscordChatExporter.Views.SettingsDialog" {
   Width: 250
 
   StackPanel {
-    // Theme
-    ComboBox {
-      Margin: "16 16 16 8"
-      HintAssist.Hint: "Theme"
-      HintAssist.IsFloating: true
-      IsReadOnly: true
-      ItemsSource: bind AvailableThemes
-      SelectedItem: bind Theme
-    }
-
     // Date format
     TextBox {
-      Margin: "16 8 16 8"
+      Margin: "16 16 16 8"
       HintAssist.Hint: "Date format"
       HintAssist.IsFloating: true
       Text: bind DateFormat