Main Window Frameless

[Sheepux]

Changes the main window to frameless.
Top left menu is now draggable and includes minimize,maximize and close buttons.
Connectors's browser window is still with frame enabled.

Todo :

• Check pre-flight-check steps that can be related to this change and detail the following tests
• Test on Windows
• • The default menubar should appear during loading then disapears after theme load
• • Button Minimize sends hakunko to the minimized state
• • Button Maximize sends hakunko to the full size of the screen (but not in "full screen" mode)
• • Clicking on Maximize again restores the window to it's original size
• • The windows is only draggable on the top left part (#Menu), move it around while in non maximized state.
• • Double clicking on the draggable part is triggering the Maximize function (do the same tests as before)
• • The configuration menu (on top left) is still clickable.
• • The unmaximized window can be resized in 3 corners (top right, bottom right, bottom left). The resize icon appears when on the 4 edge (top bottom, left, right)
• • Open a connector's website from the connector pannel and asses that the window topbar is here as well as system controls (min, max, close buttons)
• • Button Close closes hakunko (and no electron process is still runing afterwards)
• • Run pre-flight steps 40 & 41
• Test on Linux
• • The default menubar should appear during loading then disapears after theme load
• • Button Minimize sends hakunko to the minimized state
• • Button Maximize sends hakunko to the full size of the screen (but not in "full screen" mode)
• • Clicking on Maximize again restores the window to it's original size
• • The windows is only draggable on the top left part (#Menu), move it around while in non maximized state.
• • Double clicking on the draggable part is triggering the Maximize function (do the same tests as before)
• • The configuration menu (on top left) is still clickable.
• • The unmaximized window can be resized in 3 corners (top right, bottom right, bottom left). The resize icon appears when on the 4 edge (top bottom, left, right)
• • Open a connector's website from the connector pannel and asses that the window topbar is here as well as system controls (min, max, close buttons)
• • Button Close closes hakunko (and no electron process is still runing afterwards)
• • Run pre-flight steps 40 & 41
• Test on MacOS
• ⚠️ The default menubar should appear during loading then disapears after theme load
  Menu bar appears, but there are 3 squares instead of min/max/close symbols
• • Button Minimize sends hakunko to the minimized state
• • Button Maximize sends hakunko to the full size of the screen (but not in "full screen" mode)
• • Clicking on Maximize again restores the window to it's original size
• • The windows is only draggable on the top left part (#Menu), move it around while in non maximized state.
• ❌ Double clicking on the draggable part is triggering the Maximize function (do the same tests as before)
• • The configuration menu (on top left) is still clickable.
• • The unmaximized window can be resized in 3 corners (top right, bottom right, bottom left). The resize icon appears when on the 4 edge (top bottom, left, right)
• • Open a connector's website from the connector pannel and asses that the window topbar is here as well as system controls (min, max, close buttons)
• • Button Close closes hakunko (and no electron process is still runing afterwards)
• • Run pre-flight steps 40 & 41

[ronny1982]

Looks good.
Needs to be tested on macOS and Linux (Ubuntu, debian w. GNOME)

The pro of this may also be the con:
Each front-end can have a customized title bar, but each front-end must always implement a title bar.

How about evaluating a solution (if this is even possible), where the title bar is part of the index.html file and a front-end may or may not replace it?

[Sheepux]

How about evaluating a solution (if this is even possible), where the title bar is part of the index.html file and a front-end may or may not replace it?

I see what you mean, i'll take a look at it

[Sheepux]

Added default menubar in index.html that can be hidden within the theme css ( it works!:)
Tests coverage updated.
Ran successfully on windows.

[Sheepux]

Regarding the icons during loading time maybe macOS dooesn't recognise those UTF8 chars:
🗕🗖🗙
https://www.fileformat.info/info/unicode/char/1f5d5/index.htm
https://www.fileformat.info/info/unicode/char/1f5d6/index.htm
https://www.fileformat.info/info/unicode/char/1f5d6/index.htm

I should probably prefix it with pure text :
Min🗕 Max🗖 Close🗙
Any idea? :)
Edit: images ?

[Sheepux]

Regarding the double click... could it be a windows's behavior ? Do we consider this as an anomaly (don't know much about MacOS) ?

[ronny1982]

I couldn't find a font that shows these unicode characters, so i suggested either to use embedded gifs as base64 data URLs or using SVG sprites, which seems to be the best practice right now (maybe also switching fontawesome from font system to SVG sprites ...)

macOS usually maximizes the window as well when double clicking the title bar. I have no clue why this is not working and if it is essential to be working on macOS or not.

[Sheepux]

Regarding the double click maximize I've just found this :
electron/electron#16385
I'm unsure if we should add the extra code just for MacOS.

[ronny1982]

Maybe its possible to just capture the javascript double click event on the element and call the same methods (toggle) as when clicking the maximize/minimize buttons

[ronny1982]

Looks good