Improve GUI

This commit is contained in:
Tyrrrz
2021-12-14 01:26:59 +02:00
parent 008bb2f591
commit 4389b4e0bc
6 changed files with 649 additions and 249 deletions

View File

@@ -1,20 +1,26 @@
<UserControl
Style="{DynamicResource MaterialDesignRoot}"
Width="380"
d:DataContext="{d:DesignInstance Type=dialogs:ExportSetupViewModel}"
mc:Ignorable="d"
x:Class="DiscordChatExporter.Gui.Views.Dialogs.ExportSetupView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:converters="clr-namespace:DiscordChatExporter.Gui.Converters"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dialogs="clr-namespace:DiscordChatExporter.Gui.ViewModels.Dialogs"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:s="https://github.com/canton7/Stylet"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
Width="380"
d:DataContext="{d:DesignInstance Type=dialogs:ExportSetupViewModel}"
Style="{DynamicResource MaterialDesignRoot}"
mc:Ignorable="d">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Guild/channel info -->
<Grid Margin="16">
<Grid Grid.Row="0" Margin="16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
@@ -23,8 +29,8 @@
<!-- Guild icon -->
<Ellipse
Grid.Column="0"
Height="32"
Width="32">
Width="32"
Height="32">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding Guild.IconUrl}" />
</Ellipse.Fill>
@@ -32,11 +38,12 @@
<!-- Placeholder (for multiple channels) -->
<TextBlock
FontSize="19"
Grid.Column="1"
Margin="8,0,0,0"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center"
FontSize="19"
FontWeight="Light"
TextTrimming="CharacterEllipsis"
Visibility="{Binding IsSingleChannel, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
<Run Text="{Binding Channels.Count, Mode=OneWay}" />
<Run Text="channels selected" />
@@ -44,12 +51,12 @@
<!-- Category and channel name (for single channel) -->
<TextBlock
FontSize="19"
FontWeight="Light"
Grid.Column="1"
Margin="8,0,0,0"
TextTrimming="CharacterEllipsis"
VerticalAlignment="Center"
FontSize="19"
FontWeight="Light"
TextTrimming="CharacterEllipsis"
Visibility="{Binding IsSingleChannel, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
<Run Text="{Binding Channels[0].Category.Name, Mode=OneWay}" ToolTip="{Binding Channels[0].Category.Name, Mode=OneWay}" />
<Run Text="/" />
@@ -60,108 +67,126 @@
</TextBlock>
</Grid>
<!-- Format -->
<ComboBox
IsReadOnly="True"
ItemsSource="{Binding AvailableFormats}"
Margin="16,8"
SelectedItem="{Binding SelectedFormat}"
materialDesign:HintAssist.Hint="Format"
materialDesign:HintAssist.IsFloating="True">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Converter={x:Static converters:ExportFormatToStringConverter.Instance}}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<Border
Grid.Row="1"
Padding="0,8"
BorderBrush="{DynamicResource MaterialDesignDivider}"
BorderThickness="0,1">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<StackPanel>
<!-- Format -->
<ComboBox
Margin="16,8"
materialDesign:HintAssist.Hint="Format"
materialDesign:HintAssist.IsFloating="True"
IsReadOnly="True"
ItemsSource="{Binding AvailableFormats}"
SelectedItem="{Binding SelectedFormat}"
Style="{DynamicResource MaterialDesignOutlinedComboBox}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Converter={x:Static converters:ExportFormatToStringConverter.Instance}}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!-- Advanced section -->
<StackPanel Visibility="{Binding IsChecked, ElementName=AdvancedSectionToggleButton, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
<!-- Date limits -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DatePicker
DisplayDateEnd="{Binding BeforeDate, Converter={x:Static converters:DateTimeOffsetToDateTimeConverter.Instance}}"
Grid.Column="0"
Grid.Row="0"
Margin="16,8,16,4"
SelectedDate="{Binding AfterDate, Converter={x:Static converters:DateTimeOffsetToDateTimeConverter.Instance}}"
ToolTip="Only include messages sent after this date"
materialDesign:HintAssist.Hint="After (date)"
materialDesign:HintAssist.IsFloating="True" />
<DatePicker
DisplayDateStart="{Binding AfterDate, Converter={x:Static converters:DateTimeOffsetToDateTimeConverter.Instance}}"
Grid.Column="1"
Grid.Row="0"
Margin="16,8,16,4"
SelectedDate="{Binding BeforeDate, Converter={x:Static converters:DateTimeOffsetToDateTimeConverter.Instance}}"
ToolTip="Only include messages sent before this date"
materialDesign:HintAssist.Hint="Before (date)"
materialDesign:HintAssist.IsFloating="True" />
<materialDesign:TimePicker
Grid.Column="0"
Grid.Row="1"
IsEnabled="{Binding IsAfterDateSet}"
Margin="16,4,16,8"
SelectedTime="{Binding AfterTime, Converter={x:Static converters:TimeSpanToDateTimeConverter.Instance}}"
ToolTip="Only include messages sent after this time"
materialDesign:HintAssist.Hint="After (time)"
materialDesign:HintAssist.IsFloating="True" />
<materialDesign:TimePicker
Grid.Column="1"
Grid.Row="1"
IsEnabled="{Binding IsBeforeDateSet}"
Margin="16,4,16,8"
SelectedTime="{Binding BeforeTime, Converter={x:Static converters:TimeSpanToDateTimeConverter.Instance}}"
ToolTip="Only include messages sent before this time"
materialDesign:HintAssist.Hint="Before (time)"
materialDesign:HintAssist.IsFloating="True" />
</Grid>
<!-- Advanced section -->
<StackPanel Visibility="{Binding IsAdvancedSectionDisplayed, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
<!-- Partitioning -->
<TextBox
Margin="16,8"
Text="{Binding PartitionLimitValue}"
ToolTip="Split output into partitions, each limited to this number of messages (e.g. '100') or file size (e.g. '10mb')"
materialDesign:HintAssist.Hint="Partition limit"
materialDesign:HintAssist.IsFloating="True" />
<!-- Date limits -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<DatePicker
Grid.Row="0"
Grid.Column="0"
Margin="16,8,16,4"
materialDesign:HintAssist.Hint="After (date)"
materialDesign:HintAssist.IsFloating="True"
DisplayDateEnd="{Binding BeforeDate, Converter={x:Static converters:DateTimeOffsetToDateTimeConverter.Instance}}"
SelectedDate="{Binding AfterDate, Converter={x:Static converters:DateTimeOffsetToDateTimeConverter.Instance}}"
Style="{DynamicResource MaterialDesignOutlinedDatePicker}"
ToolTip="Only include messages sent after this date" />
<DatePicker
Grid.Row="0"
Grid.Column="1"
Margin="16,8,16,4"
materialDesign:HintAssist.Hint="Before (date)"
materialDesign:HintAssist.IsFloating="True"
DisplayDateStart="{Binding AfterDate, Converter={x:Static converters:DateTimeOffsetToDateTimeConverter.Instance}}"
SelectedDate="{Binding BeforeDate, Converter={x:Static converters:DateTimeOffsetToDateTimeConverter.Instance}}"
Style="{DynamicResource MaterialDesignOutlinedDatePicker}"
ToolTip="Only include messages sent before this date" />
<materialDesign:TimePicker
Grid.Row="1"
Grid.Column="0"
Margin="16,4,16,8"
materialDesign:HintAssist.Hint="After (time)"
materialDesign:HintAssist.IsFloating="True"
IsEnabled="{Binding IsAfterDateSet}"
SelectedTime="{Binding AfterTime, Converter={x:Static converters:TimeSpanToDateTimeConverter.Instance}}"
Style="{DynamicResource MaterialDesignOutlinedTimePicker}"
ToolTip="Only include messages sent after this time" />
<materialDesign:TimePicker
Grid.Row="1"
Grid.Column="1"
Margin="16,4,16,8"
materialDesign:HintAssist.Hint="Before (time)"
materialDesign:HintAssist.IsFloating="True"
IsEnabled="{Binding IsBeforeDateSet}"
SelectedTime="{Binding BeforeTime, Converter={x:Static converters:TimeSpanToDateTimeConverter.Instance}}"
Style="{DynamicResource MaterialDesignOutlinedTimePicker}"
ToolTip="Only include messages sent before this time" />
</Grid>
<!-- Filtering -->
<TextBox
Margin="16,8"
Text="{Binding MessageFilterValue}"
ToolTip="Only include messages that satisfy this filter (e.g. 'from:foo#1234' or 'has:image')."
materialDesign:HintAssist.Hint="Message filter"
materialDesign:HintAssist.IsFloating="True" />
<!-- Partitioning -->
<TextBox
Margin="16,8"
materialDesign:HintAssist.Hint="Partition limit"
materialDesign:HintAssist.IsFloating="True"
Style="{DynamicResource MaterialDesignOutlinedTextBox}"
Text="{Binding PartitionLimitValue}"
ToolTip="Split output into partitions, each limited to this number of messages (e.g. '100') or file size (e.g. '10mb')" />
<!-- Download media -->
<Grid Margin="16,16" ToolTip="Download referenced media content (user avatars, attached files, embedded images, etc)">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- Filtering -->
<TextBox
Margin="16,8"
materialDesign:HintAssist.Hint="Message filter"
materialDesign:HintAssist.IsFloating="True"
Style="{DynamicResource MaterialDesignOutlinedTextBox}"
Text="{Binding MessageFilterValue}"
ToolTip="Only include messages that satisfy this filter (e.g. 'from:foo#1234' or 'has:image')." />
<TextBlock
Grid.Column="0"
Text="Download media"
VerticalAlignment="Center" />
<ToggleButton
Grid.Column="1"
HorizontalAlignment="Right"
IsChecked="{Binding ShouldDownloadMedia}"
VerticalAlignment="Center" />
</Grid>
</StackPanel>
<!-- Download media -->
<Grid Margin="16,16" ToolTip="Download referenced media content (user avatars, attached files, embedded images, etc)">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
VerticalAlignment="Center"
Text="Download media" />
<ToggleButton
Grid.Column="1"
HorizontalAlignment="Right"
VerticalAlignment="Center"
IsChecked="{Binding ShouldDownloadMedia}" />
</Grid>
</StackPanel>
</StackPanel>
</ScrollViewer>
</Border>
<!-- Buttons -->
<Grid>
<Grid Grid.Row="2" Margin="16">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
@@ -169,31 +194,38 @@
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<ToggleButton
Cursor="Hand"
<Button
Grid.Column="0"
Height="24"
IsChecked="{Binding IsAdvancedSectionDisplayedByDefault, Mode=OneTime}"
Margin="12"
Style="{DynamicResource MaterialDesignHamburgerToggleButton}"
ToolTip="Toggle advanced options"
Width="24"
x:Name="AdvancedSectionToggleButton" />
Command="{s:Action ToggleAdvancedSection}"
IsDefault="True"
ToolTip="Toggle advanced options">
<Button.Style>
<Style BasedOn="{StaticResource MaterialDesignOutlinedButton}" TargetType="{x:Type Button}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsAdvancedSectionDisplayed}" Value="False">
<Setter Property="Content" Value="MORE" />
</DataTrigger>
<DataTrigger Binding="{Binding IsAdvancedSectionDisplayed}" Value="True">
<Setter Property="Content" Value="LESS" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
<Button
Grid.Column="2"
Command="{s:Action Confirm}"
Content="EXPORT"
Grid.Column="2"
IsDefault="True"
Margin="8"
Style="{DynamicResource MaterialDesignFlatButton}" />
Style="{DynamicResource MaterialDesignOutlinedButton}" />
<Button
Grid.Column="3"
Margin="8,0,0,0"
Command="{s:Action Close}"
Content="CANCEL"
Grid.Column="3"
IsCancel="True"
Margin="8"
Style="{DynamicResource MaterialDesignFlatButton}" />
Style="{DynamicResource MaterialDesignOutlinedButton}" />
</Grid>
</StackPanel>
</Grid>
</UserControl>

