Add narrow members (#40)

2021-10-06 10:41:07 +02:00 · 2021-10-06 10:41:07 +02:00 · 655399b03d
parent 370f6c65e4
commit 655399b03d
5 changed files with 173 additions and 67 deletions
--- a/packages/react-chat/src/components/Channels.tsx
+++ b/packages/react-chat/src/components/Channels.tsx
@ -90,7 +90,10 @@ export function Channel({

  return (
    <ChannelWrapper
-      className={isActive && !activeView ? "active" : ""}
+      className={
+        (isActive && !activeView) || (isActive && narrow) ? "active" : ""
+      }
+      style={{ width: narrow && activeView ? "calc(100% - 162px)" : "100%" }}
      theme={theme}
      onClick={onClick}
    >
@ -108,7 +111,7 @@ export function Channel({
          <ChannelName
            theme={theme}
            className={
-              isActive
+              isActive || narrow
                ? "active"
                : notification && notification > 0
                ? "notified"
@ -158,6 +161,9 @@ const ChannelDescription = styled.p<ThemeProps>`
  line-height: 16px;
  letter-spacing: 0.1px;
  color: ${({ theme }) => theme.secondary};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 `;

 export const ChannelList = styled.div`
@ -186,11 +192,14 @@ const ChannelWrapper = styled.div<ThemeProps>`
 export const ChannelInfo = styled.div`
  display: flex;
  align-items: center;
+  overflow: hidden;
 `;

 const ChannelTextInfo = styled.div`
  display: flex;
  flex-direction: column;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;

 export const ChannelLogo = styled.div<ThemeProps>`
--- a/packages/react-chat/src/components/Chat/ChatBody.tsx
+++ b/packages/react-chat/src/components/Chat/ChatBody.tsx
@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";

 import { useNarrow } from "../../contexts/narrowProvider";
@ -11,7 +11,7 @@ import { Community } from "../Community";
 import { EmptyChannel } from "../EmptyChannel";
 import { MembersIcon } from "../Icons/MembersIcon";
 import { NarrowChannels } from "../NarrowMode/NarrowChannels";
-import { NarrowTopbar } from "../NarrowMode/NarrowTopbar";
+import { NarrowMembers } from "../NarrowMode/NarrowMembers";

 import { ChatInput } from "./ChatInput";
 import { ChatMessages } from "./ChatMessages";
@ -44,59 +44,78 @@ export function ChatBody({
  activeChannelId,
 }: ChatBodyProps) {
  const narrow = useNarrow();
-  const [showChannelsList, setShowChannels] = useState(false);
+  const [showChannelsList, setShowChannelsList] = useState(false);
  const [showMembersList, setShowMembersList] = useState(false);
+  const className = useMemo(() => (narrow ? "narrow" : ""), [narrow]);
+
+  const switchChannelList = useCallback(() => {
+    setShowMembersList(false);
+    setShowChannelsList(true);
+  }, []);
+
+  const switchMemberList = useCallback(() => {
+    setShowChannelsList(false);
+    setShowMembersList(!showMembersList);
+  }, [showMembersList]);

  return (
-    <ChatBodyWrapper theme={theme}>
+    <ChatBodyWrapper theme={theme} className={className}>
      <ChatTopbar>
-        <ChannelWrapper>
+        <ChannelWrapper className={className}>
          {(showCommunity || narrow) && (
-            <CommunityWrap theme={theme}>
+            <CommunityWrap theme={theme} className={className}>
              <Community community={community} theme={theme} />
            </CommunityWrap>
          )}
          <Channel
            channel={channel}
            theme={theme}
-            isActive={true}
+            isActive={narrow ? showChannelsList : true}
            activeView={true}
            isMuted={false}
-            onClick={() => (narrow ? setShowChannels(true) : undefined)}
+            onClick={() => (narrow ? switchChannelList() : undefined)}
          />
        </ChannelWrapper>
        <MemberBtn
-          onClick={narrow ? () => setShowMembersList(true) : onClick}
-          className={showMembers ? "active" : ""}
+          onClick={narrow ? () => switchMemberList() : onClick}
+          className={
+            (showMembers && !narrow) || (showMembersList && narrow)
+              ? "active"
+              : ""
+          }
          theme={theme}
        >
          <MembersIcon theme={theme} />
        </MemberBtn>
      </ChatTopbar>
-      {!showChannelsList &&
-        !showMembersList &&
-        (messages.length > 0 ? (
-          <ChatMessages messages={messages} theme={theme} />
-        ) : (
-          <EmptyChannel theme={theme} channel={channel} />
-        ))}
-      <ChatInput theme={theme} addMessage={sendMessage} />
+      {!showChannelsList && !showMembersList && (
+        <>
+          {" "}
+          {messages.length > 0 ? (
+            <ChatMessages messages={messages} theme={theme} />
+          ) : (
+            <EmptyChannel theme={theme} channel={channel} />
+          )}
+          <ChatInput theme={theme} addMessage={sendMessage} />
+        </>
+      )}
+
      {showChannelsList && narrow && (
        <NarrowChannels
          theme={theme}
          community={community.name}
          notifications={notifications}
          setActiveChannel={setActiveChannel}
-          setShowChannels={setShowChannels}
+          setShowChannels={setShowChannelsList}
          activeChannelId={activeChannelId}
        />
      )}
      {showMembersList && narrow && (
-        <NarrowTopbar
+        <NarrowMembers
          theme={theme}
-          list="Community members"
-          community={community.name}
-          onClick={() => setShowMembersList(false)}
+          community={community}
+          setShowChannels={setShowChannelsList}
+          setShowMembersList={setShowMembersList}
        />
      )}
    </ChatBodyWrapper>
@ -112,24 +131,36 @@ const ChatBodyWrapper = styled.div<ThemeProps>`
  flex: 1;
  height: 100%;
  background: ${({ theme }) => theme.bodyBackgroundColor};
+
+  &.narrow {
+    width: 100%;
+  }
 `;

 const ChannelWrapper = styled.div`
  display: flex;
  align-items: center;
+
+  &.narrow {
+    width: calc(100% - 46px);
+  }
 `;

 const ChatTopbar = styled.div`
  display: flex;
  justify-content: space-between;
-  padding: 0 8px;
+  padding: 5px 8px;
 `;

 const CommunityWrap = styled.div<ThemeProps>`
-  padding-right: 16px;
+  padding-right: 10px;
  margin-right: 16px;
  position: relative;

+  &.narrow {
+    margin-right: 8px;
+  }
+
  &:after {
    content: "";
    position: absolute;
--- a/packages/react-chat/src/components/Members.tsx
+++ b/packages/react-chat/src/components/Members.tsx
@ -17,49 +17,69 @@ export function Members({ theme, community, setShowChannels }: MembersProps) {
  return (
    <MembersWrapper theme={theme}>
      <MemberHeading theme={theme}>Members</MemberHeading>
-      <MembersList>
-        <MemberCategory>
-          <MemberCategoryName theme={theme}>You</MemberCategoryName>
-          <MemberData>
-            <MemberIcon>
-              <UserIcon theme={theme} memberView={true} />
-            </MemberIcon>
-            <MemberName theme={theme}>Guest564732</MemberName>
-          </MemberData>
-        </MemberCategory>
-        <MemberCategory>
-          <MemberCategoryName theme={theme}>Online</MemberCategoryName>
-          {community.membersList
-            .filter((member) => member.isOnline)
-            .map((member) => (
-              <Member
-                key={member.id}
-                theme={theme}
-                member={member}
-                isOnline={member.isOnline}
-                setShowChannels={setShowChannels}
-              />
-            ))}
-        </MemberCategory>
-        <MemberCategory>
-          <MemberCategoryName theme={theme}>Offline</MemberCategoryName>
-          {community.membersList
-            .filter((member) => !member.isOnline)
-            .map((member) => (
-              <Member
-                key={member.id}
-                theme={theme}
-                member={member}
-                isOnline={member.isOnline}
-                setShowChannels={setShowChannels}
-              />
-            ))}
-        </MemberCategory>
-      </MembersList>
+      <MembersList
+        theme={theme}
+        community={community}
+        setShowChannels={setShowChannels}
+      />
    </MembersWrapper>
  );
 }

+interface MembersListProps {
+  theme: Theme;
+  community: CommunityData;
+  setShowChannels: (val: boolean) => void;
+}
+
+export function MembersList({
+  theme,
+  community,
+  setShowChannels,
+}: MembersListProps) {
+  return (
+    <MembersListWrap>
+      <MemberCategory>
+        <MemberCategoryName theme={theme}>You</MemberCategoryName>
+        <MemberData>
+          <MemberIcon>
+            <UserIcon theme={theme} memberView={true} />
+          </MemberIcon>
+          <MemberName theme={theme}>Guest564732</MemberName>
+        </MemberData>
+      </MemberCategory>
+      <MemberCategory>
+        <MemberCategoryName theme={theme}>Online</MemberCategoryName>
+        {community.membersList
+          .filter((member) => member.isOnline)
+          .map((member) => (
+            <Member
+              key={member.id}
+              theme={theme}
+              member={member}
+              isOnline={member.isOnline}
+              setShowChannels={setShowChannels}
+            />
+          ))}
+      </MemberCategory>
+      <MemberCategory>
+        <MemberCategoryName theme={theme}>Offline</MemberCategoryName>
+        {community.membersList
+          .filter((member) => !member.isOnline)
+          .map((member) => (
+            <Member
+              key={member.id}
+              theme={theme}
+              member={member}
+              isOnline={member.isOnline}
+              setShowChannels={setShowChannels}
+            />
+          ))}
+      </MemberCategory>
+    </MembersListWrap>
+  );
+}
+
 interface MemberProps {
  theme: Theme;
  member: any;
@ -131,7 +151,7 @@ const MemberName = styled.p<ThemeProps>`
  white-space: nowrap;
 `;

-const MembersList = styled.div`
+const MembersListWrap = styled.div`
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
--- a/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
+++ b/packages/react-chat/src/components/NarrowMode/NarrowMembers.tsx
@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+
+import { CommunityData } from "../../helpers/communityMock";
+import { Theme } from "../../styles/themes";
+import { MembersList } from "../Members";
+
+import { NarrowTopbar } from "./NarrowTopbar";
+
+interface NarrowMembersProps {
+  theme: Theme;
+  community: CommunityData;
+  setShowChannels: (val: boolean) => void;
+  setShowMembersList: (val: boolean) => void;
+}
+
+export function NarrowMembers({
+  theme,
+  community,
+  setShowChannels,
+  setShowMembersList,
+}: NarrowMembersProps) {
+  return (
+    <ListWrapper>
+      <NarrowTopbar
+        theme={theme}
+        list="Community members"
+        community={community.name}
+        onClick={() => setShowMembersList(false)}
+      />
+      <MembersList
+        theme={theme}
+        community={community}
+        setShowChannels={setShowChannels}
+      />
+    </ListWrapper>
+  );
+}
+
+const ListWrapper = styled.div`
+  padding: 18px;
+`;
--- a/packages/react-chat/src/styles/GlobalStyle.tsx
+++ b/packages/react-chat/src/styles/GlobalStyle.tsx
@ -4,6 +4,10 @@ export const GlobalStyle = createGlobalStyle`
  * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
+
+    &::-webkit-scrollbar {
+      width: 0;
+    }
  }

  body,