changed links to use image instead of screenshot

filecoin-project · Aug 4, 2021 · 000e66c · 000e66c
1 parent d28d2bd
commit 000e66c
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 22 deletions.
diff --git a/common/messages.js b/common/messages.js
@@ -32,6 +32,13 @@ export const error = {
   SERVER_BUCKET_REMOVE_NO_MATCHING_CID: "There were no matching files found",
   SERVER_BUCKET_REMOVE_FAILED: "We were not able to delete that file",
 
+  //Link create
+  SERVER_CREATE_LINK_DUPLICATE: "You've already saved this link",
+  SERVER_CREATE_LINK_SLATE_NOT_FOUND: "We were unable to locate that collection",
+  SERVER_CREATE_LINK_NO_LINK_PROVIDED: "Please provide a link to save",
+  SERVER_CREATE_LINK_INVALID_LINK: "Link is invalid",
+  SERVER_CREATE_LINK_FAILED: "We ran into issues while saving that link. Please try again",
+
   //File create
   SERVER_CREATE_FILE_NO_FILE_PROVIDED:
     "We ran into issues while creating a file. No file was provided",

diff --git a/components/core/CarouselSidebar.js b/components/core/CarouselSidebar.js
@@ -581,6 +581,7 @@ class CarouselSidebar extends React.Component {
         <div key="sidebar-media-object-info" style={{ marginTop: 8 }}>
           {isLink && (
             <LinkTag
+              fillWidth={true}
               url={file.url}
               containerStyle={{
                 backgroundColor: Constants.system.grayDark4,
@@ -664,6 +665,7 @@ class CarouselSidebar extends React.Component {
         elements.push(
           <LinkTag
             url={file.url}
+            fillWidth={true}
             containerStyle={{
               backgroundColor: Constants.system.grayDark4,
               padding: "8px 16px",

diff --git a/components/core/DataMeterDetailed.js b/components/core/DataMeterDetailed.js
@@ -5,7 +5,7 @@ import * as Strings from "~/common/strings";
 import { css } from "@emotion/react";
 
 const STYLES_CONTAINER = css`
-  border-radius: 4px;
+  border-radius: 16px;
   box-shadow: 0 0 0 1px ${Constants.semantic.borderGrayLight} inset, ${Constants.shadow.lightSmall};
   padding: 32px;
   max-width: 100%;

diff --git a/components/core/Link/LinkCard.js b/components/core/Link/LinkCard.js
@@ -82,7 +82,7 @@ export default function LinkCard({ file }) {
           <div css={STYLES_BODY}>
             <System.P1>{body}</System.P1>
           </div>
-          <LinkTag url={url} style={{ color: Constants.semantic.textGray }} />
+          <LinkTag url={url} fillWidth={false} style={{ color: Constants.semantic.textGray }} />
         </div>
       </div>
     </a>
@@ -99,7 +99,7 @@ export default function LinkCard({ file }) {
         <System.H3 style={{ marginBottom: 16, color: Constants.semantic.textBlack }}>
           {name}
         </System.H3>
-        <LinkTag url={url} style={{ marginBottom: 16 }} />
+        <LinkTag fillWidth={false} url={url} style={{ marginBottom: 16 }} />
         <LoaderSpinner style={{ height: 24, width: 24 }} />
       </div>
     </div> */

diff --git a/components/core/Link/LinkLoading.js b/components/core/Link/LinkLoading.js
@@ -36,6 +36,7 @@ export default function LinkLoading({ file }) {
         </System.H3>
         <span style={{ marginBottom: 16 }}>
           <LinkTag
+            fillWidth={true}
             url={url}
             containerStyle={{
               backgroundColor: Constants.system.blue,

diff --git a/components/core/Link/LinkTag.js b/components/core/Link/LinkTag.js
@@ -24,10 +24,16 @@ const STYLES_COPY_PASTE = css`
   }
 `;
 
-const STYLES_TAG_BACKGROUND = css`
+const STYLES_CONTAINER = css`
   ${Styles.HORIZONTAL_CONTAINER_CENTERED}
 `;
 
+const STYLES_CONTAINER_FILL = css`
+  display: grid;
+  align-items: center;
+  grid-template-columns: 24px 1fr 24px;
+`;
+
 export default function LinkTag({ url, ...props }) {
   const _ref = useRef(null);
 
@@ -46,8 +52,9 @@ export default function LinkTag({ url, ...props }) {
   // }
   return (
     <a css={Styles.LINK} href={url} target="_blank">
+      <input ref={_ref} readOnly value={url} css={STYLES_COPY_INPUT} />
       <div
-        css={STYLES_TAG_BACKGROUND}
+        css={props.fillWidth ? STYLES_CONTAINER_FILL : STYLES_CONTAINER}
         style={{
           maxWidth: 480,
           ...props.containerStyle,
@@ -75,7 +82,6 @@ export default function LinkTag({ url, ...props }) {
             <SVG.CopyAndPaste style={{ display: "block", ...props.style }} height="16px" />
           </DynamicIcon>
         </div>
-        <input ref={_ref} readOnly value={url} css={STYLES_COPY_INPUT} />
       </div>
     </a>
   );

diff --git a/components/core/ObjectPreview/LinkObjectPreview.js b/components/core/ObjectPreview/LinkObjectPreview.js
@@ -1,8 +1,11 @@
 import * as React from "react";
 import * as Styles from "~/common/styles";
+import * as Constants from "~/common/constants";
+import * as Typography from "~/components/system/components/Typography";
 
 import { H5, P3 } from "~/components/system/components/Typography";
 import { css } from "@emotion/react";
+import { Logo } from "~/common/logo";
 
 import ObjectPreviewPrimitive from "~/components/core/ObjectPreview/ObjectPreviewPrimitive";
 
@@ -12,6 +15,16 @@ const STYLES_SOURCE_LOGO = css`
   border-radius: 4px;
 `;
 
+const STYLES_EMPTY_CONTAINER = css`
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+`;
+
 export default function LinkObjectPreview({ file }) {
   const {
     data: { link },
@@ -35,7 +48,14 @@ export default function LinkObjectPreview({ file }) {
 
   return (
     <ObjectPreviewPrimitive file={file} tag={tag}>
-      <img src={link.image} alt="link preview" css={Styles.IMAGE_FILL} />
+      {link.image ? (
+        <img src={link.image} alt="Link preview" css={Styles.IMAGE_FILL} />
+      ) : (
+        <div css={STYLES_EMPTY_CONTAINER}>
+          <Logo style={{ height: 24, marginBottom: 8, color: Constants.system.grayLight2 }} />
+          <Typography.P2 color="grayLight2">No image found</Typography.P2>
+        </div>
+      )}
     </ObjectPreviewPrimitive>
   );
 }
diff --git a/components/core/ObjectPreview/ObjectPreviewPrimitive.js b/components/core/ObjectPreview/ObjectPreviewPrimitive.js
@@ -85,10 +85,11 @@ export default function ObjectPreviewPrimitive({
   const showBody = () => setShowBody(true);
   const hideBody = () => setShowBody(false);
   const body = file?.data?.body;
+  const isLink = file.isLink;
 
   const title = file.data.name || file.filename;
 
-  if (file?.data?.coverImage && !isImage) {
+  if (file?.data?.coverImage && !isImage && !isLink) {
     return (
       <ImageObjectPreview
         file={file}

diff --git a/components/sidebars/ModalAddFileToBucket.js b/components/sidebars/ModalAddFileToBucket.js
@@ -245,7 +245,7 @@ export default class ModalAddFileToBucket extends React.Component {
       );
     } else {
       return (
-        <div css={Styles.VERTICAL_CONTAINER_CENTERED}>
+        <div css={Styles.VERTICAL_CONTAINER_CENTERED} style={{ width: "100%" }}>
           <input
             css={STYLES_FILE_HIDDEN}
             multiple
@@ -261,7 +261,7 @@ export default class ModalAddFileToBucket extends React.Component {
               backgroundColor: Constants.semantic.bgLight,
               boxShadow: this.state.urlError ? `0 0 0 1px ${Constants.system.red} inset` : "none",
             }}
-            containerStyle={{ maxWidth: 540 }}
+            containerStyle={{ maxWidth: 600 }}
             name="url"
             type="url"
             onChange={this._handleChange}

diff --git a/pages/api/data/create-link.js b/pages/api/data/create-link.js
@@ -78,15 +78,15 @@ export default async (req, res) => {
         author: data.author || "",
         source: data.publisher || "",
         body: data.description || "",
-        coverImage: data.screenshot
-          ? {
-              data: {
-                type: "image/png",
-                size: data.screenshot.size,
-                url: data.screenshot.url,
-              },
-            }
-          : null,
+        // coverImage: data.screenshot
+        //   ? {
+        //       data: {
+        //         type: "image/png",
+        //         size: data.screenshot.size,
+        //         url: data.screenshot.url,
+        //       },
+        //     }
+        //   : null,
         link: {
           name: data.title || "",
           author: data.author || "",
@@ -127,9 +127,9 @@ export default async (req, res) => {
     }
   }
 
-  for (let file of createdFiles) {
-    LinkUtilities.uploadScreenshot(file, user);
-  }
+  // for (let file of createdFiles) {
+  //   LinkUtilities.uploadScreenshot(file, user);
+  // }
 
   let added = createdFiles?.length || 0;