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

Style Layout Controls on Windows to better align with Window Controls Style #158659

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

wmentha
Copy link

@wmentha wmentha commented Aug 20, 2022

PR Summary

Styles the layout controls on the top-right corner of the Windows client window to better match window control buttons (Minimize/Maximize/Restore Down/Close).

PR Context

This changes the Windows Client (non-web) version's titlebar to be more inline with Windows style guidelines for titlebars as their dimensions are flush with the windows control buttons. This can be seen on other Microsoft apps such as Outlook for the Ribbon Display Options button:

outlook_titlebar

In #138350 @sbatten noted:

I don't think we want this button to look like it's a native window control.

However, I believe the extra height that takes up the entire titlebar's height improves usability. Currently when the window is maximized, moving your cursor to the very top of the windows will not hover over the layout controls when above them which feels imprecise.

I chose a width of 35px for the layout controls as I thought that was an appropriate size.

Demonstration

StyleLayoutControlsWindows

This styles the Layout Controls on Windows to better align with the Window Controls. The are now less awkward to click as the their height now takes up the height of the titlebar.
@sbatten
Copy link
Member

sbatten commented Oct 7, 2022

@wmentha Thanks for your contribution. I don't think the matter is quite settled yet, but I do think we can address one of the issues you call out, which is the ability to trigger the controls from the top of the screen. We solved this issue with the menubar styling as well. @daviddossett what do you think?

@daviddossett
Copy link
Contributor

While I agree that the hit area for layout controls and command center controls (at least the back/forward buttons) should fill the entire height like we've done for the menubar, I don't think we should follow the Windows background styling given that the rest of the title bar elements (menu bar, command center, layout controls, etc.) share the same styling across platforms.

Here's the menu bar hover behavior today. The hovering anywhere on the title bar will trigger the hover, even above or below the visible background color here:

image

@wmentha
Copy link
Author

wmentha commented Oct 11, 2022

@daviddossett The changes for the dimensions of the layout controls have only been changed for Windows to be flush with the system caption buttons like in other Windows applications. However if consistency is key, the style can be reset and I can investigate changing the hit area for them instead to fill the titlebar. Just thought the visual feedback of the hover aligning with the hit area for them was nicer.

@daviddossett daviddossett removed their assignment Dec 14, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants