mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

site: site ContributorAvatar style optimization (#46623)

Browse Source
This commit is contained in:
lijianan 2023-12-26 12:08:50 +08:00 committed by GitHub
parent 76e9558bc2
commit 3d4e3ca089
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 131 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
.dumi/theme/slots/Content/ColumnCard.tsx
View File

@ -1,7 +1,8 @@
import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
import { createStyles } from 'antd-style';
import React from 'react';
import { RightOutlined, YuqueOutlined, ZhihuOutlined } from '@ant-design/icons';
import { Button, Card, Divider } from 'antd';
import { createStyles } from 'antd-style';
import useLocale from '../../../hooks/useLocale';
import JuejinLogo from './JuejinLogo';
@ -10,81 +11,81 @@ const ANTD_IMG_URL =
const useStyle = createStyles(({ token, css }) => ({
card: css`
width: 100%;
margin: 40px 0;
transition: all 0.2s;
background-color: ${token.colorFillQuaternary};
`,
width: 100%;
margin: 40px 0;
transition: all 0.2s;
background-color: ${token.colorFillQuaternary};
`,
bigTitle: css`
font-size: 16px;
color: #121212;
margin-bottom: 24px;
font-weight: 600;
`,
font-size: 16px;
color: #121212;
margin-bottom: 24px;
font-weight: 600;
`,
cardBody: css`
display: flex;
justify-content: space-between;
align-items: center;
`,
display: flex;
justify-content: space-between;
align-items: center;
`,
left: css`
display: flex;
justify-content: flex-start;
align-items: center;
img {
width: 200px;
margin-right: 24px;
overflow: hidden;
border-radius: 8px;
}
`,
title: css`
color: #444;
font-size: 16px;
font-weight: 600;
`,
subTitle: css`
display: flex;
justify-content: flex-start;
align-items: center;
color: #646464;
font-size: 14px;
font-weight: 400;
margin-top: 8px;
display: flex;
justify-content: flex-start;
align-items: center;
img {
width: 200px;
margin-right: 24px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.logo {
width: 24px;
height: 24px;
font-size: 24px;
&.zhihu-logo {
color: #056de8;
}
&.yuque-logo {
color: #00b96b;
}
&.juejin-logo {
color: #1e80ff;
}
border-radius: 8px;
}
`,
title: css`
color: #444;
font-size: 16px;
font-weight: 600;
`,
subTitle: css`
display: flex;
justify-content: flex-start;
align-items: center;
color: #646464;
font-size: 14px;
font-weight: 400;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.logo {
width: 24px;
height: 24px;
font-size: 24px;
&.zhihu-logo {
color: #056de8;
}
.arrowIcon {
margin: 0 8px;
color: #8a8f8d;
font-size: 12px;
&.yuque-logo {
color: #00b96b;
}
.zl-btn {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
color: #646464;
&.juejin-logo {
color: #1e80ff;
}
`,
btn: css`
}
.arrowIcon {
margin: 0 8px;
color: #8a8f8d;
font-size: 12px;
}
.zl-btn {
display: flex;
justify-content: center;
align-items: center;
`,
justify-content: center;
padding: 0;
color: #646464;
}
`,
btn: css`
display: flex;
justify-content: center;
align-items: center;
`,
}));
const locales = {

19
.dumi/theme/slots/Content/ContributorAvatar.tsx
View File

@ -1,21 +1,30 @@
import React from 'react';
import type { AvatarListItem } from '@qixian.cs/github-contributors-list';
import { Avatar, Skeleton, Tooltip } from 'antd';
const AvatarPlaceholder: React.FC<{ num?: number }> = ({ num = 3 }) => (
<li>
{Array.from({ length: num }).map((_, i) => (
<Skeleton.Avatar size="small" active key={i} style={{ marginLeft: i === 0 ? 0 : -8 }} />
{Array.from({ length: num }).map<React.ReactNode>((_, i) => (
<Skeleton.Avatar
size="small"
active
key={i}
style={{ marginInlineStart: i === 0 ? 0 : -8 }}
/>
))}
</li>
);
interface ContributorAvatarProps {
username?: string;
url?: string;
loading?: boolean;
item?: AvatarListItem;
}
const ContributorAvatar: React.FC<ContributorAvatarProps> = ({ username, url, loading }) => {
const ContributorAvatar: React.FC<ContributorAvatarProps> = (props) => {
const {
item: { username, url } = {},
loading,
} = props;
if (loading) {
return <AvatarPlaceholder />;
}

69
.dumi/theme/slots/Content/Contributors.tsx
View File

@ -1,48 +1,40 @@
import React, { useContext } from 'react';
import ContributorsList from '@qixian.cs/github-contributors-list';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import { useIntl } from 'dumi';
import { createStyles } from 'antd-style';
import ContributorsList from '@qixian.cs/github-contributors-list';
import ContributorAvatar from './ContributorAvatar';
import SiteContext from '../SiteContext';
import ContributorAvatar from './ContributorAvatar';
const useStyle = createStyles(({ token, css }) => {
const { antCls } = token;
return {
contributorsList: css`
const useStyle = createStyles(({ token, css }) => ({
contributorsList: css`
margin-top: 120px !important;
`,
listMobile: css`
margin: 1em 0 !important;
`,
title: css`
`,
listMobile: css`
margin: 1em 0 !important;
`,
title: css`
font-size: 12px;
opacity: 0.45;
opacity: 0.5;
margin-bottom: 8px;
`,
list: css`
display: flex;
flex-wrap: wrap;
clear: both;
li {
height: 24px;
}
li,
${antCls}-avatar + ${antCls}-avatar {
transition: all ${token.motionDurationSlow};
margin-inline-end: -8px;
}
&:hover {
li,
${antCls}-avatar {
margin-inline-end: 0;
list: css`
display: flex;
flex-wrap: wrap;
clear: both;
li {
height: 24px;
transition: all ${token.motionDurationSlow};
margin-inline-end: -8px;
}
&:hover {
li {
margin-inline-end: 0;
}
}
}
`,
};
});
}));
interface ContributorsProps {
filename?: string;
@ -67,12 +59,7 @@ const Contributors: React.FC<ContributorsProps> = ({ filename }) => {
fileName={filename}
className={styles.list}
renderItem={(item, loading) => (
<ContributorAvatar
key={item?.username}
username={item?.username}
url={item?.url}
loading={loading}
/>
<ContributorAvatar item={item} loading={loading} key={item?.url} />
)}
/>
</div>

2
.dumi/theme/slots/Content/DocAnchor.tsx
View File

@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
import classNames from 'classnames';
import { Anchor } from 'antd';
import { createStyles, useTheme } from 'antd-style';
import classNames from 'classnames';
import { useRouteMeta, useTabMeta } from 'dumi';
const useStyle = createStyles(({ token, css }) => {

10
.dumi/theme/slots/Content/DocMeta.tsx
View File

@ -1,8 +1,8 @@
import React, { useState, useLayoutEffect, useMemo } from 'react';
import { Typography, Space, Skeleton, Avatar } from 'antd';
import { useRouteMeta } from 'dumi';
import DayJS from 'dayjs';
import React, { useLayoutEffect, useMemo, useState } from 'react';
import { CalendarOutlined } from '@ant-design/icons';
import { Avatar, Skeleton, Space, Typography } from 'antd';
import DayJS from 'dayjs';
import { useRouteMeta } from 'dumi';
const AuthorAvatar: React.FC<{ name: string; avatar: string }> = ({ name, avatar }) => {
const [loading, setLoading] = useState(true);
@ -26,7 +26,7 @@ const AuthorAvatar: React.FC<{ name: string; avatar: string }> = ({ name, avatar
);
};
const DocMeta: React.FC<{}> = () => {
const DocMeta: React.FC = () => {
const meta = useRouteMeta();
const mergedAuthorInfos = useMemo(() => {

30
.dumi/theme/slots/Content/index.tsx
View File

@ -1,9 +1,9 @@
import React, { Suspense, useContext, useLayoutEffect, useMemo } from 'react';
import { Col, Skeleton, Space, Typography } from 'antd';
import { createStyles } from 'antd-style';
import classNames from 'classnames';
import { FormattedMessage, useRouteMeta } from 'dumi';
import type { ReactNode } from 'react';
import React, { Suspense, useContext, useLayoutEffect, useMemo } from 'react';
import { Col, Space, Typography, Skeleton } from 'antd';
import { createStyles } from 'antd-style';
import useLayoutState from '../../../hooks/useLayoutState';
import useLocation from '../../../hooks/useLocation';
import type { DemoContextProps } from '../DemoContext';
@ -21,22 +21,20 @@ const EditButton = React.lazy(() => import('../../common/EditButton'));
const useStyle = createStyles(({ token, css }) => ({
articleWrapper: css`
padding: 0 170px 32px 64px;
padding: 0 170px 32px 64px;
&.rtl {
padding: 0 64px 144px 170px;
}
@media only screen and (max-width: ${token.screenLG}px) {
&,
&.rtl {
padding: 0 64px 144px 170px;
padding: 0 48px;
}
@media only screen and (max-width: ${token.screenLG}px) {
&,
&.rtl {
padding: 0 48px;
}
}
`,
}
`,
}));
const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
const meta = useRouteMeta();
const { pathname, hash } = useLocation();
const { direction } = useContext(SiteContext);