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 && (
-            <div className="claim-tile__file-properties">
+            <React.Fragment>
-              <FileProperties uri={uri} small />
+              {/* @if TARGET='app' */}
-            </div>
+              <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,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 (
+    return hideOpenButton ? null : (
-      <ToolTip label={__('Open file')}>
+      <Button
-        <Button
+        button="alt"
-          button="alt"
+        title={__('Open file')}
-          icon={ICONS.EXTERNAL}
+        icon={ICONS.EXTERNAL}
-          onClick={() => {
+        onClick={() => {
-            pause();
+          pause();
-            openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { path: fileInfo.download_path, isMine: claimIsMine });
+          openModal(MODALS.CONFIRM_EXTERNAL_RESOURCE, { path: fileInfo.download_path, isMine: claimIsMine });
-          }}
+        }}
-        />
+      />
-      </ToolTip>
     );
   }
 
   return (
-    <ToolTip label={IS_WEB ? __('Download') : __('Add to your library')}>
+    <Button
-      <Button
+      button="alt"
-        button="alt"
+      title={IS_WEB ? __('Download') : __('Add to your library')}
-        icon={ICONS.DOWNLOAD}
+      icon={ICONS.DOWNLOAD}
-        onClick={handleDownload}
+      onClick={handleDownload}
-        // @if TARGET='web'
+      // @if TARGET='web'
-        download={fileName}
+      download={fileName}
-        href={downloadUrl}
+      href={downloadUrl}
-        // @endif
+      // @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);
+}