Replace current about dialog with settings page

[grochocki]

Problem Statement
Calculator currently does not have a settings page, which will block future work. The current about dialog is also inconsistent with many other Microsoft apps.

Evidence or User Insights
Many suggested features have suggested adding options in settings (#538, #486, #485, #393, #382, #215), and while we have not accepted all of these pitches, it is inevitable that there will be functionality requiring settings UX.

Proposal
Replace current about dialog with settings page.

Goals

• Replace current about dialog with settings page
• Be consistent with settings UX patterns established in other Microsoft apps
• Add basic theme selection option common across many other apps

Non-Goals

• Add any additional options at this time

Low-Fidelity Concept

Requested Assignment
I'm just suggesting this idea. I don't want to implement it.

[ghost]

This pitch looks like it has everything it needs for review. In the meantime, we'll keep this idea open for discussion so the community has the chance to provide feedback. Check out our New Feedback Process for more info on the user-centered process we follow for new feature development.

[MicrosoftIssueBot]

This is your friendly Microsoft Issue Bot. I've seen this issue come in and have gone to tell a human about it.

[skyanchor]

And what about this feature into Settings to disable clearing inputs when changing modes https://github.com/microsoft/calculator/issues/114

[grochocki]

It looks like the pitch for #114 was accepted. I think the idea with that one is that we would just always preserve input between modes (without a setting).

[ghost]

We reviewed the pitch and would love to explore this idea further! The pitch is a great start, but there are still some open questions. I am moving this issue into planning to iron out some of those details and I created calculator-specs/settingsPage to track progress. A human will follow up with some feedback on your pitch shortly. Keep in mind that not all ideas that make it into the planning phase are guaranteed to make it to release. For more information on next steps, check out our spec workflow.

[mdtauk]

[grochocki]

Thanks for putting these together! They are pretty spot on with what I had in mind. A few bits of feedback:

I can't quite tell from the mockup if "Settings" is the same heading level as "App Mode", but I imagine we would want to establish clear hierarchy here (especially when we start adding more settings). For reference, many other apps leverage TitleTextBlockStyle for section headers.

Also, for consistency with other apps, the bottom section should have an "About this app" section header. We'll also want to tighten up the vertical spacing and horizontal alignment a bit in this section:

_{Courtesy XAML Studio}

<TextBlock
    Margin="0,0,0,8"
    Style="{StaticResource TitleTextBlockStyle}"
    Text="About this app"
    TextTrimming="Clip" />

<TextBlock
    Margin="0,0,0,4"
    Style="{StaticResource BodyTextBlockStyle}"
    IsTextSelectionEnabled="True">
    <Run Text="APPNAME" />
    <Run Text="VERSION" />
    <LineBreak />
    <Run FlowDirection="LeftToRight" Text="© 2020 Microsoft. All rights reserved." />
</TextBlock>

<HyperlinkButton
    Margin="0,-2"
    HorizontalAlignment="Left"
    NavigateUri="https://go.microsoft.com/fwlink/?LinkId=529064">
    <TextBlock Text="Microsoft Software License Terms" TextWrapping="Wrap" />
</HyperlinkButton>

<HyperlinkButton
    Margin="0,-2"
    HorizontalAlignment="Left"
    NavigateUri="https://go.microsoft.com/fwlink/?LinkId=822631">
    <TextBlock Text="Microsoft Services Agreement" TextWrapping="Wrap" />
</HyperlinkButton>

<HyperlinkButton
    Margin="0,-2"
    HorizontalAlignment="Left"
    NavigateUri="https://go.microsoft.com/fwlink/?LinkID=521839">
    <TextBlock Text="Microsoft Privacy Statement" TextWrapping="Wrap" />
</HyperlinkButton>

<Button
    x:Name="FeedbackButton"
    Margin="0,24"
    Click="OnSendFeedbackButtonClick"
    Content="Send feedback" />

[Chips1234]

Just telling everyone, I'm working on this (and #486 since those two are similar)

[Chips1234]

@mdtauk How did you create that concept? Did you do it with the code? If so, would you please share the code in MainPage with me? I'm creating the spec. Thanks!

[mdtauk]

I'm afraid it's just a graphic mock up.

I did put the app into a debugger, and used the live visual tree to hide the controls to get a blank screen.

[Chips1234]

Alright. Thanks anyways.

[ghost]

This feature is ready for spec review! We will leave microsoft/calculator-specs#24 open for a little while to give the community the chance to review and provide feedback. Keep in mind that not all ideas that make it into spec review are guaranteed to make it to release. For more information on next steps, check out our new feature process and spec workflow.

[grochocki]

@mdtauk, I made a couple tweaks based on your mock, so I would appreciate any feedback you have on the spec.

@Chips1234, once microsoft/calculator-specs#24 is approved, it is all yours to implement, if you are still interested!

[Chips1234]

Ah, thank you!

[Chips1234]

Also, since you’re there, can you give feedback on my spec? Thanks

[Chips1234]

Alright. I’ll start work on this. Thanks!

[Chips1234]

The only thing is, I still can't figure out the part about the entry point:

return mode == ViewMode::Settings;

that code is in MainPage.cpp (since the footer is constructed there and not in NavCategory) but the code above does not seem to return Settings

[Chips1234]

I uploaded a branch for the full code that I'm having trouble with. Take a look here at this branch.

[Chips1234]

@grochocki? (Sorry for the mention but I really need a quick answer)

[Chips1234]

@sanderl Could you help? Thanks!

[sanderl]

@Chips1234, I've pulled the branch you have created and I'm trying out some changes. I'll let you know what I figure out.

[Chips1234]

@sanderl. Great, thanks!

[sanderl]

@Chips1234, Ok, I got it work so that it can navigate to the page. You need to update OnSettingButtonClick to assign the Model->mode value like this:

void MainPage::OnSettingsButtonClick(Object ^ sender, ItemClickEventArgs ^ e, ViewMode /mode/)
{
Model->Mode = ViewMode::Settings;
}

static const list s_categoryManifest to include a new entry for settings like this (the icon needs to be updated):
NavCategoryInitializer{ ViewMode::Settings,
SETTINGS_ID,
L"Settings",
L"CategoryName_Settings",
L"\uF515",
CategoryGroupType::None,
MyVirtualKey::None,
nullptr,
false,
true }

When I tested this out, it is navigating to a blank page which is expected because there is no content in the Settings.xaml.

[Chips1234]

Thanks for the help!

[Chips1234]

@sanderl One last question, in SettingsPage.cpp, my changed method I tried:

void SettingsPage::ThemeRadioButtonChecked(Platform::Object ^ sender, Windows::UI::Xaml::RoutedEventArgs ^ e)
{
    if (SettingsLightTheme->IsChecked)
    {
        Application.RequestedTheme = 1; 
    }
}

but it does not seem to work (the doc you shared with me seems to be for C#)

[hanzhang54]

We have replaced the about dialog with settings page in #1618. The new Calculator supports to change the app theme without restarting the app. 😎