icon - Ventana sin marco con controles en electron(Windows)

electron window

Question

Quiero que mi aplicación no tenga una barra de título, pero aún así se puede cerrar, arrastrar, minimizar, maximizar y cambiar de tamaño como una ventana normal. Puedo hacer esto en OS X ya que hay una opción titleBarStyle llamada hidden-inset que puedo usar, pero desafortunadamente no está disponible para Windows, que es la plataforma para la que estoy desarrollando. ¿Cómo haría para hacer algo como esto en Windows?

Aquí hay un ejemplo de lo que estoy hablando.

Answer 1

Me inspiré en el artículo de Shawn y en las aplicaciones como Hyper Terminal para descubrir cómo replicar exactamente el estilo de Windows 10 como una barra de título perfecta, y escribí este tutorial .

Incluye una solución para el problema de cambio de tamaño que Shawn mencionó, y también cambia entre los botones de maximizar y restaurar, incluso cuando, por ejemplo, la ventana se maximiza al arrastrarla a la parte superior de la pantalla.

Referencia rápida

• Altura de la barra de título: 32px
• Título de la barra de título tamaño de fuente: 12px
• Botones de control de la ventana: 46px ancho, 32px alto
• Segoe MDL2 Assets botón de control de ventana de fuente Segoe MDL2 Assets , tamaño: 10 10px
  • Minimizar: 
  • Maximizar: 
  • Restaurar: 
  • Cierre: 
• Botón de cierre de colores de fondo.
  • Normal: #E81123
  • Presionado ( :active ): #F1707A

Answer 2

Suponiendo que no quiera tener una ventana cromada, puede lograr esto eliminando el marco alrededor de Electron y completando el resto con html / css / js. Escribí un artículo que logra lo que estás buscando en mi blog aquí: http://www.mylifeforthecode.com/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/ . El código para comenzar también se encuentra aquí: https://github.com/srakowski/ElectronLikeVS

Para resumir, debe pasar frame: false al crear BrowserWindow:

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

Luego crea y agrega botones de control para tu barra de título:

 <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>

Enlace en las funciones max / min / close en 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();
}
};
})();

El estilo de la ventana puede ser complicado, pero la clave es usar propiedades especiales de webkit. Aquí hay algunos CSS mínimos:

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;
}

Tenga en cuenta que estos son importantes:

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

-webkit-app-region: arrastre en su región de la ''barra de título'' para que pueda arrastrarla como es habitual en las ventanas. El no arrastrar se aplica a los botones para que no causen arrastre.