From 001527dd54f405895fc1f93fcd8bd750ff7fce34 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels9001@hotmail.com>
Date: Mon, 2 Aug 2021 16:15:15 +0200
Subject: [PATCH] Awake UX update

---
 .../Strings/en-us/Resources.resw              |  11 +-
 .../Views/AwakePage.xaml                      | 102 ++++++++++--------
 .../Views/GeneralPage.xaml                    |   3 +-
 .../Views/PowerPreviewPage.xaml               |   6 +-
 4 files changed, 71 insertions(+), 51 deletions(-)

diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
index 0605ec8078..baec13be3d 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Strings/en-us/Resources.resw
@@ -742,7 +742,7 @@ Disabling this module or closing PowerToys will unmute the microphone and camera
   <data name="GeneralPage_ToggleSwitch_AutoDownloadUpdates.Header" xml:space="preserve">
     <value>Download updates automatically</value>
   </data>
-	<data name="GeneralPage_ToggleSwitch_AutoDownloadUpdates.Description" xml:space="preserve">
+  <data name="GeneralPage_ToggleSwitch_AutoDownloadUpdates.Description" xml:space="preserve">
     <value>Except on metered connections</value>
   </data>
   <data name="GeneralPage_ToggleSwitch_RunningAsAdminNote.Text" xml:space="preserve">
@@ -1287,13 +1287,13 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="Awake_TemporaryKeepAwakeDescription.Text" xml:space="preserve">
     <value>Keeps your PC awake until the set time elapses</value>
   </data>
-  <data name="Awake_EnableDisplayKeepAwake.Content" xml:space="preserve">
+  <data name="Awake_EnableDisplayKeepAwake.Header" xml:space="preserve">
     <value>Keep screen on</value>
   </data>
-  <data name="Awake_Mode.Text" xml:space="preserve">
+  <data name="Awake_Mode.Header" xml:space="preserve">
     <value>Mode</value>
   </data>
-  <data name="Awake_Behavior_GroupSettings.Text" xml:space="preserve">
+  <data name="Awake_Behavior_GroupSettings.Header" xml:space="preserve">
     <value>Behavior</value>
   </data>
   <data name="Awake_TemporaryKeepAwake_Hours.Header" xml:space="preserve">
@@ -1389,4 +1389,7 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and
   <data name="SeeWhatsNew.Content" xml:space="preserve">
     <value>See what's new</value>
   </data>
+  <data name="Awake_Mode.Description" xml:space="preserve">
+    <value>Set the preferred state of your computer</value>
+  </data>
 </root>
\ No newline at end of file
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/AwakePage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/AwakePage.xaml
index f7d98dd95f..faa58ee208 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/AwakePage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/AwakePage.xaml
@@ -7,6 +7,7 @@
     xmlns:c="using:Microsoft.PowerToys.Settings.UI.Converters"
     xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
     xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls"
+    xmlns:toolkitcontrols="using:Microsoft.Toolkit.Uwp.UI.Controls"
     mc:Ignorable="d"
     AutomationProperties.LandmarkType="Main">
 
@@ -19,66 +20,73 @@
                                   ModuleImageLink="https://aka.ms/PowerToysOverview_Awake">
         <controls:SettingsPageControl.ModuleContent>
             <StackPanel Orientation="Vertical">
-                <ToggleSwitch x:Uid="Awake_EnableAwake" IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" />
 
-                <TextBlock x:Uid="Awake_Behavior_GroupSettings"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}"
-                       Style="{StaticResource SettingsGroupTitleStyle}"/>
+                <controls:Setting x:Uid="Awake_EnableAwake">
+                    <controls:Setting.Icon>
+                        <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsAwake.png" ShowAsMonochrome="False" />
+                    </controls:Setting.Icon>
+                    <controls:Setting.ActionContent>
+                        <ToggleSwitch IsOn="{x:Bind ViewModel.IsEnabled, Mode=TwoWay}" FlowDirection="RightToLeft" />
+                    </controls:Setting.ActionContent>
+                </controls:Setting>
 
-                <CheckBox x:Uid="Awake_EnableDisplayKeepAwake"
-                      IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
-                      IsChecked="{x:Bind ViewModel.KeepDisplayOn, Mode=TwoWay}"
-                      Margin="{StaticResource XSmallTopMargin}" />
 
