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

tweak install extension ux

Browse Source 
Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
This commit is contained in:
Jari Kolehmainen 2020-11-25 07:59:47 +02:00
parent 4c3a8e2c90
commit a6aa2bc477
2 changed files with 12 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/renderer/components/+extensions/extensions.scss
View File

@ -45,10 +45,8 @@
.SearchInput {
--spacing: #{$padding};
}
.SubTitle {
font-style: italic;
width: 100%;
max-width: none;
}
.WizardLayout {
@ -83,4 +81,4 @@
border: 1px solid currentColor;
box-shadow: none !important;
}
}
}

43
src/renderer/components/+extensions/extensions.tsx
View File

@ -14,7 +14,6 @@ import { DropFileInput, Input, InputValidators, SearchInput } from "../input";
import { Icon } from "../icon";
import { SubTitle } from "../layout/sub-title";
import { PageLayout } from "../layout/page-layout";
import { Clipboard } from "../clipboard";
import logger from "../../../main/logger";
import { extensionLoader } from "../../../extensions/extension-loader";
import { extensionDiscovery, manifestFilename } from "../../../extensions/extension-discovery";
@ -269,20 +268,15 @@ export class Extensions extends React.Component {
renderInfo() {
return (
<div className="extensions-info flex column gaps">
<h2>Lens Extension API</h2>
<h2>Lens Extensions</h2>
<div>
The Extensions API in Lens allows users to customize and enhance the Lens experience by creating their own menus or page content that is extended from the existing pages. Many of the core
features of Lens are built as extensions and use the same Extension API.
</div>
<div>
<SubTitle title="Extensions loaded from:"/>
<div className="extensions-path flex inline" onClick={() => shell.openPath(this.extensionsPath)}>
<Icon material="folder" tooltip={{ children: "Open folder", preferredPositions: "bottom" }}/>
<code>{this.extensionsPath}</code>
</div>
The features that Lens includes out-of-the-box are just the start.
Lens extensions let you add new features to your installation to support your workflow.
Rich extensibility model lets extension authors plug directly into the Lens UI and contribute functionality through the same APIs used by Lens itself.
Check out documentation to <a href={`${docsUrl}/latest/extensions/usage/`} target="_blank">learn more</a>.
</div>
<div className="install-extension flex column gaps">
<SubTitle title="Install extensions:"/>
<SubTitle title="Install extension:"/>
<Input
showErrorsAsTooltip={true}
className="box grow"
@ -296,28 +290,9 @@ export class Extensions extends React.Component {
/>
<Button
primary
label="Add extensions"
label="Install"
onClick={this.addExtensions}
/>
<p className="hint">
<Trans><b>Pro-Tip 1</b>: you can obtain package tarball from NPM via</Trans>{" "}
<Clipboard showNotification>
<code>npm view %package dist.tarball</code>
</Clipboard>
<span> or download package first with </span>
<Clipboard showNotification>
<code>npm pack %package</code>
</Clipboard>
</p>
<p className="hint">
<Trans><b>Pro-Tip 2</b>: you can drag & drop extension's tarball here to request installation</Trans>
</p>
</div>
<div className="more-info flex inline gaps align-center">
<Icon material="local_fire_department"/>
<p>
Check out documentation to <a href={docsUrl} target="_blank">learn more</a>
</p>
</div>
</div>
);
@ -363,7 +338,7 @@ export class Extensions extends React.Component {
<DropFileInput onDropFiles={this.installOnDrop}>
<WizardLayout infoPanel={this.renderInfo()}>
<SearchInput
placeholder={_i18n._(t`Search extensions`)}
placeholder={_i18n._(t`Search installed extensions`)}
value={this.search}
onChange={(value) => this.search = value}
/>
@ -375,4 +350,4 @@ export class Extensions extends React.Component {
</PageLayout>
);
}
}
}