Merge pull request #196 from AlexTorresSk/develop

Fix preload file error

Author: AlexTorresDev

.github/ISSUE_TEMPLATE/issue-report.md

@@ -25,5 +25,5 @@ If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
  - OS: [e.g. Windows]
- - Electron version [e.g. 4.0.0]
- - Node Version [e.g. 2.2]
+ - Electron version [e.g. 16.0.0]
+ - Node Version [e.g. 14.0]

.github/stale.yml

@@ -0,0 +1,16 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 60
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 7
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+# Label to use when marking an issue as stale
+staleLabel: wontfix
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: false
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: >
+  📢 This issue has been closed automatically because it has not had recent activity.
+  Thank you for your contributions.

.gitignore

@@ -189,6 +189,8 @@ typings/
 dist
 build/
 *.map
+index.js
+main.js
 
 # Gatsby files
 .cache/

.npmignore

@@ -35,4 +35,4 @@ tsconfig.json
 
 npm-debug.log
 webpack.config.js
-._config.yml
+_config.yml

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Alex Torres
+Copyright (c) 2018 - now Alex Torres
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -4,6 +4,7 @@ This project is a typescript library for electron that allows you to configure a
 
 [![LICENSE](https://img.shields.io/github/license/AlexTorresSk/custom-electron-titlebar.svg)](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE)
 [![NPM Version](https://img.shields.io/npm/v/custom-electron-titlebar.svg)](https://npmjs.org/package/custom-electron-titlebar)
+[![install size](https://packagephobia.com/badge?p=custom-electron-titlebar)](https://packagephobia.com/result?p=custom-electron-titlebar)
 
 ![Screenshot 1](screenshots/cet-001.jpg)
 
@@ -30,6 +31,17 @@ import { setupTitlebar, attachTitlebarToWindow } from "custom-electron-titlebar/
 setupTitlebar();
 
 function createWindow() {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 800,
+    height: 600,
+    titleBarStyle: 'hidden',
+    //frame: false, // needed if process.versions.electron < 14
+    webPreferences: {
+      preload: path.join(__dirname, 'preload.js')
+    }
+  });
+  
   ...
 
   // attach fullscreen(f11 and not 'maximized') && focus listeners

example/assets/icons.json

@@ -1,7 +1,7 @@
 {
     "check": "<svg viewBox='0 0 11 11'><path d='M3.8,9.3c-0.1,0-0.2,0-0.3-0.1L0.2,5.8C0,5.6,0,5.4,0.2,5.2C0.4,5,0.7,5,0.9,5.2l3,3l6.3-6.3c0.2-0.2,0.5-0.2,0.7,0C11,2,11,2.3,10.8,2.5L4.2,9.1C4.1,9.2,4,9.3,3.8,9.3z'/></svg>",
     "arrow": "<svg viewBox='0 0 11 11'><path d='M3.1,10.7c-0.1,0-0.2,0-0.3-0.1c-0.2-0.2-0.2-0.5,0-0.7l4.4-4.4L2.8,1.1c-0.2-0.2-0.2-0.5,0-0.7c0.2-0.2,0.5-0.2,0.7,0l4.8,4.8c0.2,0.2,0.2,0.5,0,0.7l-4.8,4.8C3.4,10.7,3.2,10.7,3.1,10.7z'/></svg>",
-    "win": {
+    "windows": {
         "minimize": "<svg viewBox='0 0 11 11'><path d='M11,4.9v1.1H0V4.399h11z'/></svg>",
         "maximize": "<svg viewBox='0 0 11 11'><path d='M0,1.7v7.6C0,10.2,0.8,11,1.7,11h7.6c0.9,0,1.7-0.8,1.7-1.7V1.7C11,0.8,10.2,0,9.3,0H1.7C0.8,0,0,0.8,0,1.7z M8.8,9.9H2.2c-0.6,0-1.1-0.5-1.1-1.1V2.2c0-0.6,0.5-1.1,1.1-1.1h6.7c0.6,0,1.1,0.5,1.1,1.1v6.7C9.9,9.4,9.4,9.9,8.8,9.9z'/></svg>",
         "restore": "<svg viewBox='0 0 11 11'><path d='M7.9,2.2h-7C0.4,2.2,0,2.6,0,3.1v7C0,10.6,0.4,11,0.9,11h7c0.5,0,0.9-0.4,0.9-0.9v-7C8.8,2.6,8.4,2.2,7.9,2.2z M7.7,9.6 c0,0.2-0.1,0.3-0.3,0.3h-6c-0.2,0-0.3-0.1-0.3-0.3v-6c0-0.2,0.1-0.3,0.3-0.3h6c0.2,0,0.3,0.1,0.3,0.3V9.6z'/><path d='M10,0H3.5v1.1h6.1c0.2,0,0.3,0.1,0.3,0.3v6.1H11V1C11,0.4,10.6,0,10,0z'/></svg>",

example/index.html

@@ -30,10 +30,7 @@
       font-family: Arial, Helvetica, sans-serif;
     }
 
-    .cet-titlebar,
-    .cet-titlebar>* {
-      font-family: 'Kalam', cursive;
-    }
+    
   </style>
 </head>
 

example/main.js

@@ -2,31 +2,31 @@
 const { app, BrowserWindow, Menu } = require('electron');
 const path = require('path');
 const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-titlebar/main');
+
 // setup the titlebar main process
 setupTitlebar();
 
-createWindow = () => {
+const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     titleBarStyle: 'hidden',
     //frame: false, // needed if process.versions.electron < 14
     webPreferences: {
+      sandbox: false,
       preload: path.join(__dirname, 'preload.js')
     }
   });
 
   const menu = Menu.buildFromTemplate(exampleMenuTemplate());
   Menu.setApplicationMenu(menu);
 
-
-
   // and load the index.html of the app.
   mainWindow.loadFile('index.html');
 
   // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
+  mainWindow.webContents.openDevTools()
 
   //attach fullscreen(f11 and not 'maximized') && focus listeners
   attachTitlebarToWindow(mainWindow);
@@ -54,7 +54,7 @@ app.on('window-all-closed', function () {
 
 const exampleMenuTemplate = () => [
   {
-    label: "Simple Options",
+    label: "Simple O&ptions",
     submenu: [
       {
         label: "Quit",
@@ -70,7 +70,7 @@ const exampleMenuTemplate = () => [
         type: "radio",
       },
       {
-        label: "Checkbox1",
+        label: "Check&box1",
         type: "checkbox",
         checked: true,
         click: (item) => {
@@ -79,7 +79,7 @@ const exampleMenuTemplate = () => [
       },
       { type: "separator" },
       {
-        label: "Checkbox2",
+        label: "Che&ckbox2",
         type: "checkbox",
         checked: false,
         click: (item) => {
@@ -89,7 +89,7 @@ const exampleMenuTemplate = () => [
     ]
   },
   {
-    label: "Advanced Options",
+    label: "A&dvanced Options",
     submenu: [
       {
         label: "Quit",
@@ -125,7 +125,7 @@ const exampleMenuTemplate = () => [
         label: "Radio Test",
         submenu: [
           {
-            label: "Sample Checkbox",
+            label: "S&ample Checkbox",
             type: "checkbox",
             checked: true
           },
@@ -178,7 +178,7 @@ const exampleMenuTemplate = () => [
     ]
   },
   {
-    label: "View",
+    label: "&View",
     submenu: [
       { role: "reload" },
       { role: "forceReload" },

example/preload.js

@@ -7,11 +7,13 @@ let titlebar;
 
 window.addEventListener('DOMContentLoaded', () => {
   titlebar = new Titlebar({
-    backgroundColor: Color.fromHex("#388e3c"),
-    itemBackgroundColor: Color.fromHex("#121212"),
+    backgroundColor: Color.fromHex("#262626"),
+    //itemBackgroundColor: Color.fromHex("#ffffff"),
     svgColor: Color.WHITE,
     icon: path.join(__dirname, '/assets/images', '/icon.svg'),
+    //menuPosition: 'bottom',
     //menu: null // = do not automatically use Menu.applicationMenu
+    menuTransparent: 80,
   })
 
   const replaceText = (selector, text) => {