diff --git a/src/renderer/components/+preferences/extension-card.module.scss b/src/renderer/components/+preferences/extension-card.module.scss index 8bb92db3b7..022672080c 100644 --- a/src/renderer/components/+preferences/extension-card.module.scss +++ b/src/renderer/components/+preferences/extension-card.module.scss @@ -7,7 +7,7 @@ margin-bottom: 16px; border-radius: 4px; border: 1px solid #181a1f; - background-color: #333842; + background-color: #343840; overflow: hidden; cursor: pointer; padding: 16px; @@ -89,4 +89,51 @@ .installButtonIco { 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; + } } \ No newline at end of file diff --git a/src/renderer/components/+preferences/extension-card.tsx b/src/renderer/components/+preferences/extension-card.tsx index 690dc36987..c9208eb812 100644 --- a/src/renderer/components/+preferences/extension-card.tsx +++ b/src/renderer/components/+preferences/extension-card.tsx @@ -40,11 +40,15 @@ function NonInjectedExtensionCard({ extensionInstallationStateStore: store, installFromInput, onClick, - userExtensions, + confirmUninstallExtension, + enableExtension, + disableExtension, + // userExtensions, }: Props & Dependencies) { 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 installed = true; useEffect(() => { if (!store.anyPreInstallingOrInstalling) { @@ -58,6 +62,21 @@ function NonInjectedExtensionCard({ 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 (
@@ -82,15 +101,43 @@ function NonInjectedExtensionCard({ {publisher.username}
- + {installed ? ( +
+ + + +
+ ) : ( +
+ +
+ )}