custom-electron-titlebar 4.0.0-beta.1 → 4.0.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.
Files changed (8) hide show
  1. package/README.md +11 -206
  2. package/dist/index.js +1 -453
  3. package/dist/interfaces.d.ts +11 -12
  4. package/dist/titlebar.d.ts +14 -6
  5. package/package.json +11 -12
  6. package/.github/ISSUE_TEMPLATE/issue-report.md +0 -29
  7. package/.vscode/launch.json +0 -49
  8. package/.vscode/tasks.json +0 -38
package/README.md CHANGED
@@ -1,219 +1,24 @@
1
- # Custom Electron Titlebar 4
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
  [![LICENSE](https://img.shields.io/github/license/AlexTorresSk/custom-electron-titlebar.svg)](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE)
6
6
  [![NPM Version](https://img.shields.io/npm/v/custom-electron-titlebar.svg)](https://npmjs.org/package/custom-electron-titlebar)
7
7
 
8
- ![Preview 1](screenshots/window_1.png)
8
+ ![Screenshot 1](screenshots/cet-001.jpg)
9
9
 
10
- ![Preview 2](screenshots/window_2.png)
10
+ ![Screenshot 2](screenshots/cet-002.jpg)
11
11
 
12
- ![Preview 3](screenshots/window_3.png)
13
-
14
- ## Install
15
-
16
- ```
17
- npm i custom-electron-titlebar
18
- ```
19
-
20
- or use example folder to init basic electron project with this titlebar.
21
-
22
- ## Usage
23
-
24
- #### Step 1
25
- In your **preload** file add:
26
-
27
- For javascript
28
-
29
- ```js
30
- const customTitlebar = require('custom-electron-titlebar');
31
-
32
- new customTitlebar.Titlebar({
33
- backgroundColor: customTitlebar.Color.fromHex('#ECECEC')
34
- });
35
- ```
36
-
37
- For typescript
38
- ```ts
39
- import { Titlebar, Color } from 'custom-electron-titlebar'
40
-
41
- new Titlebar({
42
- backgroundColor: Color.fromHex('#ECECEC')
43
- });
44
- ```
45
-
46
- The parameter `backgroundColor: Color` is required, this should be `Color` type.
47
- (View [Update Background](#update-background) for more details).
48
-
49
- #### Step 2
50
- Update the code that launches browser window
51
- ```js
52
- let mainWindow = new BrowserWindow({
53
- width: 1000,
54
- height: 600,
55
- titleBarStyle: "hidden", // add this line
56
- });
57
- ```
58
-
59
- ## Options
60
-
61
- The interface [`TitleBarOptions`] is managed, which has the following configurable options for the title bar. Some parameters are optional.
62
-
63
- | Parameter | Type | Description | Default |
64
- | ------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------- |
65
- | backgroundColor **(required)** | Color | The background color of the titlebar. | #444444 |
66
- | icon | string | The icon shown on the left side of the title bar. | null |
67
- | iconsTheme | Theme | Style of the icons. | Themebar.win |
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
- | minimizable | boolean | Enables or disables the option to minimize the window by clicking on the corresponding button in the title bar. | true |
71
- | maximizable | boolean | Enables or disables the option to maximize and un-maximize the window by clicking on the corresponding button in the title bar. | true |
72
- | closeable | boolean | Enables or disables the option of the close window by clicking on the corresponding button in the title bar. | true |
73
- | order | string | Set the order of the elements on the title bar. (`inverted`, `first-buttons`) | null |
74
- | titleHorizontalAlignment | string | Set horizontal alignment of the window title. (`left`, `center`, `right`) | center |
75
- | menu | Electron.Menu | The menu to show in the title bar. | Menu.getApplicationMenu() |
76
- | menuPosition | string | The position of menubar on titlebar. | left |
77
- | enableMnemonics | boolean | Enable the mnemonics on menubar and menu items. | true |
78
- | itemBackgroundColor | Color | The background color when the mouse is over the item. | rgba(0, 0, 0, .14) |
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();
112
-
113
- // Or you can do as follows and avoid writing document.title
114
- titlebar.updateTitle('New Title');
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)_
122
-
123
- ```js
124
- titlebar.updateIcon('./images/my-icon.svg');
12
+ ## 🟢 Install
125
13
  ```
126
-
127
- ### Update Menu
128
-
129
- This method updates or creates the menu, to create the menu use remote.Menu and remote.MenuItem.
130
-
131
- ```js
132
- const menu = new Menu();
133
- menu.append(new MenuItem({
134
- label: 'Item 1',
135
- submenu: [
136
- {
137
- label: 'Subitem 1',
138
- click: () => console.log('Click on subitem 1')
139
- },
140
- {
141
- type: 'separator'
142
- }
143
- ]
144
- }));
145
-
146
- menu.append(new MenuItem({
147
- label: 'Item 2',
148
- submenu: [
149
- {
150
- label: 'Subitem checkbox',
151
- type: 'checkbox',
152
- checked: true
153
- },
154
- {
155
- type: 'separator'
156
- },
157
- {
158
- label: 'Subitem with submenu',
159
- submenu: [
160
- {
161
- label: 'Submenu &item 1',
162
- accelerator: 'Ctrl+T'
163
- }
164
- ]
165
- }
166
- ]
167
- }));
168
-
169
- titlebar.updateMenu(menu);
14
+ npm install custom-electron-titlebar
170
15
  ```
171
16
 
172
- ### Update Menu Position
173
-
174
- You can change the position of the menu bar. `left` and `bottom` are allowed.
175
-
176
- ```js
177
- titlebar.updateMenuPosition('bottom');
178
- ```
179
-
180
- ### Set Horizontal Alignment
181
-
182
- > setHorizontalAlignment method was contributed by [@MairwunNx](https://github.com/MairwunNx) :punch:
183
-
184
- `left`, `center` and `right` are allowed
185
-
186
- ```js
187
- titlebar.setHorizontalAlignment('right');
188
- ```
189
-
190
- ### Dispose
191
-
192
- This method removes the title bar completely and all recorded events.
193
-
194
- ```js
195
- titlebar.dispose();
196
- ```
197
-
198
- ## CSS Classes
199
- The following CSS classes exist and can be used to customize the titlebar
200
-
201
- | Class name | Description |
202
- | --------------------------- | -----------------------------------------------------------------|
203
- | .titlebar | Styles the titlebar. |
204
- | .window-appicon | Styles the app icon on the titlebar. |
205
- | .window-title | Styles the window title. (Example: font-size) |
206
- | .window-controls-container | Styles the window controls section. |
207
- | .resizer top | Styles the resizer invisible top bar |
208
- | .resizer left | Styles the resizer invisible left bar |
209
- | .menubar | Styles the top menus |
210
- | .menubar-menu-button | Styles the main menu elements. (Example: color) |
211
- | .menubar-menu-button open | Styles the main menu elements when open menu. (Example: color) |
212
- | .menubar-menu-title | Description missing |
213
- | .action-item | Description missing |
214
- | .action-menu-item | Styles action menu elements. (Example: color) |
215
-
216
-
217
- ## License
17
+ ## 🚀 Usage
18
+ To see the documentation on how to use the title bar, visit the [Wiki](https://github.com/AlexTorresSk/custom-electron-titlebar/wiki)
218
19
 
20
+ ## ✅ License
219
21
  This project is under the [MIT](https://github.com/AlexTorresSk/custom-electron-titlebar/blob/master/LICENSE) license.
22
+
23
+ ## 💰 Support
24
+ If you want to support my development, you can do so by donating through [Buy me a coffee](https://www.buymeacoffee.com/AlexTorresSk), [Paypal](https://www.paypal.com/paypalme/hapovedat) or [Patreon](https://www.patreon.com/AlexTorresSk)