Electron: -webkit-app-region: drag works but it doesn't let me click the buttons in my custom title bar

Viewed 1479

I am working with Electron and I'm trying to make a custom title bar - I have been successful so far. But the most important function of a title bar is gone - dragging the app across the screen.

I read on the internet about the -webkit-app-region: drag; property and it works! Problem is... I can't click any of the buttons in the title bar now! Is there a way to fix this?

HTML:

<div style="position: absolute; top: 0; width: 100%; height: 29px; overflow: hidden; z-index: 50; background: rgba(255, 255, 255, 0.8);" class="titlebar">
    <h1 style="float: left; opacity: 0.85; margin: 4px 0 0 44%; font-family: Jost-400-Book; font-size: 12pt;">Dashboard - Wealm</h1>
    <button id="closeApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Multicolore; font-size: 18pt; margin-top: 2px;">x</button>
    <button id="minApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Multicolore; font-size: 18pt; margin-top: 2px;">-</button>
</div>

JavaScript:

        ...
        const remote = require('electron').remote;
        document.getElementById("minApp").addEventListener("click", function (e) {
            document.getElementById('minApp').style.opacity = '0.55';
            var window = remote.getCurrentWindow();
            window.minimize(); 
        });
        document.getElementById("closeApp").addEventListener("click", function (e) {
            document.getElementById('closeApp').style.opacity = '0.55';
            var window = remote.getCurrentWindow();
            window.close();
        });
        document.getElementById('minApp').onmouseover = function() {
            document.getElementById('minApp').style.opacity = '1';
        }
        document.getElementById('minApp').onmouseout = function() {
            document.getElementById('minApp').style.opacity = '0.55';
        }
        document.getElementById('closeApp').onmouseover = function() {
            document.getElementById('closeApp').style.opacity = '1';
        }
        document.getElementById('closeApp').onmouseout = function() {
            document.getElementById('closeApp').style.opacity = '0.55';
        }
        ...

Any kind of advice is highly appreciated! Have a great day!

1 Answers

It's me again! I managed to solve the issue by changing the HTML like this:

<div style="position: absolute; top: 0; width: 100%; height: 29px; overflow: hidden; z-index: 50; background: rgba(255, 255, 255, 0.8);" class="titlebar">
    <div class="dragzone" style="-webkit-app-region: drag; overflow: hidden; position: absolute; left: 0; width: 990px; height: 29px;"></div>
    <h1 style="float: left; opacity: 0.85; margin: 4px 0 0 44%; font-family: Jost-400-Book; font-size: 12pt;">Dashboard - Wealm</h1>
    <button id="closeApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Eight One; font-size: 18pt; margin-top: 2px;">x</button>
    <button id="minApp" style="font-weight: bold; opacity: 0.55; float: right; background: none; border: none; outline: none; font-family: Eight One; font-size: 18pt; margin-top: 2px;">-</button>
</div>

There's now a new element that covers part of the whole title bar except for the buttons and is set with the property -webkit-app-region: drag; that allows the window to be dragged.

Have a great day!

Related