Skip to content

Latest commit

 

History

History
167 lines (147 loc) · 6.91 KB

README.md

File metadata and controls

167 lines (147 loc) · 6.91 KB

Custom Electron titlebar

A custom Electron titlebar with high customizability. Current features:

  • Create menus and submenus with ease just from an Object
  • Connect a method to the click of a submenu button
  • Custom titlebar background color, title label color, buttons hover color
  • Automatic shrink - if the window is too narrow to display the whole menu bar, then it is shrunk and the hidden ones are put in a submenu of a button with dots (Similar to VS Code)
  • Currently Fontawesome is used for icons on the titlebar so it will look the same on all platforms
  • Draw separation lines between buttons in submenus

Dependencies

  • jQuery ^3.5.1

Prerequisites

The module doesn't depend on Fontawesome but it uses its icons for the window buttons and the right chevron for the submenu buttons. To install and setup Fontawesome, please follow these instructions.

How to install

To install run the following command in the terminal in the project folder:

npm install --save advanced-electron-titlebar

How to use

First create the BrowserWindow in Electron and remove its frame as follows:

const win = new BrowserWindow({
    // Other properties

    //Remove the frame
    frame: false
  })

To use the titlebar, first require the module in a JavaScript file (for example in render.js):

const titlebar = require("advanced-electron-titlebar")

Make sure that the script is included in the index.html file with the defer tag as follows:

<script defer src="render.js"></script>

Then in the file where you have required the module, create the titlebar by using the .create() function:

titlebar.create(settings, menu, current_window)

The arguments for this function are as follows:

The settings argument

You can change different properties of the titlebar using the settings argument.

Parameter Type Default value Description
backgroundColor String #484848 The color of the titlebar
fontColor String #D3D3D3 The font color of the menu/submenu
buttonsFont String Arial The font of the menu/submenu buttons
menuButtonsColor String #484848 The color of the buttons on the titlebar
buttonHoverColor String #686868 The color of the button when hover
submenuColor String #686868 The color of the submenu
submenuButtonColor String #686868 The color of the buttons on the submenu
submenuButtonHoverColor String #484848 The color of the submenu button when hover
windowButtonColor String #484848 The color of the window buttons
windowButtonHoverColor String #686868 The color of the window buttons when hover
closeButtonHoverColor String firebrick The color of the close button when hover
titlebarLabelFont String Impact The font of the label on the titlebar
titlebarLabelColor String #D3D3D3 The color of the label on the tilebar
titlebarLabelSize Number 16 The font size of the label on the titlebar

The menu argument

You can use this to set a menu for the titlebar.

The following format is used:

let menu = {
    "Button/subbutton label": {
        // Arguments
    }
}

There are currently 3 types of buttons:

  • The "standard" which is used to do some action
  • The "submenu" which is used to open a submenu on hover
  • The "separator" which draws a separation line between buttons

These are the current available arguments:

Argument Type Values Required for Description
type String standard, submenu All buttons The type of the button - "standard" for a standard button, "submenu" for a submenu button
command String any Standard buttons This is displayed on the right side of a submenu button. Could be used to show what keyboard combination could be used instead of clicking on the button
method One line function that calls another function null or a function name Standard button Used to call a function when a standard button is clicked
submenu Object - Submenu button The submenu which is opened when hover over the button

The "standard" button

The format for the "standard" button is the following:

"Button label": {
    type: "standard",
    command: "any",
    method: () => functionName(),
}

If you do not want the button to call a function (for example you don't have the function yet), then you can use:

"Button label": {
    type: "standard",
    command: "any",
    method: () => null,
}

The "submenu" button

The format for the "standard" button is the following:

"Button label": {
    type: "submenu",
    submenu: {
        //Another Object which is the submenu
    }
}

The "separator" button

The format for the "separator" button is the following:

"separator#": {
    type: "separator",
}

Note: Keep in mind that because this is inside an object, the keys must be unique and if you insert 2 elements with the same key for a separator, the first one will not be drawn. An easy way to deal wit that is to name the separator as separator# and replacing the # with a number and making sure the same number is not used twice in the same object.

The current_window argument

You have to pass the current Electron window to the function. For example you can use this to pass the current window:

const remote = require("electron").remote
titlebar.create(settings, menu, remote.getCurrentWindow())

Note: If you use this method to pass the current window in Electron 10, then the enableRemoteModule is false by default and the titlebar won't be displayed. To enable it, set enableRemoteModule to true in the webPreferences for the BrowserWindow like so:

const win = new BrowserWindow({
    // Other properties

    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    },

    //Remove the frame
    frame: false
  })

Functions

You can call a function as follows:

titlebar.functionName(*args)

List of the available functions:

Function Arguments Description
.create() settings - the settings for the titlebar,
menu - the object that holds the menu structure,
current_window - the current Electron window		 Creates and adds the titlebar to the current window

Contributions

Currently this is in early development. You are more than welcome to contribute if you want! I am open to ideas and suggestion how to improve and expand the module.

License

This module is licensed under MIT.