Add icon to profile title on settings UI #9694

cinnamon-msft · 2021-04-02T17:58:20Z

Description of the new feature/enhancement

If would be cool if we displayed the icon of the profile at the top of the profile page on the settings UI.

Proposed technical implementation details (optional)

vastatio-xoxo · 2021-04-27T07:47:14Z

Hi, do you have any UI mockups (for dimensions, spacings etc) for the icon?

## 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

…0124) This reverts commit a3a2a41. #10046 causes a crash on save. MainPage::UpdateSettings() is unable to update the navigation view's selected item due to an "incorrect parameter". This is particularly strange to see because #10046 only modifies the navigation view's header, not the menu items themselves. Reverting this change fixes that crash (verified). Reopens #9694

HimanshuMahto · 2023-10-18T04:17:07Z

Hey can you assign this to me

zadjii-msft · 2023-10-18T14:01:55Z

@HimanshuMahto Let us know if you need any help ☺️

HimanshuMahto · 2023-10-18T14:05:23Z

Since I'm new to this can you help me @zadjii-msft

zadjii-msft · 2023-10-18T14:16:59Z

Sure thing! I'd start by looking at #10046. That was an earlier attempt to do this, which we ultimately reverted in #10124. We had to revert that due to some crash when you saved the settings, but I'm thinking that crash is probably no longer applicable?

Now, the thing is, we've kinda re-written the settings UI since that original PR. It's still structurally pretty much the same, but there's been some minor changes to account for the Windows 11 style differences. You'll probably still want to put the icon in:

terminal/src/cascadia/TerminalSettingsEditor/MainPage.xaml

Lines 67 to 98 in 1745857

    
           <muxc:NavigationView x:Name="SettingsNav" 
        
                                Background="{ThemeResource SettingsPageBackground}" 
        
                                IsBackButtonVisible="Collapsed" 
        
                                IsSettingsVisible="False" 
        
                                ItemInvoked="SettingsNav_ItemInvoked" 
        
                                Loaded="SettingsNav_Loaded" 
        
                                TabFocusNavigation="Cycle"> 
        
               <muxc:NavigationView.Resources> 
        
                   <ResourceDictionary> 
        
                       <Thickness x:Key="NavigationViewHeaderMargin">15,0,0,0</Thickness> 
        
                   </ResourceDictionary> 
        
               </muxc:NavigationView.Resources> 
        
               <muxc:NavigationView.Header> 
        
                   <muxc:BreadcrumbBar x:Name="NavigationBreadcrumbBar" 
        
                                       MaxWidth="{StaticResource StandardControlMaxWidth}" 
        
                                       ItemClicked="BreadcrumbBar_ItemClicked" 
        
                                       ItemsSource="{x:Bind Breadcrumbs}"> 
        
                       <muxc:BreadcrumbBar.ItemTemplate> 
        
                           <DataTemplate x:DataType="local:Breadcrumb"> 
        
                               <TextBlock Text="{x:Bind Label}" /> 
        
                           </DataTemplate> 
        
                       </muxc:BreadcrumbBar.ItemTemplate> 
        
                       <muxc:BreadcrumbBar.Resources> 
        
                           <ResourceDictionary> 
        
                               <x:Double x:Key="BreadcrumbBarItemThemeFontSize">28</x:Double> 
        
                               <Thickness x:Key="BreadcrumbBarChevronPadding">11,4,12,0</Thickness> 
        
                               <FontWeight x:Key="BreadcrumbBarItemFontWeight">SemiBold</FontWeight> 
        
                               <x:Double x:Key="BreadcrumbBarChevronFontSize">16</x:Double> 
        
                           </ResourceDictionary> 
        
                       </muxc:BreadcrumbBar.Resources> 
        
                   </muxc:BreadcrumbBar> 
        
               </muxc:NavigationView.Header>

HimanshuMahto · 2023-10-19T18:47:33Z

okay, I got it. hey, Can I get your contact so that I can ask you questions in person if you don't mind? @zadjii-msft

zadjii-msft · 2023-10-19T21:58:09Z

To be totally honest - I'd prefer to keep discussion on GitHub. Reasons include (but aren't limited to):

