Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit 4396e17

Browse files
mydearxymmydearxym
authored
feat(dashboard): basic admin editor UI (#1348)
* chore: adjust tab drawer switch style * feat(dashboard): basic admin setter & re-org
1 parent 4e1ece4 commit 4396e17

File tree

15 files changed

+259
-70
lines changed

15 files changed

+259
-70
lines changed

‎src/containers/thread/AboutThread/Members/AdminMember.tsx

Lines changed: 3 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,9 @@
11
import { FC, memo } from 'react'
22

33
import type { TUser } from '@/spec'
4+
import AdminAvatar from '@/widgets/AdminAvatar'
45

5-
import {
6-
Wrapper,
7-
AvatarWrapper,
8-
Avatar,
9-
BadgeWrapper,
10-
BadgeIcon,
11-
Info,
12-
Name,
13-
Bio,
14-
} from '../styles/members/admin_member'
6+
import { Wrapper, Info, Name, Bio } from '../styles/members/admin_member'
157

168
type TProps = {
179
user: TUser
@@ -20,12 +12,7 @@ type TProps = {
2012
const AdminMember: FC<TProps> = ({ user }) => {
2113
return (
2214
<Wrapper>
23-
<AvatarWrapper>
24-
<Avatar src={user.avatar} />
25-
<BadgeWrapper>
26-
<BadgeIcon />
27-
</BadgeWrapper>
28-
</AvatarWrapper>
15+
<AdminAvatar user={user} right={10} />
2916
<Info>
3017
<Name>{user.nickname}</Name>
3118
<Bio>{user.bio}</Bio>

‎src/containers/thread/AboutThread/styles/members/admin_member.ts

Lines changed: 0 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,11 @@
11
import styled from 'styled-components'
22

33
import css, { theme } from '@/utils/css'
4-
import Img from '@/Img'
5-
import AdminStarSVG from '@/icons/AdminStar'
64

75
export const Wrapper = styled.div`
86
${css.flex('align-start')};
97
margin-bottom: 15px;
108
`
11-
export const AvatarWrapper = styled.div`
12-
position: relative;
13-
`
14-
export const Avatar = styled(Img)`
15-
${css.circle(40)};
16-
margin-right: 10px;
17-
margin-bottom: 20px;
18-
border: 2px solid;
19-
border-color: ${theme('thread.articleTitle')};
20-
padding: 2px;
21-
`
22-
export const BadgeWrapper = styled.div`
23-
${css.circle(14)};
24-
${css.flex('align-both')};
25-
background: ${theme('thread.articleTitle')};
26-
padding: 1px;
27-
border: 2px solid white;
28-
position: absolute;
29-
right: 10px;
30-
bottom: 18px;
31-
z-index: 2;
32-
`
339
export const Info = styled.div``
3410
export const Name = styled.div`
3511
${css.cutRest('140px')};
@@ -45,7 +21,3 @@ export const Bio = styled.div`
4521
opacity: 0.8;
4622
padding-right: 22px;
4723
`
48-
export const BadgeIcon = styled(AdminStarSVG)`
49-
${css.size(10)};
50-
fill: white;
51-
`

‎src/containers/thread/AboutThread/styles/members/index.ts

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import styled from 'styled-components'
22

33
import type { TTestable } from '@/spec'
4+
import Img from '@/Img'
45
import css, { theme } from '@/utils/css'
56

6-
import { Avatar as AdminAvatar } from './admin_member'
7-
87
export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
98
'data-test-id': testid,
109
}))<TTestable>`
@@ -47,8 +46,8 @@ export const Admin = styled.div`
4746
${css.flex('align-start')};
4847
width: 33.3%;
4948
`
50-
export const NormalAvatar = styled(AdminAvatar)`
51-
${css.circle(30)};
52-
margin-bottom: 10px;
53-
border: none;
49+
export const NormalAvatar = styled(Img)`
50+
${css.circle(26)};
51+
margin-right: 10px;
52+
margin-bottom: 16px;
5453
`

‎src/containers/thread/DashboardThread/Admin/Adder.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { FC, memo } from 'react'
2+
3+
import { Space } from '@/widgets/Common'
4+
import { Wrapper, Inputer, PlusIcon, AddButton } from '../styles/admin/adder'
5+
6+
const Adder: FC = () => {
7+
return (
8+
<Wrapper>
9+
<Inputer placeholder="账户名称 / 登入ID" />
10+
<Space right={30} />
11+
<AddButton size="small">
12+
<PlusIcon />
13+
管理员
14+
</AddButton>
15+
</Wrapper>
16+
)
17+
}
18+
19+
export default memo(Adder)

‎src/containers/thread/DashboardThread/Admin/List.tsx

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { FC, memo } from 'react'
2+
3+
import { mockUsers } from '@/utils/mock'
4+
5+
import { SpaceGrow } from '@/widgets/Common'
6+
import DropdownButton from '@/widgets/Buttons/DropdownButton'
7+
import AdminAvatar from '@/widgets/AdminAvatar'
8+
9+
import {
10+
Wrapper,
11+
User,
12+
Intro,
13+
Title,
14+
Name,
15+
Login,
16+
Bio,
17+
} from '../styles/admin/list'
18+
19+
const List: FC = () => {
20+
return (
21+
<Wrapper>
22+
{mockUsers(5).map((item) => (
23+
<User key={item.login}>
24+
<AdminAvatar user={item} right={14} top={5} />
25+
<Intro>
26+
<Title>
27+
<Name>{item.nickname}</Name>
28+
<Login>@{item.login}</Login>
29+
<SpaceGrow />
30+
<DropdownButton top={2}>全部</DropdownButton>
31+
</Title>
32+
<Bio>{item.bio}</Bio>
33+
</Intro>
34+
</User>
35+
))}
36+
</Wrapper>
37+
)
38+
}
39+
40+
export default memo(List)

‎src/containers/thread/DashboardThread/Admin/index.tsx

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
import { FC, memo } from 'react'
22

3+
import ArrowButton from '@/widgets/Buttons/ArrowButton'
4+
import { Inline } from '@/widgets/Common'
5+
6+
import Portal from '../Portal'
7+
import Adder from './Adder'
8+
import List from './List'
9+
310
import { Wrapper } from '../styles/admin'
411

512
type TProps = {
@@ -9,7 +16,21 @@ type TProps = {
916
const Admin: FC<TProps> = ({ testid = 'admin' }) => {
1017
return (
1118
<Wrapper>
12-
<div>Admin</div>
19+
<Portal
20+
title="管理员"
21+
desc={
22+
<>
23+
添加可参与社区内容管理的账号。
24+
<Inline>
25+
<ArrowButton size="tiny" arrowStyle="simple">
26+
设置参考
27+
</ArrowButton>
28+
</Inline>
29+
</>
30+
}
31+
/>
32+
<Adder />
33+
<List />
1334
</Wrapper>
1435
)
1536
}

‎src/containers/thread/DashboardThread/styles/admin/adder.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import styled from 'styled-components'
2+
3+
import css from '@/utils/css'
4+
import Input from '@/widgets/Input'
5+
import Button from '@/widgets/Buttons/Button'
6+
import PlusSVG from '@/icons/Plus'
7+
8+
export const Wrapper = styled.div`
9+
${css.flex('align-center')};
10+
margin-bottom: 42px;
11+
`
12+
export const Inputer = styled(Input)`
13+
height: 35px;
14+
font-size: 13px;
15+
`
16+
export const PlusIcon = styled(PlusSVG)`
17+
${css.size(13)};
18+
fill: white;
19+
margin-right: 8px;
20+
`
21+
export const AddButton = styled(Button)`
22+
border-radius: 5px;
23+
height: 32px;
24+
padding: 4px 15px;
25+
width: 130px;
26+
`

‎src/containers/thread/DashboardThread/styles/admin/index.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@ import styled from 'styled-components'
33
import css from '@/utils/css'
44

55
export const Wrapper = styled.div`
6-
${css.flex()};
6+
${css.flexColumn()};
7+
padding: 0 120px;
8+
padding-left: 80px;
79
`
810

911
export const Title = styled.div``

‎src/containers/thread/DashboardThread/styles/admin/list.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import styled from 'styled-components'
2+
3+
import css, { theme } from '@/utils/css'
4+
5+
export const Wrapper = styled.div`
6+
${css.flexColumn()};
7+
`
8+
export const User = styled.div`
9+
${css.flex()};
10+
margin-bottom: 25px;
11+
`
12+
export const Intro = styled.div`
13+
width: 100%;
14+
`
15+
export const Title = styled.div`
16+
${css.flex('align-center')};
17+
font-weight: 600;
18+
`
19+
export const Name = styled.div`
20+
color: ${theme('thread.articleTitle')};
21+
font-size: 16px;
22+
`
23+
export const Login = styled.div`
24+
color: ${theme('lightText')};
25+
font-size: 14px;
26+
margin-left: 10px;
27+
`
28+
export const Bio = styled.div`
29+
color: ${theme('lightText')};
30+
font-size: 14px;
31+
width: 75%;
32+
`

‎src/widgets/AdminAvatar/index.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/*
2+
*
3+
* AdminAvatar
4+
*
5+
*/
6+
7+
import { FC, memo } from 'react'
8+
9+
import type { TUser, TSpace } from '@/spec'
10+
import { buildLog } from '@/utils/logger'
11+
12+
import { Wrapper, Avatar, BadgeWrapper, BadgeIcon } from './styles'
13+
14+
/* eslint-disable-next-line */
15+
const log = buildLog('c:AdminAvatar:index')
16+
17+
type TProps = {
18+
testid?: string
19+
user: TUser
20+
} & TSpace
21+
22+
const AdminAvatar: FC<TProps> = ({
23+
testid = 'admin-avatar',
24+
user,
25+
...restProps
26+
}) => {
27+
return (
28+
<Wrapper testid={testid} {...restProps}>
29+
<Avatar src={user.avatar} />
30+
<BadgeWrapper>
31+
<BadgeIcon />
32+
</BadgeWrapper>
33+
</Wrapper>
34+
)
35+
}
36+
37+
export default memo(AdminAvatar)

0 commit comments

Comments
 (0)