From 2519181953296b95bf963a208d07367a05659be4 Mon Sep 17 00:00:00 2001 From: Maria Rushkova <66270386+mrushkova@users.noreply.github.com> Date: Wed, 26 Jan 2022 10:32:04 +0100 Subject: [PATCH] Channel muting (#203) --- .../src/components/Channels/Channel.tsx | 70 ++++++++++++++----- .../src/components/Channels/EmptyChannel.tsx | 12 ++-- .../src/components/Chat/ChatTopbar.tsx | 3 +- .../src/components/Form/Tooltip.tsx | 5 ++ .../src/components/Icons/GroupIcon.tsx | 6 +- .../src/components/Icons/MutedIcon.tsx | 16 ++--- .../src/components/Icons/TipIcon.tsx | 5 ++ .../src/components/Messages/MessagesList.tsx | 8 ++- 8 files changed, 89 insertions(+), 36 deletions(-) diff --git a/packages/react-chat/src/components/Channels/Channel.tsx b/packages/react-chat/src/components/Channels/Channel.tsx index 39a32d4b..8e71b19a 100644 --- a/packages/react-chat/src/components/Channels/Channel.tsx +++ b/packages/react-chat/src/components/Channels/Channel.tsx @@ -5,6 +5,7 @@ import { useMessengerContext } from "../../contexts/messengerProvider"; import { useNarrow } from "../../contexts/narrowProvider"; import { ChannelData } from "../../models/ChannelData"; import { ChannelMenu } from "../Form/ChannelMenu"; +import { Tooltip } from "../Form/Tooltip"; import { GroupIcon } from "../Icons/GroupIcon"; import { MutedIcon } from "../Icons/MutedIcon"; import { textMediumStyles } from "../Text"; @@ -13,9 +14,11 @@ import { ChannelIcon } from "./ChannelIcon"; function RenderChannelName({ channel, + activeView, className, }: { channel: ChannelData; + activeView?: boolean; className?: string; }) { const { activeChannel } = useMessengerContext(); @@ -23,14 +26,16 @@ function RenderChannelName({ case "group": return (
- + {!activeView && ( + + )} {` ${channel.name}`}
); case "channel": return
{`# ${channel.name}`}
; case "dm": - return
{channel.name}
; + return
{channel.name.slice(0, 20)}
; } } @@ -62,15 +67,24 @@ export function Channel({ onClick={onClick} id={!activeView ? `${channel.id + "contextMenu"}` : ""} > - + - - + + + + {channel?.isMuted && activeView && !narrow && ( + (channel.isMuted = !channel.isMuted)}> + + + + )} + {activeView && ( {channel.description} )} @@ -107,34 +121,43 @@ const ChannelWrapper = styled.div<{ isNarrow?: boolean }>` } &:hover { - background-color: ${({ theme }) => theme.border}; + background-color: ${({ theme, isNarrow }) => isNarrow && theme.border}; } `; -export const ChannelInfo = styled.div` +export const ChannelInfo = styled.div<{ activeView?: boolean }>` display: flex; - align-items: center; - overflow: hidden; + align-items: ${({ activeView }) => (activeView ? "flex-start" : "center")}; + overflow-x: hidden; `; -const ChannelTextInfo = styled.div` +const ChannelTextInfo = styled.div<{ activeView?: boolean }>` display: flex; flex-direction: column; text-overflow: ellipsis; - overflow: hidden; + overflow-x: hidden; white-space: nowrap; + padding: ${({ activeView }) => activeView && "0 24px 24px 0"}; +`; + +const ChannelNameWrapper = styled.div` + display: flex; + align-items: center; `; export const ChannelName = styled(RenderChannelName)<{ muted?: boolean; notified?: boolean; active?: boolean; + activeView?: boolean; }>` font-weight: ${({ notified, muted, active }) => notified && !muted && !active ? "600" : "500"}; opacity: ${({ notified, muted, active }) => muted ? "0.4" : notified || active ? "1.0" : "0.7"}; color: ${({ theme }) => theme.primary}; + margin-right: ${({ muted, activeView }) => + muted && activeView ? "8px" : ""}; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; @@ -166,3 +189,18 @@ const NotificationBagde = styled.div` justify-content: center; flex-shrink: 0; `; + +const MutedBtn = styled.button` + padding: 0; + border: none; + outline: none; + position: relative; + + &:hover > svg { + fill-opacity: 1; + } + + &:hover > div { + visibility: visible; + } +`; diff --git a/packages/react-chat/src/components/Channels/EmptyChannel.tsx b/packages/react-chat/src/components/Channels/EmptyChannel.tsx index 948068a5..e7c94817 100644 --- a/packages/react-chat/src/components/Channels/EmptyChannel.tsx +++ b/packages/react-chat/src/components/Channels/EmptyChannel.tsx @@ -4,6 +4,7 @@ import styled from "styled-components"; import { useIdentity } from "../../contexts/identityProvider"; import { useMessengerContext } from "../../contexts/messengerProvider"; +import { useNarrow } from "../../contexts/narrowProvider"; import { ChannelData } from "../../models/ChannelData"; import { textMediumStyles } from "../Text"; @@ -64,8 +65,10 @@ type EmptyChannelProps = { }; export function EmptyChannel({ channel }: EmptyChannelProps) { + const narrow = useNarrow(); + return ( - + {" "} @@ -83,6 +86,10 @@ const Wrapper = styled.div` flex-direction: column; align-items: center; margin-bottom: 32px; + + &.wide { + margin-top: 24px; + } `; const ChannelInfoEmpty = styled(ChannelInfo)` @@ -103,9 +110,6 @@ const ChannelNameEmpty = styled(ChannelName)` font-size: 22px; line-height: 30px; margin-bottom: 16px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; `; const EmptyText = styled.p` diff --git a/packages/react-chat/src/components/Chat/ChatTopbar.tsx b/packages/react-chat/src/components/Chat/ChatTopbar.tsx index a161828e..d93e1a89 100644 --- a/packages/react-chat/src/components/Chat/ChatTopbar.tsx +++ b/packages/react-chat/src/components/Chat/ChatTopbar.tsx @@ -127,7 +127,7 @@ export function ChatTopbar({ const Topbar = styled.div` display: flex; justify-content: space-between; - align-items: center; + align-items: flex-start; padding: 5px 8px; background: ${({ theme }) => theme.bodyBackgroundColor}; position: relative; @@ -177,6 +177,7 @@ const CommunityWrap = styled.div` const MenuWrapper = styled.div` display: flex; align-items: center; + padding: 8px 0; `; export const TopBtn = styled.button` diff --git a/packages/react-chat/src/components/Form/Tooltip.tsx b/packages/react-chat/src/components/Form/Tooltip.tsx index b63ae63e..42489e22 100644 --- a/packages/react-chat/src/components/Form/Tooltip.tsx +++ b/packages/react-chat/src/components/Form/Tooltip.tsx @@ -31,6 +31,11 @@ const TooltipWrapper = styled.div` &.read { left: 18%; } + + &.muted { + top: calc(100% + 8px); + z-index: 10; + } `; const TooltipBlock = styled.div` background: ${({ theme }) => theme.primary}; diff --git a/packages/react-chat/src/components/Icons/GroupIcon.tsx b/packages/react-chat/src/components/Icons/GroupIcon.tsx index c11f793e..6781d101 100644 --- a/packages/react-chat/src/components/Icons/GroupIcon.tsx +++ b/packages/react-chat/src/components/Icons/GroupIcon.tsx @@ -2,10 +2,10 @@ import React from "react"; import styled from "styled-components"; interface GroupIconProps { - activeView?: boolean; + active?: boolean; } -export const GroupIcon = ({ activeView }: GroupIconProps) => { +export const GroupIcon = ({ active }: GroupIconProps) => { return ( { viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" - className={`${activeView && "active"}`} + className={`${active && "active"}`} > diff --git a/packages/react-chat/src/components/Icons/MutedIcon.tsx b/packages/react-chat/src/components/Icons/MutedIcon.tsx index ec476ce5..4435bae5 100644 --- a/packages/react-chat/src/components/Icons/MutedIcon.tsx +++ b/packages/react-chat/src/components/Icons/MutedIcon.tsx @@ -9,20 +9,14 @@ export const MutedIcon = () => { viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" > - - + + ); }; const Icon = styled.svg` - & > path { - fill: ${({ theme }) => theme.primary}; - } + fill: ${({ theme }) => theme.primary}; + fill-opacity: 0.2; + flex-shrink: 0; `; diff --git a/packages/react-chat/src/components/Icons/TipIcon.tsx b/packages/react-chat/src/components/Icons/TipIcon.tsx index 647fb68b..8588c887 100644 --- a/packages/react-chat/src/components/Icons/TipIcon.tsx +++ b/packages/react-chat/src/components/Icons/TipIcon.tsx @@ -30,4 +30,9 @@ const Icon = styled.svg` &.read { left: 62%; } + + &.muted { + top: -8px; + transform: rotate(180deg) translateX(50%); + } `; diff --git a/packages/react-chat/src/components/Messages/MessagesList.tsx b/packages/react-chat/src/components/Messages/MessagesList.tsx index de1ee393..f0b724e3 100644 --- a/packages/react-chat/src/components/Messages/MessagesList.tsx +++ b/packages/react-chat/src/components/Messages/MessagesList.tsx @@ -3,6 +3,7 @@ import styled from "styled-components"; import { useMessengerContext } from "../../contexts/messengerProvider"; import { useModal } from "../../contexts/modalProvider"; +import { useNarrow } from "../../contexts/narrowProvider"; import { useChatScrollHandle } from "../../hooks/useChatScrollHandle"; import { Reply } from "../../hooks/useReply"; import { ChannelData } from "../../models/ChannelData"; @@ -19,6 +20,7 @@ interface MessagesListProps { } export function MessagesList({ setReply, channel }: MessagesListProps) { + const narrow = useNarrow(); const { messages, contacts } = useMessengerContext(); const ref = useRef(null); const loadingMessages = useChatScrollHandle(messages, ref); @@ -49,7 +51,7 @@ export function MessagesList({ setReply, channel }: MessagesListProps) { useEffect(() => (!showLinkModal ? setLink("") : undefined), [showLinkModal]); return ( - + @@ -91,6 +93,10 @@ const MessagesWrapper = styled.div` overflow: auto; padding: 8px 0; + &.wide { + margin-top: -24px; + } + &::-webkit-scrollbar { width: 0; }