filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 21:45:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(ObjectPreview): update boxShadow and shape

Browse Source
This commit is contained in:
Aminejv 2021-08-05 13:36:31 +01:00
parent 005981e48d
commit 02f745ecc2
3 changed files with 14 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
common/constants.js
View File

@ -127,6 +127,7 @@ export const shadow = {
darkSmall: "0px 4px 16px 0 rgba(99, 101, 102, 0.1)",
darkMedium: "0px 8px 32px 0 rgba(99, 101, 102, 0.2)",
darkLarge: "0px 12px 64px 0 rgba(99, 101, 102, 0.3)",
card: "0px 0px 32px #E5E8EA;",
};
export const zindex = {
@ -204,8 +205,8 @@ export const grids = {
},
},
object: {
desktop: { width: 248, rowGap: 16 },
mobile: { width: 166, rowGap: 8 },
desktop: { width: 248, rowGap: 20 },
mobile: { width: 166, rowGap: 12 },
},
collection: {
desktop: { width: 432, rowGap: 16 },

4
components/core/ObjectPreview/ObjectPreviewPrimitive.js
View File

@ -13,7 +13,7 @@ const STYLES_WRAPPER = (theme) => css`
position: relative;
background-color: ${theme.semantic.bgLight};
transition: box-shadow 0.2s;
box-shadow: 0 0 0 0.5px ${theme.system.grayLight4}, ${theme.shadow.lightSmall};
box-shadow: 0 0 0 0.5px ${theme.system.grayLight4}, ${theme.shadow.card};
border-radius: 16px;
overflow: hidden;
cursor: pointer;
@ -118,7 +118,7 @@ export default function ObjectPreviewPrimitive({
</motion.div>
)}
</AnimatePresence> */}
<AspectRatio ratio={248 / 248}>
<AspectRatio ratio={192 / 248}>
<div>{children}</div>
</AspectRatio>
</div>

18
components/core/ObjectPreview/index.js
View File

@ -29,7 +29,7 @@ const ObjectPreview = ({ file, ...props }) => {
const url = Strings.getURLfromCID(file.cid);
if (link) {
return <LinkObjectPreview file={file} />;
return <LinkObjectPreview file={file} {...props} />;
}
if (Validations.isPreviewableImage(type)) {
@ -40,7 +40,7 @@ const ObjectPreview = ({ file, ...props }) => {
const tag = type.split("/")[1];
return (
<PlaceholderWrapper tag={tag} file={file} {...props}>
<VideoPlaceholder />
<VideoPlaceholder ratio={1.3} />
</PlaceholderWrapper>
);
}
@ -48,7 +48,7 @@ const ObjectPreview = ({ file, ...props }) => {
if (Validations.isPdfType(type)) {
return (
<PlaceholderWrapper tag="PDF" file={file} {...props}>
<PdfPlaceholder />
<PdfPlaceholder ratio={1.3} />
</PlaceholderWrapper>
);
}
@ -57,7 +57,7 @@ const ObjectPreview = ({ file, ...props }) => {
const tag = Utilities.getFileExtension(file.filename) || "audio";
return (
<PlaceholderWrapper tag={tag} file={file} {...props}>
<AudioPlaceholder />
<AudioPlaceholder ratio={1.3} />
</PlaceholderWrapper>
);
}
@ -65,7 +65,7 @@ const ObjectPreview = ({ file, ...props }) => {
if (type === "application/epub+zip") {
return (
<PlaceholderWrapper tag="epub" file={file} {...props}>
<EbookPlaceholder />
<EbookPlaceholder ratio={1.3} />
</PlaceholderWrapper>
);
}
@ -73,7 +73,7 @@ const ObjectPreview = ({ file, ...props }) => {
if (file.filename.endsWith(".key")) {
return (
<PlaceholderWrapper tag="keynote" file={file} {...props}>
<KeynotePlaceholder />
<KeynotePlaceholder ratio={1.3} />
</PlaceholderWrapper>
);
}
@ -82,7 +82,7 @@ const ObjectPreview = ({ file, ...props }) => {
const tag = Utilities.getFileExtension(file.filename) || "code";
return (
<PlaceholderWrapper tag={tag} file={file} {...props}>
<CodePlaceholder />
<CodePlaceholder ratio={1.3} />
</PlaceholderWrapper>
);
}
@ -98,14 +98,14 @@ const ObjectPreview = ({ file, ...props }) => {
if (Validations.is3dFile(file.filename)) {
return (
<PlaceholderWrapper tag="3d" file={file} {...props}>
<Object3DPlaceholder />
<Object3DPlaceholder ratio={1.3} />
</PlaceholderWrapper>
);
}
return (
<PlaceholderWrapper tag="file" file={file} {...props}>
<FilePlaceholder />
<FilePlaceholder ratio={1.3} />
</PlaceholderWrapper>
);
};