From 3a46f4589b2e710828fb4a6f8e0e8d123a5065d7 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Fri, 10 Apr 2020 21:11:21 +0200
Subject: [PATCH] Updated KeyboardManager page to the right styles/margins.
 Updated visuals for the mapped keys. (#2031)

---
 .../Strings/en-us/Resources.resw              |  12 +-
 .../Views/KeyboardManagerPage.xaml            | 129 ++++++++----------
 2 files changed, 63 insertions(+), 78 deletions(-)

diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index 293814e943..f7141f1576 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -193,14 +193,6 @@
     <value>Edit Shortcuts</value>
     <comment>Keyboard Manager edit shortcuts header</comment>
   </data>
-  <data name="KeyboardManager_KeysMappingLayoutLeftHeader.Text" xml:space="preserve">
-    <value>From:</value>
-    <comment>Keyboard Manager mapping keys view left header</comment>
-  </data>
-  <data name="KeyboardManager_KeysMappingLayoutRightHeader.Text" xml:space="preserve">
-    <value>To:</value>
-    <comment>Keyboard Manager mapping keys view right header</comment>
-  </data>
   <data name="PowerLauncher_Description.Text" xml:space="preserve">
     <value>A quick launcher that has additional capabilities without sacrificing performance.</value>
   </data>
@@ -258,4 +250,8 @@
   <data name="PowerLauncher_OverrideWinSKey.Content" xml:space="preserve">
     <value>Override Win+S key</value>
   </data>
+  <data name="KeyboardManager_KeysMappingLayoutRightHeader.Text" xml:space="preserve">
+    <value>To:</value>
+    <comment>Keyboard Manager mapping keys view right header</comment>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/core/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml b/src/core/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
index 9964464151..95f7d3a135 100644
--- a/src/core/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
+++ b/src/core/Microsoft.PowerToys.Settings.UI/Views/KeyboardManagerPage.xaml
@@ -13,34 +13,46 @@
         <viewmodels:RemapKeysModel x:Key="dummyData"/>
 
         <DataTemplate x:Name="KeysListViewTemplate" x:DataType="viewmodels:RemapKeysModel">
-            <Grid>
+            <Grid Height="56">
                 <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="200"/>
-                    <ColumnDefinition Width="200"/>
+                    <ColumnDefinition Width="80"/>
+                    <ColumnDefinition Width="80"/>
+                    <ColumnDefinition Width="120"/>
                 </Grid.ColumnDefinitions>
-                <Border Background="{ThemeResource SystemBaseLowColor}"
+                <Border 
+                        Background="{ThemeResource SystemBaseLowColor}"
                         CornerRadius="4"
                         Grid.Column="0"
-                        Width="70"
-                        Height="35"
+                        Padding="14,0,14,0"
+                        Margin="0,0,0,0"
+                        Height="36"
+                        VerticalAlignment="Center"
                         HorizontalAlignment="Left">
-                    <TextBlock  Grid.Column="0"
-                                Style="{StaticResource BodyTextBlockStyle}"
-                                VerticalAlignment="Center"
-                                TextAlignment="Center"
+                    <TextBlock FontWeight="SemiBold"
+                               VerticalAlignment="Center"
+                               TextAlignment="Center"
+                                FontSize="12"
                                 Text="{Binding From}">
                     </TextBlock>
                 </Border>
-                <Border Background="{ThemeResource SystemBaseLowColor}"
+                <FontIcon Glyph="&#xE72A;"
+                          Grid.Column="1"
+                          FontSize="14"
+                          VerticalAlignment="Center" />
+                
+                <Border Background="{ThemeResource SystemAccentColor}"
                         CornerRadius="4"
-                        Grid.Column="1"
-                        Width="70"
-                        Height="35"
+                        Grid.Column="2"
+                        Padding="14,0,14,0"
+                        Margin="20,0,0,0"
+                        Height="36"
+                        VerticalAlignment="Center"
                         HorizontalAlignment="Left">
-                    <TextBlock Grid.Column="1"
-                               Style="{StaticResource BodyTextBlockStyle}"
+                    <TextBlock FontWeight="SemiBold"
                                VerticalAlignment="Center"
                                TextAlignment="Center"
+                               Foreground="White"
+                               FontSize="12"
                                Text="{Binding To}">
                     </TextBlock>
                 </Border>
@@ -82,92 +94,69 @@
 
         <StackPanel Orientation="Vertical">
             <TextBlock x:Uid="KeyboardManager_Description"
-                       TextWrapping="Wrap"
-                       Style="{StaticResource BodyTextBlockStyle}"/>
+                       TextWrapping="Wrap"/>
 
             <ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
                           IsOn="True"
                           Margin="{StaticResource SmallTopMargin}" />
 
             <TextBlock x:Uid="KeyboardManager_ConfigHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <TextBlock x:Uid="KeyboardManager_ProfileDescription"
                        Margin="{StaticResource SmallTopMargin}"/>
-            
-            <ComboBox SelectedIndex="1"
-                      Margin="{StaticResource SmallTopMargin}"
-                      HorizontalAlignment="Left">
+
+            <ComboBox SelectedIndex="1" MinWidth="160"
+                      Margin="{StaticResource SmallTopMargin}">
                       <ComboBoxItem Content="Config-1"/>
                       <ComboBoxItem Content="Config-2"/>
                       <ComboBoxItem Content="Config-3"/>
             </ComboBox>
 
-            <TextBlock x:Uid="KeyboardManager_ProfileDescription"
-                       Margin="{StaticResource SmallTopMargin}"/>
-
             <TextBlock x:Uid="KeyboardManager_RemapKeyboardHeader"
-                       Style="{StaticResource SettingsGroupTitleStyle}"
-                       Margin="{StaticResource SmallTopMargin}"/>
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <TextBlock Text="Description of the Remap Keyboard (subfeature)"
+                       Margin="{StaticResource SmallTopMargin}"
+                       TextWrapping="Wrap"/>
 
             <Button x:Uid="KeyboardManager_RemapKeyboardButton"
                     Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    HorizontalAlignment="Left"/>
-
-            <StackPanel Margin="{StaticResource SmallTopMargin}"
-                        Orientation="Horizontal">
-                <TextBlock x:Uid="KeyboardManager_KeysMappingLayoutLeftHeader"
-                           Width="200"
-                           FontWeight="SemiBold"/>
-                <TextBlock x:Uid="KeyboardManager_KeysMappingLayoutRightHeader"
-                           Width="200"
-                           FontWeight="SemiBold" />
-            </StackPanel>
+                    Style="{StaticResource ButtonRevealStyle}"/>
 
             <ListView x:Name="RemapKeysList"
                       ItemsSource="{StaticResource dummyData}"
                       ItemTemplate="{StaticResource KeysListViewTemplate}"
-                      BorderBrush="LightGray"
+                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                       BorderThickness="1" 
-                      CornerRadius="4"
-                      Width="400"
-                      MaxHeight="150"
-                      Margin="{StaticResource SmallTopMargin}"
-                      HorizontalAlignment="Left">
-            </ListView>
+                      Width="350"
+                      MaxHeight="200"
+                      Margin="{StaticResource MediumTopBottomMargin}"
+                      HorizontalAlignment="Left"/>
+
 
             <TextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
-                       Style="{StaticResource SubtitleTextBlockStyle}"
-                       Margin="{StaticResource SmallTopMargin}"/>
+                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+
+            <TextBlock Text="Description of the Remap Shortcuts (subfeature)"
+                       TextWrapping="Wrap" Margin="{StaticResource SmallTopMargin}"/>
 
             <Button x:Uid="KeyboardManager_RemapShortcutsButton"
                     Margin="{StaticResource SmallTopMargin}"
-                    Style="{StaticResource AccentButtonStyle}"
-                    HorizontalAlignment="Left"/>
-
-            <StackPanel Margin="{StaticResource SmallTopMargin}"
-                        Orientation="Horizontal">
-                <TextBlock x:Uid="KeyboardManager_KeysMappingLayoutLeftHeader"
-                           Width="200"
-                           FontWeight="SemiBold">
-                </TextBlock>
-                <TextBlock x:Uid="KeyboardManager_KeysMappingLayoutRightHeader"
-                           Width="200" 
-                           FontWeight="SemiBold" >
-                </TextBlock>
-            </StackPanel>
+                    Style="{StaticResource ButtonRevealStyle}"/>
 
             <ListView x:Name="RemapShortcutsList"  
                       ItemsSource="{StaticResource dummyData}"
                       ItemTemplate="{StaticResource KeysListViewTemplate}"
-                      BorderBrush="LightGray" 
+                      BorderBrush="{ThemeResource SystemControlForegroundBaseMediumLowBrush}"
                       BorderThickness="1" 
                       CornerRadius="4"
-                      Width="400"
-                      MaxHeight="150"
-                      Margin="{StaticResource SmallTopMargin}"
-                      HorizontalAlignment="Left">
-            </ListView>
-            
+                      Width="350"
+                      MaxHeight="200"
+                      Margin="{StaticResource MediumTopBottomMargin}"
+                      HorizontalAlignment="Left"/>
+
+
         </StackPanel>
 
         <StackPanel x:Name="SidePanel"