From 0ee034a084036bd51ade0a640f60aa8202faa228 Mon Sep 17 00:00:00 2001 From: Niels Laute Date: Mon, 5 Apr 2021 10:52:44 +0200 Subject: [PATCH] [OOBE] Bolded shortcuts / instructions (#10574) * Colorpicker keys * Key visuals added * Added highlighted text * Undo comment Co-authored-by: Niels Laute --- .../Microsoft.PowerToys.Settings.UI/App.xaml | 1 + .../Controls/KeyVisual/KeyVisual.cs | 30 +++++++++ .../Controls/KeyVisual/KeyVisual.xaml | 57 +++++++++++++++++ .../Controls/ShortcutTextControl.xaml | 11 ++++ .../Controls/ShortcutTextControl.xaml.cs | 60 ++++++++++++++++++ .../Controls/ShortcutVisualControl.xaml | 15 +++++ .../Controls/ShortcutVisualControl.xaml.cs | 62 +++++++++++++++++++ .../Microsoft.PowerToys.Settings.UI.csproj | 22 +++++++ .../OOBE/Views/OobeColorPicker.xaml | 19 +++--- .../OOBE/Views/OobeFancyZones.xaml | 12 ++-- .../OOBE/Views/OobeFileExplorer.xaml | 6 +- .../OOBE/Views/OobeImageResizer.xaml | 9 ++- .../OOBE/Views/OobeKBM.xaml | 7 +-- .../OOBE/Views/OobePowerRename.xaml | 4 +- .../OOBE/Views/OobeRun.xaml | 10 +-- .../OOBE/Views/OobeShortcutGuide.xaml | 8 +-- .../OOBE/Views/OobeVideoConference.xaml | 6 +- .../Strings/en-us/Resources.resw | 29 +++++---- .../Styles/TextBlock.xaml | 1 + 19 files changed, 313 insertions(+), 56 deletions(-) create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/KeyVisual/KeyVisual.cs create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/KeyVisual/KeyVisual.xaml create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutTextControl.xaml create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutTextControl.xaml.cs create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutVisualControl.xaml create mode 100644 src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutVisualControl.xaml.cs diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/App.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/App.xaml index 2055310eb0..8427250f74 100644 --- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/App.xaml +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/App.xaml @@ -8,6 +8,7 @@ + diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/KeyVisual/KeyVisual.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/KeyVisual/KeyVisual.cs new file mode 100644 index 0000000000..1ef7ec2410 --- /dev/null +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/KeyVisual/KeyVisual.cs @@ -0,0 +1,30 @@ +// Copyright (c) Microsoft Corporation +// The Microsoft Corporation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using Windows.UI.Xaml; +using Windows.UI.Xaml.Controls; + +namespace Microsoft.PowerToys.Settings.UI.Controls +{ + public sealed class KeyVisual : Control + { + public object Content + { + get => (string)GetValue(ContentProperty); + set => SetValue(ContentProperty, value); + } + + public static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content", typeof(object), typeof(KeyVisual), new PropertyMetadata(default(string))); + + public KeyVisual() + { + this.DefaultStyleKey = typeof(KeyVisual); + } + + protected override void OnApplyTemplate() + { + base.OnApplyTemplate(); + } + } +} diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/KeyVisual/KeyVisual.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/KeyVisual/KeyVisual.xaml new file mode 100644 index 0000000000..16d9b0f4cf --- /dev/null +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/KeyVisual/KeyVisual.xaml @@ -0,0 +1,57 @@ + + + + + + #12FFFFFF + #18FFFFFF + #0FFFFFFF + + + + + #0F000000 + #29000000 + #B3FFFFFF + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutTextControl.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutTextControl.xaml new file mode 100644 index 0000000000..307515efa1 --- /dev/null +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutTextControl.xaml @@ -0,0 +1,11 @@ + + + diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutTextControl.xaml.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutTextControl.xaml.cs new file mode 100644 index 0000000000..7767a73581 --- /dev/null +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutTextControl.xaml.cs @@ -0,0 +1,60 @@ +// Copyright (c) Microsoft Corporation +// The Microsoft Corporation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using System; +using System.Linq; +using System.Runtime.InteropServices.WindowsRuntime; +using System.Text.RegularExpressions; +using Windows.UI.Text; +using Windows.UI.Xaml; +using Windows.UI.Xaml.Controls; +using Windows.UI.Xaml.Documents; + +namespace Microsoft.PowerToys.Settings.UI.Controls +{ + public sealed partial class ShortcutTextControl : UserControl + { + public string Text + { + get => (string)GetValue(TextProperty); + set => SetValue(TextProperty, value); + } + + public ShortcutTextControl() + { + this.InitializeComponent(); + } + + public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(ShortcutVisualControl), new PropertyMetadata(default(string), (s, e) => + { + var self = (ShortcutTextControl)s; + var parts = Regex.Split(e.NewValue.ToString(), @"({[\s\S]+?})").Where(l => !string.IsNullOrEmpty(l)).ToArray(); + + foreach (var seg in parts) + { + if (!string.IsNullOrWhiteSpace(seg)) + { + if (seg.Contains("{", StringComparison.InvariantCulture)) + { + Run key = new Run() + { + Text = Regex.Replace(seg, @"[{}]", string.Empty), + FontWeight = FontWeights.SemiBold, + }; + self.ContentText.Inlines.Add(key); + } + else + { + Run description = new Run() + { + Text = seg, + FontWeight = FontWeights.Normal, + }; + self.ContentText.Inlines.Add(description); + } + } + } + })); + } +} diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutVisualControl.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutVisualControl.xaml new file mode 100644 index 0000000000..0050ba6749 --- /dev/null +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutVisualControl.xaml @@ -0,0 +1,15 @@ + + + + \ No newline at end of file diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutVisualControl.xaml.cs b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutVisualControl.xaml.cs new file mode 100644 index 0000000000..90559b3e7f --- /dev/null +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Controls/ShortcutVisualControl.xaml.cs @@ -0,0 +1,62 @@ +// Copyright (c) Microsoft Corporation +// The Microsoft Corporation licenses this file to you under the MIT license. +// See the LICENSE file in the project root for more information. + +using System; +using System.Linq; +using System.Runtime.InteropServices.WindowsRuntime; +using System.Text.RegularExpressions; +using Windows.UI.Xaml; +using Windows.UI.Xaml.Controls; + +namespace Microsoft.PowerToys.Settings.UI.Controls +{ + public sealed partial class ShortcutVisualControl : UserControl + { + public ShortcutVisualControl() + { + InitializeComponent(); + } + + public string Text + { + get => (string)GetValue(TextProperty); + set => SetValue(TextProperty, value); + } + + public static readonly DependencyProperty TextProperty = DependencyProperty.Register("Text", typeof(string), typeof(ShortcutVisualControl), new PropertyMetadata(default(string), (s, e) => + { + var self = (ShortcutVisualControl)s; + var parts = Regex.Split(e.NewValue.ToString(), @"({[\s\S]+?})").Where(l => !string.IsNullOrEmpty(l)).ToArray(); + + foreach (var seg in parts) + { + if (!string.IsNullOrWhiteSpace(seg)) + { + if (seg.Contains("{", StringComparison.InvariantCulture)) + { + KeyVisual k = new KeyVisual + { + Content = Regex.Replace(seg, @"[{}]", string.Empty), + VerticalAlignment = VerticalAlignment.Center, + }; + + self.contentPanel.Children.Add(k); + } + else + { + TextBlock t = new TextBlock + { + Text = seg, + TextWrapping = TextWrapping.Wrap, + VerticalAlignment = VerticalAlignment.Top, + Margin = new Thickness(0, 6, 0, 0), + }; + + self.contentPanel.Children.Add(t); + } + } + } + })); + } +} diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj index ceef74642e..2d865ca040 100644 --- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Microsoft.PowerToys.Settings.UI.csproj @@ -98,6 +98,13 @@ HotkeySettingsControl.xaml + + + ShortcutTextControl.xaml + + + ShortcutVisualControl.xaml + Code @@ -241,6 +248,9 @@ 6.1.1 + + 6.1.1 + 6.1.2 @@ -272,6 +282,18 @@ MSBuild:Compile Designer + + Designer + MSBuild:Compile + + + Designer + MSBuild:Compile + + + Designer + MSBuild:Compile + Designer MSBuild:Compile diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeColorPicker.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeColorPicker.xaml index 07341ea2cd..597e67482a 100644 --- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeColorPicker.xaml +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeColorPicker.xaml @@ -6,7 +6,8 @@ xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" - Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> + xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls" + Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> @@ -38,16 +39,14 @@ - - - - + + + + - - + + @@ -38,13 +39,14 @@ - + + + - + + @@ -40,9 +41,8 @@ - - + + diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml index 54b57ea2e9..25f6c14d6c 100644 --- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeImageResizer.xaml @@ -5,7 +5,8 @@ xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" - mc:Ignorable="d" + xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls" + mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> @@ -41,14 +42,12 @@ - + - + @@ -40,14 +41,12 @@ - + - + @@ -41,8 +42,7 @@ - + diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml index 5330d0ff17..53736a5456 100644 --- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeRun.xaml @@ -5,7 +5,8 @@ xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" - mc:Ignorable="d" + xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls" + mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> @@ -42,13 +43,12 @@ - - + + - + @@ -42,9 +43,8 @@ - - + + diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml index 77fd3a3f9c..4e309a3fe2 100644 --- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/OOBE/Views/OobeVideoConference.xaml @@ -5,7 +5,8 @@ xmlns:local="using:Microsoft.PowerToys.Settings.UI.OOBE.Views" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" - mc:Ignorable="d" + xmlns:controls="using:Microsoft.PowerToys.Settings.UI.Controls" + mc:Ignorable="d" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> @@ -41,8 +42,7 @@ - + PowerToys in our release notes. - Win + Shift + C to open Color Picker. + {Win} + {Ctrl} + {C} to open Color Picker. - To select a color with more precision, scroll the mouse wheel to zoom in. + To select a color with more precision, {scroll the mouse wheel} to zoom in. - Shift + drag while dragging the window to snap a window to a zone, and release the window in the desired zone. -Win + ` to open the FancyZones editor. + {Shift} + {dragging the window} to snap a window to a zone, and release the window in the desired zone. {Win} + {`} to open the FancyZones editor. - Snap a window to multiple zones by holding the Ctrl key (while also holding Shift) when dragging a window. + Snap a window to multiple zones by holding the {Ctrl} key (while also holding {Shift}) when dragging a window. - Open Windows File Explorer, select the View tab in the File Explorer ribbon, then select Preview Pane. + Open File Explorer, {select the View tab} in the File Explorer ribbon, then {select Preview Pane}. From there, simply click on a Markdown file or SVG icon in the File Explorer and observe the content on the preview pane! @@ -1073,39 +1072,39 @@ From there, simply click on a Markdown file or SVG icon in the File Explorer and How to use - In File Explorer, right-clicking one or more image files and clicking on Resize pictures from the context menu. + In File Explorer, {right-clicking one or more image files} and {clicking on Resize pictures} from the context menu. Want a custom size? You can add them in the PowerToys Settings! - Launch PowerToys settings, navigate to the Keyboard Manager menu, and select either Remap a key or Remap a shortcut. + Launch {PowerToys settings}, navigate to the Keyboard Manager menu, and select either {Remap a key} or {Remap a shortcut}. Want to only have a shortcut work for a single application? Use the Target App field when creating the shortcut remapping. - In File Explorer, right-clicking one or more selected files and clicking on PowerRename from the context menu. + In File Explorer, {right-clicking one or more selected files} and {clicking on PowerRename} from the context menu. PowerRename supports searching for files using regular expressions to enable more advanced renaming functionalities. - Alt + Space to open PowerToys and just start typing. + {Alt} + {Space} to open Run and just start typing. - PowerToys runs supports various action keys to funnel search queries for a specific subset of results. Typing < searches for running processes only, ? will search only for file, or . for installed applications! See PowerToys documentation for the complete set of 'Action Keys' available. + PowerToys Run supports various action keys to funnel search queries for a specific subset of results. Typing {<} searches for running processes only, {?} will search only for file, or {.} for installed applications! See PowerToys documentation for the complete set of 'Action Keys' available. - Win + ? to open Shortcut Guide, press it again to close or press Esc. You can also launch it by holding the Win key for one second! + {Win} + {?} to open Shortcut Guide, press it again to close or press {Esc}. You can also launch it by holding the {Win} key for one second! Tips & tricks - Win + N to toggle both your microphone and video -Win + Shift + A to toggle your microphone -Win + Shift + O to toggle your video + {Win} + {N} to toggle both your microphone and video +{Win} + {Shift} + {A} to toggle your microphone +{Win} + {Shift} + {O} to toggle your video Color Picker diff --git a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/TextBlock.xaml b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/TextBlock.xaml index e8ee207831..782c1b675e 100644 --- a/src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/TextBlock.xaml +++ b/src/settings-ui/Microsoft.PowerToys.Settings.UI/Styles/TextBlock.xaml @@ -31,6 +31,7 @@ \ No newline at end of file