Fix narrow topbar (#47)

This commit is contained in:
Maria Rushkova 2021-10-06 18:02:59 +02:00 committed by GitHub
parent e4be0447e7
commit c2b174ab53
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 76 deletions

View File

@ -54,8 +54,8 @@ export function ChatBody({
const switchChannelList = useCallback(() => {
setShowMembersList(false);
setShowChannelsList(true);
}, []);
setShowChannelsList(!showChannelsList);
}, [showChannelsList]);
const switchMemberList = useCallback(() => {
setShowChannelsList(false);
@ -64,7 +64,12 @@ export function ChatBody({
return (
<ChatBodyWrapper theme={theme} className={className}>
<ChatTopbar>
<ChatTopbar
className={
narrow && (showChannelsList || showMembersList) ? "narrow" : ""
}
theme={theme}
>
<ChannelWrapper className={className}>
{(showCommunity || narrow) && (
<CommunityWrap theme={theme} className={className}>
@ -152,10 +157,19 @@ const ChannelWrapper = styled.div`
}
`;
const ChatTopbar = styled.div`
const ChatTopbar = styled.div<ThemeProps>`
display: flex;
justify-content: space-between;
padding: 5px 8px;
background: ${({ theme }) => theme.bodyBackgroundColor};
&.narrow {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 2;
}
`;
const CommunityWrap = styled.div<ThemeProps>`

View File

@ -1,31 +0,0 @@
import React from "react";
import styled from "styled-components";
import { Theme } from "../../styles/themes";
interface ThemeProps {
theme: Theme;
}
export const BackIcon = ({ theme }: ThemeProps) => {
return (
<Icon
width="18"
height="14"
viewBox="0 0 18 14"
xmlns="http://www.w3.org/2000/svg"
theme={theme}
>
<path
d="M7.53033 1.53033C7.82322 1.23744 7.82322 0.762563 7.53033 0.46967C7.23744 0.176777 6.76256 0.176777 6.46967 0.46967L0.46967 6.46967C0.176777 6.76256 0.176777 7.23744 0.46967 7.53033L6.46967 13.5303C6.76256 13.8232 7.23744 13.8232 7.53033 13.5303C7.82322 13.2374 7.82322 12.7626 7.53033 12.4697L3.66421 8.60355C3.34923 8.28857 3.57232 7.75 4.01777 7.75H17C17.4142 7.75 17.75 7.41421 17.75 7C17.75 6.58579 17.4142 6.25 17 6.25H4.01777C3.57231 6.25 3.34923 5.71143 3.66421 5.39645L7.53033 1.53033Z"
fill="black"
/>
</Icon>
);
};
const Icon = styled.svg<ThemeProps>`
& > path {
fill: ${({ theme }) => theme.primary};
}
`;

View File

@ -26,12 +26,7 @@ export function NarrowChannels({
}: NarrowChannelsProps) {
return (
<ListWrapper theme={theme}>
<NarrowTopbar
theme={theme}
list="Channels"
community={community}
onClick={() => setShowChannels(false)}
/>
<NarrowTopbar theme={theme} list="Channels" community={community} />
<ChannelList>
{channels.map((channel) => (
<Channel
@ -61,6 +56,6 @@ interface ThemeProps {
}
const ListWrapper = styled.div<ThemeProps>`
padding: 18px;
padding: 82px 18px 18px;
background: ${({ theme }) => theme.bodyBackgroundColor};
`;

View File

@ -26,7 +26,6 @@ export function NarrowMembers({
theme={theme}
list="Community members"
community={community.name}
onClick={() => setShowMembersList(false)}
/>
<MembersList
theme={theme}
@ -43,6 +42,6 @@ interface ThemeProps {
}
const ListWrapper = styled.div<ThemeProps>`
padding: 18px;
padding: 82px 18px 18px;
background: ${({ theme }) => theme.bodyBackgroundColor};
`;

View File

@ -2,31 +2,18 @@ import React from "react";
import styled from "styled-components";
import { Theme } from "../../styles/themes";
import { BackIcon } from "../Icons/BackIcon";
interface NarrowTopbarProps {
theme: Theme;
list: string;
community: string;
onClick: () => void;
}
export function NarrowTopbar({
theme,
list,
community,
onClick,
}: NarrowTopbarProps) {
export function NarrowTopbar({ theme, list, community }: NarrowTopbarProps) {
return (
<TopbarWrapper theme={theme}>
<GoBackBtn onClick={onClick}>
<BackIcon theme={theme} />
</GoBackBtn>
<HeadingWrapper>
<Heading theme={theme}>{list}</Heading>
<SubHeading theme={theme}>{community}</SubHeading>
</HeadingWrapper>
<Heading theme={theme}>{list}</Heading>
<SubHeading theme={theme}>{community}</SubHeading>
</TopbarWrapper>
);
}
@ -38,17 +25,13 @@ interface ThemeProps {
const TopbarWrapper = styled.div<ThemeProps>`
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
background-color: ${({ theme }) => theme.bodyBackgroundColor};
padding: 14px 0;
position: relative;
`;
const HeadingWrapper = styled.div`
display: flex;
flex-direction: column;
text-align: center;
`;
const Heading = styled.p<ThemeProps>`
font-weight: 500;
color: ${({ theme }) => theme.primary};
@ -58,13 +41,3 @@ const SubHeading = styled.p<ThemeProps>`
font-weight: 500;
color: ${({ theme }) => theme.secondary};
`;
const GoBackBtn = styled.button`
width: 24px;
height: 24px;
margin-right: 18px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
`;