Merge pull request #42 from Student-Labs-2023/feature/settingsPopup

Feature/settings popup
Student-Labs-2023 · Aug 20, 2023 · 7500ca3 · 7500ca3
2 parents ccd98f6 + 40dca08
commit 7500ca3
Show file tree

Hide file tree

Showing 18 changed files with 612 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@types/lodash": "^4.14.196",
     "@types/react-webcam": "^3.0.0",
     "axios": "^1.4.0",
+    "classnames": "^2.3.2",
     "dotenv": "^16.3.1",
     "jest": "^29.5.0",
     "lib-jitsi-meet": "^1.0.6",

diff --git a/public/icons/check_small.svg b/public/icons/check_small.svg
diff --git a/src/app/index.css b/src/app/index.css
@@ -60,6 +60,11 @@ input::-ms-clear {
   display: none;
 }
 
+input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 button {
   cursor: pointer;
 }

diff --git a/src/features/ControllersMenu/ui/MenuController.tsx b/src/features/ControllersMenu/ui/MenuController.tsx
@@ -1,14 +1,38 @@
-import React from 'react';
-import ControllerLayout from '../../../widgets/layout/ControllerLayout';
+import React from "react";
+import ControllerLayout from "../../../widgets/layout/ControllerLayout";
+import settingsState from "../../../pages/CallPageCustomUI/store/settingsState";
 
 export const MenuController: React.FC = () => {
+  function openSettings() {
+    settingsState.openSettings();
+  }
+
   return (
-    <ControllerLayout>
-        <svg width="4" height="22" viewBox="0 0 4 22" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0C0.9 0 0 0.9 0 2Z" fill="#5F6A77"/>
-            <path d="M0 11C0 12.1 0.9 13 2 13C3.1 13 4 12.1 4 11C4 9.9 3.1 9 2 9C0.9 9 0 9.9 0 11Z" fill="#5F6A77"/>
-            <path d="M0 20C0 21.1 0.9 22 2 22C3.1 22 4 21.1 4 20C4 18.9 3.1 18 2 18C0.9 18 0 18.9 0 20Z" fill="#5F6A77"/>
-        </svg>
+    <ControllerLayout onClick={openSettings}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="26"
+        height="26"
+        viewBox="0 0 26 26"
+        fill="none"
+      >
+        <path
+          d="M22.6405 14.6364C22.4082 14.4182 22.2921 14.091 22.2921 13.7637C22.2921 13.5455 22.2921 13.2182 22.2921 13C22.2921 12.7818 22.2921 12.4546 22.2921 12.2364C22.2921 11.9091 22.4082 11.5818 22.6405 11.3636L24.6151 9.50914C24.9636 9.18187 25.0797 8.63634 24.8474 8.19997L23.4536 5.90909C23.2213 5.47273 22.6405 5.25455 22.1759 5.36364L19.5045 6.12735C19.156 6.23644 18.8076 6.12727 18.4591 5.90909C17.9945 5.58182 17.5299 5.36369 16.9491 5.14551C16.6007 5.03642 16.3684 4.70906 16.2522 4.38179L15.5553 1.87278C15.4392 1.43642 14.9746 1 14.3938 1H11.6062C11.0254 1 10.5608 1.32733 10.4447 1.87278L9.74777 4.38179C9.63162 4.70906 9.39932 4.92733 9.05086 5.14551C8.47011 5.36369 8.0055 5.69091 7.5409 5.90909C7.19245 6.12727 6.84399 6.12735 6.49554 6.12735L3.82406 5.36364C3.35946 5.25455 2.7787 5.47273 2.5464 5.90909L1.15259 8.19997C0.920286 8.63634 0.920287 9.18187 1.38489 9.50914L3.35946 11.3636C3.59176 11.5818 3.70791 11.9091 3.70791 12.2364C3.70791 12.4546 3.70791 12.7818 3.70791 13C3.70791 13.2182 3.70791 13.5455 3.70791 13.7637C3.70791 14.091 3.59176 14.4182 3.35946 14.6364L1.38489 16.491C1.03644 16.8183 0.920286 17.3637 1.15259 17.8L2.5464 20.0909C2.7787 20.5273 3.35946 20.7455 3.82406 20.6364L6.49554 19.8728C6.84399 19.7637 7.19245 19.8727 7.5409 20.0909C8.0055 20.4182 8.47011 20.6364 9.05086 20.8546C9.39932 20.9637 9.63162 21.2909 9.74777 21.6182L10.4447 24.1274C10.5608 24.5637 11.0254 25 11.6062 25H14.3938C14.9746 25 15.4392 24.6728 15.5553 24.1274L16.2522 21.6182C16.3684 21.2909 16.6007 21.0728 16.9491 20.8546C17.5299 20.6364 17.9945 20.3091 18.4591 20.0909C18.8076 19.8727 19.156 19.8728 19.5045 19.8728L22.1759 20.6364C22.6405 20.7455 23.2213 20.5273 23.4536 20.0909L24.8474 17.8C25.0797 17.3637 25.0797 16.8183 24.6151 16.491L22.6405 14.6364Z"
+          stroke="#5F6A77"
+          stroke-width="1.5"
+          stroke-miterlimit="10"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M13.0002 16.1636C14.9246 16.1636 16.4847 14.6984 16.4847 12.8909C16.4847 11.0834 14.9246 9.61816 13.0002 9.61816C11.0757 9.61816 9.51562 11.0834 9.51562 12.8909C9.51562 14.6984 11.0757 16.1636 13.0002 16.1636Z"
+          stroke="#5F6A77"
+          stroke-width="1.5"
+          stroke-miterlimit="10"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
     </ControllerLayout>
-  )
-}
+  );
+};
diff --git a/src/features/DeviceSetting/ui/SelectDevice.tsx b/src/features/DeviceSetting/ui/SelectDevice.tsx
@@ -76,27 +76,40 @@ const Divider = styled.div`
 interface Props {
   title: string;
   list: string[];
+  stylesText?: Object;
+  stylesBlock?: Object;
+  stylesList?: Object;
+  stylesContainer?: Object;
 }
 
 export const SelectDevice: React.FC<Props> = (Props) => {
   const [selectActive, setSelectActive] = useState(false);
   const [selected, setSelected] = useState("По-умолчанию");
 
   return (
-    <Container>
-      <Text>{Props.title}</Text>
-      <SelectBlock onClick={() => setSelectActive(!selectActive)}>
+    <Container style={Props.stylesContainer}>
+      <Text style={Props.stylesText}>{Props.title}</Text>
+      <SelectBlock
+        onClick={() => setSelectActive(!selectActive)}
+        style={Props.stylesBlock}
+      >
         <Selected>
           <Paragraph>{selected}</Paragraph>
         </Selected>
         {selectActive ? <Icon src={open} /> : <Icon src={close} />}
       </SelectBlock>
-      <div style={{ borderTop: "6px solid transparent" }}>
+      <div
+        style={
+          selectActive
+            ? { borderTop: "6px solid transparent" }
+            : { display: "none" }
+        }
+      >
         <SelectList
           style={
             selectActive
-              ? { opacity: 1, visibility: "visible" }
-              : { opacity: 0, visibility: "hidden" }
+              ? { ...Props.stylesList, opacity: 1, visibility: "visible" }
+              : { ...Props.stylesList, opacity: 0, visibility: "hidden" }
           }
         >
           {Props.list.length ? (
@@ -118,7 +131,9 @@ export const SelectDevice: React.FC<Props> = (Props) => {
               </>
             ))
           ) : (
-            <SelectLink>Нет устройств</SelectLink>
+            <SelectLink style={{ pointerEvents: "none" }}>
+              Нет устройств
+            </SelectLink>
           )}
         </SelectList>
       </div>

diff --git a/src/pages/CallPageCustomUI/CallPage.tsx b/src/pages/CallPageCustomUI/CallPage.tsx
@@ -8,6 +8,8 @@ import avatar from "../../../public/icons/avatar.svg";
 import Sidebar from "../../widgets/layout/Sidebar/Sidebar";
 import storeSidebar from "./store/sidebarState";
 import { observer } from "mobx-react-lite";
+import settingsState from "./store/settingsState";
+import SettingsCallPopup from "../../widgets/layout/SettingsCallPopup/SettingsCallPopup";
 
 const Container = styled.div`
   width: 100%;