View File

@@ -8,8 +8,6 @@
xmlns:s="https://github.com/canton7/Stylet"
MinWidth="500"
d:DataContext="{d:DesignInstance Type=dialogs:MessageBoxViewModel}"
d:DesignHeight="450"
d:DesignWidth="800"
Style="{DynamicResource MaterialDesignRoot}"
mc:Ignorable="d">
<Grid>
@@ -23,27 +21,35 @@
<TextBlock
Grid.Row="0"
Margin="16"
FontSize="17"
FontSize="19"
FontWeight="Light"
Text="{Binding Title}"
TextTrimming="CharacterEllipsis"
ToolTip="{Binding Title}" />
<!-- Message -->
<TextBlock
<Border
Grid.Row="1"
Margin="16,0,16,16"
Text="{Binding Message}"
TextWrapping="Wrap" />
Padding="0,8"
BorderBrush="{DynamicResource MaterialDesignDivider}"
BorderThickness="0,1">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<TextBlock
Margin="16,0,16,16"
Text="{Binding Message}"
TextWrapping="Wrap" />
</ScrollViewer>
</Border>
<!-- Close -->
<Button
Grid.Row="2"
Margin="8"
HorizontalAlignment="Right"
Margin="16"
HorizontalAlignment="Stretch"
Command="{s:Action Close}"
Content="CLOSE"
IsCancel="True"
IsDefault="True"
Style="{DynamicResource MaterialDesignFlatButton}" />
Style="{DynamicResource MaterialDesignOutlinedButton}" />
</Grid>
</UserControl>

