alextorresdev / custom-electron-titlebar Goto Github PK

I am using the following code to init my titlebar

function titlebarInit () {
    const customTitlebar = require('custom-electron-titlebar')

    const myTitlebar = new customTitlebar.Titlebar({
        titleHorizontalAlignment: 'center', // position of window title
        icon: 'img/icon/icon.png',
        drag: true, // whether or not you can drag the window by holding the click on the title bar.
        backgroundColor: customTitlebar.Color.fromHex('#171717'),
        minimizable: true,
        maximizable: true,
        closeable: true,
        itemBackgroundColor: customTitlebar.Color.fromHex('#525252') // hover color
    })

    // change font size of application name in titlebar
    $('.window-title').css('font-size', '13px') // https://github.com/AlexTorresSk/custom-electron-titlebar/issues/24

    // Try to change color of menu
    myTitlebar.updateBackground('#ff00ff')
}

If i do try to update the titlebar color by executing
myTitlebar.updateBackground('#ff00ff')

i do get the following error output in console

Uncaught TypeError: titleBackground.isLighter is not a function
Uncaught TypeError: this._options.backgroundColor.lighten is not a function

If i try changing it by

myTitlebar.updateBackground(new Color(new RGBA(0, 0, 0, .7)));

i get the following error

Color is not defined

Am i using the updateBackground function wrong? I assume it's typescript vs javascript right?

Am i right that we can update the titlebar background color using

titlebar.updateBackground(new Color(new RGBA(0, 0, 0, .7)));

but not the somehow related itemBackgroundColor?

Background:

I am using custom-electron-titlbar in an electron application which offers support for themes.
While switching themes i do as well adjust the background color of the titlebar. This is great - but the changing itemBackgroundColor as well would be perfect to match the style as good as possible.

The problem with this Titlebar Framework is that it is hard to work with it since it is part of the viewport and that causes complications like mentioned in the description, If you define in Main.CSS your body to be overflow: hidden; and then you install this framework the css you wrote is useless and the bug is the scrollbar gets forced in your app. The property overflow hidden for the custom-electron-titlebar cannot be used since there is also a bug when using it the whole titlebar gets removed instead of the overflow.

This framework needs I think to be rebuilt in a way to insert a div and give it a specific Class so the framework injects there the titlebar and also an option to have dynamic CSS since the titlebar for MAC is smaller and to not break to the whole layout everything needs to be adjusted along with the titlebar height..

I hope this gets fixed, if there is a solution please let me know for now I can not use it in production.

Hi,

I'm tried out this nice package and I was wondering if there is a fast way to change the font-family and font-size?

It's a very nice package!

BR

Activating the menu using ALT key works fine. I am also able to navigate the menu using keyboard. However when navigating the menu using down arrow key, it breaks when separator is reached.

Sample menu template:

const template = [
{
      label: 'Edit',
      submenu: [
        { role: 'undo' },
        { role: 'redo' },
        { type: 'separator' }, // When this item is reached by key navigation - focus is lost and cant navigate any further
        { role: 'cut' },
        { role: 'copy' },
        { role: 'paste' },
        { role: 'pasteandmatchstyle' },
        { role: 'delete' },
        { role: 'selectall' }
      ]
    }
];

const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

Focus is lost when reaching separator and not even left/right key works. Have to press ALT again to reactivate. Console contains no errors whatsoever.

I am using it on Windows 10. Without any custom CSS still doesnt work.

Electron allows you to set a "visible" prop on menu items that will hide and show the item accordingly, but this does not seem to work with this library.

The sub menu indicators are just a little bit misaligned on some menu items.

After adding code to html, my application start with scroll-bar, it not cool.

  <body>
    <div id="app"></div>

    <script>
      const customTitlebar = require('custom-electron-titlebar')

      new customTitlebar.Titlebar('#303030', {
        icon: './favicon.svg',
        iconsStyle: customTitlebar.Themebar.win,
        menu: null
      })
    </script>
  </body>

Everything works fine on dev using npm start but in production I get the following :

