Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

refactor(article): article-footer with copyright setting#1115

Merged
mydearxym merged 5 commits intodevfromarticle-copyright-footer
Jul 18, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletionspublic/icons/static/article/cc-by.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletionspublic/icons/static/article/cc-nc.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletionspublic/icons/static/article/cc-nd.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletionspublic/icons/static/article/cc-raw.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletionspublic/icons/static/article/cc.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletionspublic/icons/static/article/collect-bookmark.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletionspublic/icons/static/article/copyright-approve.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletionspublic/icons/static/article/copyright-forbid.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletionspublic/icons/static/article/copyright-printer.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletionspublic/icons/static/article/copyright.svg
View file
Open in desktop
Loading
Sorry, something went wrong.Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletionsrc/components/Buttons/IconButton.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -30,7 +30,7 @@ const IconButton: FC<TProps> = ({
active = false,
dimWhenIdle = false,
hint = null,
hintDelay =1000,
hintDelay =500,
hintPlacement = 'top',
onClick = console.log,
}) => {
Expand Down
8 changes: 4 additions & 4 deletionssrc/components/Buttons/styles/arrow_link.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,17 +14,17 @@ export const Wrapper = styled.a`
`
type TText = { hoverColor: string; size: string }
export const Text = styled.div<TText>`
color: ${({ color }) => color ||theme('thread.articleDigest')};
color: ${({ color }) => color ||'#327ca1'};
font-size: ${({ size }) => getTextSize(size)};

${Wrapper}:hover & {
color: ${({ hoverColor }) => hoverColor ||theme('thread.articleTitle')};
color: ${({ hoverColor }) => hoverColor ||'#327ca1'};
visibility: visible;
}
`
type TIcon = { color: string; size: string }
const Icon = styled(Img)<TIcon>`
fill: ${({ color }) => color ||theme('thread.articleDigest')};
fill: ${({ color }) => color ||'#327ca1'};
width: ${({ size }) => getIconSize(size)};
height: ${({ size }) => getIconSize(size)};
display: block;
Expand All@@ -37,7 +37,7 @@ export const RightIcon = styled(Icon)<{ hoverColor: string }>`
visibility: hidden;

${Wrapper}:hover & {
fill: ${({ hoverColor }) => hoverColor ||theme('thread.articleTitle')};
fill: ${({ hoverColor }) => hoverColor ||'#327ca1'};
margin-left: 10px;
visibility: visible;
}
Expand Down
41 changes: 41 additions & 0 deletionssrc/components/Copyright/Label.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
import { FC, memo } from 'react'

import { ICON } from '@/config'
import { Wrapper, Icon, Text } from './styles/label'

type TProps = {
type?: 'cc' | 'approve' | 'forbid'
}

const Label: FC<TProps> = ({ type }) => {
switch (type) {
case 'approve': {
return (
<Wrapper>
<Icon src={`${ICON}/article/copyright-approve.svg`} />
<Text>转载需授权</Text>
</Wrapper>
)
}

case 'forbid': {
return (
<Wrapper>
<Icon src={`${ICON}/article/copyright-forbid.svg`} />
<Text>禁止转载</Text>
</Wrapper>
)
}

default: {
return (
<Wrapper>
<Icon src={`${ICON}/article/cc-raw.svg`} />
<Text>知识共享 4.0</Text>
</Wrapper>
)
}
}
}

export default memo(Label)
88 changes: 88 additions & 0 deletionssrc/components/Copyright/ReadOnlyPanel.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
import { FC, memo } from 'react'

import { ICON } from '@/config'
import { ArrowLink } from '@/components/Buttons'

import {
Wrapper,
Header,
Icon,
Title,
Desc,
Items,
DescItem,
Footer,
} from './styles/readonly_panel'

type TProps = {
type?: 'cc' | 'approve' | 'forbid'
}

const ReadOnlyPanel: FC<TProps> = ({ type }) => {
switch (type) {
case 'approve': {
return (
<Wrapper>
<Header>
<Icon src={`${ICON}/article/copyright-approve.svg`} />
<Title>转载需授权</Title>
</Header>
<Desc>
根据作者设置，转载需获取本人授权。相关联系方式可参考作者主页。
</Desc>
</Wrapper>
)
}

case 'forbid': {
return (
<Wrapper>
<Header>
<Icon src={`${ICON}/article/copyright-forbid.svg`} />
<Title>禁止转载</Title>
</Header>
<Desc>
根据作者设置，本文严禁任何方式的转载，如有疑问，请尝试联系作者。
</Desc>
</Wrapper>
)
}

default: {
return (
<Wrapper>
<Header>
<Icon src={`${ICON}/article/cc.svg`} />
<Title>知识共享 4.0</Title>
</Header>

<Desc>
本作品采用知识共享「署名-非商业性使用-禁止演绎 4.0
国际」许可证授权。
<Items>
<DescItem path="article/cc-by.svg" size="large" highlight>
署名
</DescItem>
<DescItem path="article/cc-nc.svg" size="large" highlight>
非商业性使用
</DescItem>
<DescItem path="article/cc-nd.svg" size="large" highlight>
禁止演绎
</DescItem>
</Items>
</Desc>
<Footer>
<ArrowLink
size="tiny"
href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh"
>
查看完整版本
</ArrowLink>
</Footer>
</Wrapper>
)
}
}
}

export default memo(ReadOnlyPanel)
76 changes: 76 additions & 0 deletionssrc/components/Copyright/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
/*
*
* Copyright
*
*/

import { FC, memo } from 'react'

import type { TCopyright } from '@/spec'
import Tooltip from '@/components/Tooltip'
import { buildLog } from '@/utils'

import Label from './Label'
import SettingMenu from '@/components/SettingMenu'
import ReadOnlyPanel from './ReadOnlyPanel'
import { Wrapper } from './styles'

/* eslint-disable-next-line */
const log = buildLog('c:Copyright:index')

const options = [
{
title: '知识共享 4.0',
desc: '署名-非商业性使用-禁止演绎',
key: 'cc',
},
{
title: '转载需授权',
desc: '转载需得到我的明确授权。',
key: 'approve',
},
{
title: '禁止转载',
desc: '禁止一切形式的转载，有疑问联系我。',
key: 'forbid',
},
]

type TProps = {
testid?: string
type?: TCopyright
mode?: 'readonly' | 'editable'
onChange?: (type: string) => void
}

const Copyright: FC<TProps> = ({
testid = 'copyright',
type = 'cc',
mode = 'readonly',
onChange = log,
}) => {
return (
<Wrapper testid={testid}>
<Tooltip
content={
mode === 'readonly' ? (
<ReadOnlyPanel type={type} />
) : (
<SettingMenu
options={options}
activeKey={type}
onChange={onChange}
/>
)
}
placement="top"
trigger="click"
noPadding
>
<Label type={type} />
</Tooltip>
</Wrapper>
)
}

export default memo(Copyright)
23 changes: 23 additions & 0 deletionssrc/components/Copyright/styles/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
import styled from 'styled-components'

import type { TTestable } from '@/spec'

import Img from '@/Img'
import { css, theme } from '@/utils'

export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
'data-test-id': testid,
}))<TTestable>``

