From 727197570b8c69395ad690e61fb96dd484c70874 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Fri, 10 Dec 2021 10:19:45 +0100 Subject: [PATCH] Add invitations to activity center (#153) --- .../src/components/ActivityCenter.tsx | 50 +++++++++++++++++-- .../src/components/Buttons/DownloadButton.tsx | 20 +++++++- .../src/components/CommunityIdentity.tsx | 2 +- .../src/components/Icons/CommunityIcon.tsx | 24 +++++++++ packages/react-chat/src/models/Activity.ts | 4 +- 5 files changed, 93 insertions(+), 7 deletions(-) create mode 100644 packages/react-chat/src/components/Icons/CommunityIcon.tsx diff --git a/packages/react-chat/src/components/ActivityCenter.tsx b/packages/react-chat/src/components/ActivityCenter.tsx index 21552ef9..ba2be3cd 100644 --- a/packages/react-chat/src/components/ActivityCenter.tsx +++ b/packages/react-chat/src/components/ActivityCenter.tsx @@ -8,6 +8,7 @@ import { useClickOutside } from "../hooks/useClickOutside"; import { Activity } from "../models/Activity"; import { equalDate } from "../utils/equalDate"; +import { DownloadButton } from "./Buttons/DownloadButton"; import { buttonStyles } from "./Buttons/buttonStyle"; import { Mention } from "./Chat/ChatMessageContent"; import { @@ -21,10 +22,12 @@ import { UserName, UserNameWrapper, } from "./Chat/ChatMessages"; +import { Logo } from "./CommunityIdentity"; import { ContactMenu } from "./Form/ContactMenu"; import { Tooltip } from "./Form/Tooltip"; import { CheckSvg } from "./Icons/CheckIcon"; import { ClearSvg } from "./Icons/ClearIcon"; +import { CommunityIcon } from "./Icons/CommunityIcon"; import { GroupIcon } from "./Icons/GroupIcon"; import { HideIcon } from "./Icons/HideIcon"; import { Icon } from "./Icons/Icon"; @@ -142,6 +145,25 @@ function ActivityMessage({ : ": "} )} + {type === "invitation" && ( + + {`Invited you to join a community `} + + + + {activity.invitation?.icon === undefined && + activity.invitation?.name.slice(0, 1).toUpperCase()} + + {activity.invitation?.name} + + + )} {activity.message?.content && (
{elements.map((el) => el)}
@@ -166,6 +188,12 @@ function ActivityMessage({ )} + {type === "invitation" && ( + + {`To access other communities, `} + + + )} {type === "request" && @@ -211,7 +239,7 @@ function ActivityMessage({ {type === "request" && activity.status === "sent" && ( Sent )} - {type !== "request" && ( + {(type === "mention" || type === "reply") && ( { @@ -263,14 +291,14 @@ export function ActivityCenter({ setShowActivityCenter }: ActivityCenterProps) { return ( - + setFilter("")}>All setFilter("mention")}>Mentions setFilter("reply")}>Replies setFilter("request")}> Contact requests - + theme.secondary}; flex-shrink: 0; + white-space: pre-wrap; ${textMediumStyles} `; @@ -504,3 +538,11 @@ const ReplyWrapper = styled.div` margin-right: 4px; } `; + +const CommunityLogo = styled(Logo)` + width: 16px; + height: 16px; + margin: 0 2px 0 4px; + + ${textSmallStyles} +`; diff --git a/packages/react-chat/src/components/Buttons/DownloadButton.tsx b/packages/react-chat/src/components/Buttons/DownloadButton.tsx index 95979845..9734b6ac 100644 --- a/packages/react-chat/src/components/Buttons/DownloadButton.tsx +++ b/packages/react-chat/src/components/Buttons/DownloadButton.tsx @@ -53,7 +53,9 @@ export const DownloadButton = ({ className }: DownloadButtonProps) => { target="_blank" rel="noopener noreferrer" > - {os ? `Download Status for ${os}` : "Download Status"} + {os + ? `${className === "activity" ? "d" : "D"}ownload Status for ${os}` + : `${className === "activity" ? "d" : "D"}ownload Status`} ); }; @@ -67,4 +69,20 @@ const Link = styled.a` &:hover { background: ${({ theme }) => theme.buttonBgHover}; } + + &.activity { + margin: 0; + padding: 0; + color: ${({ theme }) => theme.secondary}; + font-style: italic; + border-radius: 0; + font-weight: 400; + text-decoration: underline; + background: inherit; + + &:hover { + background: inherit; + color: ${({ theme }) => theme.tertiary}; + } + } `; diff --git a/packages/react-chat/src/components/CommunityIdentity.tsx b/packages/react-chat/src/components/CommunityIdentity.tsx index 445eeb84..1219e9ad 100644 --- a/packages/react-chat/src/components/CommunityIdentity.tsx +++ b/packages/react-chat/src/components/CommunityIdentity.tsx @@ -47,7 +47,7 @@ export const Column = styled.div` align-items: flex-start; `; -const Logo = styled.div` +export const Logo = styled.div` width: 36px; height: 36px; display: flex; diff --git a/packages/react-chat/src/components/Icons/CommunityIcon.tsx b/packages/react-chat/src/components/Icons/CommunityIcon.tsx new file mode 100644 index 00000000..374bf2e5 --- /dev/null +++ b/packages/react-chat/src/components/Icons/CommunityIcon.tsx @@ -0,0 +1,24 @@ +import React from "react"; +import styled from "styled-components"; + +export const CommunityIcon = () => { + return ( + + + + ); +}; + +const Icon = styled.svg` + fill: ${({ theme }) => theme.secondary}; +`; diff --git a/packages/react-chat/src/models/Activity.ts b/packages/react-chat/src/models/Activity.ts index d02113c2..97ff869f 100644 --- a/packages/react-chat/src/models/Activity.ts +++ b/packages/react-chat/src/models/Activity.ts @@ -1,9 +1,10 @@ import { ChannelData } from "./ChannelData"; import { ChatMessage } from "./ChatMessage"; +import { CommunityData } from "./CommunityData"; export type Activity = { id: string; - type: "mention" | "request" | "reply"; + type: "mention" | "request" | "reply" | "invitation"; isRead?: boolean; date: Date; user: string; @@ -13,6 +14,7 @@ export type Activity = { requestType?: "outcome" | "income"; status?: "sent" | "accepted" | "declined" | "blocked"; quote?: ChatMessage; + invitation?: CommunityData; }; export type Activities = {