Hyper: Make fullscreen look pretty (Title bar is transparent and overlaps content on fullscreen)

[leo]

Currently, the title bar looks like this:

[dariocravero]

@leo may that depend on something else on your config? I can see it right

However, if I go with my mouse to the top I can force that view that you got

[bastilian]

I think there just needs to be a style applied to the title bar to cover what is beneath it.

[leo]

@dariocravero Yep! The bug only appears when making the title bar visible using the cursor.

@bastilian Probably, yes! Haven't looked into implementing it yet.

[rauchg]

@leo how can I reproduce this?

[leo]

@rauchg Click on the green traffic light to make the app go fullscreen. After that, slowly move your cursor from the middle of the app to the menu bar at the top. At some point, the title bar (which contains the traffic lights) should show up and look like on my screenshot.

[rauchg]

woah good catch @leo

[albinekb]

In the latest Hyperterm release (0.7.1) it looks like this:

However, there's still some visual issues with tabs (traffic lights sliding over the tab borders), maybe make the tabs slide down with the menu?

Traffic lights not showing (like it should be) but the margin is still there, don't know what the best solution for solving this is:

[efegurkan]

127 is also related i believe.

[timothyis]

Here's my proposal.

Fullscreen reacts normally with no traffic lights:

And if we can detect when the user hover at the top/the menu bar with the traffic lights drops down, we apply a gradient over the HyperTerm header section:

This way the user has what they want in full screen and when the traffic lights drop down, they are accessing what they want without an ugly interaction between multiple elements.

[mattiascaricato]

@CodeTheory how could I help to get this done?

[lyndsysimon]

This seems to be fixed in 1.2.1.

[timothyis]

Not fixed @leo

[leo]

@CodeTheory That's related to the theme, isn't it? Works fine for mine. Why is the issue open again now? Have you tested with the default one?

[mxmzb]

freshly installed hyper terminal without any plugins or themes on my mac shows the same issue (you have to actually fullscreen and it shows only when you move the mouse to the top edge of the display).

[timothyis]

Yeah, the same issue applies to vanilla hyper @leo

Custom red background set in the config:

The title/tabs bar should ideally slide down with the bar that contains the traffic lights and has the shadow and then also the bar should have some sort of non-intrusive background like the gradient I showed before.

[ryzokuken]

A ton of really erratic behavior in fullscreen really puts me off:

1. The tab bar should not have a margin/empty space for the traffic lights. It might look okay for a single tab, certainly looks ugly for multiple tabs.

2. The custom bar that slides down looks plain ugly, use the standard MacOS titlebar instead.

Actual (Hyper 1.4.8)

Expected (Firefox 58.0)

Final checklist of suggestions

• Keep the traffic lights when not in fullscreen
• Make the traffic lights disappear (without leaving any space) when switching to fullscreen
• When the user brings down the menubar, a thin MacOS titlebar should slide in alongside the traffic lights.

[ryzokuken]

P.S. Apps like VSCode and Atom do the same, so that rules out "it must not be possible/easy in electron"

[ShumailAhmed123]

Hi,
I am computer Science student. I am new to GitHub and I would like to make my first contribution. Anyone here please help me or guide to make my first contribution.
Thanks