Improve UI layout and usage instructions

pull/123/head
Oleksii Holub 6 years ago
parent 78d01b47b4
commit fd15b62adf

@ -11,28 +11,25 @@ namespace DiscordChatExporter.Cli
private static void PrintTokenHelp() private static void PrintTokenHelp()
{ {
Console.WriteLine("# To get user token:"); Console.WriteLine("# To get user token:");
Console.WriteLine(" 1. Open Discord app"); Console.WriteLine(" 1. Open Discord");
Console.WriteLine(" 2. Log in if you haven't"); Console.WriteLine(" 2. Press Ctrl+Shift+I to show developer tools");
Console.WriteLine(" 3. Press Ctrl+Shift+I to show developer tools"); Console.WriteLine(" 3. Press Ctrl+R to reload");
Console.WriteLine(" 4. Press Ctrl+R to trigger reload"); Console.WriteLine(" 4. Navigate to the Application tab");
Console.WriteLine(" 5. Navigate to the Application tab"); Console.WriteLine(" 5. Select \"Local Storage\" > \"https://discordapp.com\" on the left");
Console.WriteLine(" 6. Select \"Local Storage\" > \"https://discordapp.com\" on the left"); Console.WriteLine(" 6. Find \"token\" under key and copy the value");
Console.WriteLine(" 7. Find \"token\" under key and copy the value");
Console.WriteLine(); Console.WriteLine();
Console.WriteLine("# To get bot token:"); Console.WriteLine("# To get bot token:");
Console.WriteLine(" 1. Go to Discord developer portal"); Console.WriteLine(" 1. Go to Discord developer portal");
Console.WriteLine(" 2. Log in if you haven't"); Console.WriteLine(" 2. Open your application's settings");
Console.WriteLine(" 3. Open your application's settings"); Console.WriteLine(" 3. Navigate to the Bot section on the left");
Console.WriteLine(" 4. Navigate to the Bot section on the left"); Console.WriteLine(" 4. Under Token click Copy");
Console.WriteLine(" 5. Under Token click Copy");
Console.WriteLine(); Console.WriteLine();
Console.WriteLine("# To get guild or channel ID:"); Console.WriteLine("# To get guild or channel ID:");
Console.WriteLine(" 1. Open Discord app"); Console.WriteLine(" 1. Open Discord");
Console.WriteLine(" 2. Log in if you haven't"); Console.WriteLine(" 2. Open Settings");
Console.WriteLine(" 3. Open Settings"); Console.WriteLine(" 3. Go to Appearance section");
Console.WriteLine(" 4. Go to Appearance section"); Console.WriteLine(" 4. Enable Developer Mode");
Console.WriteLine(" 5. Enable Developer Mode"); Console.WriteLine(" 5. Right click on the desired guild or channel and click Copy ID");
Console.WriteLine(" 6. Right click on the desired guild or channel and click Copy ID");
} }
public static void Main(string[] args) public static void Main(string[] args)

@ -25,112 +25,185 @@
WindowStartupLocation="CenterScreen" WindowStartupLocation="CenterScreen"
mc:Ignorable="d"> mc:Ignorable="d">
<materialDesign:DialogHost CloseOnClickAway="True" SnackbarMessageQueue="{Binding Notifications}"> <materialDesign:DialogHost CloseOnClickAway="True" SnackbarMessageQueue="{Binding Notifications}">
<DockPanel> <Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<!-- Toolbar --> <!-- Toolbar -->
<Border <Grid
Grid.Row="0"
Background="{DynamicResource PrimaryHueMidBrush}" Background="{DynamicResource PrimaryHueMidBrush}"
DockPanel.Dock="Top"
IsEnabled="{Binding IsEnabled}" IsEnabled="{Binding IsEnabled}"
TextElement.Foreground="{DynamicResource SecondaryInverseTextBrush}"> TextElement.Foreground="{DynamicResource SecondaryInverseTextBrush}">
<StackPanel> <Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<materialDesign:Card
Grid.Row="0"
Grid.Column="0"
Margin="12,12,0,12">
<Grid> <Grid>
<Grid.ColumnDefinitions> <Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" /> <ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" /> <ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions> </Grid.ColumnDefinitions>
<materialDesign:Card
Grid.Row="0"
Grid.Column="0"
Margin="12,12,0,12">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- Token type --> <!-- Token type -->
<ToggleButton <ToggleButton
Grid.Column="0" Grid.Column="0"
Margin="6" Margin="6"
IsChecked="{Binding IsBotToken}" IsChecked="{Binding IsBotToken}"
Style="{StaticResource MaterialDesignFlatActionToggleButton}" Style="{StaticResource MaterialDesignFlatActionToggleButton}"
ToolTip="Switch between user token and bot token"> ToolTip="Switch between user token and bot token">
<ToggleButton.Content> <ToggleButton.Content>
<materialDesign:PackIcon <materialDesign:PackIcon
Width="24" Width="24"
Height="24" Height="24"
Kind="Account" /> Kind="Account" />
</ToggleButton.Content> </ToggleButton.Content>
<materialDesign:ToggleButtonAssist.OnContent> <materialDesign:ToggleButtonAssist.OnContent>
<materialDesign:PackIcon <materialDesign:PackIcon
Width="24" Width="24"
Height="24" Height="24"
Kind="Robot" /> Kind="Robot" />
</materialDesign:ToggleButtonAssist.OnContent> </materialDesign:ToggleButtonAssist.OnContent>
</ToggleButton> </ToggleButton>
<!-- Token value -->
<TextBox
x:Name="TokenValueTextBox"
Grid.Column="1"
Margin="2,6,6,7"
materialDesign:HintAssist.Hint="Token"
materialDesign:TextFieldAssist.DecorationVisibility="Hidden"
materialDesign:TextFieldAssist.TextBoxViewMargin="0,0,2,0"
BorderThickness="0"
FontSize="16"
Text="{Binding TokenValue, UpdateSourceTrigger=PropertyChanged}" />
<!-- Pull data button -->
<Button
Grid.Column="2"
Margin="0,6,6,6"
Padding="4"
Command="{s:Action PopulateGuildsAndChannels}"
IsDefault="True"
Style="{DynamicResource MaterialDesignFlatButton}">
<materialDesign:PackIcon
Width="24"
Height="24"
Kind="ArrowRight" />
</Button>
</Grid>
</materialDesign:Card>
<!-- Menu --> <!-- Token value -->
<materialDesign:PopupBox <TextBox
Grid.Row="0" x:Name="TokenValueTextBox"
Grid.Column="1" Grid.Column="1"
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}" Margin="2,6,6,7"
PlacementMode="LeftAndAlignTopEdges"> materialDesign:HintAssist.Hint="Token"
<StackPanel> materialDesign:TextFieldAssist.DecorationVisibility="Hidden"
<Button Command="{s:Action ShowSettings}" Content="Settings" /> materialDesign:TextFieldAssist.TextBoxViewMargin="0,0,2,0"
<Button Command="{s:Action ShowAbout}" Content="About" /> BorderThickness="0"
</StackPanel> FontSize="16"
</materialDesign:PopupBox> Text="{Binding TokenValue, UpdateSourceTrigger=PropertyChanged}" />
<!-- Pull data button -->
<Button
Grid.Column="2"
Margin="0,6,6,6"
Padding="4"
Command="{s:Action PopulateGuildsAndChannels}"
IsDefault="True"
Style="{DynamicResource MaterialDesignFlatButton}">
<materialDesign:PackIcon
Width="24"
Height="24"
Kind="ArrowRight" />
</Button>
</Grid> </Grid>
</materialDesign:Card>
<!-- Menu -->
<materialDesign:PopupBox
Grid.Row="0"
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>
</Grid>
<!-- Progress bar --> <!-- Progress bar -->
<ProgressBar <ProgressBar
Background="Transparent" Grid.Row="1"
IsIndeterminate="{Binding IsProgressIndeterminate}" Background="{DynamicResource PrimaryHueMidBrush}"
Value="{Binding Progress, Mode=OneWay}" /> IsIndeterminate="{Binding IsProgressIndeterminate}"
</StackPanel> Value="{Binding Progress, Mode=OneWay}" />
</Border>
<!-- Content --> <!-- Content -->
<Grid> <Grid Grid.Row="2">
<DockPanel <!-- 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}}">
<TextBlock FontSize="18" Text="Please provide your user token to authorize" />
<TextBlock Margin="8,8,0,0" FontSize="14">
<Run Text="1. Open Discord" />
<LineBreak />
<Run Text="2. Press" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Ctrl+Shift+I" />
<Run Text="to show developer tools" />
<LineBreak />
<Run Text="3. Press" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Ctrl+R" />
<Run Text="to reload" />
<LineBreak />
<Run Text="4. Navigate to the" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Application" />
<Run Text="tab" />
<LineBreak />
<Run Text="5. Select" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Local Storage" />
<Run Text="&gt;" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="https://discordapp.com" />
<Run Text="on the left" />
<LineBreak />
<Run Text="6. Find" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="token" />
<Run Text="under key and copy the value" />
</TextBlock>
<TextBlock Margin="0,24,0,0" FontSize="14">
<Run Text="To authorize using bot token instead click" />
<InlineUIContainer>
<materialDesign:PackIcon Margin="2,0,0,-2" Kind="Account" />
</InlineUIContainer>
</TextBlock>
</StackPanel>
<!-- For bot token -->
<StackPanel Visibility="{Binding IsBotToken, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
<TextBlock FontSize="18" Text="Please provide your bot token to authorize" />
<TextBlock Margin="8,8,0,0" FontSize="14">
<Run Text="1. Open Discord developer portal" />
<LineBreak />
<Run Text="2. Open your application's settings" />
<LineBreak />
<Run Text="3. Navigate to the" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Bot" />
<Run Text="section on the left" />
<LineBreak />
<Run Text="4. Under" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Token" />
<Run Text="click" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Copy" />
</TextBlock>
<TextBlock Margin="0,24,0,0" FontSize="14">
<Run Text="To authorize using user token instead click" />
<InlineUIContainer>
<materialDesign:PackIcon Margin="2,0,0,-2" Kind="Robot" />
</InlineUIContainer>
</TextBlock>
</StackPanel>
</Grid>
<!-- Guilds and channels -->
<Grid
Background="{DynamicResource MaterialDesignCardBackground}" Background="{DynamicResource MaterialDesignCardBackground}"
IsEnabled="{Binding IsEnabled}" IsEnabled="{Binding IsEnabled}"
Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.Instance}}"> Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<!-- Guilds --> <!-- Guilds -->
<Border <Border
Grid.Column="0"
BorderBrush="{DynamicResource DividerBrush}" BorderBrush="{DynamicResource DividerBrush}"
BorderThickness="0,0,1,0" BorderThickness="0,0,1,0">
DockPanel.Dock="Left">
<ListBox <ListBox
ItemsSource="{Binding AvailableGuilds}" ItemsSource="{Binding AvailableGuilds}"
ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden"
@ -171,7 +244,7 @@
</Border> </Border>
<!-- Channels --> <!-- Channels -->
<Border> <Border Grid.Column="1">
<ListBox <ListBox
HorizontalContentAlignment="Stretch" HorizontalContentAlignment="Stretch"
ItemsSource="{Binding AvailableChannels}" ItemsSource="{Binding AvailableChannels}"
@ -208,74 +281,11 @@
</ListBox.ItemTemplate> </ListBox.ItemTemplate>
</ListBox> </ListBox>
</Border> </Border>
</DockPanel>
<!-- Usage instructions -->
<Grid Margin="32,32,8,8" Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
<!-- User token -->
<StackPanel Visibility="{Binding IsBotToken, Converter={x:Static s:BoolToVisibilityConverter.InverseInstance}}">
<TextBlock FontSize="18" Text="DiscordChatExporter needs your user token to work" />
<TextBlock
Margin="0,8,0,0"
FontSize="16"
Text="To obtain it, follow these steps:" />
<TextBlock Margin="8,0,0,0" FontSize="14">
<Run Text="1. Open the Discord app" />
<LineBreak />
<Run Text="2. Log in if you haven't" />
<LineBreak />
<Run Text="3. Press" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Ctrl+Shift+I" />
<Run Text="to show developer tools" />
<LineBreak />
<Run Text="4. Press" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Ctrl+R" />
<Run Text="to trigger reload" />
<LineBreak />
<Run Text="5. Navigate to the" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Application" />
<Run Text="tab" />
<LineBreak />
<Run Text="6. Select" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Local Storage" />
<Run Text="&gt;" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="https://discordapp.com" />
<Run Text="on the left" />
<LineBreak />
<Run Text="7. Find" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="token" />
<Run Text="under key and copy the value" />
</TextBlock>
</StackPanel>
<!-- Bot token -->
<StackPanel Visibility="{Binding IsBotToken, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
<TextBlock FontSize="18" Text="DiscordChatExporter needs your bot token to work" />
<TextBlock
Margin="0,8,0,0"
FontSize="16"
Text="To obtain it, follow these steps:" />
<TextBlock Margin="8,0,0,0" FontSize="14">
<Run Text="1. Go to Discord developer portal" />
<LineBreak />
<Run Text="2. Log in if you haven't" />
<LineBreak />
<Run Text="3. Open your application's settings" />
<LineBreak />
<Run Text="4. Navigate to the" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Bot" />
<Run Text="section on the left" />
<LineBreak />
<Run Text="5. Under" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Token" />
<Run Text="click" />
<Run Foreground="{DynamicResource PrimaryTextBrush}" Text="Copy" />
</TextBlock>
</StackPanel>
</Grid> </Grid>
<!-- Notifications snackbar -->
<materialDesign:Snackbar MessageQueue="{Binding Notifications}" /> <materialDesign:Snackbar MessageQueue="{Binding Notifications}" />
</Grid> </Grid>
</DockPanel> </Grid>
</materialDesign:DialogHost> </materialDesign:DialogHost>
</Window> </Window>
Loading…
Cancel
Save