xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: post side actions styles

This commit is contained in:
DIYgod 2023-05-19 14:47:14 +01:00
parent 00e6022e4c
commit f903699842
No known key found for this signature in database
9 changed files with 167 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/common/ReactionComment.tsx Normal file
View File

@ -0,0 +1,69 @@
"use client"
import { Tooltip } from "~/components/ui/Tooltip"
import { useTranslation } from "~/lib/i18n/client"
import { calculateElementTop, cn } from "~/lib/utils"
import { useCheckComment, useGetComments } from "~/queries/page"
import { Button } from "../ui/Button"
export const ReactionComment: React.FC<{
characterId?: number
noteId?: number
}> = ({ characterId, noteId }) => {
const { t } = useTranslation("common")
const comments = useGetComments({
characterId: characterId,
noteId: noteId,
})
const isCommented = useCheckComment({
noteCharacterId: characterId,
noteId: noteId,
})
const comment = () => {
const targetElement = document.querySelector("#comments") as HTMLElement
window.scrollTo({
top: calculateElementTop(targetElement) - 20,
behavior: "smooth",
})
}
return (
<>
<div className={cn("xlog-reactions-comment flex items-center sm:mb-0")}>
<Button
variant="comment"
variantColor="light"
className={cn(
"flex items-center",
{
active: isCommented.data?.count,
},
"!h-auto flex-col",
)}
isAutoWidth={true}
onClick={comment}
>
{(() => {
const inner = (
<i
className={cn("icon-[mingcute--comment-fill]", "text-[33px]")}
/>
)
return (
<Tooltip label={t("Comments")} placement="right">
{inner}
</Tooltip>
)
})()}
<span className={cn("leading-snug")}>
{comments.data?.pages?.[0]?.count}
</span>
</Button>
</div>
</>
)
}

9
src/components/common/ReactionLike.tsx
View File

