mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
Deployed 532b10e3 to latest with MkDocs 1.1.2 and mike 0.5.5
This commit is contained in:
GitHub Action committed
1 parent
72a2a5b025
commit
5e7c739bd6
200 files changed
+3396
-3395
No files matched your search
@@ -535,91 +535,91 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#base-colors" class="md-nav__link">
|
||||
Base colors
|
||||
Base Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#text-colors" class="md-nav__link">
|
||||
Text colors
|
||||
Text Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#border-colors" class="md-nav__link">
|
||||
Border colors
|
||||
Border Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#layout-colors" class="md-nav__link">
|
||||
Layout colors
|
||||
Layout Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#sidebar-colors" class="md-nav__link">
|
||||
Sidebar colors
|
||||
Sidebar Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#button-colors" class="md-nav__link">
|
||||
Button colors
|
||||
Button Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#table-colors" class="md-nav__link">
|
||||
Table colors
|
||||
Table Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#dock-colors" class="md-nav__link">
|
||||
Dock colors
|
||||
Dock Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#helm-chart-colors" class="md-nav__link">
|
||||
Helm chart colors
|
||||
Helm Chart Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#terminal-colors" class="md-nav__link">
|
||||
Terminal colors
|
||||
Terminal Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#dialog-colors" class="md-nav__link">
|
||||
Dialog colors
|
||||
Dialog Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#detail-panel-drawer-colors" class="md-nav__link">
|
||||
Detail panel (Drawer) colors
|
||||
Detail Panel (Drawer) Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#misc-colors" class="md-nav__link">
|
||||
Misc colors
|
||||
Misc Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
@@ -881,91 +881,91 @@
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#base-colors" class="md-nav__link">
|
||||
Base colors
|
||||
Base Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#text-colors" class="md-nav__link">
|
||||
Text colors
|
||||
Text Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#border-colors" class="md-nav__link">
|
||||
Border colors
|
||||
Border Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#layout-colors" class="md-nav__link">
|
||||
Layout colors
|
||||
Layout Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#sidebar-colors" class="md-nav__link">
|
||||
Sidebar colors
|
||||
Sidebar Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#button-colors" class="md-nav__link">
|
||||
Button colors
|
||||
Button Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#table-colors" class="md-nav__link">
|
||||
Table colors
|
||||
Table Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#dock-colors" class="md-nav__link">
|
||||
Dock colors
|
||||
Dock Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#helm-chart-colors" class="md-nav__link">
|
||||
Helm chart colors
|
||||
Helm Chart Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#terminal-colors" class="md-nav__link">
|
||||
Terminal colors
|
||||
Terminal Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#dialog-colors" class="md-nav__link">
|
||||
Dialog colors
|
||||
Dialog Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#detail-panel-drawer-colors" class="md-nav__link">
|
||||
Detail panel (Drawer) colors
|
||||
Detail Panel (Drawer) Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
|
||||
<li class="md-nav__item">
|
||||
<a href="#misc-colors" class="md-nav__link">
|
||||
Misc colors
|
||||
Misc Colors
|
||||
</a>
|
||||
|
||||
</li>
|
||||
@@ -984,9 +984,9 @@
|
||||
|
||||
|
||||
|
||||
<h1 id="theme-color-reference">Theme color reference<a class="headerlink" href="#theme-color-reference" title="Permanent link">#</a></h1>
|
||||
<h1 id="theme-color-reference">Theme Color Reference<a class="headerlink" href="#theme-color-reference" title="Permanent link">#</a></h1>
|
||||
<p>You can use theme-based CSS Variables to style an extension according to the active theme.</p>
|
||||
<h2 id="base-colors">Base colors<a class="headerlink" href="#base-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="base-colors">Base Colors<a class="headerlink" href="#base-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--blue</code>: blue color.</li>
|
||||
<li><code>--magenta</code>: magenta color.</li>
|
||||
@@ -1003,18 +1003,18 @@
|
||||
<li><code>--colorTerminated</code>: terminated, closed, stale color.</li>
|
||||
<li><code>--boxShadow</code>: semi-transparent box-shadow color.</li>
|
||||
</ul>
|
||||
<h2 id="text-colors">Text colors<a class="headerlink" href="#text-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="text-colors">Text Colors<a class="headerlink" href="#text-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--textColorPrimary</code>: foreground text color.</li>
|
||||
<li><code>--textColorSecondary</code>: foreground text color for different paragraps, parts of text.</li>
|
||||
<li><code>--textColorAccent</code>: foreground text color to highlight its parts.</li>
|
||||
</ul>
|
||||
<h2 id="border-colors">Border colors<a class="headerlink" href="#border-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="border-colors">Border Colors<a class="headerlink" href="#border-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--borderColor</code>: border color.</li>
|
||||
<li><code>--borderFaintColor</code>: fainted (lighter or darker, which depends on the theme) border color.</li>
|
||||
</ul>
|
||||
<h2 id="layout-colors">Layout colors<a class="headerlink" href="#layout-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="layout-colors">Layout Colors<a class="headerlink" href="#layout-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--mainBackground</code>: main background color for the app.</li>
|
||||
<li><code>--contentColor</code>: background color for panels contains some data.</li>
|
||||
@@ -1023,21 +1023,21 @@
|
||||
<li><code>--layoutTabsActiveColor</code>: foreground color for general tabs.</li>
|
||||
<li><code>--layoutTabsLineColor</code>: background color for lines under general tabs.</li>
|
||||
</ul>
|
||||
<h2 id="sidebar-colors">Sidebar colors<a class="headerlink" href="#sidebar-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="sidebar-colors">Sidebar Colors<a class="headerlink" href="#sidebar-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--sidebarLogoBackground</code>: background color behind logo in sidebar.</li>
|
||||
<li><code>--sidebarActiveColor</code>: foreground color for active menu items in sidebar.</li>
|
||||
<li><code>--sidebarSubmenuActiveColor</code>: foreground color for active submenu items in sidebar.</li>
|
||||
<li><code>--sidebarBackground</code>: background color for sidebar.</li>
|
||||
</ul>
|
||||
<h2 id="button-colors">Button colors<a class="headerlink" href="#button-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="button-colors">Button Colors<a class="headerlink" href="#button-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--buttonPrimaryBackground</code>: button background color for primary actions.</li>
|
||||
<li><code>--buttonDefaultBackground</code>: default button background color.</li>
|
||||
<li><code>--buttonAccentBackground</code>: accent button background color.</li>
|
||||
<li><code>--buttonDisabledBackground</code>: disabled button background color.</li>
|
||||
</ul>
|
||||
<h2 id="table-colors">Table colors<a class="headerlink" href="#table-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="table-colors">Table Colors<a class="headerlink" href="#table-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--tableBgcStripe</code>: background color for odd rows in table.</li>
|
||||
<li><code>--tableBgcSelected</code>: background color for selected row in table.</li>
|
||||
@@ -1047,13 +1047,13 @@
|
||||
<li><code>--tableHeaderColor</code>: foreground color for table header.</li>
|
||||
<li><code>--tableSelectedRowColor</code>: foreground color for selected row in table.</li>
|
||||
</ul>
|
||||
<h2 id="dock-colors">Dock colors<a class="headerlink" href="#dock-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="dock-colors">Dock Colors<a class="headerlink" href="#dock-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--dockHeadBackground</code>: background color for dock's header.</li>
|
||||
<li><code>--dockInfoBackground</code>: background color for dock's info panel.</li>
|
||||
<li><code>--dockInfoBorderColor</code>: border color for dock's info panel.</li>
|
||||
</ul>
|
||||
<h2 id="helm-chart-colors">Helm chart colors<a class="headerlink" href="#helm-chart-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="helm-chart-colors">Helm Chart Colors<a class="headerlink" href="#helm-chart-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--helmLogoBackground</code>: background color for chart logo.</li>
|
||||
<li><code>--helmImgBackground</code>: background color for chart image.</li>
|
||||
@@ -1071,7 +1071,7 @@
|
||||
<li><code>--helmDescriptionPreBackground</code>: Helm chart description pre background color.</li>
|
||||
<li><code>--helmDescriptionPreColor</code>: Helm chart description pre foreground color.</li>
|
||||
</ul>
|
||||
<h2 id="terminal-colors">Terminal colors<a class="headerlink" href="#terminal-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="terminal-colors">Terminal Colors<a class="headerlink" href="#terminal-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--terminalBackground</code>: Terminal background color.</li>
|
||||
<li><code>--terminalForeground</code>: Terminal foreground color.</li>
|
||||
@@ -1095,19 +1095,19 @@
|
||||
<li><code>--terminalBrightCyan</code>: Terminal bright cyan color.</li>
|
||||
<li><code>--terminalBrightWhite</code>: Terminal bright white color.</li>
|
||||
</ul>
|
||||
<h2 id="dialog-colors">Dialog colors<a class="headerlink" href="#dialog-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="dialog-colors">Dialog Colors<a class="headerlink" href="#dialog-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--dialogHeaderBackground</code>: background color for dialog header.</li>
|
||||
<li><code>--dialogFooterBackground</code>: background color for dialog footer.</li>
|
||||
</ul>
|
||||
<h2 id="detail-panel-drawer-colors">Detail panel (Drawer) colors<a class="headerlink" href="#detail-panel-drawer-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="detail-panel-drawer-colors">Detail Panel (Drawer) Colors<a class="headerlink" href="#detail-panel-drawer-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--drawerTitleText</code>: drawer title foreground color.</li>
|
||||
<li><code>--drawerSubtitleBackground</code>: drawer subtitle foreground color.</li>
|
||||
<li><code>--drawerItemNameColor</code>: foreground color for item name in drawer.</li>
|
||||
<li><code>--drawerItemValueColor</code>: foreground color for item value in drawer.</li>
|
||||
</ul>
|
||||
<h2 id="misc-colors">Misc colors<a class="headerlink" href="#misc-colors" title="Permanent link">#</a></h2>
|
||||
<h2 id="misc-colors">Misc Colors<a class="headerlink" href="#misc-colors" title="Permanent link">#</a></h2>
|
||||
<ul>
|
||||
<li><code>--logsBackground</code>: background color for pod logs.</li>
|
||||
<li><code>--clusterMenuBackground</code>: background color for cluster menu.</li>
|
||||
|
||||
@@ -1023,11 +1023,11 @@
|
||||
|
||||
|
||||
<h1 id="common-capabilities">Common Capabilities<a class="headerlink" href="#common-capabilities" title="Permanent link">#</a></h1>
|
||||
<p>Common Capabilities are important building blocks for your extensions. Almost all extensions use some of these functionalities. Here is how you can take advantage of them.</p>
|
||||
<p>Here we will discuss common and important building blocks for your extensions, and explain how you can use them. Almost all extensions use some of these functionalities.</p>
|
||||
<h2 id="main-extension">Main Extension<a class="headerlink" href="#main-extension" title="Permanent link">#</a></h2>
|
||||
<p>A main extension runs in the background and, apart from app menu items, does not add content to the Lens UI. If you want to see logs from this extension you need to start Lens from the command line.</p>
|
||||
<p>The main extension runs in the background. It adds app menu items to the Lens UI. In order to see logs from this extension, you need to start Lens from the command line.</p>
|
||||
<h3 id="activate">Activate<a class="headerlink" href="#activate" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register a custom callback that is executed when an extension is activated (started).</p>
|
||||
<p>This extension can register a custom callback that is executed when an extension is activated (started).</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensMainExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
|
||||
<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleMainExtension</span> <span class="kr">extends</span> <span class="nx">LensMainExtension</span> <span class="p">{</span>
|
||||
@@ -1037,7 +1037,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="deactivate">Deactivate<a class="headerlink" href="#deactivate" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register a custom callback that is executed when an extension is deactivated (stopped).</p>
|
||||
<p>This extension can register a custom callback that is executed when an extension is deactivated (stopped).</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensMainExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
|
||||
<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleMainExtension</span> <span class="kr">extends</span> <span class="nx">LensMainExtension</span> <span class="p">{</span>
|
||||
@@ -1047,7 +1047,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="app-menus">App Menus<a class="headerlink" href="#app-menus" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register custom App menus that will be displayed on OS native menus.</p>
|
||||
<p>This extension can register custom app menus that will be displayed on OS native menus.</p>
|
||||
<p>Example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensMainExtension</span><span class="p">,</span> <span class="nx">windowManager</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
|
||||
@@ -1064,9 +1064,9 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="renderer-extension">Renderer Extension<a class="headerlink" href="#renderer-extension" title="Permanent link">#</a></h2>
|
||||
<p>A renderer extension runs in a browser context and it's visible directly via Lens main window. If you want to see logs from this extension you need to check them via View -> Toggle Developer Tools -> Console.</p>
|
||||
<p>The renderer extension runs in a browser context, and is visible in Lens's main window. In order to see logs from this extension you need to check them via <strong>View</strong> > <strong>Toggle Developer Tools</strong> > <strong>Console</strong>.</p>
|
||||
<h3 id="activate_1">Activate<a class="headerlink" href="#activate_1" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register a custom callback that is executed when an extension is activated (started).</p>
|
||||
<p>This extension can register a custom callback that is executed when an extension is activated (started).</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
|
||||
<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
|
||||
@@ -1076,7 +1076,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="deactivate_1">Deactivate<a class="headerlink" href="#deactivate_1" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register a custom callback that is executed when an extension is deactivated (stopped).</p>
|
||||
<p>This extension can register a custom callback that is executed when an extension is deactivated (stopped).</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
|
||||
<span class="kr">export</span> <span class="k">default</span> <span class="kr">class</span> <span class="nx">ExampleMainExtension</span> <span class="kr">extends</span> <span class="nx">LensRendererExtension</span> <span class="p">{</span>
|
||||
@@ -1086,7 +1086,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="global-pages">Global Pages<a class="headerlink" href="#global-pages" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register custom global pages (views) to Lens main window. Global page is a full screen page that hides all the other content from a window.</p>
|
||||
<p>This extension can register custom global pages (views) to Lens's main window. The global page is a full-screen page that hides all other content from a window.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">"react"</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"./src/example-page"</span>
|
||||
@@ -1114,7 +1114,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="app-preferences">App Preferences<a class="headerlink" href="#app-preferences" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register custom app preferences. An extension is responsible for storing a state for custom preferences.</p>
|
||||
<p>This extension can register custom app preferences. It is responsible for storing a state for custom preferences.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">"react"</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">myCustomPreferencesStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"./src/my-custom-preferences-store"</span>
|
||||
@@ -1134,7 +1134,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="cluster-pages">Cluster Pages<a class="headerlink" href="#cluster-pages" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register custom cluster pages which are visible in a cluster menu when a cluster is opened.</p>
|
||||
<p>This extension can register custom cluster pages. These pages are visible in a cluster menu when a cluster is opened.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">"react"</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">ExampleIcon</span><span class="p">,</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"./src/page"</span>
|
||||
@@ -1162,7 +1162,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="cluster-features">Cluster Features<a class="headerlink" href="#cluster-features" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register installable features for a cluster. A cluster feature is visible in "Cluster Settings" page.</p>
|
||||
<p>This extension can register installable features for a cluster. These features are visible in the "Cluster Settings" page.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">"react"</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">MyCustomFeature</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"./src/my-custom-feature"</span>
|
||||
@@ -1186,7 +1186,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="status-bar-items">Status Bar Items<a class="headerlink" href="#status-bar-items" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register custom icons/texts to a status bar area.</p>
|
||||
<p>This extension can register custom icons and text to a status bar area.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">"react"</span><span class="p">;</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">Component</span><span class="p">,</span> <span class="nx">LensRendererExtension</span><span class="p">,</span> <span class="nx">Navigation</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
|
||||
@@ -1203,7 +1203,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="kubernetes-object-menu-items">Kubernetes Object Menu Items<a class="headerlink" href="#kubernetes-object-menu-items" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register custom menu items (actions) for specified Kubernetes kinds/apiVersions.</p>
|
||||
<p>This extension can register custom menu items (actions) for specified Kubernetes kinds/apiVersions.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">"react"</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">CustomMenuItem</span><span class="p">,</span> <span class="nx">CustomMenuItemProps</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"./src/custom-menu-item"</span>
|
||||
@@ -1221,7 +1221,7 @@
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h3 id="kubernetes-object-details">Kubernetes Object Details<a class="headerlink" href="#kubernetes-object-details" title="Permanent link">#</a></h3>
|
||||
<p>An extension can register custom details (content) for specified Kubernetes kinds/apiVersions.</p>
|
||||
<p>This extension can register custom details (content) for specified Kubernetes kinds/apiVersions.</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">"react"</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"@k8slens/extensions"</span><span class="p">;</span>
|
||||
<span class="kr">import</span> <span class="p">{</span> <span class="nx">CustomKindDetails</span><span class="p">,</span> <span class="nx">CustomKindDetailsProps</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">"./src/custom-kind-details"</span>
|
||||
|
||||
@@ -927,38 +927,37 @@
|
||||
<h1 id="styling-an-extension">Styling an Extension<a class="headerlink" href="#styling-an-extension" title="Permanent link">#</a></h1>
|
||||
<p>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.</p>
|
||||
<h2 id="layout">Layout<a class="headerlink" href="#layout" title="Permanent link">#</a></h2>
|
||||
<p>For layout tasks Lens is using <a href="https://www.npmjs.com/package/flex.box">flex.box</a> library which provides helpful class names to specify some of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a> properties. For example, <code>div</code> with class names:</p>
|
||||
<p>For layout tasks, Lens uses the <a href="https://www.npmjs.com/package/flex.box">flex.box</a> library which provides helpful class names to specify some of the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">flexbox</a> properties. For example, consider the following HTML and its associated CSS properties:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p"><</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">"flex column align-center"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
|
||||
</code></pre></div>
|
||||
<p>at the end will have following css properties:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">div</span> <span class="p">{</span>
|
||||
<span class="k">display</span><span class="p">:</span> <span class="kc">flex</span><span class="p">;</span>
|
||||
<span class="k">flex-direction</span><span class="p">:</span> <span class="kc">column</span><span class="p">;</span>
|
||||
<span class="k">align-items</span><span class="p">:</span> <span class="kc">center</span><span class="p">;</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>However, feel free to use any styling technique or framework like <a href="https://github.com/emotion-js/emotion">Emotion</a> or just plain CSS if you prefer.</p>
|
||||
<p>However, you are free to use any styling technique or framework you like, including <a href="https://github.com/emotion-js/emotion">Emotion</a> or even plain CSS.</p>
|
||||
<h3 id="layout-variables">Layout Variables<a class="headerlink" href="#layout-variables" title="Permanent link">#</a></h3>
|
||||
<p>There is a set of CSS Variables available for extensions to use for basic layout needs. They are located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<p>There is a set of CSS variables available for for basic layout needs. They are located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--unit</span><span class="o">:</span> <span class="nt">8px</span><span class="o">;</span>
|
||||
<span class="nt">--padding</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span>
|
||||
<span class="nt">--margin</span><span class="o">:</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">);</span>
|
||||
<span class="nt">--border-radius</span><span class="o">:</span> <span class="nt">3px</span><span class="o">;</span>
|
||||
</code></pre></div>
|
||||
<p>They are intended to set consistent margins and paddings across components, e.g.</p>
|
||||
<p>These variables are intended to set consistent margins and paddings across components. For example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">.</span><span class="nc">status</span> <span class="p">{</span>
|
||||
<span class="k">padding-left</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">padding</span><span class="p">)</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span>
|
||||
<span class="k">border-radius</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">border</span><span class="o">-</span><span class="n">radius</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<h2 id="themes">Themes<a class="headerlink" href="#themes" title="Permanent link">#</a></h2>
|
||||
<p>Lens is using two built-in themes defined in <a href="https://github.com/lensapp/lens/tree/master/src/renderer/themes">the themes directory</a>, one for light, and one for dark color schemes.</p>
|
||||
<p>Lens uses two built-in themes defined in <a href="https://github.com/lensapp/lens/tree/master/src/renderer/themes">the themes directory</a> – one light and one dark.</p>
|
||||
<h3 id="theme-variables">Theme Variables<a class="headerlink" href="#theme-variables" title="Permanent link">#</a></h3>
|
||||
<p>When Lens is loaded, it transforms the selected theme <code>json</code> file into a list of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS Custom Properties (CSS Variables)</a> which then gets injected into the <code>:root</code> element so any of the down-level components can use them.
|
||||
<p>When Lens is loaded, it transforms the selected theme's <code>json</code> file into a list of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties">CSS Custom Properties (CSS Variables)</a>. This list then gets injected into the <code>:root</code> element so that any of the down-level components can use them.
|
||||
<img alt="CSS vars listed in devtools" src="../images/css-vars-in-devtools.png" /></p>
|
||||
<p>When the user changes the theme, the process is repeated, and new CSS Variables appear instead of previous ones.</p>
|
||||
<p>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 <code>Button</code>, <code>Select</code>, <code>Table</code>, etc.</p>
|
||||
<p>There is a set of CSS Variables available for extensions to use for theming. They are all located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<p>When the user changes the theme, the above process is repeated, and new CSS variables appear, replacing the previous ones.</p>
|
||||
<p>If you want to preserve Lens's native look and feel, with respect to the lightness or darkness of your extension, you can use the provided variables and built-in Lens components such as <code>Button</code>, <code>Select</code>, <code>Table</code>, and so on.</p>
|
||||
<p>There is a set of CSS variables available for extensions to use for theming. They are all located inside <code>:root</code> and are defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="nt">--font-main</span><span class="o">:</span> <span class="s1">'Roboto'</span><span class="o">,</span> <span class="s1">'Helvetica'</span><span class="o">,</span> <span class="s1">'Arial'</span><span class="o">,</span> <span class="nt">sans-serif</span><span class="o">;</span>
|
||||
<span class="nt">--font-monospace</span><span class="o">:</span> <span class="nt">Lucida</span> <span class="nt">Console</span><span class="o">,</span> <span class="nt">Monaco</span><span class="o">,</span> <span class="nt">Consolas</span><span class="o">,</span> <span class="nt">monospace</span><span class="o">;</span>
|
||||
<span class="nt">--font-size-small</span><span class="o">:</span> <span class="nt">calc</span><span class="o">(</span><span class="nt">1</span><span class="p">.</span><span class="nc">5</span> <span class="o">*</span> <span class="nt">var</span><span class="o">(</span><span class="nt">--unit</span><span class="o">));</span>
|
||||
@@ -987,17 +986,17 @@
|
||||
--layoutTabsLineColor: #87909c80;
|
||||
...
|
||||
</code></pre></div>
|
||||
<p>They can be used in form of <code>var(--magenta)</code>, e.g.</p>
|
||||
<p>These variables can be used in the following form: <code>var(--magenta)</code>. For example:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">.</span><span class="nc">status</span> <span class="p">{</span>
|
||||
<span class="k">font-size</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">font</span><span class="o">-</span><span class="n">size</span><span class="o">-</span><span class="kc">small</span><span class="p">);</span>
|
||||
<span class="k">background-color</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">colorSuccess</span><span class="p">);</span>
|
||||
<span class="p">}</span>
|
||||
</code></pre></div>
|
||||
<p>A complete list of all themable colors can be found in the <a href="../color-reference">color reference</a>.</p>
|
||||
<p>A complete list of themable colors can be found in the <a href="../color-reference">Color Reference</a>.</p>
|
||||
<h3 id="theme-switching">Theme Switching<a class="headerlink" href="#theme-switching" title="Permanent link">#</a></h3>
|
||||
<p>When the light theme is active, the <code><body></code> element gets a "theme-light" class, <code><body class="theme-light"></code>. If the class isn't there, assume the theme is dark. The active theme can be changed in the <code>Preferences</code> page:
|
||||
<p>When the light theme is active, the <code><body></code> element gets a "theme-light" class, or: <code><body class="theme-light"></code>. If the class isn't there, the theme defaults to dark. The active theme can be changed in the <strong>Preferences</strong> page:
|
||||
<img alt="Color Theme" src="../images/theme-selector.png" /></p>
|
||||
<p>Currently, there is no prescribed way of detecting changes to the theme in JavaScript. <a href="https://github.com/lensapp/lens/issues/1336">This issue</a> hopes to improve on this. In the meantime, you can use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver">MutationObserver</a> to observe the <code><body></code> element's <code>class</code> attribute to see if the "theme-light" class gets added to it:</p>
|
||||
<p>Currently, there is no prescribed way of detecting changes to the theme in JavaScript. <a href="https://github.com/lensapp/lens/issues/1336">This issue</a> has been raised to resolve this problem. In the meantime, you can use a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver">MutationObserver</a> in order to observe the <code><body></code> element's <code>class</code> attribute in order to see if the "theme-light" class gets added to it:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="p">...</span>
|
||||
<span class="nx">useEffect</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
|
||||
<span class="kr">const</span> <span class="nx">observer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MutationObserver</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">mutations</span><span class="o">:</span> <span class="nx">MutationRecord</span><span class="p">[])</span> <span class="p">{</span>
|
||||
@@ -1024,8 +1023,8 @@
|
||||
<span class="p">...</span>
|
||||
</code></pre></div>
|
||||
<h2 id="injected-styles">Injected Styles<a class="headerlink" href="#injected-styles" title="Permanent link">#</a></h2>
|
||||
<p>Every extension is affected by list of default global styles defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>. These are basic browser resets and element styles like setting the <code>box-sizing</code> property for every element, default text and background colors, default font sizes, basic heading formatting, etc.</p>
|
||||
<p>Extension may overwrite these if needed. They have low CSS specificity, so overriding them should be fairly easy.</p>
|
||||
<p>Every extension is affected by the list of default global styles defined in <a href="https://github.com/lensapp/lens/blob/master/src/renderer/components/app.scss">app.scss</a>. These are basic browser resets and element styles, including setting the <code>box-sizing</code> property for every element, default text and background colors, default font sizes, basic heading formatting, and so on.</p>
|
||||
<p>Extensions may overwrite these defaults if needed. They have low CSS specificity, so overriding them should be fairly easy.</p>
|
||||
<h2 id="css-in-js">CSS-in-JS<a class="headerlink" href="#css-in-js" title="Permanent link">#</a></h2>
|
||||
<p>If an extension uses a system like <code>Emotion</code> to work with styles, it can use CSS variables as follows:</p>
|
||||
<div class="highlight"><pre><span></span><code><span class="kr">const</span> <span class="nx">Container</span> <span class="o">=</span> <span class="nx">styled</span><span class="p">.</span><span class="nx">div</span><span class="p">(()</span> <span class="p">=></span> <span class="p">({</span>
|
||||
|
||||
Reference in new issue
Block a user