From 18ac079ccf4cc102d5757345c46f63cdaec846c0 Mon Sep 17 00:00:00 2001 From: Yume <2839681263@qq.com> Date: Thu, 31 Jul 2025 10:43:11 +0800 Subject: [PATCH 1/2] fix(UI): modify the style of labelItem in timeline --- moon/apps/web/components/MrView/LabelItem.tsx | 42 +++++++++++++++++++ .../web/components/MrView/TimelineItems.tsx | 13 ++++-- 2 files changed, 52 insertions(+), 3 deletions(-) create mode 100644 moon/apps/web/components/MrView/LabelItem.tsx diff --git a/moon/apps/web/components/MrView/LabelItem.tsx b/moon/apps/web/components/MrView/LabelItem.tsx new file mode 100644 index 000000000..35690db01 --- /dev/null +++ b/moon/apps/web/components/MrView/LabelItem.tsx @@ -0,0 +1,42 @@ +import { ConditionalWrap } from '@gitmono/ui' +import { useGetOrganizationMember } from '@/hooks/useGetOrganizationMember' +import { MemberHovercard } from '../InlinePost/MemberHovercard' +import { MemberAvatar } from '../MemberAvatar' +import { UserLinkByName } from './components/UserLinkByName' +import HandleTime from './components/HandleTime' +import { ConversationItem } from '@gitmono/types/generated' + + +interface LabelItemProps { + conv: ConversationItem +} +const LabelItem = ({ conv }: LabelItemProps) => { + const { data: member } = useGetOrganizationMember({ username: conv.username }) + + return ( + <> +
+
+ ( + + + {c} + + + )} + > + {member ? : 'Avatar not found'} + +
+
{conv.comment}
+
+ +
+
+ + ) +} + +export default LabelItem diff --git a/moon/apps/web/components/MrView/TimelineItems.tsx b/moon/apps/web/components/MrView/TimelineItems.tsx index 483b19d95..1a6e7af0a 100644 --- a/moon/apps/web/components/MrView/TimelineItems.tsx +++ b/moon/apps/web/components/MrView/TimelineItems.tsx @@ -2,7 +2,13 @@ import React from 'react' import '@primer/primitives/dist/css/functional/themes/light.css' -import { CommentIcon, FeedMergedIcon, FeedPullRequestClosedIcon, FeedPullRequestOpenIcon } from '@primer/octicons-react' +import { + CommentIcon, + FeedMergedIcon, + FeedPullRequestClosedIcon, + FeedPullRequestOpenIcon, + FeedTagIcon +} from '@primer/octicons-react' import { BaseStyles, ThemeProvider, Timeline } from '@primer/react' import { ConversationItem } from '@gitmono/types/generated' @@ -12,6 +18,7 @@ import MRComment from '@/components/MrView/MRComment' import CloseItem from './CloseItem' import MergedItem from './MergedItem' import ReopenItem from './ReopenItem' +import LabelItem from '@/components/MrView/LabelItem' interface TimelineItemProps { badge?: React.ReactNode @@ -88,8 +95,8 @@ const TimelineItems: React.FC<{ detail: any; id: string; type: string }> = ({ de children = break case 'Label': - icon = - children = + icon = + children = break } From d32026a5a67372a45b281c0865420d8dfdd7e04a Mon Sep 17 00:00:00 2001 From: Yume <2839681263@qq.com> Date: Thu, 31 Jul 2025 12:18:13 +0800 Subject: [PATCH 2/2] feat(UI): show labelList for issue & Mr page --- .../web/components/Issues/IssuesContent.tsx | 28 +++++++++++++++++++ .../web/components/Labels/NewLabelDialog.tsx | 12 +++----- moon/apps/web/pages/[org]/labels/index.tsx | 13 +++------ moon/apps/web/utils/getFontColor.ts | 11 ++++++++ 4 files changed, 47 insertions(+), 17 deletions(-) create mode 100644 moon/apps/web/utils/getFontColor.ts diff --git a/moon/apps/web/components/Issues/IssuesContent.tsx b/moon/apps/web/components/Issues/IssuesContent.tsx index 5a55dc0f3..81e03e105 100644 --- a/moon/apps/web/components/Issues/IssuesContent.tsx +++ b/moon/apps/web/components/Issues/IssuesContent.tsx @@ -38,6 +38,7 @@ import { Pagination } from './Pagenation' import { orderTags } from './utils/consts' import { generateAllMenuItems, MenuConfig } from './utils/generateAllMenuItems' import { useGetLabelList } from '@/hooks/useGetLabelList' +import { getFontColor } from '@/utils/getFontColor' interface Props { getIssues?: ReturnType> @@ -464,6 +465,33 @@ export const RightAvatar = ({ item }: { item: ItemsType[number] }) => { return ( <>
+
+ {item.labels.map(label => { + const fontColor = getFontColor(label.color) + + return + {label.name} + + })} +
+
= ({ isOpen, onClose, const [name, setName] = useState(''); const [description, setDescription] = useState(''); - const isDark = colord(color).isDark(); - let fontColor = colord(color); - - if(isDark) fontColor = fontColor.lighten(0.4); - else fontColor = fontColor.darken(0.5); + const fontColor = getFontColor(color) const generateRandomColor = () => { setColor(random().toHex()); @@ -47,11 +44,10 @@ export const NewLabelDialog: React.FC = ({ isOpen, onClose, style={{ backgroundColor: color, color: fontColor.toHex(), - border: `1px solid ${fontColor.toHex()}`, borderRadius: '16px', padding: '2px 8px', fontSize: '12px', - fontWeight: '700', + fontWeight: '600', display: 'inline-block', textAlign: 'center' }} diff --git a/moon/apps/web/pages/[org]/labels/index.tsx b/moon/apps/web/pages/[org]/labels/index.tsx index fd4aa466a..0acf28bab 100644 --- a/moon/apps/web/pages/[org]/labels/index.tsx +++ b/moon/apps/web/pages/[org]/labels/index.tsx @@ -1,5 +1,4 @@ import React, { AwaitedReactNode, JSX, ReactElement, ReactNode, ReactPortal, useCallback, useEffect, useState } from 'react'; -import { Colord, colord } from 'colord'; import { useRouter } from 'next/router'; import { useDebounce } from 'use-debounce'; import { LabelItem } from '@gitmono/types' @@ -20,6 +19,7 @@ import { usePostLabelNew } from '@/hooks/usePostLabelNew' import { atomFamily } from 'jotai/utils' import { atomWithWebStorage } from '@/utils/atomWithWebStorage' import { useAtom } from 'jotai' +import { getFontColor } from '@/utils/getFontColor' const labelListAtom = atomFamily((scope: string) => atomWithWebStorage(`${scope}:issue-label`, []) @@ -164,11 +164,7 @@ function LabelsPage() { > {(labels) => { return labels.map((label) => { - const isDark = colord(label.color).isDark() - let fontColor: Colord | string = colord(label.color) - - if(isDark) fontColor = fontColor.lighten(0.4).toHex() - else fontColor = fontColor.darken(0.5).toHex() + const fontColor = getFontColor(label.color) return (