From fd15b62adfb2c8e1ec7d07d2c2d79b2baab07ddc Mon Sep 17 00:00:00 2001
From: Oleksii Holub <Oleksii.Holub@3shape.com>
Date: Fri, 7 Dec 2018 18:14:27 +0200
Subject: [PATCH] Improve UI layout and usage instructions

---
 DiscordChatExporter.Cli/Program.cs          |  31 +-
 DiscordChatExporter.Gui/Views/RootView.xaml | 308 ++++++++++----------
 2 files changed, 173 insertions(+), 166 deletions(-)

diff --git a/DiscordChatExporter.Cli/Program.cs b/DiscordChatExporter.Cli/Program.cs
index cab543a..923ad05 100644
--- a/DiscordChatExporter.Cli/Program.cs
+++ b/DiscordChatExporter.Cli/Program.cs
@@ -11,28 +11,25 @@ namespace DiscordChatExporter.Cli
         private static void PrintTokenHelp()
         {
             Console.WriteLine("# To get user token:");
-            Console.WriteLine(" 1. Open Discord app");
-            Console.WriteLine(" 2. Log in if you haven't");
-            Console.WriteLine(" 3. Press Ctrl+Shift+I to show developer tools");
-            Console.WriteLine(" 4. Press Ctrl+R to trigger reload");
-            Console.WriteLine(" 5. Navigate to the Application tab");
-            Console.WriteLine(" 6. Select \"Local Storage\" > \"https://discordapp.com\" on the left");
-            Console.WriteLine(" 7. Find \"token\" under key and copy the value");
+            Console.WriteLine(" 1. Open Discord");
+            Console.WriteLine(" 2. Press Ctrl+Shift+I to show developer tools");
+            Console.WriteLine(" 3. Press Ctrl+R to reload");
+            Console.WriteLine(" 4. Navigate to the Application tab");
+            Console.WriteLine(" 5. Select \"Local Storage\" > \"https://discordapp.com\" on the left");
+            Console.WriteLine(" 6. Find \"token\" under key and copy the value");
             Console.WriteLine();
             Console.WriteLine("# To get bot token:");
             Console.WriteLine(" 1. Go to Discord developer portal");
-            Console.WriteLine(" 2. Log in if you haven't");
-            Console.WriteLine(" 3. Open your application's settings");
-            Console.WriteLine(" 4. Navigate to the Bot section on the left");
-            Console.WriteLine(" 5. Under Token click Copy");
+            Console.WriteLine(" 2. Open your application's settings");
+            Console.WriteLine(" 3. Navigate to the Bot section on the left");
+            Console.WriteLine(" 4. Under Token click Copy");
             Console.WriteLine();
             Console.WriteLine("# To get guild or channel ID:");
-            Console.WriteLine(" 1. Open Discord app");
-            Console.WriteLine(" 2. Log in if you haven't");
-            Console.WriteLine(" 3. Open Settings");
-            Console.WriteLine(" 4. Go to Appearance section");
-            Console.WriteLine(" 5. Enable Developer Mode");
-            Console.WriteLine(" 6. Right click on the desired guild or channel and click Copy ID");
+            Console.WriteLine(" 1. Open Discord");
+            Console.WriteLine(" 2. Open Settings");
+            Console.WriteLine(" 3. Go to Appearance section");
+            Console.WriteLine(" 4. Enable Developer Mode");
+            Console.WriteLine(" 5. Right click on the desired guild or channel and click Copy ID");
         }
 
         public static void Main(string[] args)
diff --git a/DiscordChatExporter.Gui/Views/RootView.xaml b/DiscordChatExporter.Gui/Views/RootView.xaml
index 10fab6c..e2fe777 100644
--- a/DiscordChatExporter.Gui/Views/RootView.xaml
+++ b/DiscordChatExporter.Gui/Views/RootView.xaml
@@ -25,112 +25,185 @@
     WindowStartupLocation="CenterScreen"
     mc:Ignorable="d">
     <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  -->
-            <Border
+            <Grid
+                Grid.Row="0"
                 Background="{DynamicResource PrimaryHueMidBrush}"
