Skip to content

Commit

Permalink
Merge pull request #43 from Student-Labs-2023/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
Emil307 authored Aug 21, 2023
2 parents ad0650e + 8b409f5 commit 33bb759
Show file tree
Hide file tree
Showing 20 changed files with 634 additions and 49 deletions.
22 changes: 22 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@
"dev": "vite",
"build": "tsc && vite build",
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
"preview": "vite preview",
"prepare": "husky install"
},
"dependencies": {
"@auth0/auth0-react": "^2.1.1",
"@jitsi/react-sdk": "^1.3.0",
"@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",
Expand All @@ -36,6 +38,7 @@
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"husky": "^8.0.3",
"jsdom": "^22.1.0",
"typescript": "^5.0.2",
"vite": "^4.3.9",
Expand Down
3 changes: 3 additions & 0 deletions public/icons/check_small.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/app/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,11 @@ input::-ms-clear {
display: none;
}

input[type="checkbox"] {
-webkit-appearance: none;
appearance: none;
}

button {
cursor: pointer;
}
Expand Down
44 changes: 34 additions & 10 deletions src/features/ControllersMenu/ui/MenuController.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
);
};
29 changes: 22 additions & 7 deletions src/features/DeviceSetting/ui/SelectDevice.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 ? (
Expand All @@ -118,7 +131,9 @@ export const SelectDevice: React.FC<Props> = (Props) => {
</>
))
) : (
<SelectLink>Нет устройств</SelectLink>
<SelectLink style={{ pointerEvents: "none" }}>
Нет устройств
</SelectLink>
)}
</SelectList>
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/features/Function/ui/FunctionBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,8 @@ export const FunctionBlock: React.FC<Props> = ({ func }) => {
: setCurrentIcon(func.icon);
}

console.log(func.link);

return (
<Link
href={func.link}
Expand Down
1 change: 1 addition & 0 deletions src/main.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
authorizationParams={{
redirect_uri: window.location.origin,
}}
cacheLocation="localstorage"
>
<App />
</Auth0Provider>
Expand Down
21 changes: 20 additions & 1 deletion src/pages/CallPageCustomUI/CallPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand All @@ -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",
Expand Down Expand Up @@ -178,6 +191,10 @@ const peopleList: IUser[] = [
];

const CallPage: React.FC = observer(() => {
function closePopup() {
settingsState.closeSettings();
}

return (
<Container>
<Content
Expand All @@ -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>
);
});
Expand Down
28 changes: 28 additions & 0 deletions src/pages/CallPageCustomUI/store/settingsState.ts
Original file line number Diff line number Diff line change
@@ -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();
58 changes: 58 additions & 0 deletions src/shared/ui/checkBox/CheckBox.tsx
Original file line number Diff line number Diff line change
@@ -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;
20 changes: 20 additions & 0 deletions src/shared/ui/switchButton/SwitchButton.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 33bb759

Please sign in to comment.