Improve UI

This commit is contained in:
Alexey Golub 2018-12-14 00:55:50 +02:00
parent bdaeea5512
commit 6d5ed9e9ca
5 changed files with 113 additions and 82 deletions

View file

@ -77,11 +77,6 @@
Color="{DynamicResource InverseTextColor}" /> Color="{DynamicResource InverseTextColor}" />
<!-- Styles --> <!-- 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}"> <Style BasedOn="{StaticResource MaterialDesignLinearProgressBar}" TargetType="{x:Type ProgressBar}">
<Setter Property="BorderThickness" Value="0" /> <Setter Property="BorderThickness" Value="0" />
<Setter Property="Foreground" Value="{DynamicResource SecondaryAccentBrush}" /> <Setter Property="Foreground" Value="{DynamicResource SecondaryAccentBrush}" />
@ -102,6 +97,17 @@
<Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}" /> <Setter Property="Foreground" Value="{DynamicResource PrimaryTextBrush}" />
</Style> </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 <Style
x:Key="MaterialDesignFlatActionToggleButton" x:Key="MaterialDesignFlatActionToggleButton"
BasedOn="{StaticResource MaterialDesignActionToggleButton}" BasedOn="{StaticResource MaterialDesignActionToggleButton}"
@ -116,7 +122,6 @@
</Trigger> </Trigger>
</Style.Triggers> </Style.Triggers>
</Style> </Style>
</s:ApplicationLoader> </s:ApplicationLoader>
</Application.Resources> </Application.Resources>
</Application> </Application>

View file

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

View file

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

View file

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

View file

