Add keyboard manager settings ui[Part-1] (#1979)

* Added view and data models for keyboard remapper settings page

* Added intial UI of Keyboard manager settings page

* Fixed Sln file configs

* Resolve UI changes PR comments

* Added UId for UI elements

* Moved Ui strings to resx

* resolve stylecop warnings

* Fixed missing tag from resx file
This commit is contained in:
udit3333
2020-04-08 13:53:09 -07:00
committed by GitHub
parent c7774d3d6c
commit bc4ea885dc
14 changed files with 434 additions and 385 deletions

View File

@@ -0,0 +1,196 @@
<Page
x:Class="Microsoft.PowerToys.Settings.UI.Views.KeyboardManagerPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Microsoft.PowerToys.Settings.UI.Views"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewmodels="using:Microsoft.PowerToys.Settings.UI.ViewModels"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<viewmodels:RemapKeysModel x:Key="dummyData"/>
<DataTemplate x:Name="KeysListViewTemplate" x:DataType="viewmodels:RemapKeysModel">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200"/>
<ColumnDefinition Width="200"/>
</Grid.ColumnDefinitions>
<Border Background="{ThemeResource SystemBaseLowColor}"
CornerRadius="4"
Grid.Column="0"
Width="70"
Height="35"
HorizontalAlignment="Left">
<TextBlock Grid.Column="0"
Style="{StaticResource BodyTextBlockStyle}"
VerticalAlignment="Center"
TextAlignment="Center"
Text="{Binding From}">
</TextBlock>
</Border>
<Border Background="{ThemeResource SystemBaseLowColor}"
CornerRadius="4"
Grid.Column="1"
Width="70"
Height="35"
HorizontalAlignment="Left">
<TextBlock Grid.Column="1"
Style="{StaticResource BodyTextBlockStyle}"
VerticalAlignment="Center"
TextAlignment="Center"
Text="{Binding To}">
</TextBlock>
</Border>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid ColumnSpacing="{StaticResource DefaultColumnSpacing}" RowSpacing="{StaticResource DefaultRowSpacing}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="LayoutVisualStates">
<VisualState x:Name="WideLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource WideLayoutMinWidth}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SidePanel.(Grid.Column)" Value="1" />
<Setter Target="SidePanel.(Grid.Row)" Value="0" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="SmallLayout">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource SmallLayoutMinWidth}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="SidePanel.(Grid.Column)" Value="0" />
<Setter Target="SidePanel.(Grid.Row)" Value="1" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical">
<TextBlock x:Uid="KeyboardManager_Description"
TextWrapping="Wrap"
Style="{StaticResource BodyTextBlockStyle}"/>
<ToggleSwitch x:Uid="KeyboardManager_EnableToggle"
IsOn="True"
Margin="{StaticResource SmallTopMargin}" />
<TextBlock x:Uid="KeyboardManager_ConfigHeader"
Style="{StaticResource SettingsGroupTitleStyle}"
Margin="{StaticResource SmallTopMargin}"/>
<ComboBox SelectedIndex="1"
Margin="{StaticResource SmallTopMargin}"
HorizontalAlignment="Left">
<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}"/>
<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>
<ListView x:Name="RemapKeysList"
ItemsSource="{StaticResource dummyData}"
ItemTemplate="{StaticResource KeysListViewTemplate}"
BorderBrush="LightGray"
BorderThickness="1"
CornerRadius="4"
Width="400"
MaxHeight="150"
Margin="{StaticResource SmallTopMargin}"
HorizontalAlignment="Left">
</ListView>
<TextBlock x:Uid="KeyboardManager_RemapShortcutsHeader"
Style="{StaticResource SubtitleTextBlockStyle}"
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>
<ListView x:Name="RemapShortcutsList"
ItemsSource="{StaticResource dummyData}"
ItemTemplate="{StaticResource KeysListViewTemplate}"
BorderBrush="LightGray"
BorderThickness="1"
CornerRadius="4"
Width="400"
MaxHeight="150"
Margin="{StaticResource SmallTopMargin}"
HorizontalAlignment="Left">
</ListView>
</StackPanel>
<StackPanel x:Name="SidePanel"
Orientation="Vertical"
HorizontalAlignment="Left"
Width="{StaticResource SidePanelWidth}"
Grid.Column="1">
<TextBlock Text="About this feature"
Style="{StaticResource SettingsGroupTitleStyle}"
Margin="{StaticResource XSmallBottomMargin}"/>
<HyperlinkButton Content="Module overview"/>
<HyperlinkButton Content="Give feedback"/>
<TextBlock Text="Contributors"
Style="{StaticResource SettingsGroupTitleStyle}"/>
<HyperlinkButton Content="Contributor name"/>
<HyperlinkButton Content="Contributor name"/>
<HyperlinkButton Content="Contributor name"/>
</StackPanel>
</Grid>
</Page>

View File

@@ -0,0 +1,22 @@
// 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 Microsoft.PowerToys.Settings.UI.ViewModels;
using Windows.UI.Xaml.Controls;
namespace Microsoft.PowerToys.Settings.UI.Views
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class KeyboardManagerPage : Page
{
public KeyboardManagerViewModel ViewModel { get; } = new KeyboardManagerViewModel();
public KeyboardManagerPage()
{
this.InitializeComponent();
}
}
}

View File

@@ -92,6 +92,13 @@
<PathIcon Data="M0 768h1408v1152H0V768zm128 1024h870l-582-581-288 288v293zm1152 0v-102l-224-223-101 101 223 224h102zM128 896v421l288-287 448 447 192-191 224 224V896H128zm832 256q-26 0-45-19t-19-45q0-26 19-45t45-19q26 0 45 19t19 45q0 26-19 45t-45 19zm960-512V347l-339 338-90-90 338-339h-293V128h512v512h-128zm-768-512h256v128h-256V128zm-128 128H768V128h256v128zm-384 0H384V128h256v128zm-384 0H0V128h256v128zM128 640H0V384h128v256zm1920 128v256h-128V768h128zm-128 384h128v256h-128v-256zm0 384h128v256h-128v-256zm-384 256h256v128h-256v-128z"></PathIcon>
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
<!-- TO DO: Update icon -->
<winui:NavigationViewItem x:Uid="Shell_KeyboardManager" helpers:NavHelper.NavigateTo="views:KeyboardManagerPage">
<winui:NavigationViewItem.Icon>
<FontIcon Glyph="&#xE765;"/>
</winui:NavigationViewItem.Icon>
</winui:NavigationViewItem>
</winui:NavigationView.MenuItems>
<i:Interaction.Behaviors>
<behaviors:NavigationViewHeaderBehavior