View File

@@ -4,113 +4,143 @@
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:dialogs="clr-namespace:DiscordChatExporter.Gui.ViewModels.Dialogs"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:s="https://github.com/canton7/Stylet"
Width="310"
d:DataContext="{d:DesignInstance Type=dialogs:SettingsViewModel}"
Style="{DynamicResource MaterialDesignRoot}"
mc:Ignorable="d">
<StackPanel>
<TextBlock
Margin="16"
FontSize="17"
Text="Settings" />
<!-- Auto-updates -->
<DockPanel
Background="Transparent"
LastChildFill="False"
ToolTip="Perform automatic updates on every launch">
<ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
<StackPanel>
<TextBlock
Margin="16,8"
DockPanel.Dock="Left"
Text="Auto-updates" />
<ToggleButton
Margin="16,8"
DockPanel.Dock="Right"
IsChecked="{Binding IsAutoUpdateEnabled}" />
</DockPanel>
Margin="16,16,16,8"
FontSize="19"
FontWeight="Light"
Text="Settings" />
<!-- Dark mode -->
<DockPanel
Background="Transparent"
LastChildFill="False"
ToolTip="Use darker colors in the UI">
<TextBlock
<!-- Auto-updates -->
<DockPanel
Margin="16,8"
DockPanel.Dock="Left"
Text="Dark mode" />
<ToggleButton
x:Name="DarkModeToggleButton"
Margin="16,8"
Checked="DarkModeToggleButton_Checked"
DockPanel.Dock="Right"
IsChecked="{Binding IsDarkModeEnabled}"
Unchecked="DarkModeToggleButton_Unchecked" />
</DockPanel>
Background="Transparent"
LastChildFill="False"
ToolTip="Perform automatic updates on every launch">
<TextBlock
VerticalAlignment="Center"
DockPanel.Dock="Left"
Text="Auto-updates" />
<ToggleButton
VerticalAlignment="Center"
DockPanel.Dock="Right"
IsChecked="{Binding IsAutoUpdateEnabled}" />
</DockPanel>
<!-- Persist token -->
<DockPanel
Background="Transparent"
LastChildFill="False"
ToolTip="Persist last used token between sessions">
<TextBlock
<!-- Dark mode -->
<DockPanel
Margin="16,8"
DockPanel.Dock="Left"
Text="Save token" />
<ToggleButton
Margin="16,8"
DockPanel.Dock="Right"
IsChecked="{Binding IsTokenPersisted}" />
</DockPanel>
Background="Transparent"
LastChildFill="False"
ToolTip="Use darker colors in the UI">
<TextBlock
VerticalAlignment="Center"
DockPanel.Dock="Left"
Text="Dark mode" />
<ToggleButton
x:Name="DarkModeToggleButton"
VerticalAlignment="Center"
Checked="DarkModeToggleButton_Checked"
DockPanel.Dock="Right"
IsChecked="{Binding IsDarkModeEnabled}"
Unchecked="DarkModeToggleButton_Unchecked" />
</DockPanel>
<!-- Reuse media -->
<DockPanel
Background="Transparent"
LastChildFill="False"
ToolTip="Reuse already existing media content to skip redundant downloads">
<TextBlock
<!-- Persist token -->
<DockPanel
Margin="16,8"
DockPanel.Dock="Left"
Text="Reuse downloaded media" />
<ToggleButton
Background="Transparent"
LastChildFill="False"
ToolTip="Save last used token in a file so that it can be persisted between sessions">
<TextBlock
VerticalAlignment="Center"
DockPanel.Dock="Left"
Text="Save token" />
<ToggleButton
VerticalAlignment="Center"
DockPanel.Dock="Right"
IsChecked="{Binding IsTokenPersisted}" />
</DockPanel>
<!-- Reuse media -->
<DockPanel
Margin="16,8"
DockPanel.Dock="Right"
IsChecked="{Binding ShouldReuseMedia}" />
</DockPanel>
Background="Transparent"
LastChildFill="False"
ToolTip="Reuse already existing media content to skip redundant downloads">
<TextBlock
VerticalAlignment="Center"
DockPanel.Dock="Left"
Text="Reuse downloaded media" />
<ToggleButton
VerticalAlignment="Center"
DockPanel.Dock="Right"
IsChecked="{Binding ShouldReuseMedia}" />
</DockPanel>
<!-- Date format -->
<TextBox
Margin="16,8"
materialDesign:HintAssist.Hint="Date format"
materialDesign:HintAssist.IsFloating="True"
Text="{Binding DateFormat}"
ToolTip="Format used when writing dates (uses .NET date formatting rules)" />
<!-- Date format -->
<DockPanel
Margin="16,8"
Background="Transparent"
LastChildFill="False"
ToolTip="Format used when writing dates (uses .NET date formatting rules)">
<TextBlock
VerticalAlignment="Center"
DockPanel.Dock="Left"
Text="Date format" />
<TextBox
Width="150"
VerticalAlignment="Center"
DockPanel.Dock="Right"
Text="{Binding DateFormat}" />
</DockPanel>
<!-- Parallel limit -->
<StackPanel Background="Transparent" ToolTip="How many channels can be exported at the same time">
<TextBlock Margin="16,8,16,4">
<Run Text="Parallel limit:" />
<Run Text="{Binding ParallelLimit, Mode=OneWay}" />
</TextBlock>
<Slider
Margin="16,4,16,8"
IsSnapToTickEnabled="True"
Maximum="10"
Minimum="1"
TickFrequency="1"
Value="{Binding ParallelLimit}" />
<!-- Parallel limit -->
<DockPanel
Margin="16,8"
Background="Transparent"
LastChildFill="False"
ToolTip="How many channels can be exported at the same time">
<TextBlock
VerticalAlignment="Center"
DockPanel.Dock="Left"
Text="Parallel limit"
TextAlignment="Right" />
<StackPanel
VerticalAlignment="Center"
DockPanel.Dock="Right"
Orientation="Horizontal">
<TextBlock
Margin="10,0"
VerticalAlignment="Center"
FontWeight="SemiBold"
Text="{Binding ParallelLimit}" />
<Slider
Width="150"
VerticalAlignment="Center"
Maximum="10"
Minimum="1"
Style="{DynamicResource MaterialDesignThinSlider}"
Value="{Binding ParallelLimit}" />
</StackPanel>
</DockPanel>
<!-- Save button -->
<Button
Margin="16"
HorizontalAlignment="Stretch"
Command="{s:Action Close}"
Content="SAVE"
IsCancel="True"
IsDefault="True"
Style="{DynamicResource MaterialDesignOutlinedButton}" />
</StackPanel>
<!-- Save button -->
<Button
Margin="8"
HorizontalAlignment="Right"
Command="{s:Action Close}"
Content="SAVE"
IsCancel="True"
IsDefault="True"
Style="{DynamicResource MaterialDesignFlatButton}" />
</StackPanel>
</ScrollViewer>
</UserControl>

View File

@@ -69,7 +69,7 @@
Grid.Column="0"
Margin="6"
IsChecked="{Binding IsBotToken}"
Style="{StaticResource MaterialDesignFlatActionToggleButton}"
Style="{DynamicResource MaterialDesignFlatActionToggleButton}"
ToolTip="Switch between user token and bot token">
<ToggleButton.Content>
<materialDesign:PackIcon
@@ -380,7 +380,7 @@
HorizontalAlignment="Right"
VerticalAlignment="Bottom"
Command="{s:Action ExportChannels}"
Style="{StaticResource MaterialDesignFloatingActionAccentButton}"
Style="{DynamicResource MaterialDesignFloatingActionAccentButton}"
Visibility="{Binding CanExportChannels, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
<materialDesign:PackIcon
Width="32"
@@ -393,4 +393,4 @@
</Grid>
</Grid>
</materialDesign:DialogHost>
</Window>
</Window>