diff --git a/src/renderer/components/+extensions/extensions.scss b/src/renderer/components/+extensions/extensions.scss index f69470fc73..07571f9b7d 100644 --- a/src/renderer/components/+extensions/extensions.scss +++ b/src/renderer/components/+extensions/extensions.scss @@ -16,15 +16,15 @@ } .extensions-info { - .flex.gaps { + --flex-gap: #{$padding * 3}; + + > .flex.gaps { --flex-gap: #{$padding}; } + .install-extension { - code { - &:hover { - color: $textColorSecondary; - } - cursor: pointer; + .CopyToClick:hover code { + color: $textColorSecondary; } } } diff --git a/src/renderer/components/+extensions/extensions.tsx b/src/renderer/components/+extensions/extensions.tsx index d870245f6d..b8918078cd 100644 --- a/src/renderer/components/+extensions/extensions.tsx +++ b/src/renderer/components/+extensions/extensions.tsx @@ -115,17 +115,28 @@ export class Extensions extends React.Component { label="Select local extensions" onClick={this.selectLocalExtensionsDialog} /> - - Pro-Tip 1: you can download extension archive.tgz via npm by{" "} - npm pack %name - npm view %name dist.tarball{" "} - (click to copy) - - - Pro-Tip 2: you also can drop archive from file-system to this window to install - +

+ Pro-Tip 1: you can download extension archive.tgz via NPM: +

+ +

+ Pro-Tip 2: you also can drop archive from file-system to this window to request installation +

-
+

Check out documentation to learn more diff --git a/src/renderer/components/copy-to-click/copy-to-click.scss b/src/renderer/components/copy-to-click/copy-to-click.scss new file mode 100644 index 0000000000..af7a64d140 --- /dev/null +++ b/src/renderer/components/copy-to-click/copy-to-click.scss @@ -0,0 +1,3 @@ +.CopyToClick { + cursor: pointer; +} \ No newline at end of file diff --git a/src/renderer/components/copy-to-click/copy-to-click.tsx b/src/renderer/components/copy-to-click/copy-to-click.tsx index 53b86e4247..5ad4d7266b 100644 --- a/src/renderer/components/copy-to-click/copy-to-click.tsx +++ b/src/renderer/components/copy-to-click/copy-to-click.tsx @@ -1,19 +1,22 @@ +import "./copy-to-click.scss" import React from "react" import { findDOMNode } from "react-dom"; import { autobind } from "../../../common/utils"; import { Notifications } from "../notifications"; import { copyToClipboard } from "../../utils/copyToClipboard"; import logger from "../../../main/logger"; +import { cssNames } from "../../utils"; export interface CopyToClickProps { - resetSelection?: boolean - showNotification?: boolean + resetSelection?: boolean; + showNotification?: boolean; + selector?: string; // allows to copy partial content with css-selector from children-element getNotificationMessage?(copiedText: string): React.ReactNode; } export const defaultProps: Partial = { getNotificationMessage(copiedText: string) { - return

Copied to clipboard: {copiedText}

+ return

Copied to clipboard: {copiedText}

} } @@ -24,7 +27,7 @@ export class CopyToClick extends React.Component { return findDOMNode(this) as HTMLElement; } - get rootReactElem(): React.ReactElement> { + get rootReactElem(): React.ReactElement> { return React.Children.only(this.props.children) as React.ReactElement; } @@ -33,8 +36,9 @@ export class CopyToClick extends React.Component { if (!this.rootElem || !this.rootElem.contains(evt.target as any)) { return; } - const { showNotification, resetSelection, getNotificationMessage } = this.props; - const { copiedText, copied } = copyToClipboard(this.rootElem, { resetSelection }); + const { showNotification, resetSelection, getNotificationMessage, selector } = this.props; + const contentElem = selector ? this.rootElem.querySelector(selector) : this.rootElem; + const { copiedText, copied } = copyToClipboard(contentElem, { resetSelection }); if (copied && showNotification) { Notifications.ok(getNotificationMessage(copiedText)); } @@ -45,8 +49,9 @@ export class CopyToClick extends React.Component { render() { try { - const rootElem = this.rootReactElem; + let rootElem = this.rootReactElem; return React.cloneElement(rootElem, { + className: cssNames("CopyToClick", rootElem.props.className), onClick: this.onClick, }); } catch (err) {