Skip to content

Commit

Permalink
Add the profile, page icons to the page headers (#10046)
Browse files Browse the repository at this point in the history 
## Summary of the Pull Request

Adds the profile icons to the page header. I had to manually create the header, and manually bind it to the `Icon` and `Content` of each `NavViewItem`. 

It's important that each `NavViewItem`'s icon is set as an `IconSource`, so that we can bind to it. If it's just a plain old `FontIcon`, then we can't re-use it. 

Additionally, I removed the manual sizing of all font icons to font size 12. That would make font icons _tiny_ in the header. Now, they'll properly re-use the size of the `NavigationViewTitleHeaderContentControlTextStyle` in the nav view header. This involved also manually making the icons smaller on the `AddProfile` page and in the `CommandPalette`.

As per usual, images are in Teams


## PR Checklist
* [x] Closes #9694
* [x] I work here
* [ ] Tests added/passed
* [n/a] Requires documentation to be updated

## Validation Steps Performed
* Checked (bitmap|font) icons in tabs
* (bitmap|font) icons in the flyout
* (bitmap|font) icons in command palette
* (bitmap|font) icons in the nav view
* (bitmap|font) icons in the header
* (bitmap|font) icons in the add profile page
  • Loading branch information
@zadjii-msft
zadjii-msft authored May 13, 2021
1 parent bfc4838 commit a3a2a41
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 20 deletions.
19 changes: 13 additions & 6 deletions src/cascadia/TerminalApp/CommandPalette.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,15 @@
x:DataType="local:FilteredCommand">
<Grid HorizontalAlignment="Stretch"
ColumnSpacing="8">

<!--
Manually set the icon to 24x16. Why 24?
If it's a BitmapIcon, then the icon will just get clamped to 16x16.
However, if it's a FontIcon, then the icon might actually be double wide.
Giving it a width of 24 will allow a 12pt font icon enough space, in a row height of 16 wide.
-->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="24" />
<!-- icon -->
<ColumnDefinition Width="Auto" />
<!-- command label -->
Expand All @@ -60,7 +67,7 @@
</Grid.ColumnDefinitions>

<IconSourceElement Grid.Column="0"
Width="16"
Width="24"
Height="16"
IconSource="{x:Bind Item.Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />

Expand Down Expand Up @@ -99,7 +106,7 @@
<Grid HorizontalAlignment="Stretch"
ColumnSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="24" />
<!-- icon -->
<ColumnDefinition Width="Auto" />
<!-- command label -->
Expand All @@ -110,7 +117,7 @@
</Grid.ColumnDefinitions>

<IconSourceElement Grid.Column="0"
Width="16"
Width="24"
Height="16"
IconSource="{x:Bind Item.Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />

Expand Down Expand Up @@ -162,7 +169,7 @@
AutomationProperties.Name="{x:Bind Item.Name, Mode=OneWay}"
ColumnSpacing="8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="24" />
<!-- icon / progress -->
<ColumnDefinition Width="Auto" />
<!-- command label -->
Expand All @@ -185,7 +192,7 @@
Value="{x:Bind Item.(local:TabPaletteItem.TabStatus).ProgressValue, Mode=OneWay}" />

<IconSourceElement Grid.Column="0"
Width="16"
Width="24"
Height="16"
IconSource="{x:Bind Item.Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />

Expand Down
11 changes: 8 additions & 3 deletions src/cascadia/TerminalSettingsEditor/AddProfile.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,21 @@
<DataTemplate x:DataType="model:Profile">
<Grid HorizontalAlignment="Stretch"
ColumnSpacing="8">

<Grid.ColumnDefinitions>
<!-- icon -->
<ColumnDefinition Width="16" />
<ColumnDefinition Width="Auto" />
<!-- profile name -->
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>

<!--
Manually set the icon to 24x16. Why 24?
If it's a BitmapIcon, then the icon will just get clamped to 16x16.
However, if it's a FontIcon, then the icon might actually be double wide.
Giving it a width of 24 will allow a 12pt font icon enough space, in a row height of 16 wide.
-->
<IconSourceElement Grid.Column="0"
Width="16"
Width="24"
Height="16"
IconSource="{x:Bind Icon, Mode=OneWay, Converter={StaticResource IconSourceConverter}}" />

Expand Down
8 changes: 6 additions & 2 deletions src/cascadia/TerminalSettingsEditor/MainPage.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,9 +377,13 @@ namespace winrt::Microsoft::Terminal::Settings::Editor::implementation
addProfileItem.Content(box_value(RS_(L"Nav_AddNewProfile/Content")));
addProfileItem.Tag(box_value(addProfileTag));

FontIcon icon;
// Wrap this icon up in a IconSourceElement, so we can bind to it in the
// Header above the Pivot.
WUX::Controls::IconSourceElement icon;
FontIconSource fontIcon;
// This is the "Add" symbol
icon.Glyph(L"\xE710");
fontIcon.Glyph(L"\xE710");
icon.IconSource(fontIcon);
addProfileItem.Icon(icon);

SettingsNav().MenuItems().Append(addProfileItem);
Expand Down
57 changes: 49 additions & 8 deletions src/cascadia/TerminalSettingsEditor/MainPage.xaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,54 +35,91 @@
</Page.Resources>

<muxc:NavigationView x:Name="SettingsNav"
Header="{Binding ElementName=SettingsNav, Path=SelectedItem.Content, Mode=OneWay}"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False"
ItemInvoked="SettingsNav_ItemInvoked"
Loaded="SettingsNav_Loaded"
TabFocusNavigation="Cycle">

<muxc:NavigationView.Header>
<StackPanel Orientation="Horizontal">
<!--
This height is taken from NavigationViewTitleHeaderContentControlTextStyle's
FontSize. Our icons may or may not be font icons, so we want to make sure to clamp them to this size.
-->
<IconSourceElement Height="28"
Margin="{ThemeResource NavigationViewHeaderMargin}"
IconSource="{Binding ElementName=SettingsNav, Path=SelectedItem.Icon.IconSource, Mode=OneWay}" />
<TextBlock Margin="{ThemeResource NavigationViewHeaderMargin}"
Text="{Binding ElementName=SettingsNav, Path=SelectedItem.Content, Mode=OneWay}" />
</StackPanel>
</muxc:NavigationView.Header>

<muxc:NavigationView.MenuItems>

<muxc:NavigationViewItem x:Uid="Nav_Launch"
Tag="Launch_Nav">
<muxc:NavigationViewItem.Icon>
<FontIcon Glyph="&#xE7B5;" />
<IconSourceElement>
<IconSourceElement.IconSource>
<FontIconSource Glyph="&#xE7B5;" />
</IconSourceElement.IconSource>
</IconSourceElement>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>

<muxc:NavigationViewItem x:Uid="Nav_Interaction"
Tag="Interaction_Nav">
<muxc:NavigationViewItem.Icon>
<FontIcon Glyph="&#xE7C9;" />
<IconSourceElement>
<IconSourceElement.IconSource>
<FontIconSource Glyph="&#xE7C9;" />
</IconSourceElement.IconSource>
</IconSourceElement>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>

<muxc:NavigationViewItem x:Uid="Nav_Appearance"
Tag="GlobalAppearance_Nav">
<muxc:NavigationViewItem.Icon>
<FontIcon Glyph="&#xE771;" />
<IconSourceElement>
<IconSourceElement.IconSource>
<FontIconSource Glyph="&#xE771;" />
</IconSourceElement.IconSource>
</IconSourceElement>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>

<muxc:NavigationViewItem x:Uid="Nav_ColorSchemes"
Tag="ColorSchemes_Nav">
<muxc:NavigationViewItem.Icon>
<FontIcon Glyph="&#xE790;" />
<IconSourceElement>
<IconSourceElement.IconSource>
<FontIconSource Glyph="&#xE790;" />
</IconSourceElement.IconSource>
</IconSourceElement>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>

<muxc:NavigationViewItem x:Uid="Nav_Rendering"
Tag="Rendering_Nav">
<muxc:NavigationViewItem.Icon>
<FontIcon Glyph="&#xE7F8;" />
<IconSourceElement>
<IconSourceElement.IconSource>
<FontIconSource Glyph="&#xE7F8;" />
</IconSourceElement.IconSource>
</IconSourceElement>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>

<muxc:NavigationViewItem x:Uid="Nav_Actions"
Tag="Actions_Nav">
<muxc:NavigationViewItem.Icon>
<FontIcon Glyph="&#xE765;" />
<IconSourceElement>
<IconSourceElement.IconSource>
<FontIconSource Glyph="&#xE765;" />
</IconSourceElement.IconSource>
</IconSourceElement>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>

Expand All @@ -97,7 +134,11 @@
KeyDown="OpenJsonKeyDown"
Tapped="OpenJsonTapped">
<muxc:NavigationViewItem.Icon>
<FontIcon Glyph="&#xE713;" />
<IconSourceElement>
<IconSourceElement.IconSource>
<FontIconSource Glyph="&#xE713;" />
</IconSourceElement.IconSource>
</IconSourceElement>
</muxc:NavigationViewItem.Icon>
</muxc:NavigationViewItem>
</muxc:NavigationView.PaneFooter>
Expand Down
1 change: 0 additions & 1 deletion src/cascadia/TerminalSettingsModel/IconPathConverter.cpp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,6 @@ namespace winrt::Microsoft::Terminal::Settings::Model::implementation
// Note: you _do_ need to manually set the font here.
icon.FontFamily(winrt::Windows::UI::Xaml::Media::FontFamily{ L"Segoe UI" });
}
icon.FontSize(12);
icon.Glyph(iconPath);
iconSource = icon;
}
Expand Down

0 comments on commit a3a2a41

Please sign in to comment.