1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Add tray menu extension documentation

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>
This commit is contained in:
Juho Heikka 2021-12-29 14:00:17 +02:00
parent e6f07cb112
commit c7dc063dc3
2 changed files with 44 additions and 7 deletions

View File

@ -37,9 +37,9 @@ export default class ExampleMainExtension extends Main.LensExtension {
}
```
### App Menus
### Menus
This extension can register custom app menus that will be displayed on OS native menus.
This extension can register custom app and tray menus that will be displayed on OS native menus.
Example:
@ -56,6 +56,29 @@ export default class ExampleMainExtension extends Main.LensExtension {
}
}
]
trayMenus = [
{
label: "My links",
submenu: [
{
label: "Lens",
click() {
Main.Navigation.navigate("https://k8slens.dev");
}
},
{
type: "separator"
},
{
label: "Lens Github",
click() {
Main.Navigation.navigate("https://github.com/lensapp/lens");
}
}
]
}
]
}
```

View File

@ -3,7 +3,7 @@
The Main Extension API is the interface to Lens's main process.
Lens runs in both main and renderer processes.
The Main Extension API allows you to access, configure, and customize Lens data, add custom application menu items and [protocol handlers](protocol-handlers.md), and run custom code in Lens's main process.
It also provides convenient methods for navigating to built-in Lens pages and extension pages, as well as adding and removing sources of catalog entities.
It also provides convenient methods for navigating to built-in Lens pages and extension pages, as well as adding and removing sources of catalog entities.
## `Main.LensExtension` Class
@ -45,7 +45,6 @@ For more details on accessing Lens state data, please see the [Stores](../stores
### `appMenus`
The Main Extension API allows you to customize the UI application menu.
Note that this is the only UI feature that the Main Extension API allows you to customize.
The following example demonstrates adding an item to the **Help** menu.
``` typescript
@ -65,7 +64,7 @@ export default class SamplePageMainExtension extends Main.LensExtension {
```
`appMenus` is an array of objects that satisfy the `MenuRegistration` interface.
`MenuRegistration` extends React's `MenuItemConstructorOptions` interface.
`MenuRegistration` extends Electron's `MenuItemConstructorOptions` interface.
The properties of the appMenus array objects are defined as follows:
* `parentId` is the name of the menu where your new menu item will be listed.
@ -80,8 +79,6 @@ Note that pages are associated with the [`Renderer.LensExtension`](renderer-exte
The following example demonstrates how an application menu can be used to navigate to such a page:
``` typescript
import { Main } from "@k8slens/extensions";
export default class SamplePageMainExtension extends Main.LensExtension {
appMenus = [
{
@ -96,6 +93,23 @@ export default class SamplePageMainExtension extends Main.LensExtension {
When the menu item is clicked the `navigate()` method looks for and displays a global page with id `"myGlobalPage"`.
This page would be defined in your extension's `Renderer.LensExtension` implementation (See [`Renderer.LensExtension`](renderer-extension.md)).
### `trayMenus`
`trayMenus` is a similar than appMenus, but you don't add parentId since all of the tray menus under Lens tray icon. It's an array of Electron's [`MenuItemConstructorOptions`](https://www.electronjs.org/docs/v14-x-y/api/menu-item). Most importantly you can define a `label` and a `click` handler.
The following example demonstrates how tray menus can be added from extension:
``` typescript
import { Main } from "@k8slens/extensions";
export default class SamplePageMainExtension extends Main.LensExtension {
trayMenus = [{
label: "menu from the extension",
click: () => { console.log("tray menu clicked!") }
}]
}
```
### `addCatalogSource()` and `removeCatalogSource()` Methods
The `Main.LensExtension` class also provides the `addCatalogSource()` and `removeCatalogSource()` methods, for managing custom catalog items (or entities).