custom-electron-titlebar 4.0.0-beta.0 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +33 -129
- package/_config.yml +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -453
- package/dist/interfaces.d.ts +44 -12
- package/dist/main/attach-titlebar-to-window.d.ts +2 -0
- package/dist/main/main.d.ts +5 -0
- package/dist/main/setup-main.d.ts +2 -0
- package/dist/main.js +1 -0
- package/dist/titlebar.d.ts +21 -8
- package/package.json +20 -15
- package/webpack.config.js +0 -37
package/README.md
CHANGED
|
@@ -1,153 +1,57 @@
|
|
|
1
|
-
# Custom Electron Titlebar
|
|
1
|
+
# Custom Electron Titlebar
|
|
2
2
|
|
|
3
3
|
This project is a typescript library for electron that allows you to configure a fully customizable title bar.
|
|
4
4
|
|
|
5
5
|
[](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE)
|
|
6
6
|
[](https://npmjs.org/package/custom-electron-titlebar)
|
|
7
7
|
|
|
8
|
-
|
|
9
9
|
|
|
10
|
-
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
|
|
13
|
+
<br><br>
|
|
13
14
|
|
|
15
|
+
# 📦 Intalling
|
|
16
|
+
You can install this package with `npm`.
|
|
17
|
+
```sh
|
|
18
|
+
npm install custom-electron-titlebar
|
|
14
19
|
```
|
|
15
|
-
|
|
16
|
-
```
|
|
17
|
-
|
|
18
|
-
or use example folder to init basic electron project with this titlebar.
|
|
19
|
-
|
|
20
|
-
## Usage
|
|
21
|
-
|
|
22
|
-
#### Step 1
|
|
23
|
-
In your **preload** file add:
|
|
24
|
-
|
|
25
|
-
For javascript
|
|
26
|
-
|
|
27
|
-
```js
|
|
28
|
-
const customTitlebar = require('custom-electron-titlebar');
|
|
29
|
-
|
|
30
|
-
new customTitlebar.Titlebar({
|
|
31
|
-
backgroundColor: customTitlebar.Color.fromHex('#ECECEC')
|
|
32
|
-
});
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
For typescript
|
|
36
|
-
```ts
|
|
37
|
-
import { Titlebar, Color } from 'custom-electron-titlebar'
|
|
38
|
-
|
|
39
|
-
new Titlebar({
|
|
40
|
-
backgroundColor: Color.fromHex('#ECECEC')
|
|
41
|
-
});
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
The parameter `backgroundColor: Color` is required, this should be `Color` type.
|
|
45
|
-
(View [Update Background](#update-background) for more details).
|
|
46
|
-
|
|
47
|
-
#### Step 2
|
|
48
|
-
Update the code that launches browser window
|
|
49
|
-
```js
|
|
50
|
-
let mainWindow = new BrowserWindow({
|
|
51
|
-
width: 1000,
|
|
52
|
-
height: 600,
|
|
53
|
-
titleBarStyle: "hidden", // add this line
|
|
54
|
-
webPreferences: {
|
|
55
|
-
preload: path.join(__dirname, 'preload.js')
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
## Options
|
|
61
|
-
|
|
62
|
-
The interface [`TitleBarOptions`] is managed, which has the following configurable options for the title bar. Some parameters are optional.
|
|
63
|
-
|
|
64
|
-
| Parameter | Type | Description | Default |
|
|
65
|
-
| ------------------------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
|
|
66
|
-
| backgroundColor **(required)** | Color | The background color of the titlebar. | #444444 |
|
|
67
|
-
| icon | string | The icon shown on the left side of the title bar. | null |
|
|
68
|
-
| shadow | boolean | The shadow of the titlebar. | false |
|
|
69
|
-
| drag | boolean | Define whether or not you can drag the window by holding the click on the title bar. | true |
|
|
70
|
-
| onMinimize | Funtion | Enables or disables the option to minimize the window by clicking on the corresponding button in the title bar. | undefined |
|
|
71
|
-
| onMaximize | Funtion | Enables or disables the option to maximize and un-maximize the window by clicking on the corresponding button in the title bar. | undefined |
|
|
72
|
-
| onClose | Funtion | Enables or disables the option of the close window by clicking on the corresponding button in the title bar. | undefined |
|
|
73
|
-
| isMaximized | Funtion | Check if window is maximized. | undefined |
|
|
74
|
-
| onMenuItemClick | Funtion(commandId: number)| Fires when any menu option is pressed. | undefined |
|
|
75
|
-
| order | string | Set the order of the elements on the title bar. (`inverted`, `first-buttons`) | null |
|
|
76
|
-
| titleHorizontalAlignment | string | Set horizontal alignment of the window title. (`left`, `center`, `right`) | center |
|
|
77
|
-
| menuPosition | string | The position of menubar on titlebar. | left |
|
|
78
|
-
| enableMnemonics | boolean | Enable the mnemonics on menubar and menu items. | true |
|
|
79
|
-
| hideWhenClickingClose | boolean | When the close button is clicked, the window is hidden instead of closed. | false |
|
|
80
|
-
| overflow | string | The overflow of the container (`auto`, `visible`, `hidden`) | auto |
|
|
81
|
-
| unfocusEffect | boolean | Enables or disables the blur option in the title bar. | false |
|
|
82
|
-
|
|
83
|
-
## Methods
|
|
84
|
-
|
|
85
|
-
### Update Background
|
|
86
|
-
|
|
87
|
-
This change the color of titlebar and it's checked whether the color is light or dark, so that the color of the icons adapts to the background of the title bar.
|
|
88
|
-
|
|
89
|
-
```js
|
|
90
|
-
titlebar.updateBackground(new Color(new RGBA(0, 0, 0, .7)));
|
|
91
|
-
```
|
|
92
|
-
|
|
93
|
-
To assign colors you can use the following options: `Color.fromHex()`, `new Color(new RGBA(r, g, b, a))`, `new Color(new HSLA(h, s, l, a))`, `new Color(new HSVA(h, s, v, a))` or `Color.BLUE`, `Color.RED`, etc.
|
|
94
|
-
|
|
95
|
-
### Update Items Background Color
|
|
96
|
-
|
|
97
|
-
This method change background color on hover of items of menubar.
|
|
98
|
-
|
|
99
|
-
```js
|
|
100
|
-
titlebar.updateItemBGColor(new Color(new RGBA(0, 0, 0, .7)));
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
To assign colors you can use the following options: `Color.fromHex()`, `new Color(new RGBA(r, g, b, a))`, `new Color(new HSLA(h, s, l, a))`, `new Color(new HSVA(h, s, v, a))` or `Color.BLUE`, `Color.RED`, etc.
|
|
104
|
-
|
|
105
|
-
### Update Title
|
|
106
|
-
|
|
107
|
-
This method updated the title of the title bar, If you change the content of the `title` tag, you should call this method for update the title.
|
|
108
|
-
|
|
109
|
-
```js
|
|
110
|
-
document.title = 'My new title';
|
|
111
|
-
titlebar.updateTitle();
|
|
20
|
+
<br>
|
|
112
21
|
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
```
|
|
116
|
-
|
|
117
|
-
if this method is called and the title parameter is added, the title of the document is changed to that of the parameter.
|
|
118
|
-
|
|
119
|
-
### Update Icon
|
|
120
|
-
|
|
121
|
-
With this method you can update the icon. This method receives the url of the image _(it is advisable to use transparent image formats)_
|
|
22
|
+
# 🛠️ Usage
|
|
23
|
+
The implementation is done as follows:
|
|
122
24
|
|
|
25
|
+
In the main application file (main.js or .ts)
|
|
123
26
|
```js
|
|
124
|
-
titlebar
|
|
125
|
-
```
|
|
27
|
+
import { setupTitlebar, attachTitlebarToWindow } from "custom-electron-titlebar/main";
|
|
126
28
|
|
|
127
|
-
|
|
29
|
+
// setup the titlebar main process
|
|
30
|
+
setupTitlebar();
|
|
128
31
|
|
|
129
|
-
|
|
32
|
+
function createWindow() {
|
|
33
|
+
...
|
|
130
34
|
|
|
131
|
-
|
|
132
|
-
|
|
35
|
+
// attach fullscreen(f11 and not 'maximized') && focus listeners
|
|
36
|
+
attachTitlebarToWindow(mainWindow);
|
|
37
|
+
}
|
|
133
38
|
```
|
|
134
39
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
You can change the position of the title of title bar. `left`, `center` and `right` are allowed
|
|
138
|
-
|
|
40
|
+
In the preload file (preload.js or .ts)
|
|
139
41
|
```js
|
|
140
|
-
titlebar
|
|
141
|
-
```
|
|
142
|
-
|
|
143
|
-
### Dispose
|
|
42
|
+
import { Titlebar } from "custom-electron-titlebar";
|
|
144
43
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
44
|
+
window.addEventListener('DOMContentLoaded', () => {
|
|
45
|
+
// Title bar implemenation
|
|
46
|
+
new Titlebar();
|
|
47
|
+
});
|
|
149
48
|
```
|
|
49
|
+
To see the options you can include in the Title Bar constructor, such as color of elements, icons, menu position, and much more, and the methods you can use, go to the [wiki](https://github.com/AlexTorresSk/custom-electron-titlebar/wiki)
|
|
50
|
+
<br><br>
|
|
150
51
|
|
|
151
|
-
##
|
|
52
|
+
## 💰 Support
|
|
53
|
+
If you want to support my development, you can do so by donating through [Buy me a coffee](https://www.buymeacoffee.com/AlexTorresSk) or [Patreon](https://www.patreon.com/AlexTorresSk)
|
|
54
|
+
<br><br>
|
|
152
55
|
|
|
56
|
+
## ✅ License
|
|
153
57
|
This project is under the [MIT](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE) license.
|
package/_config.yml
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
theme: jekyll-theme-
|
|
1
|
+
theme: jekyll-theme-architect
|
package/dist/index.d.ts
CHANGED