status-im
/
dappconnect-sdks
mirror of https://github.com/status-im/dappconnect-sdks.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(react): pinned message state

This commit is contained in:
Pavel Prichodko 2022-04-06 14:02:24 +02:00
parent f9c8c3f6dd
commit d428554d94
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
2 changed files with 64 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/status-react/src/icons/unpin-icon.tsx Normal file
View File

@ -0,0 +1,29 @@
import React from 'react'
export const UnpinIcon = (props: React.SVGProps<SVGSVGElement>) => {
return (
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3.08929 1.80598C2.8206 1.5377 2.3853 1.53802 2.11701 1.80671C1.84873 2.0754 1.84906 2.5107 2.11774 2.77898L5.43135 6.08761C5.53962 6.19572 5.58546 6.35054 5.56251 6.50182C5.52137 6.77305 5.50004 7.05078 5.50004 7.33348C5.50004 9.99887 7.39603 12.2214 9.91289 12.7261C10.1396 12.7715 10.3125 12.9645 10.3125 13.1957V19.2502C10.3125 19.6298 10.6203 19.9377 11 19.9377C11.3797 19.9377 11.6875 19.6298 11.6875 19.2502V13.1957C11.6875 13.0519 11.7544 12.923 11.8595 12.835C11.9785 12.7355 12.1473 12.7935 12.2571 12.9031L18.6209 19.2574C18.8896 19.5256 19.3249 19.5253 19.5932 19.2566C19.8614 18.9879 19.8611 18.5526 19.5924 18.2844L13.5231 12.2241C13.5224 12.2234 13.5226 12.2222 13.5235 12.2217C13.5244 12.2213 13.5246 12.22 13.5238 12.2193L12.4873 11.1843C12.4864 11.1834 12.485 11.1831 12.4838 11.1836C12.4826 11.1841 12.4812 11.1838 12.4802 11.1828L7.14846 5.85906C7.14754 5.85814 7.14724 5.85676 7.14771 5.85553C7.14818 5.85431 7.14789 5.85293 7.14696 5.852L6.11042 4.81702C6.1097 4.8163 6.10848 4.81649 6.10801 4.81739C6.10754 4.8183 6.10633 4.81849 6.1056 4.81777L3.08929 1.80598ZM9.9675 10.617C10.2639 10.9129 10.042 11.3686 9.64632 11.2312C8.45906 10.8189 7.51835 9.87948 7.10433 8.69303C6.96635 8.2976 7.42173 8.075 7.71809 8.37092L9.9675 10.617Z"
fill="currentColor"
/>
<path
d="M15.125 7.33348C15.125 8.31438 14.7827 9.21532 14.2109 9.9233C14.0512 10.121 14.0483 10.4113 14.2282 10.5909L14.552 10.9143C14.7306 11.0926 15.0214 11.0941 15.1852 10.9022C16.0051 9.94163 16.5 8.69536 16.5 7.33348C16.5 4.29592 14.0376 1.83348 11 1.83348C9.6352 1.83348 8.38646 2.33063 7.42505 3.15371C7.23335 3.31782 7.23537 3.60857 7.41394 3.78688L7.73781 4.11026C7.91767 4.28985 8.20791 4.28651 8.40541 4.12652C9.11412 3.55241 10.0169 3.20848 11 3.20848C13.2782 3.20848 15.125 5.05531 15.125 7.33348Z"
fill="currentColor"
/>
<path
d="M13.6543 6.67765C13.6543 5.91826 13.0602 5.14166 12.3272 4.94307C11.5942 4.74448 11 5.19909 11 5.95848C11 6.71788 11.5942 7.49447 12.3272 7.69307C13.0602 7.89166 13.6543 7.43704 13.6543 6.67765Z"
fill="currentColor"
/>
</svg>
)
}

42
packages/status-react/src/routes/chat/chat-message.tsx
View File

@ -22,6 +22,7 @@ interface Props {
reply?: 'text' | 'image' | 'image-text'
image?: boolean
mention?: boolean
pinned?: boolean
}
const MessageLink = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
@ -42,7 +43,7 @@ const MessageLink = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
}
export const ChatMessage = (props: Props) => {
const { reply, image, mention } = props
const { reply, image, mention, pinned } = props
const { dispatch } = useChatState()
@ -50,7 +51,7 @@ export const ChatMessage = (props: Props) => {
<>
{reply && <MessageReply reply={reply} />}
<ContextMenuTrigger>
<Wrapper mention={mention}>
<Wrapper mention={mention} pinned={pinned}>
<div>
<DropdownMenuTrigger>
<button type="button">
@ -150,11 +151,19 @@ export const ChatMessage = (props: Props) => {
<PencilIcon />
</IconButton>
</Tooltip>
<Tooltip label="Pin">
<IconButton label="Pin message" intent="info" color="gray">
<PinIcon />
</IconButton>
</Tooltip>
{pinned ? (
<Tooltip label="Unpin">
<IconButton label="Unpin message" intent="info" color="gray">
<UnpinIcon />
</IconButton>
</Tooltip>
) : (
<Tooltip label="Pin">
<IconButton label="Pin message" intent="info" color="gray">
<PinIcon />
</IconButton>
</Tooltip>
)}
<Tooltip label="Delete">
<IconButton label="Delete message" intent="danger" color="gray">
<TrashIcon />
@ -268,6 +277,25 @@ const Wrapper = styled('div', {
},
},
},
pinned: {
true: {
background: '$pin-3',
'&:hover, &[data-open="true"]': {
background: '$pin-2',
},
'&::before': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
width: 3,
background: '$pin-1',
},
},
},
},
})