Bezramowe okno z elementami sterującymi w elektronach (Windows)

Question

Chcę, aby moja aplikacja nie miała paska tytułu, ale nadal może być zamykana, przeciągalna, możliwa do zminimalizowania, zmaksymalizowana i skalowalna jak zwykłe okno. Mogę to zrobić w OS X, ponieważ istnieje opcja titleBarStyle o nazwie hidden-inset, z której mogę korzystać, ale niestety nie jest ona dostępna dla systemu Windows, na którym rozwijam platformę. Jak chciałbym zrobić coś takiego w systemie Windows?

Here's an example o czym mówię.

Answer 1

Zakładając, że nie chcesz, aby okno było chromowane, możesz to zrobić, usuwając ramkę wokół elektronu i wypełniając resztę za pomocą html/css/js. Napisałem artykuł, który osiąga to, czego szukasz na moim blogu tutaj: http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/. Kod, aby zacząć jest również gospodarzem tutaj: https://github.com/srakowski/ElectronLikeVS

Podsumowując, trzeba zdać ramkę: false podczas tworzenia BrowserWindow:

mainWindow = new BrowserWindow({width: 800, height: 600, frame: false}); 

Następnie należy utworzyć i dodać przyciski sterujące na pasku tytułowym:

<div id="title-bar"> 
     <div id="title">My Life For The Code</div> 
     <div id="title-bar-btns"> 
      <button id="min-btn">-</button> 
      <button id="max-btn">+</button> 
      <button id="close-btn">x</button> 
     </div> 
</div> 

wiązania się z max/min/zamykania w funkcji js:

(function() { 

     var remote = require('remote'); 
     var BrowserWindow = remote.require('browser-window'); 

    function init() { 
      document.getElementById("min-btn").addEventListener("click", function (e) { 
       var window = BrowserWindow.getFocusedWindow(); 
       window.minimize(); 
      }); 

      document.getElementById("max-btn").addEventListener("click", function (e) { 
       var window = BrowserWindow.getFocusedWindow(); 
       window.maximize(); 
      }); 

      document.getElementById("close-btn").addEventListener("click", function (e) { 
       var window = BrowserWindow.getFocusedWindow(); 
       window.close(); 
      }); 
    }; 

    document.onreadystatechange = function() { 
      if (document.readyState == "complete") { 
       init(); 
      } 
    }; 

})(); 

Stylizowanie okna może być trudne, ale kluczem jest użycie specjalnych właściwości z webkita. Oto minimalne CSS:

body { 
padding: 0px; 
margin: 0px; 
} 

#title-bar { 
-webkit-app-region: drag; 
height: 24px; 
background-color: darkviolet; 
padding: none; 
margin: 0px; 
} 

#title { 
position: fixed; 
top: 0px; 
left: 6px; 
} 

#title-bar-btns { 
-webkit-app-region: no-drag; 
position: fixed; 
top: 0px; 
right: 6px; 
} 

Należy pamiętać, że są to ważne:

-webkit-app-region: drag; 
-webkit-app-region: no-drag; 

-webkit-app-region: przeciągnij na pasek tytułu '' regionu zrobi to tak, że można go przeciągnąć jak to często w oknach. Przycisk "Nie przeciągnij" jest stosowany do przycisków, aby nie powodować przeciągania.