Uncaught TypeError: Assignment to constant variable. at Object.jYT8 (main.26b9084023426f66b382.js:1) at i (runtime.2e9f2136c0d5da328957.js:1) at Object.TBVo (main.26b9084023426f66b382.js:1) at i (runtime.2e9f2136c0d5da328957.js:1) at Object.uwjS (main.26b9084023426f66b382.js:1) at i (runtime.2e9f2136c0d5da328957.js:1) at Module.zUnb (main.26b9084023426f66b382.js:1) at i (runtime.2e9f2136c0d5da328957.js:1) at Object.0 (main.26b9084023426f66b382.js:1) at i (runtime.2e9f2136c0d5da328957.js:1)

I'm using Angular-electron might have to do with that but I'm importing it normally in typescript and it works in dev. Seen anything like this before ?

I'm looking to use this with Carlo from GoogleChromeLabs
Are there plans to separate the Menu bar from the Title bar?

Currently, I plan to utilize this while Carlo has no support for Frameless Window like Electron. I'm thinking of simply hiding the whole title bar element for now using simple CSS styles.

It would be great if they can be separated so we can use one without the other.

When lost focus on window title bar buttons lost old normal colors!

Environment information

Vue-Material version [Latest]
System version: [Windows 10 x64]
Electron Api version: [4.0.0]
Chromium version: [69.0.3497.106]
Vue version: [3.2.2]

Disabled menu items are still clickable and menu items with submenus still expand.

Fullscreen mode removes the titlebar which is to be expected, but because the menu is in the titlebar all of the menu items are unusable.

To fix this, perhaps the title bar should be preserved in fullscreen mode, and the minimize, maximize, exit buttons should transform into one exit and one un-fullscreen button.

Is there any possible way, through CSS or JS, where I can change the color for windows controls icons?
I tried overriding the SVG through CSS, but it didn't work. Couldn't find anything regarding controls style as well in the API.

I'm in en-us and it shows as "Ctrl+Mayus+I" instead of "Ctrl+Shift+I" for Toggle Developer Tools

related to #38

Hey,

i noticed some month ago that this repository was archived and assumed it is no longer actively developed.

Therefor i switched to a fork of it.

Now i am realizing the project is no longer archived on github, does this mean you are back working on it?