export const Label = styled.div`
${css.flex('align-center')};
`
export const Icon = styled(Img)`
${css.size(14)};
fill: ${theme('thread.articleDigest')};
`
export const Text = styled.div`
font-size: 12px;
color: ${theme('thread.articleDigest')};
margin-right: 5px;
`
29 changes: 29 additions & 0 deletionssrc/components/Copyright/styles/label.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
import styled from 'styled-components'

import Img from '@/Img'
import { css, theme } from '@/utils'

export const Wrapper = styled.div`
${css.flex('align-center')};
cursor: pointer;
`
export const Icon = styled(Img)`
fill: ${theme('thread.articleDigest')};
${css.size(13)};

${Wrapper}:hover & {
fill: ${theme('thread.articleTitle')};
}

transition: fill 0.2s;
`
export const Text = styled.div`
font-size: 13px;
color: ${theme('thread.articleDigest')};
margin-left: 6px;

${Wrapper}:hover & {
color: ${theme('thread.articleTitle')};
}
transition: color 0.2s;
`
39 changes: 39 additions & 0 deletionssrc/components/Copyright/styles/readonly_panel.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
import styled from 'styled-components'
import IconText from '@/components/IconText'

import Img from '@/Img'
import { css, theme } from '@/utils'

export const Wrapper = styled.div`
${css.flexColumn()};
width: 240px;
padding-left: 5px;
`
export const Header = styled.div`
${css.flex('align-center')};
`
export const Icon = styled(Img)`
${css.size(18)};
fill: ${theme('thread.articleTitle')};
`
export const Title = styled.div`
font-size: 16px;
color: ${theme('thread.articleTitle')};
margin-left: 8px;
`
export const Desc = styled.div`
font-size: 13px;
color: ${theme('thread.articleDigest')};
margin-top: 8px;
margin-bottom: 8px;
`
export const Items = styled.div`
margin-top: 10px;
margin-bottom: 6px;
`
export const DescItem = styled(IconText)`
margin-bottom: 3px;
`
export const Footer = styled.div`
${css.flex('align-center')};
`
Loading
[8]ページ先頭
©2009-2025 Movatter.jp