search

natcap / invest

InVEST®: models that map and value the goods and services from nature that sustain and fulfill human life.
Apache License 2.0
170 stars 70 forks source link

Add a visual distinction between the top titlebar and the rest of the page #866

Open davemfish opened 3 years ago

davemfish commented 3 years ago

The top titlebar is the place where one can click & drag on the window to move it around. So that clickable area should be distinct somehow (e.g. light gray?) from the rest of the page. I'm not sure if this only applies to Windows where the menubar is attached the window.

davemfish commented 3 years ago

Unfortunately this is not a trivial fix. There is no way to customize the native Windows titlebar. I notice the same lack of visual distinction for the draggable area exists in other Windows apps, like Explorer, Sublime, etc.

A workaround is to hide the titlebar altogether, and then rebuild a custom one from scratch in the renderer process. That approach is implemented in https://www.npmjs.com/package/custom-electron-titlebar, but I would be weary of a library fix for this. This one in particular isn't compatible with contextIsolation: true and nodeIntegration: false and it depends on the deprecated electron remote.

We can decide to deal with all this at some point, but I think I'll remove the beta milestone for now since it's not a critical enhancement, and is a lot of effort for what it's worth.

emlys commented 3 years ago

Can confirm that this isn't an issue on mac. The menubar isn't attached to the window, and the top part of the window that you can click-and-drag is a contrasting light gray color.

This info about dark mode might be relevant, I wonder if we could use the prefer-color-scheme option to set our own light mode theme.