Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Main page declutter and provide app version #182

Merged
merged 17 commits into from
Sep 1, 2021

Conversation

nick5616
Copy link
Contributor

@nick5616 nick5616 commented Aug 6, 2021

Overview

  1. Right-justified header content (system/app information and buttons), which solves WinUI 3 causes buttons in upper right to move every time network info changes #181
  2. Added AppVersion to the header content
  3. Augmented network information button/flyout to support the inclusion other system information
  4. Refactored to be called 'SystemButton', 'SystemFlyout', etc.
  5. Added some visual distinction to the header buttons
  6. Made main page responsiveness more robust

Screenshots

Main Page

image

Responsiveness

Medium screen width:
image
Small screen width:
image

@nick5616 nick5616 added bug Something isn't working enhancement New feature or request QOL Quality-of-life / code clean-up labels Aug 6, 2021
@nick5616
Copy link
Contributor Author

nick5616 commented Aug 6, 2021

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

src/App/Resources/zh-CN/Resources.resw Outdated Show resolved Hide resolved
Nicolas Belovoskey added 2 commits August 6, 2021 15:45
spaceisfun
spaceisfun previously approved these changes Aug 6, 2021
<StackPanel Orientation="Horizontal">
<!--<TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xEDA3;" FontSize="30" VerticalAlignment="Center" />-->

<SymbolIcon Symbol="More" Foreground="{ThemeResource TextFillColorSecondary}" Width="30" Height="30"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider using a different icon, not "...". "..." usually implies a interactive menu, not readonly information.

Alternates i like, https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-ui-symbol-font:
image

image

image

</StackPanel>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="5">
<TextBlock x:Name="OEMVersionHeader" Text="" VerticalAlignment="Center" HorizontalAlignment="Left" TextWrapping="Wrap" Style="{StaticResource CaptionTextBlockStyle}" IsTextSelectionEnabled="True"/>
<TextBlock x:Name="AppVersionHeader" Text="" VerticalAlignment="Top" HorizontalAlignment="Left" TextWrapping="Wrap" Style="{StaticResource CaptionTextBlockStyle}" IsTextSelectionEnabled="True"/>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

seems odd that app version is visible but service version is hidden behind the button. Id consider hiding both

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Id also keep os version in the forefront, as OEMs frequently are juggling multiple OS images and devices might boot without working input/connectivity, so being able to quickly tell os version is useful.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have learned that app version is very useful for our own diagnosis as we can identify what is running in screen shots.

If there is no working input/connectivity, how is the information on OS version used?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Hey microsoft i'm running factoryos build blah and i dont see input" 😄. Also not every device can have network working. ie CENT had issues there early in bringup.

My 2c is that very few apps so prominently display their version and i feel like oems care more about network connectivity & os version > app version.

you could consider adding a footer with more info too? or rotating through info like i did with the networks, but that wont help screenshots

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the idea of a footer, with small print. It would be akin to having a watermark on the Windows desktop. That would serve our purposes for analyzing screenshots.

I'd like to be deliberate about the layout, now that we will have multiple people working on this, and potentially multiple customers. We need to be able to innovate on the design, but with context about exactly which content is required by customers to be constantly visible. Ideally we would have this as part of a design spec, with each required element called out with the scenario it supports. PM involvement would be helpful for this, so we can also solicit direct feedback.

src/App/Resources/en-US/Resources.resw Outdated Show resolved Hide resolved
<SymbolIcon Symbol="More" Foreground="{ThemeResource TextFillColorSecondary}" Width="30" Height="30"/>
</StackPanel>
<Button.Flyout>
<Flyout x:Name="ConfigFlyout" Opening="ConfigFlyout_Opening">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if this is generic sysinfo, what else would be useful?

  • battery info?
  • total Memory?
  • free disk space / used space?
  • Serial Number
  • Computer Hardware ID
  • System manifest info

src/App/MainPage.xaml Show resolved Hide resolved
@nick5616
Copy link
Contributor Author

nick5616 commented Aug 6, 2021

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@nick5616
Copy link
Contributor Author

nick5616 commented Sep 1, 2021

/azp run

@azure-pipelines
Copy link

Pull request contains merge conflicts.

@nick5616
Copy link
Contributor Author

nick5616 commented Sep 1, 2021

/azp run

@azure-pipelines
Copy link

Azure Pipelines successfully started running 1 pipeline(s).

@nick5616 nick5616 merged commit 78b11c2 into microsoft:main Sep 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request QOL Quality-of-life / code clean-up
Projects
None yet
Development

Successfully merging this pull request may close these issues.

WinUI 3 causes buttons in upper right to move every time network info changes
4 participants