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

[Desktop] Add native win32 / linux custom window #2228

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

Conversation

webfiltered
Copy link
Contributor

@webfiltered webfiltered commented Jan 11, 2025

There is a lot of overlap between this PR and the reverted PRs, but it was significantly less effort to get the features I wanted to reimpl. from #1856 this way.

Behaviour differences

  • When UseNewMenu is Bottom or Disabled, the custom window mode is set to default
    • A custom title bar at the bottom of a window creates a few UX issues in Win11 (e.g. drag from maximise teleports the window). Cannot be resolved without reimpl. core Windows functionality.
  • When custom window style is selected, UseNewMenu is set to Top
  • Removed prompt to restart app - window is immediately recreated on setting change
  • Hover highlights are provided by OS for all colour palettes, incl. custom
    image
    image
  • The drag area on the router views with full flat backgrounds is much larger
    • No stats, but personal exp. is that this is reasonably common in splash screens / when the whole window is a flat sheet

Code changes

  • Electron-scoped CSS via data attrib applied in App.vue
  • The top menu should require little ongoing maintenance with app-drag
  • Adapts to topbar size using ResizeObserver

┆Issue is synchronized with this Notion page by Unito

@webfiltered webfiltered changed the title Desktop window v [Desktop] Add native win32 / linux custom window Jan 11, 2025
@webfiltered webfiltered marked this pull request as ready for review January 11, 2025 15:36
Copy link
Member

@huchenlei huchenlei left a comment

Choose a reason for hiding this comment

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

There are a few concerns:

Virtual Title Bar

Why we want to drop the virtual titlebar design? The virtual titlebar matches the user intuition. While making custom draggable area for each view seems wrong to me. I made the BaseViewTemplate specifically to address the issue that we need to specify draggable area for each view.

Ref: Window settings window draggable area:

image

Bottom menu location

Is there any reason why we want to drop the support for bottom menu location? Current design supports the location while the PR drops it.

})
}
})
/** Height of titlebar on desktop. */
Copy link
Member

Choose a reason for hiding this comment

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

I don' think the resize observer is necessary after #2209 as the topbar menu height is now fixed.


<style lang="postcss">
/* Desktop: Custom window styling */
:root[data-platform='electron'] {
Copy link
Member

Choose a reason for hiding this comment

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

Why are we restoring the logo change? I don't think that is something we want to ship:

  1. Our current logo looks bad at icon scale.
  2. On-going new logo design.
    1. Taking up extra space on the menu bar with no extra benefit provided.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just a summary of points elsewhere:
Design-wise, there is an expectation of an icon / logo in the top left corner. It's very hard to find any apps that do not have an icon of some kind as the top left part of their window. Apps with just text in the very top left corner feel incomplete or cut off.

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.

2 participants