mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Resolved remaining conflicts
Resolved conflicts while rebasing after pulling from remote Exit pipeline if extensions build or tests fail (#1370) Signed-off-by: Lauri Nevala <lauri.nevala@gmail.com> Simplify pages/menus/registry extension api internal implementation (#1364) Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com> Co-authored-by: Roman <ixrock@gmail.com> Resolved conflicts in rebase from master Updated docs to sentence case throughout Changed mkdoc.yml nav to sentence case Signed-off-by: Paul Williams <pawilliams@mirantis.com> Changed headings to sentence case throughtout docs Signed-off-by: Paul Williams <pawilliams@mirantis.com> Changed all titles and headings back to title case throughout docs and in mkdocs.yml nav Signed-off-by: Paul Williams <pawilliams@mirantis.com> Updated docs to sentence case throughout Changed mkdoc.yml nav to sentence case Signed-off-by: Paul Williams <pawilliams@mirantis.com> Changed headings to sentence case throughtout docs Signed-off-by: Paul Williams <pawilliams@mirantis.com> Changed all titles and headings back to title case throughout docs and in mkdocs.yml nav Signed-off-by: Paul Williams <pawilliams@mirantis.com>
This commit is contained in:
Lauri Nevala
Paul Williams
parent
0fb859a22a
commit
3e986e4057
@ -1,4 +1,4 @@
|
||||
# Adding clusters
|
||||
# Adding Clusters
|
||||
|
||||
Add clusters by clicking the **Add Cluster** button in the left-side menu.
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Removing clusters
|
||||
# Removing Clusters
|
||||
|
||||
Remove Lens clusters using the context menu that appears when you right-click the cluster in the left-side menu that you want to remove.
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
# Promoting
|
||||
# Promotion
|
||||
|
||||
Help promote Lens! If you are not a developer (or even if you are), you can still contribute to the project, a lot, by helping us promote it. As we are a free open source project, the community is our most important asset, so here are some ways that you can help the project continue to grow.
|
||||
|
||||
|
||||
@ -10,7 +10,7 @@ This documentation describes:
|
||||
|
||||
Code samples are available at [lensapp/lens-extension-samples](https://github.com/lensapp/lens-extension-samples).
|
||||
|
||||
## What can extensions do
|
||||
## What Extensions Can Do
|
||||
|
||||
Here are some examples of what you can achieve with the Extension API:
|
||||
|
||||
@ -18,7 +18,7 @@ Here are some examples of what you can achieve with the Extension API:
|
||||
|
||||
If you'd like to have a more comprehensive overview of the Extension API, refer to the [Extension Capabilities Overview](capabilities/overview.md) page. [Extension Guides Overview](guides/overview.md) also includes a list of code samples and guides that illustrate various Extension API usage.
|
||||
|
||||
## How to build extensions
|
||||
## How to Build Extensions
|
||||
|
||||
Building a good extension can take a lot of effort. Here is what each section of the API doc can help you with:
|
||||
|
||||
@ -29,13 +29,13 @@ Building a good extension can take a lot of effort. Here is what each section of
|
||||
* **Advanced Topics** explains advanced concepts such as integrating with 3rd party applications/services.
|
||||
* **References** contains exhaustive references for the Lens Extension API, Contribution Points, and many other topics.
|
||||
|
||||
## What's new
|
||||
## What's New
|
||||
|
||||
Lens updates on a monthly cadence, and that applies to the Extension API as well. New features and APIs become available every month to increase the power and scope of Lens extensions.
|
||||
|
||||
To stay current with the Extension API and Lens features in general, you can review the [release notes](https://github.com/lensapp/lens/releases).
|
||||
|
||||
## Looking for help
|
||||
## Looking for Help
|
||||
|
||||
If you have questions for extension development, try asking on:
|
||||
|
||||
@ -43,6 +43,6 @@ If you have questions for extension development, try asking on:
|
||||
|
||||
To provide feedback on the documentation or issues with the Lens Extension API, create new issues at [lensapp/lens](https://github.com/lensapp/lens/issues) with the labels `area/documentation` and/or `area/extension`.
|
||||
|
||||
## Download Lens - The Kubernetes IDE
|
||||
## Downloading Lens
|
||||
|
||||
Go to [Lens](https://k8slens.dev)
|
||||
|
||||
@ -1,130 +1,130 @@
|
||||
# Theme color reference
|
||||
You can use theme-based CSS Variables to style an extension according to the active theme.
|
||||
# Theme Color Reference
|
||||
You can use CSS variables generated from theme `.json` files to style an extension with respect of active theme.
|
||||
|
||||
## Base colors
|
||||
- `--blue`: blue color.
|
||||
- `--magenta`: magenta color.
|
||||
- `--golden`: gold/yellow color.
|
||||
- `--halfGray`: gray with some apacity applied.
|
||||
- `--primary`: Lens brand (blue) color.
|
||||
- `--colorSuccess`: successfull operations color.
|
||||
- `--colorOk`: successfull operations (bright version) color.
|
||||
- `--colorInfo`: informational, in-progress color.
|
||||
- `--colorError`: critical error color.
|
||||
- `--colorSoftError`: error color.
|
||||
- `--colorWarning`: warning color.
|
||||
- `--colorVague`: soft gray color for notices, hints etc.
|
||||
- `--colorTerminated`: terminated, closed, stale color.
|
||||
- `--boxShadow`: semi-transparent box-shadow color.
|
||||
## Base Colors
|
||||
- `blue`: blue color.
|
||||
- `magenta`: magenta color.
|
||||
- `golden`: gold/yellow color.
|
||||
- `halfGray`: gray with some apacity applied.
|
||||
- `primary`: Lens brand (blue) color.
|
||||
- `colorSuccess`: successfull operations color.
|
||||
- `colorOk`: successfull operations (bright version) color.
|
||||
- `colorInfo`: informational, in-progress color.
|
||||
- `colorError`: critical error color.
|
||||
- `colorSoftError`: error color.
|
||||
- `colorWarning`: warning color.
|
||||
- `colorVague`: soft gray color for notices, hints etc.
|
||||
- `colorTerminated`: terminated, closed, stale color.
|
||||
- `boxShadow`: semi-transparent box-shadow color.
|
||||
|
||||
## Text colors
|
||||
- `--textColorPrimary`: foreground text color.
|
||||
- `--textColorSecondary`: foreground text color for different paragraps, parts of text.
|
||||
- `--textColorAccent`: foreground text color to highlight its parts.
|
||||
## Text Colors
|
||||
- `textColorPrimary`: foreground text color.
|
||||
- `textColorSecondary`: foreground text color for different paragraps, parts of text.
|
||||
- `textColorAccent`: foreground text color to highlight its parts.
|
||||
|
||||
## Border colors
|
||||
- `--borderColor`: border color.
|
||||
- `--borderFaintColor`: fainted (lighter or darker, which depends on the theme) border color.
|
||||
## Border Colors
|
||||
- `borderColor`: border color.
|
||||
- `borderFaintColor`: fainted (lighter or darker, which depends on the theme) border color.
|
||||
|
||||
## Layout colors
|
||||
- `--mainBackground`: main background color for the app.
|
||||
- `--contentColor`: background color for panels contains some data.
|
||||
- `--layoutBackground`: background color for layout parts.
|
||||
- `--layoutTabsBackground`: background color for general tabs.
|
||||
- `--layoutTabsActiveColor`: foreground color for general tabs.
|
||||
- `--layoutTabsLineColor`: background color for lines under general tabs.
|
||||
## Layout Colors
|
||||
- `mainBackground`: main background color for the app.
|
||||
- `contentColor`: background color for panels contains some data.
|
||||
- `layoutBackground`: background color for layout parts.
|
||||
- `layoutTabsBackground`: background color for general tabs.
|
||||
- `layoutTabsActiveColor`: foreground color for general tabs.
|
||||
- `layoutTabsLineColor`: background color for lines under general tabs.
|
||||
|
||||
## Sidebar colors
|
||||
- `--sidebarLogoBackground`: background color behind logo in sidebar.
|
||||
- `--sidebarActiveColor`: foreground color for active menu items in sidebar.
|
||||
- `--sidebarSubmenuActiveColor`: foreground color for active submenu items in sidebar.
|
||||
- `--sidebarBackground`: background color for sidebar.
|
||||
## Sidebar Colors
|
||||
- `sidebarLogoBackground`: background color behind logo in sidebar.
|
||||
- `sidebarActiveColor`: foreground color for active menu items in sidebar.
|
||||
- `sidebarSubmenuActiveColor`: foreground color for active submenu items in sidebar.
|
||||
- `sidebarBackground`: background color for sidebar.
|
||||
|
||||
## Button colors
|
||||
- `--buttonPrimaryBackground`: button background color for primary actions.
|
||||
- `--buttonDefaultBackground`: default button background color.
|
||||
- `--buttonAccentBackground`: accent button background color.
|
||||
- `--buttonDisabledBackground`: disabled button background color.
|
||||
## Button Colors
|
||||
- `buttonPrimaryBackground`: button background color for primary actions.
|
||||
- `buttonDefaultBackground`: default button background color.
|
||||
- `buttonAccentBackground`: accent button background color.
|
||||
- `buttonDisabledBackground`: disabled button background color.
|
||||
|
||||
## Table colors
|
||||
- `--tableBgcStripe`: background color for odd rows in table.
|
||||
- `--tableBgcSelected`: background color for selected row in table.
|
||||
- `--tableHeaderBackground`: background color for table header.
|
||||
- `--tableHeaderBorderWidth`: border width under table header.
|
||||
- `--tableHeaderBorderColor`: border color for line under table header.
|
||||
- `--tableHeaderColor`: foreground color for table header.
|
||||
- `--tableSelectedRowColor`: foreground color for selected row in table.
|
||||
## Table Colors
|
||||
- `tableBgcStripe`: background color for odd rows in table.
|
||||
- `tableBgcSelected`: background color for selected row in table.
|
||||
- `tableHeaderBackground`: background color for table header.
|
||||
- `tableHeaderBorderWidth`: border width under table header.
|
||||
- `tableHeaderBorderColor`: border color for line under table header.
|
||||
- `tableHeaderColor`: foreground color for table header.
|
||||
- `tableSelectedRowColor`: foreground color for selected row in table.
|
||||
|
||||
## Dock colors
|
||||
- `--dockHeadBackground`: background color for dock's header.
|
||||
- `--dockInfoBackground`: background color for dock's info panel.
|
||||
- `--dockInfoBorderColor`: border color for dock's info panel.
|
||||
## Dock Colors
|
||||
- `dockHeadBackground`: background color for dock's header.
|
||||
- `dockInfoBackground`: background color for dock's info panel.
|
||||
- `dockInfoBorderColor`: border color for dock's info panel.
|
||||
|
||||
## Helm chart colors
|
||||
- `--helmLogoBackground`: background color for chart logo.
|
||||
- `--helmImgBackground`: background color for chart image.
|
||||
- `--helmStableRepo`: background color for stable repo.
|
||||
- `--helmIncubatorRepo`: background color for incubator repo.
|
||||
- `--helmDescriptionHr`: Helm chart description separator line color.
|
||||
- `--helmDescriptionBlockqouteColor`: Helm chart description blockquote color.
|
||||
- `--helmDescriptionBlockqouteBorder`: Helm chart description blockquote border color.
|
||||
- `--helmDescriptionBlockquoteBackground`: Helm chart description blockquote background color.
|
||||
- `--helmDescriptionHeaders`: Helm chart description headers color.
|
||||
- `--helmDescriptionH6`: Helm chart description header foreground color.
|
||||
- `--helmDescriptionTdBorder`: Helm chart description table cell border color.
|
||||
- `--helmDescriptionTrBackground`: Helm chart description table row background color.
|
||||
- `--helmDescriptionCodeBackground`: Helm chart description code background color.
|
||||
- `--helmDescriptionPreBackground`: Helm chart description pre background color.
|
||||
- `--helmDescriptionPreColor`: Helm chart description pre foreground color.
|
||||
## Helm Chart Colors
|
||||
- `helmLogoBackground`: background color for chart logo.
|
||||
- `helmImgBackground`: background color for chart image.
|
||||
- `helmStableRepo`: background color for stable repo.
|
||||
- `helmIncubatorRepo`: background color for incubator repo.
|
||||
- `helmDescriptionHr`: Helm chart description separator line color.
|
||||
- `helmDescriptionBlockqouteColor`: Helm chart description blockquote color.
|
||||
- `helmDescriptionBlockqouteBorder`: Helm chart description blockquote border color.
|
||||
- `helmDescriptionBlockquoteBackground`: Helm chart description blockquote background color.
|
||||
- `helmDescriptionHeaders`: Helm chart description headers color.
|
||||
- `helmDescriptionH6`: Helm chart description header foreground color.
|
||||
- `helmDescriptionTdBorder`: Helm chart description table cell border color.
|
||||
- `helmDescriptionTrBackground`: Helm chart description table row background color.
|
||||
- `helmDescriptionCodeBackground`: Helm chart description code background color.
|
||||
- `helmDescriptionPreBackground`: Helm chart description pre background color.
|
||||
- `helmDescriptionPreColor`: Helm chart description pre foreground color.
|
||||
|
||||
## Terminal colors
|
||||
- `--terminalBackground`: Terminal background color.
|
||||
- `--terminalForeground`: Terminal foreground color.
|
||||
- `--terminalCursor`: Terminal cursor color.
|
||||
- `--terminalCursorAccent`: Terminal cursor accent color.
|
||||
- `--terminalSelection`: Terminal selection background color.
|
||||
- `--terminalBlack`: Terminal black color.
|
||||
- `--terminalRed`: Terminal red color.
|
||||
- `--terminalGreen`: Terminal green color.
|
||||
- `--terminalYellow`: Terminal yellow color.
|
||||
- `--terminalBlue`: Terminal blue color.
|
||||
- `--terminalMagenta`: Terminal magenta color.
|
||||
- `--terminalCyan`: Terminal cyan color.
|
||||
- `--terminalWhite`: Terminal white color.
|
||||
- `--terminalBrightBlack`: Terminal bright black color.
|
||||
- `--terminalBrightRed`: Terminal bright red color.
|
||||
- `--terminalBrightGreen`: Terminal bright green color.
|
||||
- `--terminalBrightYellow`: Terminal bright yellow color.
|
||||
- `--terminalBrightBlue`: Terminal bright blue color.
|
||||
- `--terminalBrightMagenta`: Terminal bright magenta color.
|
||||
- `--terminalBrightCyan`: Terminal bright cyan color.
|
||||
- `--terminalBrightWhite`: Terminal bright white color.
|
||||
## Terminal Colors
|
||||
- `terminalBackground`: Terminal background color.
|
||||
- `terminalForeground`: Terminal foreground color.
|
||||
- `terminalCursor`: Terminal cursor color.
|
||||
- `terminalCursorAccent`: Terminal cursor accent color.
|
||||
- `terminalSelection`: Terminal selection background color.
|
||||
- `terminalBlack`: Terminal black color.
|
||||
- `terminalRed`: Terminal red color.
|
||||
- `terminalGreen`: Terminal green color.
|
||||
- `terminalYellow`: Terminal yellow color.
|
||||
- `terminalBlue`: Terminal blue color.
|
||||
- `terminalMagenta`: Terminal magenta color.
|
||||
- `terminalCyan`: Terminal cyan color.
|
||||
- `terminalWhite`: Terminal white color.
|
||||
- `terminalBrightBlack`: Terminal bright black color.
|
||||
- `terminalBrightRed`: Terminal bright red color.
|
||||
- `terminalBrightGreen`: Terminal bright green color.
|
||||
- `terminalBrightYellow`: Terminal bright yellow color.
|
||||
- `terminalBrightBlue`: Terminal bright blue color.
|
||||
- `terminalBrightMagenta`: Terminal bright magenta color.
|
||||
- `terminalBrightCyan`: Terminal bright cyan color.
|
||||
- `terminalBrightWhite`: Terminal bright white color.
|
||||
|
||||
## Dialog colors
|
||||
- `--dialogHeaderBackground`: background color for dialog header.
|
||||
- `--dialogFooterBackground`: background color for dialog footer.
|
||||
## Dialog Colors
|
||||
- `dialogHeaderBackground`: background color for dialog header.
|
||||
- `dialogFooterBackground`: background color for dialog footer.
|
||||
|
||||
## Detail panel (Drawer) colors
|
||||
- `--drawerTitleText`: drawer title foreground color.
|
||||
- `--drawerSubtitleBackground`: drawer subtitle foreground color.
|
||||
- `--drawerItemNameColor`: foreground color for item name in drawer.
|
||||
- `--drawerItemValueColor`: foreground color for item value in drawer.
|
||||
## Detail Panel (Drawer) Colors
|
||||
- `drawerTitleText`: drawer title foreground color.
|
||||
- `drawerSubtitleBackground`: drawer subtitle foreground color.
|
||||
- `drawerItemNameColor`: foreground color for item name in drawer.
|
||||
- `drawerItemValueColor`: foreground color for item value in drawer.
|
||||
|
||||
## Misc colors
|
||||
- `--logsBackground`: background color for pod logs.
|
||||
- `--clusterMenuBackground`: background color for cluster menu.
|
||||
- `--clusterMenuBorderColor`: border color for cluster menu.
|
||||
- `--clusterSettingsBackground`: background color for cluster settings.
|
||||
- `--addClusterIconColor`: add cluster button background color.
|
||||
- `--iconActiveColor`: active cluster icon foreground color.
|
||||
- `--iconActiveBackground`: active cluster icon background color.
|
||||
- `--filterAreaBackground`: page filter area (where selected namespaces are lister) background color.
|
||||
- `--chartStripesColor`: bar chart zebra stripes background color.
|
||||
- `--chartCapacityColor`: background color for capacity values in bar charts.
|
||||
- `--pieChartDefaultColor`: default background color for pie chart values.
|
||||
- `--selectOptionHoveredColor`: foregrond color for selected element in dropdown list.
|
||||
- `--lineProgressBackground`: background color for progress line.
|
||||
- `--radioActiveBackground`: background color for active radio buttons.
|
||||
- `--menuActiveBackground`: background color for active menu items.
|
||||
## Misc Colors
|
||||
- `logsBackground`: background color for pod logs.
|
||||
- `clusterMenuBackground`: background color for cluster menu.
|
||||
- `clusterMenuBorderColor`: border color for cluster menu.
|
||||
- `clusterSettingsBackground`: background color for cluster settings.
|
||||
- `addClusterIconColor`: add cluster button background color.
|
||||
- `iconActiveColor`: active cluster icon foreground color.
|
||||
- `iconActiveBackground`: active cluster icon background color.
|
||||
- `filterAreaBackground`: page filter area (where selected namespaces are lister) background color.
|
||||
- `chartStripesColor`: bar chart zebra stripes background color.
|
||||
- `chartCapacityColor`: background color for capacity values in bar charts.
|
||||
- `pieChartDefaultColor`: default background color for pie chart values.
|
||||
- `selectOptionHoveredColor`: foregrond color for selected element in dropdown list.
|
||||
- `lineProgressBackground`: background color for progress line.
|
||||
- `radioActiveBackground`: background color for active radio buttons.
|
||||
- `menuActiveBackground`: background color for active menu items.
|
||||
|
||||
In most cases you would only need base, text and some of the layout colors.
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
# Styling an extension
|
||||
# Styling an Extension
|
||||
Lens provides a set of global styles and UI components that can be used by any extension to preserve look and feel of the application.
|
||||
|
||||
Lens provides a set of global styles and UI components that can be used by any extension to preserve the look and feel of the application.
|
||||
|
||||
## Layout
|
||||
## Styling Approach
|
||||
Lens heavily uses SCSS preprocessor with a set of predefined variables and mixins.
|
||||
|
||||
For layout tasks Lens is using [flex.box](https://www.npmjs.com/package/flex.box) library which provides helpful class names to specify some of the [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) properties. For example, `div` with class names:
|
||||
|
||||
@ -55,7 +55,8 @@ When the user changes the theme, the process is repeated, and new CSS Variables
|
||||
|
||||
If you want to follow a selected theme to keep the 'native' Lens look and feel, respecting the light/dark appearance of your extension, you can use the provided variables and built-in Lens components such as `Button`, `Select`, `Table`, etc.
|
||||
|
||||
There is a set of CSS Variables available for extensions to use for theming. They are all located inside `:root` and are defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss):
|
||||
## Injected Styles
|
||||
Every extention is affected by list of default global styles defined in `src/renderer/components/app.scss`. These are basic browser resets like setting `box-sizing` property for every element, default text and background colors, default font size, basic headings visualisation etc.
|
||||
|
||||
```css
|
||||
--font-main: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
@ -70,6 +71,9 @@ There is a set of CSS Variables available for extensions to use for theming. The
|
||||
|
||||
as well as in [the theme modules](https://github.com/lensapp/lens/tree/master/src/renderer/themes):
|
||||
|
||||
## Variables to Use
|
||||
### Basic Styling
|
||||
There is a list of CSS Variables available for extension to use. Basic variables located inside `:root` selected in `src/renderer/components/app.scss`:
|
||||
```
|
||||
--blue: #3d90ce;
|
||||
--magenta: #c93dce;
|
||||
@ -99,53 +103,38 @@ They can be used in form of `var(--magenta)`, e.g.
|
||||
}
|
||||
```
|
||||
|
||||
A complete list of all themable colors can be found in the [color reference](../color-reference).
|
||||
|
||||
### Theme switching
|
||||
|
||||
When the light theme is active, the `<body>` element gets a "theme-light" class, `<body class="theme-light">`. If the class isn't there, assume the theme is dark. The active theme can be changed in the `Preferences` page:
|
||||
|
||||
|
||||
Currently, there is no prescribed way of detecting changes to the theme in JavaScript. [This issue](https://github.com/lensapp/lens/issues/1336) hopes to improve on this. In the meantime, you can use a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to observe the `<body>` element's `class` attribute to see if the "theme-light" class gets added to it:
|
||||
|
||||
```javascript
|
||||
...
|
||||
useEffect(function () {
|
||||
const observer = new MutationObserver(function (mutations: MutationRecord[]) {
|
||||
mutations.forEach((mutation: MutationRecord) => {
|
||||
if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
|
||||
if ((mutation.target as HTMLElement).classList.contains('theme-light')) {
|
||||
// theme is LIGHT
|
||||
} else {
|
||||
// theme is DARK
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
observer.observe(document.body, {
|
||||
attributes: true,
|
||||
attributeFilter: ['class'],
|
||||
});
|
||||
|
||||
return function () {
|
||||
observer.disconnect();
|
||||
};
|
||||
}, []); // run once on mount
|
||||
### Themable Colors
|
||||
After theme file gets parsed it provides list of theme-defined colors. Most of their values are different for light and dark themes. You can use them to preserve consitent view of extension with respect of selected theme.
|
||||
```
|
||||
"blue": "#3d90ce",
|
||||
"magenta": "#c93dce",
|
||||
"golden": "#ffc63d",
|
||||
"halfGray": "#87909c80",
|
||||
"primary": "#3d90ce",
|
||||
"textColorPrimary": "#555555",
|
||||
"textColorSecondary": "#51575d",
|
||||
"textColorAccent": "#333333",
|
||||
"borderColor": "#c9cfd3",
|
||||
"borderFaintColor": "#dfdfdf",
|
||||
"mainBackground": "#f1f1f1",
|
||||
"contentColor": "#ffffff",
|
||||
"layoutBackground": "#e8e8e8",
|
||||
"layoutTabsBackground": "#f8f8f8",
|
||||
"layoutTabsActiveColor": "#333333",
|
||||
"layoutTabsLineColor": "#87909c80"
|
||||
...
|
||||
...
|
||||
```
|
||||
|
||||
## Injected styles
|
||||
## Injected Styles
|
||||
|
||||
Every extension is affected by list of default global styles defined in [app.scss](https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss). These are basic browser resets and element styles like setting the `box-sizing` property for every element, default text and background colors, default font sizes, basic heading formatting, etc.
|
||||
|
||||
Extension may overwrite these if needed. They have low CSS specificity, so overriding them should be fairly easy.
|
||||
|
||||
## CSS-in-JS
|
||||
|
||||
If an extension uses a system like `Emotion` to work with styles, it can use CSS variables as follows:
|
||||
|
||||
```javascript
|
||||
## Using CSS Cariables Inside CSS-in-JS components
|
||||
If a developer uses an `Emotion` (or similar) framework to work with styles inside an extension, they can use variables in the following form:
|
||||
```
|
||||
const Container = styled.div(() => ({
|
||||
backgroundColor: 'var(--mainBackground)'
|
||||
}));
|
||||
|
||||
@ -6,7 +6,7 @@ In the [Your First Extension](your-first-extension.md) topic, you learned how to
|
||||
|
||||
In this section, we split the Lens extension points into a few categories, each with short descriptions as to what your extension could achieve. Validate that your extension idea is achievable by reading the [Extension Capabilities](../capabilities/overview.md) section for new extension ideas.
|
||||
|
||||
## Guides & Samples
|
||||
## Guides and Samples
|
||||
|
||||
We have a great collection of sample extensions that you can adapt from, and some of them include a detailed guide that explains the source code. You can find all Samples & Guides in the [lens-extension-samples](https://github.com/lensapp/lens-extension-samples) repository.
|
||||
|
||||
|
||||
@ -2,11 +2,11 @@
|
||||
|
||||
In this topic, we'll teach you the fundamental concepts for building extensions.
|
||||
|
||||
## Installing and Building the extension
|
||||
## Installing and Building the Extension
|
||||
|
||||
Simple Lens extension that adds "Hello World" page to a cluster menu.
|
||||
|
||||
### Setup the extension directory
|
||||
### Setup the Extension Directory
|
||||
|
||||
First you will need to clone the [Lens Extension samples](https://github.com/lensapp/lens-extension-samples) repository to your local machine:
|
||||
|
||||
@ -16,7 +16,7 @@ git clone https://github.com/lensapp/lens-extension-samples.git
|
||||
|
||||
Next you need to create a symlink from the directory that Lens will monitor for user installed extensions to the sample extension, in this case **helloworld-sample**:
|
||||
|
||||
**Linux & MacOS**
|
||||
**Linux & macOS**
|
||||
```sh
|
||||
mkdir -p ~/.k8slens/extensions
|
||||
cd ~/.k8slens/extensions
|
||||
@ -44,7 +44,7 @@ Without administrator rights, you need to copy the extensions sample directory i
|
||||
Copy-Item 'lens-extension-samples\helloworld-sample' 'C:\Users\<user>\.k8slens\extensions\helloworld-sample'
|
||||
```
|
||||
|
||||
### Build the extension
|
||||
### Build the Extension
|
||||
|
||||
To build the extension you can use `make` or run the `npm` commands manually:
|
||||
|
||||
@ -70,7 +70,7 @@ npm run dev
|
||||
|
||||
Finally, if you already have Lens open you will need to quit and restart Lens for the extension to be loaded. After this initial restart you can reload Lens and it will pick up any new builds of the extension. Within Lens connect to an existing cluster or [create a new one](../../clusters/adding-clusters.md). You should see then see the "Hello World" page in the Lens sidebar cluster menu.
|
||||
|
||||
## Developing the extension
|
||||
## Developing the Extension
|
||||
|
||||
Let's make a change to the message that our helloworld-sample extension displays:
|
||||
|
||||
@ -80,7 +80,7 @@ Let's make a change to the message that our helloworld-sample extension displays
|
||||
* Reload the Lens window and click on the Hello World page.
|
||||
* You should see the updated message showing up.
|
||||
|
||||
## Next steps
|
||||
## Next Steps
|
||||
|
||||
In the next topic, [Extension Anatomy](anatomy.md), we'll take a closer look at the source code of the Hello World sample and explain key concepts.
|
||||
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
|
||||
`console.log()` might be handy for extension developers to prints out info/errors from extensions. To use `console.log`, note that Lens is based on Electron. Electron has two types of processes: [Main and Renderer](https://www.electronjs.org/docs/tutorial/quick-start#main-and-renderer-processes).
|
||||
|
||||
### Renderer process logs
|
||||
### Renderer Process Logs
|
||||
|
||||
`console.log()` in Renderer process is printed in the Console in Developer Tools (View > Toggle Developer Tools).
|
||||
|
||||
### Main process logs
|
||||
### Main Process Logs
|
||||
|
||||
To view the logs from the main process is a bit trickier, since you cannot open developer tools for them. On MacOSX, one way is to run Lens from the terminal.
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
Lens is lightweight and simple to install. You'll be up and running in just a few minutes.
|
||||
|
||||
|
||||
## System requirements
|
||||
## System Requirements
|
||||
|
||||
Review the [System Requirements](/supporting/requirements/) to check if your computer configuration is supported.
|
||||
|
||||
@ -41,7 +41,7 @@ You can install it by running:
|
||||
sudo snap install kontena-lens --classic
|
||||
```
|
||||
|
||||
## Update cadence
|
||||
## Update Cadence
|
||||
|
||||
Lens releases a new version each month with new features and important bug fixes. Lens supports auto updating and you will be prompted to install the new release when it becomes available!
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
# Preferences
|
||||
|
||||
|
||||
## Color themes
|
||||
## Color Themes
|
||||
|
||||
The Color Themes option in Lens preferences lets you set the colors in the Lens user interface to suit your liking.
|
||||
|
||||
@ -10,18 +10,18 @@ The Color Themes option in Lens preferences lets you set the colors in the Lens
|
||||
|
||||
|
||||
|
||||
## Telemetry & usage tracking
|
||||
## Telemetry & Usage Tracking
|
||||
|
||||
Lens collects telemetry data, which is used to help us understand how to improve the product. For example, this usage data helps us to debug issues and to prioritize new features. While we appreciate the insights this data provides, we also know that not everyone wants to send usage data. Please see our [privacy statement](https://www.mirantis.com/company/privacy-policy/) to learn more.
|
||||
|
||||
|
||||
### Disable telemetry reporting
|
||||
### Disable Telemetry Reporting
|
||||
|
||||
If you don't wish to send usage data to Mirantis, you can disable the "Telemetry & Usage Tracking" in the Lens preferences.
|
||||
|
||||
1. Go to **File** > **Preferences** (**Lens** > **Preferences** on Mac).
|
||||
2. Scroll down to **Telemetry & Usage Tracking**
|
||||
3. Uncheck **Allow telemetry & usage tracking**.
|
||||
3. Uncheck **Allow Telemetry & Usage Tracking**.
|
||||
|
||||
This will silence all telemetry events from Lens going forward. Telemetry information may have been collected and sent up until the point when you disable this setting.
|
||||
|
||||
|
||||
@ -17,10 +17,10 @@ Lens has been tested on the following platforms:
|
||||
* Windows
|
||||
* Linux
|
||||
|
||||
### Additional Windows requirements
|
||||
### Additional Windows Requirements
|
||||
|
||||
...
|
||||
|
||||
### Additional Linux requirements
|
||||
### Additional Linux Requirements
|
||||
|
||||
...
|
||||
|
||||
@ -11,15 +11,15 @@ nav:
|
||||
- Overview: README.md
|
||||
- Getting Started: getting-started/README.md
|
||||
- Managing Clusters:
|
||||
- Adding clusters: clusters/adding-clusters.md
|
||||
- Removing cluster: clusters/removing-clusters.md
|
||||
- Adding Clusters: clusters/adding-clusters.md
|
||||
- Removing Clusters: clusters/removing-clusters.md
|
||||
- Settings: clusters/settings.md
|
||||
- Using Helm Charts: helm/README.md
|
||||
- Using Extensions: extensions/usage/README.md
|
||||
- Preferences: getting-started/preferences.md
|
||||
- Extension Development:
|
||||
- Overview: extensions/README.md
|
||||
- Get Started:
|
||||
- Getting Started:
|
||||
- Your First Extension: extensions/get-started/your-first-extension.md
|
||||
- Extension Anatomy: extensions/get-started/anatomy.md
|
||||
- Wrapping Up: extensions/get-started/wrapping-up.md
|
||||
@ -27,7 +27,7 @@ nav:
|
||||
- Overview: extensions/capabilities/README.md
|
||||
- Common Capabilities: extensions/capabilities/common-capabilities.md
|
||||
- Styling: extensions/capabilities/styling.md
|
||||
- Color reference: extensions/capabilities/color-reference.md
|
||||
- Color Reference: extensions/capabilities/color-reference.md
|
||||
- Extension Guides:
|
||||
- Overview: extensions/guides/README.md
|
||||
- Renderer Extension: extensions/guides/renderer-extension.md
|
||||
|
||||
Loading…
Reference in New Issue
Block a user