-                <TextBlock x:Uid="Awake_Mode"
-                       Margin="{StaticResource SmallTopMargin}"
-                       x:Name="ModeTitleLabel"
-                       Opacity="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled, Converter={StaticResource ModuleEnabledToOpacityConverter}}" />
 
-                <StackPanel AutomationProperties.LabeledBy="{Binding ElementName=ModeTitleLabel}"
-                        Margin="0,-8,0,0">
-                    <RadioButton x:Uid="Awake_NoKeepAwake"
-                             Margin="{StaticResource SmallTopMargin}"
+
+                <toolkitcontrols:HeaderedItemsControl x:Uid="Awake_Behavior_GroupSettings">
+                    <controls:Setting x:Uid="Awake_EnableDisplayKeepAwake" Icon="&#xE7FB;">
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch FlowDirection="RightToLeft" IsOn="{x:Bind ViewModel.KeepDisplayOn, Mode=TwoWay}" />
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                    
+                    <muxc:Expander IsExpanded="True" Style="{StaticResource SettingsExpanderStyle}">
+                        <muxc:Expander.Header>
+                            <controls:Setting x:Uid="Awake_Mode" Icon="&#xEC4E;" Style="{StaticResource ExpanderHeaderSettingStyle}" />
+                        </muxc:Expander.Header>
+                        <muxc:Expander.Content>
+                            <StackPanel Padding="16" Spacing="12">
+                                <RadioButton x:Uid="Awake_NoKeepAwake"
                              IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                              IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=0}">
-                        <RadioButton.Content>
-                            <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
+                                    <RadioButton.Content>
+                                        <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
                         <Run x:Uid="Awake_NoKeepAwakeContent"/>
                         <LineBreak/>
-                        <Run Foreground="{ThemeResource SystemBaseMediumColor}"
+                        <Run Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                              x:Uid="Awake_NoKeepAwakeDescription"/>
-                            </TextBlock>
-                        </RadioButton.Content>
-                    </RadioButton>
-                    <RadioButton x:Uid="Awake_IndefiniteKeepAwake"
-                             Margin="{StaticResource SmallTopMargin}"
+                                        </TextBlock>
+                                    </RadioButton.Content>
+                                </RadioButton>
+                                <RadioButton x:Uid="Awake_IndefiniteKeepAwake"
                              IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                              IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=1}">
-                        <RadioButton.Content>
-                            <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
+                                    <RadioButton.Content>
+                                        <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
                         <Run x:Uid="Awake_IndefiniteKeepAwakeContent"/>
                         <LineBreak/>
-                        <Run Foreground="{ThemeResource SystemBaseMediumColor}"
+                        <Run Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                              x:Uid="Awake_IndefiniteKeepAwakeDescription"/>
-                            </TextBlock>
-                        </RadioButton.Content>
-                    </RadioButton>
-                    <RadioButton x:Uid="Awake_TemporaryKeepAwake"
-                             Margin="{StaticResource SmallTopMargin}"
+                                        </TextBlock>
+                                    </RadioButton.Content>
+                                </RadioButton>
+                                <RadioButton x:Uid="Awake_TemporaryKeepAwake"
                              IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsEnabled}"
                              IsChecked="{x:Bind Path=ViewModel.Mode, Mode=TwoWay, Converter={StaticResource AwakeModeToBoolConverter}, ConverterParameter=2}">
-                        <RadioButton.Content>
-                            <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
+                                    <RadioButton.Content>
+                                        <TextBlock TextWrapping="WrapWholeWords" LineHeight="20">
                         <Run x:Uid="Awake_TemporaryKeepAwakeContent"/>
                         <LineBreak/>
-                        <Run Foreground="{ThemeResource SystemBaseMediumColor}"
+                        <Run Foreground="{ThemeResource TextFillColorSecondaryBrush}"
                              x:Uid="Awake_TemporaryKeepAwakeDescription"/>
-                            </TextBlock>
-                        </RadioButton.Content>
-                    </RadioButton>
+                                        </TextBlock>
+                                    </RadioButton.Content>
+                                </RadioButton>
+                                <StackPanel AutomationProperties.LabeledBy="{Binding ElementName=ModeTitleLabel}"
+                        Margin="0,-8,0,0">
 
