From b2bf80f3cee59f7545f41e0f8f0ca88bcf682eda Mon Sep 17 00:00:00 2001 From: Kenneth Tubman V <tubofpower@gmail.com> Date: Tue, 4 Feb 2020 21:54:19 -0500 Subject: [PATCH] Added download icon to Claim Previews --- ui/component/claimPreview/view.jsx | 9 ++++++++- ui/component/fileDownloadLink/view.jsx | 4 +++- ui/scss/component/_claim-list.scss | 20 ++++++++++++++++++++ 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index 2a7ee681a..a59a86c4e 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -18,6 +18,7 @@ import useGetThumbnail from 'effects/use-get-thumbnail'; import ClaimPreviewTitle from 'component/claimPreviewTitle'; import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle'; import ClaimRepostAuthor from 'component/claimRepostAuthor'; +import FileDownloadLink from 'component/fileDownloadLink'; type Props = { uri: string, @@ -236,7 +237,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => { </UriIndicator> ) : ( <NavLink {...navLinkProps}> - <FileThumbnail thumbnail={thumbnailUrl} /> + <FileThumbnail thumbnail={thumbnailUrl}> + {/* @if TARGET='app' */} + <div className="claim-preview__hover-actions"> + <FileDownloadLink uri={uri} hideOpenButton hideDownloadStatus /> + </div> + {/* @endif */} + </FileThumbnail> </NavLink> )} diff --git a/ui/component/fileDownloadLink/view.jsx b/ui/component/fileDownloadLink/view.jsx index bc9005d7b..58136d19f 100644 --- a/ui/component/fileDownloadLink/view.jsx +++ b/ui/component/fileDownloadLink/view.jsx @@ -19,6 +19,7 @@ type Props = { triggerViewEvent: string => void, costInfo: ?{ cost: string }, hideOpenButton: boolean, + hideDownloadStatus: boolean, }; function FileDownloadLink(props: Props) { @@ -35,6 +36,7 @@ function FileDownloadLink(props: Props) { triggerViewEvent, costInfo, hideOpenButton = false, + hideDownloadStatus = false, } = props; const [viewEventSent, setViewEventSent] = useState(false); @@ -67,7 +69,7 @@ function FileDownloadLink(props: Props) { const label = fileInfo && fileInfo.written_bytes > 0 ? progress.toFixed(0) + __('% downloaded') : __('Connecting...'); - return <span className="download-text">{label}</span>; + return hideDownloadStatus ? null : <span className="download-text">{label}</span>; } if (fileInfo && fileInfo.download_path && fileInfo.completed) { diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index e96b72a73..9dbf234f1 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -93,6 +93,26 @@ margin-right: var(--spacing-medium); } + .claim-preview__hover-actions { + display: none; + position: absolute; + top: var(--spacing-miniscule); + right: var(--spacing-miniscule); + + & > * { + color: var(--color-black); + background-color: var(--color-white); + padding: var(--spacing-xsmall); + border-radius: var(--border-radius); + } + } + + &:hover { + .claim-preview__hover-actions { + display: block; + } + } + @media (max-width: $breakpoint-small) { font-size: 14px;