diff --git a/common/styles.js b/common/styles.js index 3c02e361..3d1a55a6 100644 --- a/common/styles.js +++ b/common/styles.js @@ -18,6 +18,7 @@ export const LINK = css` const TEXT = css` box-sizing: border-box; overflow-wrap: break-word; + text-align: left; a { ${LINK} diff --git a/components/core/CollectionPreviewBlock/index.js b/components/core/CollectionPreviewBlock/index.js index 3470d87c..009df195 100644 --- a/components/core/CollectionPreviewBlock/index.js +++ b/components/core/CollectionPreviewBlock/index.js @@ -14,7 +14,7 @@ import { css } from "@emotion/react"; import { FollowButton } from "~/components/core/CollectionPreviewBlock/components"; import { useFollowHandler } from "~/components/core/CollectionPreviewBlock/hooks"; import { Link } from "~/components/core/Link"; -import { AnimatePresence, motion } from "framer-motion"; +import { motion } from "framer-motion"; import ObjectPlaceholder from "~/components/core/ObjectPreview/placeholders"; @@ -46,9 +46,11 @@ const STYLES_PREVIEW = css` `; const STYLES_DESCRIPTION_CONTAINER = (theme) => css` + background-color: ${theme.semantic.bgLight}; + position: absolute; + bottom: 0%; display: flex; flex-direction: column; - position: relative; padding: 9px 16px 12px; border-radius: 0px 0px 16px 16px; box-shadow: 0 -0.5px 0.5px ${theme.system.grayLight4}; @@ -68,11 +70,8 @@ const STYLES_PROFILE_IMAGE = (theme) => css` object-fit: cover; `; -const STYLES_METRICS = (theme) => css` - margin-top: 7px; - @media (max-width: ${theme.sizes.mobile}px) { - margin-top: 12px; - } +const STYLES_METRICS = css` + margin-top: auto; ${Styles.CONTAINER_CENTERED}; ${STYLES_SPACE_BETWEEN} `; @@ -129,11 +128,6 @@ const getObjectToPreview = (objects = []) => { return { ...objects[objectIdx], isImage }; }; -const STYLES_DESCRIPTION_INNER = (theme) => css` - background-color: ${theme.semantic.bgLight}; - border-radius: 16px; -`; - const Preview = ({ collection, children, ...props }) => { const [isLoading, setLoading] = React.useState(true); const handleOnLoaded = () => setLoading(false); @@ -199,10 +193,8 @@ export default function CollectionPreview({ collection, viewer, owner, onAction const showControls = () => setShowControls(true); const hideControls = () => setShowControls(false); - // const [isBodyVisible, setShowBody] = React.useState(false); - // const showBody = () => setShowBody(true); - // const hideBody = () => setShowBody(false); - // const body = collection?.data?.body; + const { isDescriptionVisible, showDescription, hideDescription } = useShowDescription(); + const description = collection?.data?.body; const { follow, followCount, isFollowed } = useFollowHandler({ collection, viewer }); @@ -211,89 +203,112 @@ export default function CollectionPreview({ collection, viewer, owner, onAction return (
- - {areControlsVisible && ( - - - - )} - + + + -
-
+
- + {collection.slatename}
- - {/* {isBodyVisible && ( -
+ - - {body || ""} - + {description || ""} + + +
+
+ + + {fileCount} +
- )} */} -
- -
-
- - - {fileCount} - + {owner && ( +
+ + {`${owner.username} (e.target.src = Constants.profileDefaultPicture)} + /> + + + + {owner.username} + + +
+ )}
- {owner && ( -
- - {`${owner.username} (e.target.src = Constants.profileDefaultPicture)} - /> - - - - {owner.username} - - -
- )} -
+
); } + +const useShowDescription = () => { + const [isDescriptionVisible, setShowDescription] = React.useState(false); + const timeoutId = React.useRef(); + + const showDescription = () => { + clearTimeout(timeoutId.current); + const id = setTimeout(() => setShowDescription(true), 250); + timeoutId.current = id; + }; + const hideDescription = () => { + clearTimeout(timeoutId.current); + setShowDescription(false); + }; + + return { isDescriptionVisible, showDescription, hideDescription }; +}; diff --git a/components/core/DataView.js b/components/core/DataView.js index 7a6f0daa..1a749b6d 100644 --- a/components/core/DataView.js +++ b/components/core/DataView.js @@ -753,7 +753,6 @@ export default class DataView extends React.Component { height: 24, width: 24, borderRadius: "8px", - boxShadow: `0 0 0 1px ${Constants.system.white}`, backgroundColor: this.state.checked[i] ? Constants.system.blue : "rgba(255, 255, 255, 0.75)", diff --git a/components/core/ObjectPreview/ObjectPreviewPrimitive.js b/components/core/ObjectPreview/ObjectPreviewPrimitive.js index 2db96811..f9e64e70 100644 --- a/components/core/ObjectPreview/ObjectPreviewPrimitive.js +++ b/components/core/ObjectPreview/ObjectPreviewPrimitive.js @@ -20,24 +20,22 @@ const STYLES_WRAPPER = (theme) => css` `; const STYLES_DESCRIPTION = (theme) => css` + position: relative; box-shadow: 0 -0.5px 0.5px ${theme.system.grayLight4}; border-radius: 0px 0px 16px 16px; box-sizing: border-box; width: 100%; - max-height: 61px; + background-color: ${theme.semantic.bgLight}; + border-radius: 16px; + height: calc(170px + 61px); + padding: 9px 16px 8px; + z-index: 1; @media (max-width: ${theme.sizes.mobile}px) { padding: 8px; } `; -const STYLES_DESCRIPTION_INNER = (theme) => css` - background-color: ${theme.semantic.bgLight}; - padding: 9px 16px 8px; - border-radius: 16px; - height: calc(170px + 61px); -`; - const STYLES_PREVIEW = css` overflow: hidden; position: relative; @@ -73,6 +71,7 @@ export default function ObjectPreviewPrimitive({ isImage, onAction, }) { + const { isDescriptionVisible, showDescription, hideDescription } = useShowDescription(); // const { like, isLiked, likeCount } = useLikeHandler({ file, viewer }); // const { save, isSaved, saveCount } = useSaveHandler({ file, viewer }); // const showSaveButton = viewer?.id !== file?.ownerId; @@ -81,11 +80,8 @@ export default function ObjectPreviewPrimitive({ // const showControls = () => setShowControls(true); // const hideControls = () => setShowControls(false); - const [isBodyVisible, setShowBody] = React.useState(false); - const showBody = () => setShowBody(true); - const hideBody = () => setShowBody(false); const body = file?.data?.body; - const isLink = file.isLink; + const { isLink } = file; const title = file.data.name || file.filename; @@ -126,17 +122,22 @@ export default function ObjectPreviewPrimitive({
{children}
-
- + -
+
{title}
-
+
{typeof tag === "string" ? ( {tag} @@ -148,15 +149,32 @@ export default function ObjectPreviewPrimitive({
{body || ""}
- -
+ +
); } + +const useShowDescription = () => { + const [isDescriptionVisible, setShowDescription] = React.useState(false); + const timeoutId = React.useRef(); + + const showDescription = () => { + clearTimeout(timeoutId.current); + const id = setTimeout(() => setShowDescription(true), 250); + timeoutId.current = id; + }; + const hideDescription = () => { + clearTimeout(timeoutId.current); + setShowDescription(false); + }; + + return { isDescriptionVisible, showDescription, hideDescription }; +}; diff --git a/components/system/components/CheckBox.js b/components/system/components/CheckBox.js index 6f425164..9e08361d 100644 --- a/components/system/components/CheckBox.js +++ b/components/system/components/CheckBox.js @@ -17,7 +17,7 @@ const STYLES_CHECKBOX = css` const STYLES_CHECKBOX_FIGURE = css` box-sizing: border-box; - box-shadow: 0 0 0 1px ${Constants.semantic.borderGrayLight}; + box-shadow: 0 0 0 1px ${Constants.system.grayLight4}; background-color: ${Constants.system.white}; border-radius: 4px; display: inline-flex; diff --git a/node_common/data/methods/get-subscriptions-by-user-id.js b/node_common/data/methods/get-subscriptions-by-user-id.js index 7760e3c5..4fd2d42c 100644 --- a/node_common/data/methods/get-subscriptions-by-user-id.js +++ b/node_common/data/methods/get-subscriptions-by-user-id.js @@ -11,9 +11,9 @@ export default async ({ ownerId }) => { // const slateFiles = () => // DB.raw("json_agg(?? order by ?? asc) as ??", ["files", "slate_files.createdAt", "objects"]); - const ownerQueryFields = ["*", ...Constants.userPreviewProperties, "owner"]; + const ownerQueryFields = [...Constants.userPreviewProperties, "owner"]; const ownerQuery = DB.raw( - `??, json_build_object('id', ??, 'data', ??, 'username', ??) as ??`, + `json_build_object('id', ??, 'data', ??, 'username', ??) as ??`, ownerQueryFields ); @@ -36,7 +36,7 @@ export default async ({ ownerId }) => { // .orderBy("subscriptions.createdAt", "desc"); .groupBy("slates.id") ) - .select(ownerQuery) + .select(...Serializers.slateProperties, "objects", ownerQuery) .from("slates") .join("users", "slates.ownerId", "users.id");