@ -15,6 +15,7 @@
FocusManager.FocusedElement="{Binding ElementName=TokenValueTextBox}" FocusManager.FocusedElement="{Binding ElementName=TokenValueTextBox}"
FontFamily="{DynamicResource MaterialDesignFont}" FontFamily="{DynamicResource MaterialDesignFont}"
Icon="/DiscordChatExporter;component/favicon.ico" Icon="/DiscordChatExporter;component/favicon.ico"
RenderOptions.BitmapScalingMode="HighQuality"
SnapsToDevicePixels="True" SnapsToDevicePixels="True"
TextElement.FontSize="13" TextElement.FontSize="13"
TextElement.FontWeight="Regular" TextElement.FontWeight="Regular"
@ -24,7 +25,7 @@
UseLayoutRounding="True" UseLayoutRounding="True"
WindowStartupLocation="CenterScreen" WindowStartupLocation="CenterScreen"
mc:Ignorable="d"> mc:Ignorable="d">
<materialDesign:DialogHost CloseOnClickAway="True" SnackbarMessageQueue="{Binding Notifications}"> <materialDesign:DialogHost SnackbarMessageQueue="{Binding Notifications}">
<Grid> <Grid>
<Grid.RowDefinitions> <Grid.RowDefinitions>
<RowDefinition Height="Auto" /> <RowDefinition Height="Auto" />
@ -43,6 +44,8 @@
<ColumnDefinition Width="*" /> <ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<!-- Token and pull data button -->
<materialDesign:Card <materialDesign:Card
Grid.Row="0" Grid.Row="0"
Grid.Column="0" Grid.Column="0"
@ -103,17 +106,18 @@
</Grid> </Grid>
</materialDesign:Card> </materialDesign:Card>
<!-- Menu --> <!-- Settings button -->
<materialDesign:PopupBox <Button
Grid.Row="0"
Grid.Column="1" Grid.Column="1"
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}" Margin="6"
PlacementMode="LeftAndAlignTopEdges"> Padding="4"
<StackPanel> Command="{s:Action ShowSettings}"
<Button Command="{s:Action ShowSettings}" Content="Settings" /> Style="{DynamicResource MaterialDesignFlatDarkButton}">
<Button Command="{s:Action ShowAbout}" Content="About" /> <materialDesign:PackIcon
</StackPanel> Width="24"
</materialDesign:PopupBox> Height="24"
Kind="Settings" />
</Button>
</Grid> </Grid>
<!-- Progress bar --> <!-- Progress bar -->
@ -125,7 +129,7 @@
<!-- Content --> <!-- Content -->
<Grid Grid.Row="2"> <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}}"> <Grid Margin="32,32,8,8" Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
<!-- For user token --> <!-- For user token -->
<StackPanel Visibility="{Binding IsBotToken, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}"> <StackPanel Visibility="{Binding IsBotToken, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
@ -207,37 +211,51 @@
<ListBox <ListBox
ItemsSource="{Binding AvailableGuilds}" ItemsSource="{Binding AvailableGuilds}"
ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden"
SelectedItem="{Binding SelectedGuild}" SelectedItem="{Binding SelectedGuild}">
VirtualizingStackPanel.IsVirtualizing="False"> <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> <ListBox.ItemTemplate>
<DataTemplate> <DataTemplate>
<materialDesign:TransitioningContent> <Grid
<materialDesign:TransitioningContent.OpeningEffect> Margin="-8"
<materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:0.3" /> Background="Transparent"
</materialDesign:TransitioningContent.OpeningEffect> Cursor="Hand"
<Grid ToolTip="{Binding Name}">
Margin="-8" <!-- Guild icon placeholder -->
Background="Transparent" <Ellipse
Cursor="Hand" Width="48"
ToolTip="{Binding Name}"> Height="48"
<!-- Guild icon placeholder --> Margin="12,4,12,4"
<Ellipse Fill="{DynamicResource DividerBrush}" />
Width="48"
Height="48"
Margin="12,4,12,4"
Fill="{DynamicResource DividerBrush}" />
<!-- Guild icon --> <!-- Guild icon -->
<Ellipse <Ellipse
Width="48" Width="48"
Height="48" Height="48"
Margin="12,4,12,4"> Margin="12,4,12,4">
<Ellipse.Fill> <Ellipse.Fill>
<ImageBrush ImageSource="{Binding IconUrl}" /> <ImageBrush ImageSource="{Binding IconUrl}" />
</Ellipse.Fill> </Ellipse.Fill>
</Ellipse> </Ellipse>
</Grid> </Grid>
</materialDesign:TransitioningContent>
</DataTemplate> </DataTemplate>
</ListBox.ItemTemplate> </ListBox.ItemTemplate>
</ListBox> </ListBox>
@ -245,38 +263,50 @@
<!-- Channels --> <!-- Channels -->
<Border Grid.Column="1"> <Border Grid.Column="1">
<ListBox <ListBox HorizontalContentAlignment="Stretch" ItemsSource="{Binding AvailableChannels}">
HorizontalContentAlignment="Stretch" <ListBox.ItemContainerStyle>
ItemsSource="{Binding AvailableChannels}" <Style BasedOn="{StaticResource {x:Type ListBoxItem}}" TargetType="{x:Type ListBoxItem}">
VirtualizingStackPanel.IsVirtualizing="False"> <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> <ListBox.ItemTemplate>
<DataTemplate> <DataTemplate>
<materialDesign:TransitioningContent> <StackPanel
<materialDesign:TransitioningContent.OpeningEffect> Margin="-8"
<materialDesign:TransitionEffect Kind="SlideInFromLeft" Duration="0:0:0.3" /> Background="Transparent"
</materialDesign:TransitioningContent.OpeningEffect> Cursor="Hand"
<StackPanel Orientation="Horizontal">
Margin="-8" <StackPanel.InputBindings>
Background="Transparent" <MouseBinding
Cursor="Hand" Command="{s:Action ExportChannel}"
Orientation="Horizontal"> CommandParameter="{Binding}"
<StackPanel.InputBindings> MouseAction="LeftClick" />
<MouseBinding </StackPanel.InputBindings>
Command="{s:Action ExportChannel}" <materialDesign:PackIcon
CommandParameter="{Binding}" Margin="16,7,0,6"
MouseAction="LeftClick" /> VerticalAlignment="Center"
</StackPanel.InputBindings> Kind="Pound" />
<materialDesign:PackIcon <TextBlock
Margin="16,7,0,6" Margin="3,8,8,8"
VerticalAlignment="Center" VerticalAlignment="Center"
Kind="Pound" /> FontSize="14"
<TextBlock Text="{Binding Name}" />
Margin="3,8,8,8" </StackPanel>
VerticalAlignment="Center"
FontSize="14"
Text="{Binding Name}" />
</StackPanel>
</materialDesign:TransitioningContent>
</DataTemplate> </DataTemplate>
</ListBox.ItemTemplate> </ListBox.ItemTemplate>
</ListBox> </ListBox>