-                    <StackPanel Margin="28,8,0,0" Orientation="Horizontal">
-                        <muxc:NumberBox x:Uid="Awake_TemporaryKeepAwake_Hours"
+                                    <StackPanel Margin="28,8,0,0" Orientation="Horizontal">
+                                        <muxc:NumberBox x:Uid="Awake_TemporaryKeepAwake_Hours"
                             Value="{x:Bind ViewModel.Hours, Mode=TwoWay}"
                             Minimum="0"
                             SpinButtonPlacementMode="Compact"
@@ -87,7 +95,7 @@
                             IsEnabled="{x:Bind ViewModel.IsTimeConfigurationEnabled, Mode=OneWay}"
                             SmallChange="1" 
                             LargeChange="5"/>
-                        <muxc:NumberBox x:Uid="Awake_TemporaryKeepAwake_Minutes"
+                                        <muxc:NumberBox x:Uid="Awake_TemporaryKeepAwake_Minutes"
                             Value="{x:Bind ViewModel.Minutes, Mode=TwoWay}"
                             Minimum="0"
                             SpinButtonPlacementMode="Compact"
@@ -97,8 +105,16 @@
                             MinWidth="90"
                             SmallChange="1" 
                             LargeChange="5"/>
-                    </StackPanel>
-                </StackPanel>
+                                    </StackPanel>
+                                </StackPanel>
+                            </StackPanel>
+                        </muxc:Expander.Content>
+                    </muxc:Expander>
+                </toolkitcontrols:HeaderedItemsControl>
+
+              
+
+               
             </StackPanel>
         </controls:SettingsPageControl.ModuleContent>
 
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
index 3ba4310ed9..8077b46377 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/GeneralPage.xaml
@@ -189,7 +189,8 @@
                             <StackPanel Orientation="Vertical">
                                 <controls:Setting x:Uid="GeneralSettings_AlwaysRunAsAdminText" IsEnabled="{Binding Mode=TwoWay, Path=IsElevated}" Style="{StaticResource ExpanderContentSettingStyle}">
                                     <controls:Setting.Description>
-                                        <HyperlinkButton NavigateUri="https://aka.ms/powertoysDetectedElevatedHelp"
+                                        <HyperlinkButton
+                                            NavigateUri="https://aka.ms/powertoysDetectedElevatedHelp"
                                              x:Uid="GeneralPage_ToggleSwitch_AlwaysRunElevated_Link"/>
                                     </controls:Setting.Description>
                                     <controls:Setting.ActionContent>
diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
index d5f7fa0b53..0518b784d1 100644
--- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
+++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Views/PowerPreviewPage.xaml
@@ -40,13 +40,13 @@
 
 
                 <toolkitcontrols:HeaderedItemsControl x:Uid="FileExplorerPreview_PreviewPane_GroupSettings">
-                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_Preview_SVG" Icon="&#xE12A;">
+                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_Preview_SVG" Icon="&#xE91B;">
                         <controls:Setting.ActionContent>
                             <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.SVGRenderIsEnabled}" FlowDirection="RightToLeft" />
                         </controls:Setting.ActionContent>
                     </controls:Setting>
 
-                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_Preview_MD" Icon="&#xE12A;">
+                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_Preview_MD" Icon="&#xE943;">
                         <controls:Setting.ActionContent>
                             <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.MDRenderIsEnabled}" FlowDirection="RightToLeft" />
                         </controls:Setting.ActionContent>
@@ -54,7 +54,7 @@
                 </toolkitcontrols:HeaderedItemsControl>
 
                 <toolkitcontrols:HeaderedItemsControl x:Uid="FileExplorerPreview_IconThumbnail_GroupSettings">
-                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_SVG_Thumbnail" Icon="&#xE12A;">
+                    <controls:Setting x:Uid="FileExplorerPreview_ToggleSwitch_SVG_Thumbnail" Icon="&#xE91B;">
                         <controls:Setting.ActionContent>
                             <ToggleSwitch IsOn="{x:Bind Mode=TwoWay, Path=ViewModel.SVGThumbnailIsEnabled}" FlowDirection="RightToLeft" />
                         </controls:Setting.ActionContent>