cleanup
This commit is contained in:
parent
3f9953c41b
commit
10d12fb0e8
4 changed files with 62 additions and 41 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -247,3 +247,7 @@ a {
|
|||
.emoji {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.download-text {
|
||||
font-size: var(--font-xsmall);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue