This commit is contained in:
Sean Yesmunt 2020-01-29 13:58:43 -05:00
parent 3f9953c41b
commit 10d12fb0e8
4 changed files with 62 additions and 41 deletions

View file

@ -63,8 +63,6 @@ function ClaimPreviewTile(props: Props) {
onClick: e => e.stopPropagation(),
};
const [isHovering, setHovering] = React.useState(false);
let isChannel;
let isValid = false;
if (uri) {
@ -91,14 +89,6 @@ function ClaimPreviewTile(props: Props) {
}
}
function handleOnMouseOver(e) {
setHovering(true);
}
function handleOnMouseOut(e) {
setHovering(false);
}
React.useEffect(() => {
if (isValid && !isResolvingUri && shouldFetch && uri) {
resolveUri(uri);
@ -158,15 +148,20 @@ function ClaimPreviewTile(props: Props) {
className={classnames('card claim-preview--tile', {
'claim-preview--channel': isChannel,
})}
onMouseOver={handleOnMouseOver}
onMouseOut={handleOnMouseOut}
>
<NavLink {...navLinkProps}>
<FileThumbnail thumbnail={thumbnailUrl}>
{!isChannel && (
<div className="claim-tile__file-properties">
<FileProperties uri={uri} small />
</div>
<React.Fragment>
{/* @if TARGET='app' */}
<div className="claim-tile__hover-actions">
<FileDownloadLink uri={uri} hideOpenButton />
</div>
{/* @endif */}
<div className="claim-tile__file-properties">
<FileProperties uri={uri} small />
</div>
</React.Fragment>
)}
</FileThumbnail>
</NavLink>

View file

@ -3,7 +3,6 @@ import * as ICONS from 'constants/icons';
import * as MODALS from 'constants/modal_types';
import React from 'react';
import Button from 'component/button';
import ToolTip from 'component/common/tooltip';
type Props = {
uri: string,
@ -18,6 +17,7 @@ type Props = {
download: string => void,
triggerViewEvent: string => void,
costInfo: ?{ cost: string },
hideOpenButton: boolean,
};
function FileDownloadLink(props: Props) {
@ -33,6 +33,7 @@ function FileDownloadLink(props: Props) {
claim,
triggerViewEvent,
costInfo,
hideOpenButton = false,
} = props;
const cost = costInfo ? Number(costInfo.cost) : 0;
const isPaidContent = cost > 0;
@ -40,7 +41,9 @@ function FileDownloadLink(props: Props) {
const fileName = value && value.source && value.source.name;
const downloadUrl = `/$/download/${name}/${claimId}`;
function handleDownload() {
function handleDownload(e) {
e.preventDefault();
// @if TARGET='app'
download(uri);
// @endif;
@ -58,36 +61,34 @@ function FileDownloadLink(props: Props) {
const label =
fileInfo && fileInfo.written_bytes > 0 ? progress.toFixed(0) + __('% downloaded') : __('Connecting...');
return <span>{label}</span>;
return <span className="download-text">{label}</span>;
}
if (fileInfo && fileInfo.download_path && fileInfo.completed) {
return (
<ToolTip label={__('Open file')}>
<Button
button="alt"
icon={ICONS.EXTERNAL}
onClick={() => {
pause();
openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { path: fileInfo.download_path, isMine: claimIsMine });
}}
/>
</ToolTip>
return hideOpenButton ? null : (
<Button
button="alt"
title={__('Open file')}
icon={ICONS.EXTERNAL}
onClick={() => {
pause();
openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { path: fileInfo.download_path, isMine: claimIsMine });
}}
/>
);
}
return (
<ToolTip label={IS_WEB ? __('Download') : __('Add to your library')}>
<Button
button="alt"
icon={ICONS.DOWNLOAD}
onClick={handleDownload}
// @if TARGET='web'
download={fileName}
href={downloadUrl}
// @endif
/>
</ToolTip>
<Button
button="alt"
title={IS_WEB ? __('Download') : __('Add to your library')}
icon={ICONS.DOWNLOAD}
onClick={handleDownload}
// @if TARGET='web'
download={fileName}
href={downloadUrl}
// @endif
/>
);
}

View file

@ -384,7 +384,6 @@
bottom: var(--spacing-miniscule);
right: var(--spacing-miniscule);
background-color: var(--color-black);
color: var(--color-white);
padding: 0.2rem;
border-radius: var(--border-radius);
@ -392,3 +391,25 @@
color: var(--color-white);
}
}
.claim-preview--tile {
.claim-tile__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-tile__hover-actions {
display: block;
}
}
}

View file

@ -247,3 +247,7 @@ a {
.emoji {
font-size: 1.3em;
}
.download-text {
font-size: var(--font-xsmall);
}