From d322643effca91b8c1fdcafaade175c1e2d6cc0c Mon Sep 17 00:00:00 2001 From: BodySites <100404530+BodySites@users.noreply.github.com> Date: Fri, 11 Aug 2023 22:06:39 +0600 Subject: [PATCH] take out switchPanel to the shared and add it to header of Callpage --- public/icons/view-1.svg | 13 +++++ public/icons/view-2.svg | 10 ++++ .../Participant/ui/ParticipantCard.tsx | 6 ++- src/shared/ui/switchDisplay/SwitchPanel.tsx | 47 +++++++++++++++++ src/shared/ui/switchDisplay/styles.module.css | 27 ++++++++++ src/widgets/CallInfo.tsx | 27 +++++++++- .../ParticipantsList/ParticipantsList.tsx | 8 ++- src/widgets/layout/Sidebar/Sidebar.tsx | 50 ++++++++----------- src/widgets/layout/Sidebar/styles.module.css | 32 ------------ 9 files changed, 155 insertions(+), 65 deletions(-) create mode 100644 public/icons/view-1.svg create mode 100644 public/icons/view-2.svg create mode 100644 src/shared/ui/switchDisplay/SwitchPanel.tsx create mode 100644 src/shared/ui/switchDisplay/styles.module.css diff --git a/public/icons/view-1.svg b/public/icons/view-1.svg new file mode 100644 index 0000000..785e65e --- /dev/null +++ b/public/icons/view-1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/icons/view-2.svg b/public/icons/view-2.svg new file mode 100644 index 0000000..cc63cb1 --- /dev/null +++ b/public/icons/view-2.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/features/Participant/ui/ParticipantCard.tsx b/src/features/Participant/ui/ParticipantCard.tsx index 1df47f9..3fe5f3f 100644 --- a/src/features/Participant/ui/ParticipantCard.tsx +++ b/src/features/Participant/ui/ParticipantCard.tsx @@ -51,14 +51,18 @@ interface Props { avatar: string; name: string; isActive: boolean; + displaySwitch?: boolean; } export const ParticipantCard: React.FC = ({ avatar, name, isActive, + displaySwitch = false, }) => { - return ( + return displaySwitch ? ( +
+ ) : ( diff --git a/src/shared/ui/switchDisplay/SwitchPanel.tsx b/src/shared/ui/switchDisplay/SwitchPanel.tsx new file mode 100644 index 0000000..806e200 --- /dev/null +++ b/src/shared/ui/switchDisplay/SwitchPanel.tsx @@ -0,0 +1,47 @@ +import React, { useState } from "react"; +import styles from "./styles.module.css"; + +interface Props { + oneSwitch: string; + twoSwitch: string; + style: Object; + state: boolean; + onClick: (stateSwitch: boolean) => void; +} + +const SwitchPanel: React.FC = (props) => { + const [displaySwitch, setDisplaySwitch] = useState(props.state); + + function clickRight() { + props.onClick(true); + setDisplaySwitch(true); + } + + function clickLeft() { + props.onClick(false); + setDisplaySwitch(false); + } + + return ( +
+
+ +
+
+ +
+
+ ); +}; + +export default SwitchPanel; diff --git a/src/shared/ui/switchDisplay/styles.module.css b/src/shared/ui/switchDisplay/styles.module.css new file mode 100644 index 0000000..6f3ecce --- /dev/null +++ b/src/shared/ui/switchDisplay/styles.module.css @@ -0,0 +1,27 @@ +.switchPanel { + display: flex; + padding: 3px; + align-items: center; + background: var(--white, #fff); + box-shadow: 0px 0px 2px 0px #c5ccd5; +} + +.switch { + display: flex; + flex: 1 1; + aspect-ratio: 1 / 1; + justify-content: center; + align-items: center; + border-radius: 50%; + opacity: 0.5; +} + +.switch:hover { + cursor: pointer; +} + +.switch.active { + background: var(--grey-6, #f9fafe); + box-shadow: 0px 0px 2px 0px #c5ccd5; + opacity: 1; +} diff --git a/src/widgets/CallInfo.tsx b/src/widgets/CallInfo.tsx index 9447026..60f3b60 100644 --- a/src/widgets/CallInfo.tsx +++ b/src/widgets/CallInfo.tsx @@ -1,6 +1,10 @@ -import React from "react"; +import React, { useState } from "react"; import styled from "styled-components"; import { CopyLink } from "../features/Copy"; +import SwitchPanel from "../shared/ui/switchDisplay/SwitchPanel"; +import oneSwitch from "../../public/icons/view-1.svg"; +import twoSwitch from "../../public/icons/view-2.svg"; +import sidebarState from "../pages/CallPageCustomUI/store/sidebarState"; const Container = styled.div` display: flex; @@ -35,14 +39,33 @@ const Paragraph = styled.p` line-height: normal; `; +const styleSwitch = { + width: "84px", + height: "48px", + borderRadius: "35px", +}; + const CallInfo: React.FC = () => { + const [displaySwitch, setDisplaySwitch] = useState(false); + + function changeDisplay(state: boolean) { + setDisplaySwitch(state); + } + return ( - + Информатика 4 класс 18 участников|01:12:45 + ); }; diff --git a/src/widgets/ParticipantsList/ParticipantsList.tsx b/src/widgets/ParticipantsList/ParticipantsList.tsx index 56057d7..a32f71f 100644 --- a/src/widgets/ParticipantsList/ParticipantsList.tsx +++ b/src/widgets/ParticipantsList/ParticipantsList.tsx @@ -15,9 +15,14 @@ const Container = styled.div` interface Props { isActive: boolean; peopleList: IUser[]; + displaySwitch?: boolean; } -const ParticipantsList: React.FC = ({ isActive, peopleList }) => { +const ParticipantsList: React.FC = ({ + isActive, + peopleList, + displaySwitch = false, +}) => { return ( {peopleList.map((people, index) => ( @@ -26,6 +31,7 @@ const ParticipantsList: React.FC = ({ isActive, peopleList }) => { name={people.name} isActive={isActive} key={index} + displaySwitch={displaySwitch} /> ))} diff --git a/src/widgets/layout/Sidebar/Sidebar.tsx b/src/widgets/layout/Sidebar/Sidebar.tsx index 7e50465..1951bca 100644 --- a/src/widgets/layout/Sidebar/Sidebar.tsx +++ b/src/widgets/layout/Sidebar/Sidebar.tsx @@ -11,6 +11,7 @@ import { observer } from "mobx-react-lite"; import styles from "./styles.module.css"; import { IUser } from "../../../shared/api/models"; import ParticipantsList from "../../ParticipantsList/ParticipantsList"; +import SwitchPanel from "../../../shared/ui/switchDisplay/SwitchPanel"; const OpenButton = styled.div` position: absolute; @@ -48,6 +49,12 @@ const Container = styled.div` background: rgba(255, 255, 255, 0.95); `; +const styleSwitch = { + width: "66px", + height: "34px", + borderRadius: "18px", +}; + interface Props { peopleList: IUser[]; } @@ -61,12 +68,8 @@ const Sidebar: React.FC = observer(({ peopleList }) => { : store.openSidebar(); } - function rightDisplay() { - setDisplaySwitch(true); - } - - function leftDisplay() { - setDisplaySwitch(false); + function changeDisplay(state: boolean) { + setDisplaySwitch(state); } function changeSelected() { @@ -106,31 +109,20 @@ const Sidebar: React.FC = observer(({ peopleList }) => { <>
Подключены (12)
-
-
- -
-
- -
-
+
- +
Не подключены (4)
diff --git a/src/widgets/layout/Sidebar/styles.module.css b/src/widgets/layout/Sidebar/styles.module.css index 1ed3121..4b61c9c 100644 --- a/src/widgets/layout/Sidebar/styles.module.css +++ b/src/widgets/layout/Sidebar/styles.module.css @@ -49,38 +49,6 @@ font-weight: 600; } -.switchPanel { - display: flex; - width: 66px; - height: 34px; - padding: 0px 4px; - align-items: center; - gap: 6px; - border-radius: 18px; - background: var(--white, #fff); - box-shadow: 0px 0px 2px 0px #c5ccd5; -} - -.switch { - display: flex; - width: 28px; - height: 28px; - justify-content: center; - align-items: center; - border-radius: 18px; - opacity: 0.5; -} - -.switch:hover { - cursor: pointer; -} - -.switch.active { - background: var(--grey-6, #f9fafe); - box-shadow: 0px 0px 2px 0px #c5ccd5; - opacity: 1; -} - .list { overflow-y: auto; align-self: flex-start;