Added download icon to Claim Previews
This commit is contained in:
parent
df136823a4
commit
b2bf80f3ce
3 changed files with 31 additions and 2 deletions
ui
|
@ -18,6 +18,7 @@ import useGetThumbnail from 'effects/use-get-thumbnail';
|
||||||
import ClaimPreviewTitle from 'component/claimPreviewTitle';
|
import ClaimPreviewTitle from 'component/claimPreviewTitle';
|
||||||
import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle';
|
import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle';
|
||||||
import ClaimRepostAuthor from 'component/claimRepostAuthor';
|
import ClaimRepostAuthor from 'component/claimRepostAuthor';
|
||||||
|
import FileDownloadLink from 'component/fileDownloadLink';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
uri: string,
|
uri: string,
|
||||||
|
@ -236,7 +237,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
|
||||||
</UriIndicator>
|
</UriIndicator>
|
||||||
) : (
|
) : (
|
||||||
<NavLink {...navLinkProps}>
|
<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>
|
</NavLink>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
|
@ -19,6 +19,7 @@ type Props = {
|
||||||
triggerViewEvent: string => void,
|
triggerViewEvent: string => void,
|
||||||
costInfo: ?{ cost: string },
|
costInfo: ?{ cost: string },
|
||||||
hideOpenButton: boolean,
|
hideOpenButton: boolean,
|
||||||
|
hideDownloadStatus: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
function FileDownloadLink(props: Props) {
|
function FileDownloadLink(props: Props) {
|
||||||
|
@ -35,6 +36,7 @@ function FileDownloadLink(props: Props) {
|
||||||
triggerViewEvent,
|
triggerViewEvent,
|
||||||
costInfo,
|
costInfo,
|
||||||
hideOpenButton = false,
|
hideOpenButton = false,
|
||||||
|
hideDownloadStatus = false,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const [viewEventSent, setViewEventSent] = useState(false);
|
const [viewEventSent, setViewEventSent] = useState(false);
|
||||||
|
@ -67,7 +69,7 @@ function FileDownloadLink(props: Props) {
|
||||||
const label =
|
const label =
|
||||||
fileInfo && fileInfo.written_bytes > 0 ? progress.toFixed(0) + __('% downloaded') : __('Connecting...');
|
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) {
|
if (fileInfo && fileInfo.download_path && fileInfo.completed) {
|
||||||
|
|
|
@ -93,6 +93,26 @@
|
||||||
margin-right: var(--spacing-medium);
|
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) {
|
@media (max-width: $breakpoint-small) {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue