hendrik/lens
1
0 Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Deployed e560baa2d to master with MkDocs 1.1.2 and mike 1.0.0

Browse Source
This commit is contained in:
GitHub Action committed 2021-04-19 15:53:35 +00:00
1 parent 9d9348a4ff
commit 8dd3c37633
266 files changed
+7875 -4052
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

master/extensions/capabilities/color-reference/index.html
+12
View File
@@ -729,6 +729,18 @@
</li>
<li class="md-nav__item">
<a href="../../guides/protocol-handlers/" class="md-nav__link">
Protocol Handlers
</a>
</li>
</ul>
</nav>
</li>
master/extensions/capabilities/common-capabilities/index.html
+27 -7
View File
@@ -748,6 +748,18 @@
</li>
<li class="md-nav__item">
<a href="../../guides/protocol-handlers/" class="md-nav__link">
Protocol Handlers
</a>
</li>
</ul>
</nav>
</li>
@@ -1083,9 +1095,12 @@
<h1 id="common-capabilities">Common Capabilities<a class="headerlink" href="#common-capabilities" title="Permanent link">#</a></h1>
<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>
<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>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>
<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>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="k">import</span> <span class="p">{</span> <span class="nx">LensMainExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
@@ -1124,7 +1139,8 @@
<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>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> &gt; <strong>Toggle Developer Tools</strong> &gt; <strong>Console</strong>.</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> &gt; <strong>Toggle Developer Tools</strong> &gt; <strong>Console</strong>.</p>
<h3 id="activate_1">Activate<a class="headerlink" href="#activate_1" title="Permanent link">#</a></h3>
<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="k">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
@@ -1146,7 +1162,8 @@
<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>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>
<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="k">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
<span class="k">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">&quot;@k8slens/extensions&quot;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">ExamplePage</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/example-page&quot;</span>
@@ -1173,7 +1190,8 @@
<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>This extension can register custom app preferences. It 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="k">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">myCustomPreferencesStore</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/my-custom-preferences-store&quot;</span>
@@ -1193,7 +1211,8 @@
<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>This extension can register custom cluster pages. These pages 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="k">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span><span class="p">;</span>
<span class="k">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">&quot;./src/page&quot;</span>
@@ -1221,7 +1240,8 @@
<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>This extension can register installable features for a cluster. These features are visible in the "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="k">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">LensRendererExtension</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;@k8slens/extensions&quot;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">MyCustomFeature</span> <span class="p">}</span> <span class="nx">from</span> <span class="s2">&quot;./src/my-custom-feature&quot;</span>
master/extensions/capabilities/index.html
+12
View File
@@ -598,6 +598,18 @@
</li>
<li class="md-nav__item">
<a href="../guides/protocol-handlers/" class="md-nav__link">
Protocol Handlers
</a>
</li>
</ul>
</nav>
</li>
master/extensions/capabilities/styling/index.html
+27 -8
View File
@@ -706,6 +706,18 @@
</li>
<li class="md-nav__item">
<a href="../../guides/protocol-handlers/" class="md-nav__link">
Protocol Handlers
</a>
</li>
</ul>
</nav>
</li>
@@ -1001,7 +1013,8 @@
<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 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>
<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">&lt;</span><span class="nt">div</span> <span class="na">className</span><span class="o">=</span><span class="s">&quot;flex column align-center&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
</code></pre></div>
<div class="highlight"><pre><span></span><code><span class="nt">div</span> <span class="p">{</span>
@@ -1012,13 +1025,15 @@
</code></pre></div>
<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 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>These variables are intended to set consistent margins and paddings across components. For example:</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="nv">--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="nv">--border-radius</span><span class="p">);</span>
@@ -1027,11 +1042,13 @@
<h2 id="themes">Themes<a class="headerlink" href="#themes" title="Permanent link">#</a></h2>
<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'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.
<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 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>
<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">&#39;Roboto&#39;</span><span class="o">,</span> <span class="s1">&#39;Helvetica&#39;</span><span class="o">,</span> <span class="s1">&#39;Arial&#39;</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>
@@ -1060,15 +1077,17 @@
--layoutTabsLineColor: #87909c80;
...
</code></pre></div>
<p>These variables can be used in the following form: <code>var(--magenta)</code>. For example:</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="nv">--font-size-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="nv">--colorSuccess</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div>
<p>A complete list of themable colors can be found in the <a href="../color-reference">Color Reference</a>.</p>
<p>A complete list of theme 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>&lt;body&gt;</code> element gets a "theme-light" class, or: <code>&lt;body class="theme-light"&gt;</code>. If the class isn't there, the theme defaults to dark. The active theme can be changed in the <strong>Preferences</strong> page:
<p>When the light theme is active, the <code>&lt;body&gt;</code> element gets a "theme-light" class, or: <code>&lt;body class="theme-light"&gt;</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>There is a way of detect active theme and its changes in JS. <a href="https://github.com/mobxjs/mobx-react#observercomponent">MobX observer function/decorator</a> can be used for this purpose.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span> <span class="nx">React</span> <span class="nx">from</span> <span class="s2">&quot;react&quot;</span>