cleanup

ui/component/claimPreviewTile/view.jsx

@@ -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 && (
+            <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>

ui/component/fileDownloadLink/view.jsx

@@ -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,28 +61,27 @@ 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 (
+    return hideOpenButton ? null : (
-      <ToolTip label={__('Open file')}>
       <Button
         button="alt"
+        title={__('Open file')}
         icon={ICONS.EXTERNAL}
         onClick={() => {
           pause();
           openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { path: fileInfo.download_path, isMine: claimIsMine });
         }}
       />
-      </ToolTip>
     );
   }
 
   return (
-    <ToolTip label={IS_WEB ? __('Download') : __('Add to your library')}>
     <Button
       button="alt"
+      title={IS_WEB ? __('Download') : __('Add to your library')}
       icon={ICONS.DOWNLOAD}
       onClick={handleDownload}
       // @if TARGET='web'
@@ -87,7 +89,6 @@ function FileDownloadLink(props: Props) {
       href={downloadUrl}
       // @endif
     />
-    </ToolTip>
   );
 }
 

ui/scss/component/_claim-list.scss

@@ -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;
+    }
+  }
+}

ui/scss/init/_gui.scss

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