Skip to content

Commit d8f20a8

Browse files
quinn-gaooquinn-gaoo
committed
fix: change UI, #1245 
1 parent eb878f9 commit d8f20a8

1 file changed

Lines changed: 71 additions & 143 deletions

File tree

‎next/components/notification/notificationItem.js‎

Lines changed: 71 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
import styled from "styled-components";
22
import { p_14_medium } from "@osn/common-ui/es/styles/textStyles";
33
import { Time, Flex, Dot } from "@osn/common-ui";
4-
import {
5-
text_dark_minor,
6-
primary_turquoise_500,
7-
text_dark_accessory,
8-
} from "@osn/common-ui/es/styles/colors";
94
import { ReactComponent as CheckIcon } from "@osn/common-ui/es/imgs/icons/check.svg";
10-
import { MOBILE_SIZE } from "@osn/constants";
115
import { useMemo, useState } from "react";
126
import { useSpaceIconUri } from "frontedUtils/space";
137
import {
@@ -16,74 +10,6 @@ import {
1610
} from "@osn/previewer";
1711
import IdentityOrAddr from "../identityOrAddr";
1812

19-
const NotificationItemWrapper = styled.div`
20-
&:hover {
21-
.unread-dot {
22-
display: none;
23-
}
24-
.check-icon {
25-
display: block;
26-
path {
27-
fill: ${text_dark_accessory};
28-
}
29-
}
30-
}
31-
`;
32-
33-
const Head = styled.div`
34-
padding: 24px;
35-
background: var(--fillBgPrimary);
36-
border: 1px solid var(--strokeBorderDefault);
37-
box-shadow: var(--shadowCardDefault);
38-
`;
39-
40-
const Type = styled.div`
41-
text-transform: capitalize;
42-
color: ${text_dark_minor};
43-
44-
@media screen and (max-width: ${MOBILE_SIZE}px) {
45-
&::after {
46-
display: none;
47-
}
48-
}
49-
`;
50-
51-
const MarkAsReadButton = styled.button`
52-
display: flex;
53-
align-items: center;
54-
justify-content: center;
55-
cursor: pointer;
56-
width: 18px;
57-
height: 18px;
58-
padding: 0;
59-
border: none;
60-
background-color: transparent;
61-
62-
.check-icon {
63-
display: none;
64-
}
65-
66-
&:hover {
67-
.unread-dot {
68-
display: none;
69-
}
70-
71-
.check-icon {
72-
display: block;
73-
74-
path {
75-
fill: ${text_dark_minor};
76-
}
77-
}
78-
}
79-
`;
80-
81-
const UnreadDot = styled.div`
82-
width: 8px;
83-
height: 8px;
84-
background-color: ${primary_turquoise_500};
85-
`;
86-
8713
const MarkDown = styled(MarkdownPreviewer)`
8814
${p_14_medium};
8915
`;
@@ -100,34 +26,7 @@ const EventTypeName = {
10026
};
10127

10228
export default function NotificationItem({ data, onMarkAsRead = () => {} }) {
103-
const {
104-
type,
105-
createdAt,
106-
read: _read,
107-
data: { space, title, proposalCid, spaceInfo, cid, content } = {},
108-
} = data;
109-
110-
const [read, setRead] = useState(_read);
111-
112-
function handleMarkAsRead(data) {
113-
onMarkAsRead(data);
114-
setRead(true);
115-
}
116-
117-
const spaceIcon = useSpaceIconUri(spaceInfo);
118-
119-
const status = (
120-
<>
121-
{!read ? (
122-
<MarkAsReadButton onClick={() => handleMarkAsRead(data)}>
123-
<UnreadDot className="unread-dot" />
124-
<CheckIcon className="check-icon" />
125-
</MarkAsReadButton>
126-
) : (
127-
<div />
128-
)}
129-
</>
130-
);
29+
const { type, data: { space, proposalCid, cid, content } = {} } = data;
13130

13231
const href = useMemo(() => {
13332
if (type === "commentMentionUser") {
@@ -143,47 +42,76 @@ export default function NotificationItem({ data, onMarkAsRead = () => {} }) {
14342
}, [cid, proposalCid, space, type]);
14443

14544
return (
146-
<NotificationItemWrapper>
147-
<Head className=" space-y-2">
148-
<Flex className="justify-between items-center">
149-
<div className="flex">
150-
<img
151-
width="20px"
152-
height="20px"
153-
className="ml-4px"
154-
src={spaceIcon}
155-
alt=""
156-
/>
157-
<Dot />
158-
<Type>{EventTypeName[type]}</Type>
159-
</div>
160-
{status}
161-
</Flex>
162-
{content && (
163-
<a className="hover:underline" href={href}>
164-
<MarkDown
165-
content={content}
166-
plugins={[renderMentionIdentityUserPlugin(<IdentityOrAddr />)]}
167-
maxLines={2}
168-
markedOptions={{
169-
breaks: true,
170-
}}
171-
/>
172-
</a>
173-
)}
45+
<div className="group bg-fillBgPrimary p-6 border border-strokeBorderDefault shadow-shadowCardDefault">
46+
<NotificationItemHeader data={data} onMarkAsRead={onMarkAsRead} />
47+
{content && (
48+
<a className="hover:underline" href={href}>
49+
<MarkDown
50+
content={content}
51+
plugins={[renderMentionIdentityUserPlugin(<IdentityOrAddr />)]}
52+
maxLines={2}
53+
markedOptions={{
54+
breaks: true,
55+
}}
56+
/>
57+
</a>
58+
)}
59+
<NotificationItemFooter data={data} />
60+
</div>
61+
);
62+
}
63+
64+
function NotificationItemHeader({ onMarkAsRead, data }) {
65+
const { type, read: _read, data: { spaceInfo } = {} } = data;
66+
const [read, setRead] = useState(_read);
67+
68+
function handleMarkAsRead(data) {
69+
onMarkAsRead(data);
70+
setRead(true);
71+
}
72+
73+
const spaceIcon = useSpaceIconUri(spaceInfo);
74+
75+
return (
76+
<Flex className="justify-between items-center pb-3">
77+
<div className="flex">
78+
<img
79+
width="20px"
80+
height="20px"
81+
className="ml-4px"
82+
src={spaceIcon}
83+
alt=""
84+
/>
85+
<Dot />
86+
<div className="text-textSecondary text-sm">{EventTypeName[type]}</div>
87+
</div>
88+
{!read ? (
89+
<button
90+
onClick={() => handleMarkAsRead(data)}
91+
className=" w-5 h-5 flex justify-center items-center"
92+
>
93+
<div className="w-2 h-2 bg-textBrandSecondary max-sm:hidden group-hover:hidden " />
94+
<CheckIcon className="w-4 sm:hidden group-hover:block" />
95+
</button>
96+
) : null}
97+
</Flex>
98+
);
99+
}
100+
101+
function NotificationItemFooter({ data }) {
102+
const { createdAt, data: { space, title, proposalCid } = {} } = data;
174103

175-
<div className="flex md:flex-row flex-col gap-2 justify-between">
176-
<a
177-
href={`/space/${space}/proposal/${proposalCid}`}
178-
className="hover:underline text-xs font-bold overflow-hidden line-clamp-1 "
179-
>
180-
{title}
181-
</a>
182-
<div>
183-
<Time time={createdAt} />
184-
</div>
185-
</div>
186-
</Head>
187-
</NotificationItemWrapper>
104+
return (
105+
<div className="flex md:flex-row flex-col gap-2 justify-between border-t border-fillBgQuaternary pt-3 mt-3">
106+
<a
107+
href={`/space/${space}/proposal/${proposalCid}`}
108+
className="hover:underline text-xs font-bold overflow-hidden line-clamp-1 "
109+
>
110+
{title}
111+
</a>
112+
<div className="text-end">
113+
<Time className="text-xs" time={createdAt} />
114+
</div>
115+
</div>
188116
);
189117
}

0 commit comments

Comments
 (0)