@ -115,6 +115,7 @@ export const ReactionLike: React.FC<{
<div className={cn("xlog-reactions-like flex items-center sm:mb-0")}>
<Button
variant="like"
variantColor={vertical ? "light" : undefined}
className={cn(
"flex items-center",
{
@ -129,7 +130,7 @@ export const ReactionLike: React.FC<{
>
{(() => {
const inner = (
<span
<i
className={cn(
"icon-[mingcute--thumb-up-2-fill]",
size === "sm"
@ -137,12 +138,12 @@ export const ReactionLike: React.FC<{
: vertical
? "text-[33px]"
: "text-[38px]",
vertical ? "" : "mr-1",
!vertical && "mr-1",
)}
></span>
></i>
)
return size !== "sm" ? (
<Tooltip label={t("Like")} placement="top">
<Tooltip label={t("Like")} placement={vertical ? "right" : "top"}>
{inner}
</Tooltip>
) : (

18
src/components/common/ReactionMint.tsx
View File

@ -6,7 +6,6 @@ import { useEffect, useMemo, useRef, useState } from "react"
import { useAccountState } from "@crossbell/connect-kit"
import { CharacterList } from "~/components/common/CharacterList"
import { MintIcon } from "~/components/icons/MintIcon"
import { Modal } from "~/components/ui/Modal"
import { Tooltip } from "~/components/ui/Tooltip"
import { UniLink } from "~/components/ui/UniLink"
@ -105,6 +104,7 @@ export const ReactionMint: React.FC<{
<div className="xlog-reactions-mint flex items-center">
<Button
variant="collect"
variantColor={vertical ? "light" : undefined}
className={cn(
"flex items-center",
{
@ -119,18 +119,22 @@ export const ReactionMint: React.FC<{
>
{(() => {
const inner = (
<MintIcon
<i
className={cn(
"icon-[mingcute--magic-1-fill]",
size === "sm"
? "w-3 h-3"
? "text-base"
: vertical
? "w-[33px] h-[33px] p-[2px]"
: "w-[38px] h-[38px] p-[3px]",
? "text-[33px]"
: "text-[38px]",
)}
/>
></i>
)
return size !== "sm" ? (
<Tooltip label={t("Mint to an NFT")} placement="top">
<Tooltip
label={t("Mint to an NFT")}
placement={vertical ? "right" : "top"}
>
{inner}
</Tooltip>
) : (

3
src/components/common/ReactionTip.tsx
View File

@ -66,6 +66,7 @@ export const ReactionTip: React.FC<{
<div className="xlog-reactions-tip flex items-center">
<Button
variant="tip"
variantColor={vertical ? "light" : undefined}
className={cn(
"flex items-center",
{
@ -87,7 +88,7 @@ export const ReactionTip: React.FC<{
/>
)
return (
<Tooltip label={t("Tip")} placement="top">
<Tooltip label={t("Tip")} placement={vertical ? "right" : "top"}>
{inner}
</Tooltip>
)

29
src/components/site/PostActions.tsx
View File

@ -1,11 +1,10 @@
import React, { useEffect, useRef, useState } from "react"
import { ReactionComment } from "~/components/common/ReactionComment"
import { ReactionLike } from "~/components/common/ReactionLike"
import { ReactionMint } from "~/components/common/ReactionMint"
import { ReactionTip } from "~/components/common/ReactionTip"
import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
import { calculateElementTop } from "~/lib/utils"
import { useGetComments } from "~/queries/page"
export const PostActions: React.FC<{
page?: ExpandedNote
@ -25,11 +24,6 @@ export const PostActions: React.FC<{
}
}, [containerRef])
const comments = useGetComments({
characterId: page?.characterId,
noteId: page?.noteId,
})
return (
<div
className="xlog-post-actions absolute right-full pr-14 h-full top-0"
@ -56,23 +50,10 @@ export const PostActions: React.FC<{
page={page}
vertical={true}
/>
<div
className="cursor-pointer text-gray-500 flex flex-col items-center leading-snug"
onClick={() => {
const targetElement = document.querySelector(
"#comments",
) as HTMLElement
window.scrollTo({
top: calculateElementTop(targetElement) - 20,
behavior: "smooth",
})
}}
>
<i className="icon-[mingcute--comment-fill] text-[33px]" />
<span className="text-gray-500">
{comments.data?.pages?.[0]?.count}
</span>
</div>
<ReactionComment
characterId={page?.characterId}
noteId={page?.noteId}
/>
</div>
</div>
)

9
src/components/ui/Button.tsx
View File

@ -19,8 +19,15 @@ export type Variant =
| "crossbell"
| "outline"
| "tip"
| "comment"
export type VariantColor = "green" | "red" | "gray" | "gradient" | "black"
export type VariantColor =
| "green"
| "red"
| "gray"
| "gradient"
| "black"
| "light"
type ButtonProps = {
isLoading?: boolean

41
src/css/tailwind.css
View File

@ -168,43 +168,52 @@ a {
@apply fill-black;
}
.button.is-like {
.button.is-like,
.button.is-collect,
.button.is-tip,
.button.is-comment {
@apply shadow-none p-0;
@apply text-gray-500 fill-gray-500;
@apply text-gray-500;
}
.button.is-like.is-light,
.button.is-collect.is-light,
.button.is-tip.is-light,
.button.is-comment.is-light {
@apply text-gray-400;
}
.button.is-like.is-light.is-loading:before,
.button.is-collect.is-light.is-loading:before,
.button.is-tip.is-light.is-loading:before,
.button.is-comment.is-light.is-loading:before {
margin-right: 0;
}
.button.is-like:hover {
color: #f91880;
fill: #f91880;
}
.button.is-like.active {
color: #f91880;
fill: #f91880;
}
.button.is-collect {
@apply shadow-none p-0;
@apply text-gray-500 fill-gray-500;
}
.button.is-collect:hover {
color: #ffcf55;
fill: #ffcf55;
}
.button.is-collect.active {
color: #ffcf55;
fill: #ffcf55;
}
.button.is-tip {
@apply shadow-none p-0;
@apply text-gray-500 fill-gray-500;
}
.button.is-tip:hover {
color: #ef4444;
fill: #ef4444;
}
.button.is-tip.active {
color: #ef4444;
fill: #ef4444;
}
.button.is-comment:hover {
@apply text-green-500;
}
.button.is-comment.active {
@apply text-green-500;
}
.button.is-crossbell {

17
src/models/page.model.ts
View File

@ -571,6 +571,23 @@ export async function checkMint({
})
}
export async function checkComment({
characterId,
noteCharacterId,
noteId,
}: {
characterId: number
noteCharacterId: number
noteId: number
}) {
return indexer.note.getMany({
characterId: characterId,
toCharacterId: noteCharacterId,
toNoteId: noteId,
limit: 0,
})
}
export async function getComments({
characterId,
noteId,

25
src/queries/page.ts
View File

@ -177,6 +177,31 @@ export const useCheckMint = ({
})
}
export const useCheckComment = ({
noteCharacterId,
noteId,
}: {
noteCharacterId?: number
noteId?: number
}) => {
const account = useAccountState((s) => s.computed.account)
return useQuery(
["checkMint", noteCharacterId, noteId, account?.characterId],
async () => {
if (!noteCharacterId || !noteId || !account?.characterId) {
return { count: 0, list: [] }
}
return pageModel.checkComment({
characterId: account?.characterId,
noteCharacterId: noteCharacterId,
noteId: noteId,
})
},
)
}
export function useCreateOrUpdatePage() {
const newbieToken = useAccountState((s) => s.email?.token)
const unidata = useUnidata()