+
{Props.list.length ? (
@@ -118,7 +131,9 @@ export const SelectDevice: React.FC = (Props) => {
))
) : (
- Нет устройств
+
+ Нет устройств
+
)}
diff --git a/src/features/Function/ui/FunctionBlock.tsx b/src/features/Function/ui/FunctionBlock.tsx
index c795b7b..2f0de96 100644
--- a/src/features/Function/ui/FunctionBlock.tsx
+++ b/src/features/Function/ui/FunctionBlock.tsx
@@ -56,6 +56,8 @@ export const FunctionBlock: React.FC
= ({ func }) => {
: setCurrentIcon(func.icon);
}
+ console.log(func.link);
+
return (
diff --git a/src/pages/CallPageCustomUI/CallPage.tsx b/src/pages/CallPageCustomUI/CallPage.tsx
index 89f2f30..6d80595 100644
--- 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 (
{
}
>
-
+
+ {settingsState.isActive && }
+ {settingsState.isActive && }
);
});
diff --git a/src/pages/CallPageCustomUI/store/settingsState.ts b/src/pages/CallPageCustomUI/store/settingsState.ts
new file mode 100644
index 0000000..0eddd3d
--- /dev/null
+++ 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
new file mode 100644
index 0000000..9d09a79
--- /dev/null
+++ 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 = ({ text }) => {
+ const [selected, setSelected] = useState(true);
+
+ function changeSelected() {
+ selected ? setSelected(false) : setSelected(true);
+ }
+
+ return (
+
+
+
+ {text}
+
+
+ );
+};
+
+export default CheckBox;
diff --git a/src/shared/ui/switchButton/SwitchButton.tsx b/src/shared/ui/switchButton/SwitchButton.tsx
new file mode 100644
index 0000000..19e1161
--- /dev/null
+++ 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 (
+
+ );
+};
+
+export default SwitchButton;
diff --git a/src/shared/ui/switchButton/styles.module.css b/src/shared/ui/switchButton/styles.module.css
new file mode 100644
index 0000000..335aa23
--- /dev/null
+++ 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;
+}
diff --git a/src/widgets/CallControllers.tsx b/src/widgets/CallControllers.tsx
index d7c4a1f..b08a0ee 100644
--- a/src/widgets/CallControllers.tsx
+++ b/src/widgets/CallControllers.tsx
@@ -1,42 +1,42 @@
-import React from 'react';
-import styled from 'styled-components';
-import ControllersWrapper from './layout/ControllersWrapper';
-import { MicrophoneController } from '../features/MicrophoneController';
-import { CameraController } from '../features/CameraController';
-import { RecordController } from '../features/RecordController';
-import { HandController } from '../features/HandController/ui/HandController';
-import { ScreenController } from '../features/ScreenController';
-import { MenuController } from '../features/ControllersMenu';
-import { LeaveCall } from '../features/LeaveCall';
+import React from "react";
+import styled from "styled-components";
+import ControllersWrapper from "./layout/ControllersWrapper";
+import { MicrophoneController } from "../features/MicrophoneController";
+import { CameraController } from "../features/CameraController";
+import { RecordController } from "../features/RecordController";
+import { HandController } from "../features/HandController/ui/HandController";
+import { ScreenController } from "../features/ScreenController";
+import { MenuController } from "../features/ControllersMenu";
+import { LeaveCall } from "../features/LeaveCall";
const Left = styled.div`
display: flex;
gap: 20px;
justify-content: space-between;
-`
+`;
const Center = styled.div`
display: flex;
gap: 20px;
justify-content: space-between;
-`
+`;
const CallControllers: React.FC = () => {
return (
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
- )
-}
+ );
+};
-export default CallControllers
\ No newline at end of file
+export default CallControllers;
diff --git a/src/widgets/SettingsClass/SettingsClass.tsx b/src/widgets/SettingsClass/SettingsClass.tsx
new file mode 100644
index 0000000..c7dd78b
--- /dev/null
+++ b/src/widgets/SettingsClass/SettingsClass.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import styled from "styled-components";
+import { SettingClassLayout } from "../layout/SettingClassLayout";
+import SwitchButton from "../../shared/ui/switchButton/SwitchButton";
+
+const Setting = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ gap: 15px;
+`;
+
+const SettingText = styled.div`
+ color: var(--black, #000);
+ font-family: var(--font);
+ font-size: 16px;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+const SettingsClass: React.FC = () => {
+ return (
+ <>
+
+ <>
+
+
+ Разрешить участникам видеть все демонстрации
+
+
+
+
+
+ Разрешить участникам выбирать вкладку для показа
+
+
+
+
+
+
+ <>
+
+ Разрешить участникам использовать камеру
+
+
+
+
+
+ <>
+
+
+ Разрешить участникам использовать микрофон
+
+
+
+
+
+
+ <>
+
+ Разрешить участникам записывать встречи
+
+
+
+
+
+ );
+};
+
+export default SettingsClass;
diff --git a/src/widgets/SettingsMy/SettingsMy.tsx b/src/widgets/SettingsMy/SettingsMy.tsx
new file mode 100644
index 0000000..1ccde53
--- /dev/null
+++ b/src/widgets/SettingsMy/SettingsMy.tsx
@@ -0,0 +1,104 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+import { SelectDevice } from "../../features/DeviceSetting";
+import { useAuth0 } from "@auth0/auth0-react";
+
+const Input = styled.input`
+ display: flex;
+ width: 100%;
+ min-height: 54px;
+ padding: 4px 0px 4px 16px;
+ align-items: center;
+ border-radius: 10px;
+ background: #fff;
+ border: 1.5px solid var(--blue);
+ margin-bottom: 10px;
+ color: var(--black, #000);
+ font-family: var(--font);
+ font-size: 20px;
+ font-weight: 400;
+ line-height: 24px;
+ letter-spacing: 0.5px;
+`;
+
+const Title = styled.label`
+ position: absolute;
+ top: -9px;
+ left: 14px;
+ color: var(--blue, #175ef1);
+ background: white;
+ padding: 0 5px;
+ font-family: var(--font);
+ font-size: 18px;
+ font-weight: 400;
+ line-height: 16px;
+ letter-spacing: 0.4px;
+`;
+
+const stylesText = {
+ color: "var(--black, #000)",
+ fontSize: "20px",
+ fontWeight: "600",
+ lineHeight: "normal",
+};
+
+const stylesBlock = {
+ border: "1px solid var(--grey-5, #D5DEE8)",
+ boxShadow: "none",
+};
+
+const stylesList = {
+ border: "1px solid var(--grey-5, #D5DEE8)",
+ boxShadow: "none",
+};
+
+const stylesContainer = {
+ flex: "0 0",
+};
+
+const SettingsMy: React.FC = () => {
+ const { user } = useAuth0();
+ const [name, setName] = useState(user?.name);
+
+ return (
+ <>
+
+
Имя в классе
+ ) =>
+ setName(e.target.value)
+ }
+ />
+
+
+
+
+
+ );
+};
+
+export default SettingsMy;
diff --git a/src/widgets/UserGrid/UserGrid.tsx b/src/widgets/UserGrid/UserGrid.tsx
index fce7228..bd069e7 100644
--- a/src/widgets/UserGrid/UserGrid.tsx
+++ b/src/widgets/UserGrid/UserGrid.tsx
@@ -64,7 +64,7 @@ const ShowMoreButton = styled.button`
position: absolute;
top: 50%;
transform: translate(0, -50%);
- z-index: 1000;
+ z-index: 10;
&:hover {
cursor: pointer;
diff --git a/src/widgets/layout/Header.tsx b/src/widgets/layout/Header.tsx
index 1bcf9b1..243c5cd 100644
--- a/src/widgets/layout/Header.tsx
+++ b/src/widgets/layout/Header.tsx
@@ -14,9 +14,7 @@ const Container = styled.div`
background-color: var(--white);
`;
-const Left = styled.div`
-
-`;
+const Left = styled.div``;
const Logo = styled.a`
text-align: center;
diff --git a/src/widgets/layout/SettingClassLayout.tsx b/src/widgets/layout/SettingClassLayout.tsx
new file mode 100644
index 0000000..6b3cff0
--- /dev/null
+++ b/src/widgets/layout/SettingClassLayout.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+import { styled } from "styled-components";
+import CheckBox from "../../shared/ui/checkBox/CheckBox";
+
+const Container = styled.div`
+ width: 100%;
+ display: flex;
+ padding-bottom: 20px;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 20px;
+`;
+
+const Head = styled.div`
+ display: flex;
+ width: 100%;
+ justify-content: space-between;
+ align-items: center;
+ gap: 100px;
+`;
+
+const Title = styled.div`
+ color: var(--black, #000);
+ font-family: var(--font);
+ font-size: 20px;
+ font-weight: 600;
+ line-height: normal;
+`;
+
+const Main = styled.div`
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ gap: 20px;
+`;
+
+interface Props {
+ title: string;
+ children?: React.ReactNode;
+}
+
+export const SettingClassLayout: React.FC = ({ title, children }) => {
+ return (
+
+
+ {title}
+
+
+ {children}
+
+ );
+};
diff --git a/src/widgets/layout/SettingsCallPopup/SettingsCallPopup.tsx b/src/widgets/layout/SettingsCallPopup/SettingsCallPopup.tsx
new file mode 100644
index 0000000..e25f357
--- /dev/null
+++ b/src/widgets/layout/SettingsCallPopup/SettingsCallPopup.tsx
@@ -0,0 +1,133 @@
+import React from "react";
+import styled from "styled-components";
+import settingsState from "../../../pages/CallPageCustomUI/store/settingsState";
+import { observer } from "mobx-react-lite";
+import FormButton from "../../../shared/ui/formButton/FormButton";
+import SettingsMy from "../../SettingsMy/SettingsMy";
+import SettingsClass from "../../SettingsClass/SettingsClass";
+
+const Container = styled.div`
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ min-width: 530px;
+ max-height: 100vh;
+ padding: 30px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 30px;
+ border-radius: 8px;
+ background: var(--white, #fff);
+ box-shadow: 0px 0px 2px 0px #c5ccd5;
+ z-index: 101;
+`;
+
+const Header = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ padding-bottom: 20px;
+ border-bottom: 0.5px solid var(--grey-5, #d5dee8);
+`;
+
+const HeaderText = styled.div`
+ display: flex;
+ padding: 8px 16px;
+ align-items: flex-start;
+ gap: 10px;
+ color: var(--grey-1, #5f6a77);
+ font-family: var(--font);
+ font-size: 20px;
+ font-weight: 400;
+ line-height: normal;
+
+ &:hover {
+ cursor: pointer;
+ }
+`;
+
+const Settings = styled.form`
+ overflow: auto;
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: stretch;
+ gap: 20px;
+ padding-bottom: 5px;
+
+ &::-webkit-scrollbar {
+ width: 0;
+ }
+`;
+
+const Buttons = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 30px;
+`;
+
+const Back = styled.button`
+ color: var(--grey-1, #5f6a77);
+ font-family: var(--font);
+ font-size: 20px;
+ font-weight: 400;
+ line-height: normal;
+`;
+
+const styleSelected = {
+ color: "var(--blue, #175EF1)",
+ fontWeight: 600,
+};
+
+const SettingsCallPopup: React.FC = observer(() => {
+ function openMy() {
+ settingsState.selectMy();
+ }
+
+ function openClass() {
+ settingsState.selectClass();
+ }
+
+ function saveChanges() {
+ settingsState.closeSettings();
+ }
+
+ function backChanges() {
+ settingsState.closeSettings();
+ }
+
+ return (
+
+
+
+ Мои настройки
+
+
+ Настройки класса
+
+
+
+ {settingsState.selected === "My" && }
+ {settingsState.selected === "Class" && }
+
+ Сохранить
+ Отмена
+
+
+
+ );
+});
+
+export default SettingsCallPopup;