I'm terrible at replying to mails. There's just too much volume, and I'm known to read an email, not immediately reply, then forget about it. I'm somehow better about replying to GitHub
No one should judge anyone for asking questions. Ever. How could anyone ever learn anything without starting by asking questions?
If you have questions about contributing to the Terminal (or really any part of our dev stack here), then chances are, others will too. Better to leave an archive of notes for future people to learn from too ☺️

HimanshuMahto · 2023-10-20T04:08:54Z

okay, thanks for the advice.

HimanshuMahto · 2023-10-20T19:16:46Z

Hey, @zadjii-msft I'm new to this and don't know how to run and see the changes though I have installed powershell pro tools and powershell in the VS code and did try to run the code but it wasn't showing anything. Can you please help me. I know its a silly question but I don't know how to do it and want to learn want to contribute to this.

HimanshuMahto · 2023-10-21T19:40:23Z

Hey @zadjii-msft @DHowett @cinnamon-msft need a help

zadjii-msft · 2023-10-24T17:18:49Z

@HimanshuMahto Did you try following these steps in the README?

Once you've got the code checked out and the tools installed, the easiest way to test the code is to open up OpenConsole.sln, set the config to

(or x86 if you're on an x86 machine for some reason)

and hit the big green play button to start debugging.

HimanshuMahto · 2023-10-24T17:27:27Z

Got it @zadjii-msft. Thanks a lot i will start working on it.

HimanshuMahto · 2023-10-25T15:41:37Z

Hey, @zadjii-msft, I tried what you said but its still not working.

rohiitgit · 2024-03-10T15:31:16Z

Hii, seems like the last person was unsuccessful at this. Can you assign this to me? It will be my first issue.

zadjii-msft · 2024-03-11T11:34:18Z

You can just go ahead and start working on things without necessarily being assigned. Usually we really only use the Assignees field if someone on the core team has to be the one to deal with an issue 😝

Kore-rep · 2024-04-17T17:43:23Z

Hi @zadjii-msft, pretty much done with the implementation of this (i.e. just kinda copying your old code across). Did you ever manage to overcome the resolution scaling issues? The font icons look fine, but the powershell icon, when scaled up to a height of 28 looks quite horrible.

aditya-sahu · 2024-11-25T04:36:27Z

@Kore-rep Are you still working on this?
Can I start working on this if you're not working?

zadjii-msft · 2024-11-25T11:43:02Z

Sorry, I think I missed that earlier message 😅

I never really looked into the image scaling. It sounds like something I looked at briefly, where IconPathConverter always loads icons at a fixed size:

terminal/src/cascadia/UIHelpers/IconPathConverter.cpp

Lines 335 to 336 in ae90d52

    
           icon.Width(32); 
        
           icon.Height(32);

terminal/src/cascadia/UIHelpers/IconPathConverter.cpp

Lines 158 to 160 in ae90d52

    
           icon.FontSize(12); 
        
           icon.Glyph(iconPath); 
        
           iconSource = icon;

but I can't be sure. I'd reckon it's probably more valuable to put out a PR with this change as it is now. That'd force our hands to make sure we fix that :P

Kore-rep · 2024-11-25T13:49:27Z

Hi @aditya-sahu, I've opened a PR with my changes, feel free to make any changes you want to for that. I never resolved the image scaling issue, or did any particular refactoring to make things nicer, its a pretty barebones implementation

#18244

cinnamon-msft added the Issue-Feature Complex enough to require an in depth planning process and actual budgeted, scheduled work. label Apr 2, 2021

ghost added Needs-Triage It's a new issue that the core contributor team needs to triage at the next triage meeting Needs-Tag-Fix Doesn't match tag requirements labels Apr 2, 2021

cinnamon-msft added Area-Settings UI Anything specific to the SUI Product-Terminal The new Windows Terminal. labels Apr 2, 2021

ghost removed the Needs-Tag-Fix Doesn't match tag requirements label Apr 2, 2021

zadjii-msft added this to the Terminal v2.0 milestone Apr 7, 2021

zadjii-msft self-assigned this May 6, 2021

zadjii-msft mentioned this issue May 6, 2021

Add the profile, page icons to the page headers #10046

Merged

3 tasks

ghost added the In-PR This issue has a related PR label May 6, 2021

ghost closed this as completed in #10046 May 13, 2021

ghost added Resolution-Fix-Committed Fix is checked in, but it might be 3-4 weeks until a release. and removed In-PR This issue has a related PR labels May 13, 2021

carlos-zamora mentioned this issue May 18, 2021

Revert "Add the profile, page icons to the page headers (#10046)" #10124

Merged

DHowett reopened this May 18, 2021

DHowett removed the Resolution-Fix-Committed Fix is checked in, but it might be 3-4 weeks until a release. label May 18, 2021

zadjii-msft modified the milestones: Terminal v2.0, 22H2 Jan 4, 2022

zadjii-msft removed their assignment May 5, 2022

zadjii-msft modified the milestones: 22H2, Backlog Dec 5, 2022

zadjii-msft added this to Terminal Walkthroughs Feb 6, 2023

zadjii-msft moved this to Should be written in Terminal Walkthroughs Feb 6, 2023

Psychorex13 mentioned this issue Oct 18, 2023

Terminal installed on Windows Server 2022 with pre-installation package will not open #16091

Open

lhecker assigned HimanshuMahto Oct 18, 2023

zadjii-msft unassigned HimanshuMahto Mar 11, 2024

Kore-rep linked a pull request Nov 25, 2024 that will close this issue

Add Icon on App profile page #18244

Open

4 tasks

microsoft-github-policy-service bot added the In-PR This issue has a related PR label Nov 25, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add icon to profile title on settings UI #9694

Add icon to profile title on settings UI #9694

cinnamon-msft commented Apr 2, 2021

vastatio-xoxo commented Apr 27, 2021

HimanshuMahto commented Oct 18, 2023

zadjii-msft commented Oct 18, 2023

HimanshuMahto commented Oct 18, 2023 •

edited

Loading

zadjii-msft commented Oct 18, 2023

HimanshuMahto commented Oct 19, 2023 •

edited

Loading

zadjii-msft commented Oct 19, 2023

HimanshuMahto commented Oct 20, 2023

HimanshuMahto commented Oct 20, 2023

HimanshuMahto commented Oct 21, 2023 •

edited

Loading

zadjii-msft commented Oct 24, 2023

HimanshuMahto commented Oct 24, 2023

HimanshuMahto commented Oct 25, 2023

rohiitgit commented Mar 10, 2024

zadjii-msft commented Mar 11, 2024

Kore-rep commented Apr 17, 2024

aditya-sahu commented Nov 25, 2024

zadjii-msft commented Nov 25, 2024

Kore-rep commented Nov 25, 2024

Add icon to profile title on settings UI #9694

Add icon to profile title on settings UI #9694

Comments

cinnamon-msft commented Apr 2, 2021

Description of the new feature/enhancement

Proposed technical implementation details (optional)

vastatio-xoxo commented Apr 27, 2021

HimanshuMahto commented Oct 18, 2023

zadjii-msft commented Oct 18, 2023

HimanshuMahto commented Oct 18, 2023 • edited Loading

zadjii-msft commented Oct 18, 2023

HimanshuMahto commented Oct 19, 2023 • edited Loading

zadjii-msft commented Oct 19, 2023

HimanshuMahto commented Oct 20, 2023

HimanshuMahto commented Oct 20, 2023

HimanshuMahto commented Oct 21, 2023 • edited Loading

zadjii-msft commented Oct 24, 2023

HimanshuMahto commented Oct 24, 2023

HimanshuMahto commented Oct 25, 2023

rohiitgit commented Mar 10, 2024

zadjii-msft commented Mar 11, 2024

Kore-rep commented Apr 17, 2024

aditya-sahu commented Nov 25, 2024

zadjii-msft commented Nov 25, 2024

Kore-rep commented Nov 25, 2024

HimanshuMahto commented Oct 18, 2023 •

edited

Loading

HimanshuMahto commented Oct 19, 2023 •

edited

Loading

HimanshuMahto commented Oct 21, 2023 •

edited

Loading