-                DockPanel.Dock="Top"
                 IsEnabled="{Binding IsEnabled}"
                 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.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto" />
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="Auto" />
                         </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  -->
-                                <ToggleButton
-                                    Grid.Column="0"
-                                    Margin="6"
-                                    IsChecked="{Binding IsBotToken}"
-                                    Style="{StaticResource MaterialDesignFlatActionToggleButton}"
-                                    ToolTip="Switch between user token and bot token">
-                                    <ToggleButton.Content>
-                                        <materialDesign:PackIcon
-                                            Width="24"
-                                            Height="24"
-                                            Kind="Account" />
-                                    </ToggleButton.Content>
-                                    <materialDesign:ToggleButtonAssist.OnContent>
-                                        <materialDesign:PackIcon
-                                            Width="24"
-                                            Height="24"
-                                            Kind="Robot" />
-                                    </materialDesign:ToggleButtonAssist.OnContent>
-                                </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>
+                        <!--  Token type  -->
+                        <ToggleButton
+                            Grid.Column="0"
+                            Margin="6"
+                            IsChecked="{Binding IsBotToken}"
+                            Style="{StaticResource MaterialDesignFlatActionToggleButton}"
+                            ToolTip="Switch between user token and bot token">
+                            <ToggleButton.Content>
+                                <materialDesign:PackIcon
+                                    Width="24"
+                                    Height="24"
+                                    Kind="Account" />
+                            </ToggleButton.Content>
+                            <materialDesign:ToggleButtonAssist.OnContent>
+                                <materialDesign:PackIcon
+                                    Width="24"
+                                    Height="24"
+                                    Kind="Robot" />
+                            </materialDesign:ToggleButtonAssist.OnContent>
+                        </ToggleButton>
 
-                        <!--  Menu  -->
-                        <materialDesign:PopupBox
-                            Grid.Row="0"
+                        <!--  Token value  -->
+                        <TextBox
+                            x:Name="TokenValueTextBox"
                             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="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  -->
+                <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  -->
-                    <ProgressBar
-                        Background="Transparent"
-                        IsIndeterminate="{Binding IsProgressIndeterminate}"
-                        Value="{Binding Progress, Mode=OneWay}" />
-                </StackPanel>
-            </Border>
+            <!--  Progress bar  -->
+            <ProgressBar
+                Grid.Row="1"
+                Background="{DynamicResource PrimaryHueMidBrush}"
+                IsIndeterminate="{Binding IsProgressIndeterminate}"
+                Value="{Binding Progress, Mode=OneWay}" />
 
             <!--  Content  -->
-            <Grid>
-                <DockPanel
+            <Grid Grid.Row="2">
+                <!--  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}"
                     IsEnabled="{Binding IsEnabled}"
                     Visibility="{Binding AvailableGuilds, Converter={x:Static s:BoolToVisibilityConverter.Instance}}">
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="Auto" />
+                        <ColumnDefinition Width="*" />
+                    </Grid.ColumnDefinitions>
 
                     <!--  Guilds  -->
                     <Border
+                        Grid.Column="0"
                         BorderBrush="{DynamicResource DividerBrush}"
-                        BorderThickness="0,0,1,0"
-                        DockPanel.Dock="Left">
+                        BorderThickness="0,0,1,0">
                         <ListBox
                             ItemsSource="{Binding AvailableGuilds}"
                             ScrollViewer.VerticalScrollBarVisibility="Hidden"
@@ -171,7 +244,7 @@
                     </Border>
 
                     <!--  Channels  -->
-                    <Border>
+                    <Border Grid.Column="1">
                         <ListBox
                             HorizontalContentAlignment="Stretch"
                             ItemsSource="{Binding AvailableChannels}"
@@ -208,74 +281,11 @@
                             </ListBox.ItemTemplate>
                         </ListBox>
                     </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>
 
+                <!--  Notifications snackbar  -->
                 <materialDesign:Snackbar MessageQueue="{Binding Notifications}" />
             </Grid>
-        </DockPanel>
+        </Grid>
     </materialDesign:DialogHost>
 </Window>
\ No newline at end of file