Refactoring code

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.

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)
 

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

@@ -6,7 +6,7 @@ const { setupTitlebar, attachTitlebarToWindow } = require('custom-electron-title
 // setup the titlebar main process
 setupTitlebar();
 
-createWindow = () => {
+const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
     width: 800,
@@ -53,7 +53,7 @@ app.on('window-all-closed', function () {
 
 const exampleMenuTemplate = () => [
   {
-    label: "Simple Options",
+    label: "Simple O&ptions",
     submenu: [
       {
         label: "Quit",
@@ -69,7 +69,7 @@ const exampleMenuTemplate = () => [
         type: "radio",
       },
       {
-        label: "Checkbox1",
+        label: "Check&box1",
         type: "checkbox",
         checked: true,
         click: (item) => {
@@ -78,7 +78,7 @@ const exampleMenuTemplate = () => [
       },
       { type: "separator" },
       {
-        label: "Checkbox2",
+        label: "Che&ckbox2",
         type: "checkbox",
         checked: false,
         click: (item) => {
@@ -88,7 +88,7 @@ const exampleMenuTemplate = () => [
     ]
   },
   {
-    label: "Advanced Options",
+    label: "A&dvanced Options",
     submenu: [
       {
         label: "Quit",
@@ -124,7 +124,7 @@ const exampleMenuTemplate = () => [
         label: "Radio Test",
         submenu: [
           {
-            label: "Sample Checkbox",
+            label: "S&ample Checkbox",
             type: "checkbox",
             checked: true
           },
@@ -177,7 +177,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("#ffffff"),
+    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) => {

package.json

@@ -1,12 +1,13 @@
 {
   "name": "custom-electron-titlebar",
   "version": "4.1.1",
-  "description": "Custom Electron Titlebar is a library for electron that allows you to configure a fully customizable title bar.",
+  "description": "Library for electron that allows you to configure a fully customizable title bar.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": "./dist/index.js",
     "./main": "./dist/main.js"
   },
-  "types": "dist/index.d.ts",
   "scripts": {
     "build:develop": "webpack --mode=development",
     "build": "webpack --mode=production",

src/enums/menu-state.ts

@@ -1,3 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) AlexTorresSk. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 export enum MenubarState {
     HIDDEN,
     VISIBLE,

src/main/attach-titlebar-to-window.ts

@@ -1,3 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) AlexTorresSk. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
 export = (browserWindow: Electron.BrowserWindow) => {
     browserWindow.on("enter-full-screen", () => {
         browserWindow.webContents.send("window-fullscreen", true);