-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
23 changed files
with
195 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,19 @@ | ||
import styled from 'styled-components' | ||
|
||
import css, { theme } from '@/css' | ||
import type { TColor } from '@/spec' | ||
import css, { rainbow } from '@/css' | ||
import PinSVG from '@/icons/Pin' | ||
import { pixelAdd } from '@/dom' | ||
|
||
type TPos = { top: number; left: number } | ||
type TPos = { top: number; left: number } & TColor | ||
|
||
export const PinIcon = styled(PinSVG)<TPos>` | ||
fill: ${theme('article.digest')}; | ||
fill: ${({ $color }) => rainbow($color)}; | ||
position: absolute; | ||
${css.size(18)}; | ||
top: ${({ top }) => pixelAdd(`${top}px`, -4)}; | ||
left: ${({ left }) => `${left}px`}; | ||
opacity: 0.8; | ||
transform: rotate(-30deg); | ||
` | ||
|
||
export const holder = 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,29 +1,15 @@ | ||
import styled from 'styled-components' | ||
|
||
import css, { theme } from '@/css' | ||
import PinSVG from '@/icons/Pin' | ||
import { pixelAdd } from '@/dom' | ||
import { WithMargin } from '@/widgets/Common' | ||
|
||
type TPos = { top: number; left: number } | ||
|
||
export const ReadedLabel = styled.div<TPos>` | ||
background: ${theme('article.info')}; | ||
${css.circle(8)}; | ||
position: absolute; | ||
top: ${({ top }) => `${top}px`}; | ||
left: ${({ left }) => `${left}px`}; | ||
opacity: 0.5; | ||
export const ReadedLabel = styled(WithMargin)<{ size: number }>` | ||
${({ size }) => css.circle(size)}; | ||
background: ${theme('hint')}; | ||
opacity: 0.6; | ||
${css.media.mobile` | ||
${css.circle(6)}; | ||
`}; | ||
` | ||
export const PinIcon = styled(PinSVG)<TPos>` | ||
fill: ${theme('article.digest')}; | ||
position: absolute; | ||
${css.size(18)}; | ||
top: ${({ top }) => pixelAdd(`${top}px`, -4)}; | ||
left: ${({ left }) => `${left}px`}; | ||
opacity: 0.8; | ||
transform: rotate(-30deg); | ||
` | ||
export const holder = 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { FC, useCallback, useEffect, useState } from 'react' | ||
import { observer } from 'mobx-react' | ||
import { useMutation } from 'urql' | ||
|
||
import { toast, updateViewingArticle } from '@/signal' | ||
import { SpaceGrow } from '@/widgets/Common' | ||
import useViewingArticle from '@/hooks/useViewingArticle' | ||
|
||
import S from '../schema' | ||
import { Icon } from '../styles/icon' | ||
import { MenuItem } from '../styles/menu' | ||
|
||
const PinItem: FC = () => { | ||
const { article } = useViewingArticle() | ||
const [result, pinPost] = useMutation(S.pinPost) | ||
const [result2, undoPinPost] = useMutation(S.undoPinPost) | ||
|
||
const [pin, setPin] = useState(article.isPinned) | ||
|
||
useEffect(() => { | ||
setPin(article.isPinned) | ||
}, []) | ||
|
||
const handlePin = useCallback(() => { | ||
const action = !pin | ||
? pinPost({ id: article.id, communityId: article.originalCommunity.id }) | ||
: undoPinPost({ id: article.id, communityId: article.originalCommunity.id }) | ||
|
||
action.then((result) => { | ||
if (result.error) { | ||
toast('设置失败', 'error') | ||
} else { | ||
toast('设置完成') | ||
setPin(!pin) | ||
updateViewingArticle({ id: article.id, isPinned: !pin }) | ||
} | ||
}) | ||
}, [pin, article, pinPost, undoPinPost]) | ||
|
||
return ( | ||
<MenuItem onClick={handlePin}> | ||
{pin ? <Icon.UnPin /> : <Icon.Pin />} | ||
{pin ? '取消置顶' : '置顶'} | ||
<SpaceGrow /> | ||
{result.fetching && <Icon.Spin />} | ||
</MenuItem> | ||
) | ||
} | ||
|
||
export default observer(PinItem) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { memo, SVGProps } from 'react' | ||
|
||
const SVG = (props: SVGProps<SVGSVGElement>) => { | ||
return ( | ||
<svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 256 256" {...props}> | ||
<path d="M232 128a104 104 0 0 1-208 0c0-41 23.81-78.36 60.66-95.27a8 8 0 0 1 6.68 14.54C60.15 61.59 40 93.27 40 128a88 88 0 0 0 176 0c0-34.73-20.15-66.41-51.34-80.73a8 8 0 0 1 6.68-14.54C208.19 49.64 232 87 232 128Z" /> | ||
</svg> | ||
) | ||
} | ||
|
||
export default memo(SVG) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import { FC } from 'react' | ||
|
||
const SvgComponent: FC = (props) => ( | ||
<svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} viewBox="0 0 256 256" {...props}> | ||
<path d="M83.25 40a8 8 0 0 1 8-8H192a8 8 0 0 1 0 16h-6.46l18.75 106.3a8 8 0 0 1-6.48 9.26 7.52 7.52 0 0 1-1.4.13 8 8 0 0 1-7.87-6.61L169.29 48h-78a8 8 0 0 1-8.04-8Zm130.13 181.92a8 8 0 0 1-11.3-.54L168.1 184H136v56a8 8 0 0 1-16 0v-56H40a8 8 0 0 1 0-16h9.29l16.95-96-24.16-26.62a8 8 0 1 1 11.84-10.76l160 176a8 8 0 0 1-.54 11.3ZM153.55 168 79.84 86.92 65.54 168Z" /> | ||
</svg> | ||
) | ||
|
||
export default SvgComponent |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.