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

Add extension controls

Browse Source 
Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-02-09 08:30:21 +03:00
parent 0e012036d1
commit 80faf93c80
2 changed files with 106 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/renderer/components/+preferences/extension-card.module.scss
View File

@ -7,7 +7,7 @@
margin-bottom: 16px; margin-bottom: 16px;
border-radius: 4px; border-radius: 4px;
border: 1px solid #181a1f; border: 1px solid #181a1f;
background-color: #333842; background-color: #343840;
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
padding: 16px; padding: 16px;
@ -90,3 +90,50 @@
.installButtonIco { .installButtonIco {
margin-right: var(--margin); margin-right: var(--margin);
} }
.buttonGroup {
margin: 8px 0 0 8px;
display: flex;
}
@mixin stickedButton {
padding: 6px 8px;
color: var(--textColorTertiary);
background: #343840;
border: 1px solid #212121;
&:hover {
background-color: #3e434c;
color: rgb(230, 230, 230);
}
}
.leftButton {
@include stickedButton();
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 0;
}
.centerButton {
@include stickedButton();
border-radius: 0;
border-right: 0;
}
.rightButton {
@include stickedButton();
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-right: 14px;
&:after {
display: inline-block;
content: " ";
width: 4px;
background-color: #2ba143;
height: 100%;
position: absolute;
right: 0;
}
}

69
src/renderer/components/+preferences/extension-card.tsx
View File

@ -40,11 +40,15 @@ function NonInjectedExtensionCard({
extensionInstallationStateStore: store, extensionInstallationStateStore: store,
installFromInput, installFromInput,
onClick, onClick,
userExtensions, confirmUninstallExtension,
enableExtension,
disableExtension,
// userExtensions,
}: Props & Dependencies) { }: Props & Dependencies) {
const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl } = extension; const { name, version, totalNumberOfInstallations, shortDescription, publisher, githubRepositoryUrl, appIconUrl } = extension;
const installedExtension = userExtensions.get().find(installed => installed.manifest.name == name); // const installedExtension = userExtensions.get().find(installed => installed.manifest.name == name);
const [waiting, setWaiting] = useState(false); const [waiting, setWaiting] = useState(false);
const installed = true;
useEffect(() => { useEffect(() => {
if (!store.anyPreInstallingOrInstalling) { if (!store.anyPreInstallingOrInstalling) {
@ -58,6 +62,21 @@ function NonInjectedExtensionCard({
installFromInput(extension.binaryUrl); installFromInput(extension.binaryUrl);
} }
function onUninstall(evt: React.MouseEvent, extension: InstalledExtension) {
evt.stopPropagation();
confirmUninstallExtension(extension);
}
function onStatusToggle(evt: React.MouseEvent, extension: InstalledExtension) {
evt.stopPropagation();
if (extension.isEnabled) {
disableExtension(extension.id);
} else {
enableExtension(extension.id);
}
}
return ( return (
<div className={styles.extensionCard} onClick={onClick}> <div className={styles.extensionCard} onClick={onClick}>
<div className={styles.icon} style={{ backgroundImage: `url(${appIconUrl})` }}/> <div className={styles.icon} style={{ backgroundImage: `url(${appIconUrl})` }}/>
@ -82,15 +101,43 @@ function NonInjectedExtensionCard({
<a href={githubRepositoryUrl} rel="noreferrer" target="_blank">{publisher.username}</a> <a href={githubRepositoryUrl} rel="noreferrer" target="_blank">{publisher.username}</a>
</div> </div>
<div className={styles.install}> <div className={styles.install}>
<Button {installed ? (
primary <div className={styles.buttonGroup}>
waiting={waiting} <Button
disabled={store.anyPreInstallingOrInstalling} className={styles.leftButton}
onClick={onInstall} onClick={onClick}
> >
<Icon className={styles.installButtonIco} material="cloud_download"/> <Icon className="mr-4" material="settings"/>
Install Settings
</Button> </Button>
<Button
className={styles.centerButton}
onClick={onClick}
>
<Icon className="mr-4" material="delete"/>
Uninstall
</Button>
<Button
className={styles.rightButton}
onClick={onClick}
>
<Icon className="mr-4" material="pause"/>
Disable
</Button>
</div>
) : (
<div className={styles.buttonGroup}>
<Button
primary
waiting={waiting}
disabled={store.anyPreInstallingOrInstalling}
onClick={onInstall}
>
<Icon className={styles.installButtonIco} material="cloud_download"/>
Install
</Button>
</div>
)}
</div> </div>
</div> </div>
</div> </div>