Using this package cause terminal warnings with following message:
Function provided here: Titlebar.registerListeners (C:\path-to-project\node_modules\custom-electron-titlebar\lib\titlebar.js:56:28

Environment:
Platform: Windows 10 x64;
Versions:
electron: "^5.0.3"
custom-electron-titlebar: "^3.1.0"

Can the library detect the OS and change the Cmd/Ctrl to the appropriate label?

Thx for project!
Only followed steps from readme

  ReferenceError: navigator is not defined
      at Object.<anonymous> (C:xxx\app\node_modules\custom-electron-titlebar\lib\browser\browser.js:130:19)
      at Module._compile (internal/modules/cjs/loader.js:786:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:798:10)
      at Module.load (internal/modules/cjs/loader.js:645:32)
      at Function.Module._load (internal/modules/cjs/loader.js:560:12)
      at Module.require (internal/modules/cjs/loader.js:685:19)
      at require (internal/modules/cjs/helpers.js:16:16)
      at Object.<anonymous> (C:\xxx\app\node_modules\custom-electron-titlebar\lib\common\dom.js:7:17)
      at Module._compile (internal/modules/cjs/loader.js:786:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:798:10)

"electron": "^6.0.2",

I am using electron-forge

When run my application in Windows or Linux: electron-forge start I do not get any error and it runs perfectly.

But when I run it in Mac it breaks with the following error message.

Uncaught TypeError: Cannot read property 'setStyles' of undefined
    at Titlebar.updateStyles (/Users/writayandas/Desktop/hoichoi/hoichoi/node_modules/custom-electron-titlebar/lib/titlebar.js:262)
    at new Titlebar (/Users/writayandas/Desktop/hoichoi/hoichoi/node_modules/custom-electron-titlebar/lib/titlebar.js:39)
    at Object.<anonymous> (renderer.js? [sm]:13)
    at Object.<anonymous> (renderer.js? [sm]:25)
    at Module._compile (internal/modules/cjs/loader.js:693)
    at Object.require.extensions.(anonymous function) [as .js] (/Users/writayandas/Desktop/hoichoi/hoichoi/node_modules/electron-compile/lib/require-hook.js:77:14)
    at Module.load (internal/modules/cjs/loader.js:602)
    at tryModuleLoad (internal/modules/cjs/loader.js:541)
    at Function.Module._load (internal/modules/cjs/loader.js:533)
    at Module.require (internal/modules/cjs/loader.js:640)

My Code

main.js

mainWindow = new BrowserWindow({
    width: 1280,
    height: 600,
    minWidth: 1280,
    minHeight: 480,
    frame: false,
    titleBarStyle: 'hidden',
});

renderer.js

import menu from './menu';

let titleBar = new Titlebar({
    icon: './favicon.ico',
    menu
});

/**
* The menu variable is an instance of electron.remote.Menu
*/

Is there something I am doing wrong? How do I fix it? or is it an issue with the Package?

I think it can be configurable, need ability to setting up title-text position, e.g left, right, center, and absolutely center.

absolutely center - need for centering absolutely, without padding of buttons and icon, on screenshot upper, text not centered absolutely, it padding of buttons!

I have set my new browser window autoHideMenuBar: True
When I look a the titlebar generated from the package it doesn't reflect it.
Using the documentation to create new menus causes construct errors in angular 8

Im using the following settings on mac os:

new Titlebar({
backgroundColor: Color.fromHex('#2F3235'),
menu: null
});

One windows it works perfectly - it still gives me the controls in the top right corner. On mac OS, the controls are missing. How can I fix this?

My menu is below gui. Please see attach screenshot. Setting z-index to container-after-titlebar would fix this. Please add possibility to setting z indexes or propose another solution.

Thank you

Hi, I have a totally empty electron application that I installed this package to, it happens approx 30seconds after starting the process. Error attached.

I am having a problem with heights. In my case the .container-after-titlebar is having the same height as body and therefore silently overlaps the windows by titlebar height (30px).

I have temporatily solved the issue for me.

html,
body {
  width: 100%; // Not needed to work but elements would have zero height
  height: 100%; // Not needed to work but elements would have zero height
}

.container-after-titlebar {
  height: auto !important; // custom-electron-titlebar possible bug!
}

Seems like height: 100% should not be applied to .container-after-titlebar

Can anyone help me convert this repo to a React component? It would be very cool if anyone more experienced then me can give me a hint or help me to do this. Thanks

After opening the menu, it doesn't close even when I clicked some where else i.e. when I'm not focusing on it.

This is what I'm talking about:

On Windows, if you use a generated accelerator with the & character, the entire submenu item's string will get escaped, including the ampersand.

Consider the following strings used as labels:

• Log project
• Log settings
• S&how user data folder in Explorer
• Crash main process
• Crash renderer process
• &Toggle developer tools

The two that have generated accelerators will be escaped, as seen below:

When using the parameter overflow: hidden it removes the title bar completely, I don't even know why this titlebar-framework is adding a scrollbar, my app main.css has already overflow hidden but for some reason adding titlebar adds a overflow. I also tried to remove my own overflow: hidden and only use it inside the titlebar parameters to remove it, but it removes not only the overflow but also the whole custom-electron-titlebar.

It seems for me when looking at the scrollbar it adds exactly that much to scroll how much the height of the custom-electron-titlebar is so the CET itself is the reason I get a scrollbar I hope there is a fix for this.

EDIT I have found out that "custom-electron-titlebar" is breaking layouts that are made with CSS-Grid, here an simple grid you can add in Electron App to reproduce the bug https://github.com/ireade/holy-grail-css-grid

EDIT When adding the parameter overflow: hidden as I said before the whole custom-electron-titlebar is removed but interesting is that the drag region works so I can drag around the area where the custom-electron-titlebar need to be normally.

I noticed you added with #43 support for menu icons.

so far i haven't added any icon to my menu - which results in empty space. See the attached screenshot.

Is there an option to enable or disable the menu icons?

Additional question:
Have you ever tried using fontawesome as a source for electron menu icons?

Platform: macOS

It works in electron start mode but not, when I build the app.

I have a head.html file which is imported into all my other html files, inside the head.html file is a script with the following code

const customTitlebar = require('custom-electron-titlebar');

new customTitlebar.Titlebar({
    backgroundColor: customTitlebar.Color.fromHex('#262626')
});

Although whenever I interact with my application I get this error

Attempting to call a function in a renderer window that has been closed or released. Function provided here: Titlebar.registerListeners (D:\Projects\electron-app\node_modules\custom-electron-titlebar\lib\titlebar.js:50:28

It only appears in the console however so does not actually affect my app but I want to know why it is erroring.

Thanks

When in windowed mode, the titlebar works properly

Except when I press F11 to put the window into fullscreen (not maximized) mode, the titlebar disappears.

it's actually really hard to see it here, but theres a 30px tall white bar at the top of the screen

It seems like the code fixes this in titlebar.ts

if (fullscreen) {
  hide(this.titlebar);
  this.container.style.top = '0px';
} else {
  show(this.titlebar);
  this.container.style.top = `${this.titlebar.getBoundingClientRect().bottom}px`;
}

...BUT in the latest npm build I find this compiled typescript instead, it's missing the style.top changes:

if (!platform_1.isMacintosh) {
    if (fullscreen) {
        dom_1.hide(this.titlebar);
    }
    else {
        dom_1.show(this.titlebar);
    }
}

Solution to this: Update the npm package to a 3.1.0 or 3.0.1 or something.

There is a little design bug in the minimize button.
When clicking on Minimize [ __ ] Button, maximizing through the task bar will keep the Minimize button highlighted. This is only when the mouse is outside the app, however when hover is detected inside the app. the minimize highlight will be removed.

Notice the mouse outside outside the app, and minimize highlighted
Imgur

PS: Using Windows 10 OS.

Hey,

i am using version 3.1.0 in my project.
It seems to work great & as expected on linux, but i realize issues on mac (running in a non-packaged version of my electron 5 based app)

While the configured

• maximize
• minimize
• close
  buttons are shown on linux, they aren't shown on mac os.

any idea what might cause this?
Is there something mac specific i have to configure?

here is my config so far:

const customTitlebar = require('custom-electron-titlebar');
 
new customTitlebar.Titlebar({
    titleHorizontalAlignment: "center", // position of window title
    icon: "img/icon/icon.png", 
    drag: true, // whether or not you can drag the window by holding the click on the title bar.
    backgroundColor: customTitlebar.Color.fromHex("#171717"),
    minimizable: true,
    maximizable: true,
    closeable: true
});

a iconsTheme is not set so far. Do i have to set that os-specific?

Best regards
yafp

You can see in the screenshot, on windows the default electron items don't show the accelerators. E.g. "Undo" should have "Ctrl+Z" next to it.

This is not an issue, its more a question. I can't seem to find any documentation where I see how to set the minimize, expand, and close options. How can I set them.
This is my default title bar:

    new customTitlebar.Titlebar({
        backgroundColor: customTitlebar.Color.fromHex('#444'),
        minimizable: true,
        maximizable: true,
        closeable: true
    });

I am realizing that the titlebar background color slightly changes if the application has focus or not.

Is that a function of custom-electron-titlebar or is that done by my desktop environment?

on-focus:

non-focus:

Hi, i got the following compile error when importing from custom-electron-titlebar

I followed your example for typescript and added it to the renderer.ts

the following piece of code is incorrect:

this.container = $('div.container-after-titlebar');
		if (this._options.menuPosition === 'bottom'){
			this.container.style.top = '0px';
			this.container.style.bottom = BOTTOM_TITLEBAR_HEIGHT;
		} else{
			this.container.style.top = isMacintosh ? TOP_TITLEBAR_HEIGHT_MAC : TOP_TITLEBAR_HEIGHT_WIN;
			this.container.style.bottom = '0px';
}

setting menuPosition: "bottom" will result in a 2-line titlebar causing the height to be 2xTOP_TITLEBAR_HEIGHT_WIN (or MAC), and nothing at the bottom. (in contrast to the height given here).

afterwards, in the next piece of code we find this:

updateMenuPosition(menuPosition: "left" | "bottom") {
		this._options.menuPosition = menuPosition;
		if (isMacintosh) {
			this.titlebar.style.height = this._options.menuPosition && this._options.menuPosition === 'bottom' ? BOTTOM_TITLEBAR_HEIGHT : TOP_TITLEBAR_HEIGHT_MAC;
			this.container.style.top = this._options.menuPosition && this._options.menuPosition === 'bottom' ? BOTTOM_TITLEBAR_HEIGHT : TOP_TITLEBAR_HEIGHT_MAC;
		} else {
			this.titlebar.style.height = this._options.menuPosition && this._options.menuPosition === 'bottom' ? BOTTOM_TITLEBAR_HEIGHT : TOP_TITLEBAR_HEIGHT_WIN;
			this.container.style.top = this._options.menuPosition && this._options.menuPosition === 'bottom' ? BOTTOM_TITLEBAR_HEIGHT : TOP_TITLEBAR_HEIGHT_WIN;
		}
		this.titlebar.style.webkitFlexWrap = this._options.menuPosition && this._options.menuPosition === 'bottom' ? 'wrap' : null;

		if (this._options.menuPosition === 'bottom') {
			addClass(this.menubarContainer, 'bottom');
		} else {
			removeClass(this.menubarContainer, 'bottom');
		}
}

this will then set the top position to what was previously set at bottom (it needs to be at the top indeed). This causes the menu to show correctly, but leave an empty space at the bottom which is ugly as heck

The 'icon' option of MenuItem doesn't seem to work with custom-electron-titlebar. Is it supported?

I noticed that the .menubar-menu-container doesn't automatically close when any of its .action-menu-item is clicked.

Is there a proper way for this?

I tried:
$('menubar-menu-button').removeClass('open')
$('.menubar-menu-container').remove()

But since it would still think that the menu is open, I'm getting new issues:

• Hovering above the other menu items will open its submenu
• The submenu will only open after at least 2 clicks.

Any thoughts?

If i would like to change the font color of the menu - how would i do that?
Via css - similar to #24 ?

I know i can change the color of the main menu items like that

.titlebar, .titlebar > * {
    color: yellow;
}

but this does not affects the single submenu elements

mainWindow.loadURL('http://192.168.25.83:8200')

remote webserver is nginx

internal/modules/cjs/loader.js:659 Uncaught Error: Cannot find module './renderer.js'
Require stack:

When doing something like this (titlebar being the Titlebar instance)

titlebar.updateMenu(Menu.buildFromTemplate([
      {
        label: 'Settings',
        click: () => alert('click settings'),
      },
])

It seems like the only case that the titlebar is programmed for is submenus. The actual Menu in electron does allow items that are only clickable.

I am new to Electron and wanted to create a title bar similar to the color scheme and design to VS Code but I installed the package(s) and added the code as instructed to:

main.js

const electron = require('electron');
const url = require('url');
const path = require('path');

const {app, BrowserWindow} = electron;

let mainWindow

app.on('ready', function()
{
    mainWindow = new BrowserWindow({
        minWidth: 800,
        minHeight: 600,
        frame: false,
    });

    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'mainWindow.html'),
        protocol: 'file:',
        slashes: true
    }));

});

and to my mainWindow.html

<!DOCTYPE html>
<html lang="en">
    <head>
            <script>
                    const customTitlebar = require('custom-electron-titlebar');
             
                    new customTitlebar.Titlebar({
                        backgroundColor: customTitlebar.Color.fromHex('#444'),
                        icon: 'appicon.svg',
                        minimizable: false
                    });
                </script>
    </head>
</html>

The end result is a blank white screen.

Running windows 10 currently no keyboard shortcuts are working.

Really loved this project, exactly what I needed. However there is one big issue that is the Menu. When the menu option is not specified in the renderer file, it doesn't show any menu. Also, when manually specifying the option using a menu template, the whole titlebar goes blank/white. Please fix.

On mac with the following options set:

new Titlebar({
backgroundColor: Color.fromHex('#2F3235'),
menu: null
});

The titlebar has a height of 22, but the container-after-titlebar div is set to a "top:30". This gives me 8 pixels of space between the bar and the body. Is there a way I can fix this?