@@ -30,6 +32,17 @@ const Content = styled.div`
   transition: all 0.3s ease-out;
 `;
 
+const Overlay = styled.div`
+  background: white;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+  z-index: 100;
+`;
+
 const peopleList: IUser[] = [
   {
     email: "jjj",
@@ -178,6 +191,10 @@ const peopleList: IUser[] = [
 ];
 
 const CallPage: React.FC = observer(() => {
+  function closePopup() {
+    settingsState.closeSettings();
+  }
+
   return (
     <Container>
       <Content
@@ -188,10 +205,12 @@ const CallPage: React.FC = observer(() => {
         }
       >
         <CallInfo></CallInfo>
-        <UserGrid peopleList={peopleList}/>
+        <UserGrid peopleList={peopleList} />
         <CallControllers />
       </Content>
       <Sidebar peopleList={peopleList} />
+      {settingsState.isActive && <SettingsCallPopup />}
+      {settingsState.isActive && <Overlay onClick={closePopup} />}
     </Container>
   );
 });

diff --git a/src/pages/CallPageCustomUI/store/settingsState.ts b/src/pages/CallPageCustomUI/store/settingsState.ts
@@ -0,0 +1,28 @@
+import { makeAutoObservable } from "mobx";
+
+class SettingsState {
+  isActive = false;
+  selected = "My";
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+
+  openSettings() {
+    this.isActive = true;
+  }
+
+  closeSettings() {
+    this.isActive = false;
+  }
+
+  selectClass() {
+    this.selected = "Class";
+  }
+
+  selectMy() {
+    this.selected = "My";
+  }
+}
+
+export default new SettingsState();
diff --git a/src/shared/ui/checkBox/CheckBox.tsx b/src/shared/ui/checkBox/CheckBox.tsx
@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import check from "../../../../public/icons/check_small.svg";
+
+const Container = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 15px;
+`;
+
+const Input = styled.input`
+  width: 18px;
+  height: 18px;
+  border-radius: 2px;
+  border: 1.5px solid var(--grey-4, #c5ccd5);
+
+  &:checked {
+    background: var(--blue, #175ef1) url(${check}) center no-repeat;
+  }
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+const Title = styled.div`
+  color: var(--grey-3, #a0afc1);
+  font-family: var(--font);
+  font-size: 16px;
+  font-weight: 400;
+`;
+
+interface Props {
+  text: string;
+}
+
+const CheckBox: React.FC<Props> = ({ text }) => {
+  const [selected, setSelected] = useState(true);
+
+  function changeSelected() {
+    selected ? setSelected(false) : setSelected(true);
+  }
+
+  return (
+    <Container>
+      <Input
+        type="checkbox"
+        name="moderator"
+        onChange={changeSelected}
+        checked={selected}
+      />
+      <Title style={selected ? { color: "var(--blue, #175EF1)" } : {}}>
+        {text}
+      </Title>
+    </Container>
+  );
+};
+
+export default CheckBox;
diff --git a/src/shared/ui/switchButton/SwitchButton.tsx b/src/shared/ui/switchButton/SwitchButton.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import classNames from "classnames";
+
+const SwitchButton: React.FC = () => {
+  const [selected, setSelected] = useState(true);
+
+  function changeSelected() {
+    selected ? setSelected(false) : setSelected(true);
+  }
+
+  return (
+    <div
+      className={classNames(styles.switchBtn, selected ? styles.switchOn : "")}
+      onClick={changeSelected}
+    ></div>
+  );
+};
+
+export default SwitchButton;
diff --git a/src/shared/ui/switchButton/styles.module.css b/src/shared/ui/switchButton/styles.module.css
@@ -0,0 +1,28 @@
+.switchBtn {
+  display: inline-block;
+  width: 36px;
+  height: 20px;
+  border-radius: 15px;
+  background: var(--grey_4);
+  cursor: pointer;
+  position: relative;
+  transition-duration: 300ms;
+}
+.switchBtn::after {
+  content: "";
+  height: 17px;
+  width: 16px;
+  border-radius: 50%;
+  background: #fff;
+  top: 1.5px;
+  left: 1.5px;
+  transition-duration: 300ms;
+  position: absolute;
+  z-index: 1;
+}
+.switchOn {
+  background: var(--blue);
+}
+.switchOn::after {
+  left: 18.5px;
+}