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

Add channel menu (#104) 

* Add channel menu

* Clear notification

* Update clear notifications
This commit is contained in:
Maria Rushkova 2021-10-29 17:45:47 +02:00 committed by GitHub
parent b8b3d23741
commit d697346a5d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 315 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/react-chat/src/components/Chat/ChatBody.tsx
View File

@ -9,7 +9,9 @@ import { CommunityData } from "../../models/CommunityData";
import { Channel } from "../Channels/Channel";
import { EmptyChannel } from "../Channels/EmptyChannel";
import { Community } from "../Community";
import { ChannelMenu } from "../Form/ChannelMenu";
import { MembersIcon } from "../Icons/MembersIcon";
import { MoreIcon } from "../Icons/MoreIcon";
import { NarrowChannels } from "../NarrowMode/NarrowChannels";
import { NarrowMembers } from "../NarrowMode/NarrowMembers";
import { CommunitySkeleton } from "../Skeleton/CommunitySkeleton";
@ -54,6 +56,7 @@ export function ChatBody({
const narrow = useNarrow();
const [showChannelsList, setShowChannelsList] = useState(false);
const [showMembersList, setShowMembersList] = useState(false);
const [showChannelMenu, setShowChannelMenu] = useState(false);
const className = useMemo(() => (narrow ? "narrow" : ""), [narrow]);
const switchChannelList = useCallback(() => {
@ -101,17 +104,28 @@ export function ChatBody({
)}
</ChannelWrapper>
<MenuWrapper>
{!narrow && (
<MemberBtn
onClick={narrow ? () => switchMemberList() : onClick}
className={
(showMembers && !narrow) || (showMembersList && narrow)
? "active"
: ""
}
onClick={onClick}
className={showMembers && !narrow ? "active" : ""}
>
<MembersIcon />
</MemberBtn>
)}
<MoreBtn onClick={() => setShowChannelMenu(!showChannelMenu)}>
<MoreIcon />
</MoreBtn>
</MenuWrapper>
{!community && <Loading />}
{showChannelMenu && (
<ChannelMenu
channel={channel}
messages={messages}
switchMemberList={switchMemberList}
setShowChannelMenu={setShowChannelMenu}
/>
)}
</ChatTopbar>
{messenger && community ? (
<>
@ -220,12 +234,33 @@ const CommunityWrap = styled.div`
}
`;
const MenuWrapper = styled.div`
display: flex;
align-items: center;
`;
const MemberBtn = styled.button`
width: 32px;
height: 32px;
border-radius: 8px;
padding: 0;
margin-top: 12px;
&:hover {
background: ${({ theme }) => theme.border};
}
&:active,
&.active {
background: ${({ theme }) => theme.inputColor};
}
`;
const MoreBtn = styled.button`
width: 32px;
height: 32px;
border-radius: 8px;
padding: 0;
margin: 0 8px;
&:hover {
background: ${({ theme }) => theme.border};

153
packages/react-chat/src/components/Form/ChannelMenu.tsx Normal file
View File

@ -0,0 +1,153 @@
import React from "react";
import styled from "styled-components";
import { useMessengerContext } from "../../contexts/messengerProvider";
import { useNarrow } from "../../contexts/narrowProvider";
import { ChannelData } from "../../models/ChannelData";
import { ChatMessage } from "../../models/ChatMessage";
import { textSmallStyles } from "../Text";
interface ChannelMenuProps {
channel: ChannelData;
messages: ChatMessage[];
switchMemberList: () => void;
setShowChannelMenu: (val: boolean) => void;
}
export const ChannelMenu = ({
channel,
messages,
switchMemberList,
setShowChannelMenu,
}: ChannelMenuProps) => {
const narrow = useNarrow();
const { clearNotifications } = useMessengerContext();
return (
<MenuBlock>
<MenuList>
{narrow && (
<MenuItem
onClick={() => {
switchMemberList();
setShowChannelMenu(false);
}}
>
<svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M9.5012 8.81038C9.6626 8.72884 9.8625 8.77133 9.98065 8.90821C10.4697 9.47475 11.193 9.83333 12.0001 9.83333C13.4729 9.83333 14.6668 8.63943 14.6668 7.16667C14.6668 5.69391 13.4729 4.5 12.0001 4.5C11.8043 4.5 11.6134 4.52111 11.4296 4.56118C11.253 4.59968 11.0675 4.51392 10.9871 4.35205C10.4417 3.25437 9.30903 2.5 8.00016 2.5C6.6913 2.5 5.55862 3.25438 5.01322 4.35206C4.93279 4.51393 4.74735 4.59968 4.57074 4.56118C4.38691 4.52111 4.196 4.5 4.00016 4.5C2.5274 4.5 1.3335 5.69391 1.3335 7.16667C1.3335 8.63943 2.5274 9.83333 4.00016 9.83333C4.80729 9.83333 5.53066 9.47475 6.01966 8.90821C6.13781 8.77132 6.33772 8.72884 6.49911 8.81037C6.95024 9.03828 7.46021 9.16667 8.00016 9.16667C8.54012 9.16667 9.05008 9.03828 9.5012 8.81038ZM10.3335 5.83333C10.3335 7.122 9.28883 8.16667 8.00016 8.16667C6.7115 8.16667 5.66683 7.122 5.66683 5.83333C5.66683 4.54467 6.7115 3.5 8.00016 3.5C9.28883 3.5 10.3335 4.54467 10.3335 5.83333ZM10.6905 7.80176C10.6082 7.91411 10.5901 8.06636 10.6746 8.17708C10.9791 8.57597 11.4596 8.83333 12.0001 8.83333C12.9206 8.83333 13.6668 8.08714 13.6668 7.16667C13.6668 6.24619 12.9206 5.5 12.0001 5.5C11.8289 5.5 11.6637 5.52583 11.5082 5.57381C11.3976 5.60792 11.3335 5.71762 11.3335 5.83333C11.3335 6.56962 11.0948 7.25016 10.6905 7.80176ZM4.49218 5.57381C4.33666 5.52583 4.17143 5.5 4.00016 5.5C3.07969 5.5 2.3335 6.24619 2.3335 7.16667C2.3335 8.08714 3.07969 8.83333 4.00016 8.83333C4.54075 8.83333 5.02123 8.57596 5.32574 8.17707C5.41026 8.06635 5.39216 7.9141 5.30982 7.80175C4.90555 7.25015 4.66683 6.56962 4.66683 5.83333C4.66683 5.71763 4.60274 5.60793 4.49218 5.57381Z"
/>
<path d="M3.43173 14.5246C3.68748 14.5885 3.94646 14.4427 4.05591 14.2029C4.73877 12.7066 6.24803 11.6667 8.00019 11.6667C9.77912 11.6667 11.3077 12.7386 11.9752 14.2718C12.0861 14.5265 12.3654 14.6775 12.6306 14.5947C12.8925 14.5128 13.0416 14.2337 12.9376 13.9797C12.1414 12.0359 10.2307 10.6667 8.00019 10.6667C5.80286 10.6667 3.9159 11.9955 3.09905 13.8934C2.98436 14.1599 3.15026 14.4542 3.43173 14.5246Z" />
</svg>
<MenuText>View members</MenuText>
</MenuItem>
)}
<MenuItem onClick={() => channel.isMuted === true}>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.1873 12.6668C9.96313 12.6668 9.80205 12.8855 9.82292 13.1087C9.82962 13.1804 9.83328 13.2553 9.83328 13.3335C9.83328 14.2594 9.02904 15.1668 7.99995 15.1668C6.97085 15.1668 6.16662 14.2594 6.16662 13.3335C6.16662 13.2553 6.17028 13.1804 6.17698 13.1087C6.19784 12.8855 6.03677 12.6668 5.81257 12.6668H3.68068C2.52316 12.6668 1.91546 11.2931 2.6941 10.4366L3.47867 9.57357C3.81915 9.19905 4.046 8.73536 4.13273 8.23669L4.87637 3.96073C5.14048 2.44212 6.45854 1.3335 7.99995 1.3335C9.54136 1.3335 10.8594 2.44211 11.1235 3.96073L11.8672 8.23668C11.9539 8.73535 12.1808 9.19905 12.5212 9.57357L13.3058 10.4366C14.0844 11.2931 13.4767 12.6668 12.3192 12.6668H10.1873ZM7.35483 12.6857L7.35418 12.6864L7.35935 12.6811L7.36097 12.6794C7.3618 12.6785 7.36222 12.678 7.36227 12.678C7.36253 12.6777 7.36229 12.6779 7.36227 12.678L7.36097 12.6794C7.36831 12.6717 7.37871 12.6668 7.38931 12.6668H8.61059C8.62119 12.6668 8.63124 12.6714 8.63858 12.6791C8.64051 12.6813 8.64525 12.687 8.65203 12.696C8.66736 12.7164 8.69261 12.7535 8.7194 12.8071C8.77216 12.9126 8.83328 13.0865 8.83328 13.3335C8.83328 13.7409 8.44361 14.1668 7.99995 14.1668C7.55628 14.1668 7.16662 13.7409 7.16662 13.3335C7.16662 13.0865 7.22773 12.9126 7.2805 12.8071C7.30729 12.7535 7.33254 12.7164 7.34787 12.696C7.35465 12.687 7.35905 12.6816 7.36097 12.6794L7.35935 12.6811L7.35811 12.6824L7.35603 12.6845L7.35483 12.6857ZM3.43404 11.1093L4.21861 10.2462C4.68676 9.73127 4.99869 9.0937 5.11794 8.40803L5.86158 4.13207C6.04239 3.09244 6.94472 2.3335 7.99995 2.3335C9.05518 2.3335 9.95751 3.09244 10.1383 4.13207L10.882 8.40803C11.0012 9.0937 11.3131 9.73127 11.7813 10.2462L12.5659 11.1093C12.7605 11.3234 12.6086 11.6668 12.3192 11.6668H3.68068C3.3913 11.6668 3.23938 11.3234 3.43404 11.1093Z"
/>
</svg>
<MenuText>Mute Chat</MenuText>
</MenuItem>
<MenuItem onClick={() => clearNotifications(channel.id)}>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M11.0826 5.61085C11.2358 5.38108 11.1737 5.07065 10.9439 4.91747C10.7142 4.7643 10.4037 4.82638 10.2506 5.05615L6.58887 10.5487L5.02014 8.97994C4.82488 8.78468 4.50829 8.78468 4.31303 8.97994C4.11777 9.17521 4.11777 9.49179 4.31303 9.68705L6.31303 11.687C6.41895 11.793 6.56679 11.8458 6.71585 11.8311C6.86492 11.8163 6.99952 11.7355 7.08261 11.6108L11.0826 5.61085Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.99992 14.6668C4.31802 14.6668 1.33325 11.6821 1.33325 8.00016C1.33325 4.31826 4.31802 1.3335 7.99992 1.3335C11.6818 1.3335 14.6666 4.31826 14.6666 8.00016C14.6666 11.6821 11.6818 14.6668 7.99992 14.6668ZM7.99992 13.6668C4.8703 13.6668 2.33325 11.1298 2.33325 8.00016C2.33325 4.87055 4.8703 2.3335 7.99992 2.3335C11.1295 2.3335 13.6666 4.87055 13.6666 8.00016C13.6666 11.1298 11.1295 13.6668 7.99992 13.6668Z"
/>
</svg>
<MenuText>Mark as Read</MenuText>
</MenuItem>
<MenuItem onClick={() => messages.length === 0}>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M10.6868 5.31319C10.8821 5.50846 10.8821 5.82504 10.6868 6.0203L8.94269 7.76442C8.81251 7.89459 8.81251 8.10565 8.94269 8.23582L10.6868 9.97994C10.8821 10.1752 10.8821 10.4918 10.6868 10.687C10.4915 10.8823 10.175 10.8823 9.9797 10.687L8.23558 8.94293C8.10541 8.81276 7.89435 8.81276 7.76417 8.94293L6.02014 10.687C5.82488 10.8822 5.50829 10.8822 5.31303 10.687C5.11777 10.4917 5.11777 10.1751 5.31303 9.97986L7.05707 8.23582C7.18724 8.10565 7.18724 7.89459 7.05707 7.76442L5.31303 6.02038C5.11777 5.82512 5.11777 5.50854 5.31303 5.31328C5.50829 5.11801 5.82488 5.11801 6.02014 5.31328L7.76418 7.05731C7.89435 7.18749 8.10541 7.18749 8.23558 7.05731L9.9797 5.31319C10.175 5.11793 10.4915 5.11793 10.6868 5.31319Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.99992 14.6668C11.6818 14.6668 14.6666 11.6821 14.6666 8.00016C14.6666 4.31826 11.6818 1.3335 7.99992 1.3335C4.31802 1.3335 1.33325 4.31826 1.33325 8.00016C1.33325 11.6821 4.31802 14.6668 7.99992 14.6668ZM7.99992 13.6668C11.1295 13.6668 13.6666 11.1298 13.6666 8.00016C13.6666 4.87055 11.1295 2.3335 7.99992 2.3335C4.87031 2.3335 2.33325 4.87055 2.33325 8.00016C2.33325 11.1298 4.87031 13.6668 7.99992 13.6668Z"
/>
</svg>
<MenuText>Clear History</MenuText>
</MenuItem>
</MenuList>
</MenuBlock>
);
};
const MenuBlock = styled.div`
width: 207px;
background: ${({ theme }) => theme.bodyBackgroundColor};
box-shadow: 0px 2px 4px rgba(0, 34, 51, 0.16),
0px 4px 12px rgba(0, 34, 51, 0.08);
borderradius: 8px;
padding: 8px 0;
position: absolute;
right: 8px;
top: calc(100% - 8px);
z-index: 2;
`;
const MenuList = styled.ul`
list-style: none;
`;
const MenuItem = styled.li`
width: 100%;
display: flex;
align-items: center;
padding: 8px 14px;
cursor: pointer;
color: ${({ theme }) => theme.primary};
&:hover {
background: ${({ theme }) => theme.tertiary};
color: ${({ theme }) => theme.bodyBackgroundColor};
}
& > svg {
fill: ${({ theme }) => theme.tertiary};
}
&:hover > svg {
fill: ${({ theme }) => theme.bodyBackgroundColor};
}
`;
const MenuText = styled.span`
margin-left: 6px;
${textSmallStyles}
`;

31
packages/react-chat/src/components/Icons/CheckIcon.tsx Normal file
View File

@ -0,0 +1,31 @@
import React from "react";
import styled from "styled-components";
export const CheckIcon = () => {
return (
<Icon
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M11.0826 5.61085C11.2358 5.38108 11.1737 5.07065 10.9439 4.91747C10.7142 4.7643 10.4037 4.82638 10.2506 5.05615L6.58887 10.5487L5.02014 8.97994C4.82488 8.78468 4.50829 8.78468 4.31303 8.97994C4.11777 9.17521 4.11777 9.49179 4.31303 9.68705L6.31303 11.687C6.41895 11.793 6.56679 11.8458 6.71585 11.8311C6.86492 11.8163 6.99952 11.7355 7.08261 11.6108L11.0826 5.61085Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.99992 14.6668C4.31802 14.6668 1.33325 11.6821 1.33325 8.00016C1.33325 4.31826 4.31802 1.3335 7.99992 1.3335C11.6818 1.3335 14.6666 4.31826 14.6666 8.00016C14.6666 11.6821 11.6818 14.6668 7.99992 14.6668ZM7.99992 13.6668C4.8703 13.6668 2.33325 11.1298 2.33325 8.00016C2.33325 4.87055 4.8703 2.3335 7.99992 2.3335C11.1295 2.3335 13.6666 4.87055 13.6666 8.00016C13.6666 11.1298 11.1295 13.6668 7.99992 13.6668Z"
/>
</Icon>
);
};
const Icon = styled.svg`
& > path {
fill: ${({ theme }) => theme.tertiary};
}
&:hover > path {
fill: ${({ theme }) => theme.bodyBackgroundColor};
}
`;

31
packages/react-chat/src/components/Icons/ClearIcon.tsx Normal file
View File

@ -0,0 +1,31 @@
import React from "react";
import styled from "styled-components";
export const ClearIcon = () => {
return (
<Icon
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M10.6868 5.31319C10.8821 5.50846 10.8821 5.82504 10.6868 6.0203L8.94269 7.76442C8.81251 7.89459 8.81251 8.10565 8.94269 8.23582L10.6868 9.97994C10.8821 10.1752 10.8821 10.4918 10.6868 10.687C10.4915 10.8823 10.175 10.8823 9.9797 10.687L8.23558 8.94293C8.10541 8.81276 7.89435 8.81276 7.76417 8.94293L6.02014 10.687C5.82488 10.8822 5.50829 10.8822 5.31303 10.687C5.11777 10.4917 5.11777 10.1751 5.31303 9.97986L7.05707 8.23582C7.18724 8.10565 7.18724 7.89459 7.05707 7.76442L5.31303 6.02038C5.11777 5.82512 5.11777 5.50854 5.31303 5.31328C5.50829 5.11801 5.82488 5.11801 6.02014 5.31328L7.76418 7.05731C7.89435 7.18749 8.10541 7.18749 8.23558 7.05731L9.9797 5.31319C10.175 5.11793 10.4915 5.11793 10.6868 5.31319Z" />
<path
fillRule="evenodd"
clipRule="evenodd"
d="M7.99992 14.6668C11.6818 14.6668 14.6666 11.6821 14.6666 8.00016C14.6666 4.31826 11.6818 1.3335 7.99992 1.3335C4.31802 1.3335 1.33325 4.31826 1.33325 8.00016C1.33325 11.6821 4.31802 14.6668 7.99992 14.6668ZM7.99992 13.6668C11.1295 13.6668 13.6666 11.1298 13.6666 8.00016C13.6666 4.87055 11.1295 2.3335 7.99992 2.3335C4.87031 2.3335 2.33325 4.87055 2.33325 8.00016C2.33325 11.1298 4.87031 13.6668 7.99992 13.6668Z"
/>
</Icon>
);
};
const Icon = styled.svg`
& > path {
fill: ${({ theme }) => theme.tertiary};
}
&:hover > path {
fill: ${({ theme }) => theme.bodyBackgroundColor};
}
`;

24
packages/react-chat/src/components/Icons/MoreIcon.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from "react";
import styled from "styled-components";
export const MoreIcon = () => {
return (
<Icon
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M7 12C7 13.1046 6.10457 14 5 14C3.89543 14 3 13.1046 3 12C3 10.8954 3.89543 10 5 10C6.10457 10 7 10.8954 7 12Z" />
<path d="M14 12C14 13.1046 13.1046 14 12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12Z" />
<path d="M19 14C20.1046 14 21 13.1046 21 12C21 10.8954 20.1046 10 19 10C17.8954 10 17 10.8954 17 12C17 13.1046 17.8954 14 19 14Z" />
</Icon>
);
};
const Icon = styled.svg`
& > path {
fill: ${({ theme }) => theme.primary};
}
`;

30
packages/react-chat/src/components/Icons/MuteIcon.tsx Normal file
View File

@ -0,0 +1,30 @@
import React from "react";
import styled from "styled-components";
export const MuteIcon = () => {
return (
<Icon
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M10.1873 12.6668C9.96313 12.6668 9.80205 12.8855 9.82292 13.1087C9.82962 13.1804 9.83328 13.2553 9.83328 13.3335C9.83328 14.2594 9.02904 15.1668 7.99995 15.1668C6.97085 15.1668 6.16662 14.2594 6.16662 13.3335C6.16662 13.2553 6.17028 13.1804 6.17698 13.1087C6.19784 12.8855 6.03677 12.6668 5.81257 12.6668H3.68068C2.52316 12.6668 1.91546 11.2931 2.6941 10.4366L3.47867 9.57357C3.81915 9.19905 4.046 8.73536 4.13273 8.23669L4.87637 3.96073C5.14048 2.44212 6.45854 1.3335 7.99995 1.3335C9.54136 1.3335 10.8594 2.44211 11.1235 3.96073L11.8672 8.23668C11.9539 8.73535 12.1808 9.19905 12.5212 9.57357L13.3058 10.4366C14.0844 11.2931 13.4767 12.6668 12.3192 12.6668H10.1873ZM7.35483 12.6857L7.35418 12.6864L7.35935 12.6811L7.36097 12.6794C7.3618 12.6785 7.36222 12.678 7.36227 12.678C7.36253 12.6777 7.36229 12.6779 7.36227 12.678L7.36097 12.6794C7.36831 12.6717 7.37871 12.6668 7.38931 12.6668H8.61059C8.62119 12.6668 8.63124 12.6714 8.63858 12.6791C8.64051 12.6813 8.64525 12.687 8.65203 12.696C8.66736 12.7164 8.69261 12.7535 8.7194 12.8071C8.77216 12.9126 8.83328 13.0865 8.83328 13.3335C8.83328 13.7409 8.44361 14.1668 7.99995 14.1668C7.55628 14.1668 7.16662 13.7409 7.16662 13.3335C7.16662 13.0865 7.22773 12.9126 7.2805 12.8071C7.30729 12.7535 7.33254 12.7164 7.34787 12.696C7.35465 12.687 7.35905 12.6816 7.36097 12.6794L7.35935 12.6811L7.35811 12.6824L7.35603 12.6845L7.35483 12.6857ZM3.43404 11.1093L4.21861 10.2462C4.68676 9.73127 4.99869 9.0937 5.11794 8.40803L5.86158 4.13207C6.04239 3.09244 6.94472 2.3335 7.99995 2.3335C9.05518 2.3335 9.95751 3.09244 10.1383 4.13207L10.882 8.40803C11.0012 9.0937 11.3131 9.73127 11.7813 10.2462L12.5659 11.1093C12.7605 11.3234 12.6086 11.6668 12.3192 11.6668H3.68068C3.3913 11.6668 3.23938 11.3234 3.43404 11.1093Z"
/>
</Icon>
);
};
const Icon = styled.svg`
& > path {
fill: ${({ theme }) => theme.tertiary};
}
&:hover > path {
fill: ${({ theme }) => theme.bodyBackgroundColor};
}
`;