сверстано окно доп параметров для адаптива, сверстан выбор языка, начата верстка окна Поделиться

2022-08-11 13:19:47 +05:00
parent 6cbd7fdd14
commit b18640a99d
16 changed files with 299 additions and 52 deletions
@@ -9,6 +9,12 @@ export const MainScreen:React.FC = React.memo(() => {
    const [showToolbar, setShowToolbar] = useState<boolean>(false);
    const [showMobileUsersPart, setShowMobileUsersPart] = useState<boolean>(false);
    const [showMobileOtherPart, setShowMobileOtherPart] = useState<boolean>(false);
+    const [showMobileLangSelectorPart, setShowMobileLangSelectorPart] = useState<boolean>(false);
+    const showPartsStates = [
+        setShowMobileUsersPart,
+        setShowMobileOtherPart,
+        setShowMobileLangSelectorPart
+    ]
    const windowHeight = useContext(ContextWindowHeight);

    function onClickToolbar() {
@@ -16,7 +22,7 @@ export const MainScreen:React.FC = React.memo(() => {
    }

    function openMobileUsers() {
-        closeMobileOther();
+        closeOthersParts(setShowMobileUsersPart);

        setShowMobileUsersPart(true);
    }
@@ -26,7 +32,7 @@ export const MainScreen:React.FC = React.memo(() => {
    }

    function openMobileOther() {
-        closeMobileUsers();
+        closeOthersParts(setShowMobileOtherPart);

        setShowMobileOtherPart(true);
    }
@@ -35,6 +41,19 @@ export const MainScreen:React.FC = React.memo(() => {
        setShowMobileOtherPart(false);
    }

+    function openLangSelector() {
+        closeOthersParts(setShowMobileLangSelectorPart)
+        setShowMobileLangSelectorPart(true);
+    }
+
+    function closeOthersParts(currentPart: React.Dispatch<React.SetStateAction<boolean>>) {
+        showPartsStates.forEach(e => {
+            if(currentPart !== e) {
+                e(false);
+            }
+        });
+    }
+
    return <div className="main-screen-container">
        <div className="main-screen-model"></div>
        <CSSTransition
@@ -74,10 +93,25 @@ export const MainScreen:React.FC = React.memo(() => {
                >
                    <MobileAddPart 
                        onClickClose={closeMobileOther}
+                        onClickChangeLang={openLangSelector}
                        title='Дополнительно'
                        type="other"
                    />
                </CSSTransition>
+                <CSSTransition
+                    in={showMobileLangSelectorPart}
+                    timeout={300}
+                    classNames='show-mobile-users'
+                    unmountOnExit
+                >
+                    <MobileAddPart 
+                        onClickClose={closeMobileOther}
+                        title='Выбор языка'
+                        type="selectLang"
+                        isContainBack={true}
+                        onClickBackButton={openMobileOther}
+                    />
+                </CSSTransition>
            </>
            : null
        }
@@ -11,13 +11,13 @@ type TProps = {
    onClickItem?: () => void
 }

-export const AddPartItem:React.FC<TProps> = React.memo((props) => {
+export const AddPartUserItem:React.FC<TProps> = React.memo((props) => {
    return <div className="user-item" onClick={() => props?.onClickItem ? props?.onClickItem() : null}>
        <ToolbarButton
            type={props.typeUser}
            caption=""
            isCaption={false}
-            onClick={() => null}            
+            onClick={() => null}
        />
        <div className="user-item-user-info-container">
            <div className="user-item-user-info">
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 12L18 12M6 12L12.3636 18M6 12L12.3636 6" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5 20.5734C15.8167 20.5734 16.0734 20.3167 16.0734 20C16.0734 19.6833 15.8167 19.4266 15.5 19.4266V20.5734ZM15.5 4.57339C15.8167 4.57339 16.0734 4.31668 16.0734 4C16.0734 3.68332 15.8167 3.42661 15.5 3.42661V4.57339ZM19 12L19.4086 12.4022C19.6283 12.1791 19.6283 11.8209 19.4086 11.5978L19 12ZM8.50018 11.4263C8.1835 11.4263 7.92678 11.683 7.92677 11.9997C7.92676 12.3164 8.18347 12.5731 8.50015 12.5731L8.50018 11.4263ZM15.0914 15.1533C14.8692 15.379 14.8721 15.742 15.0978 15.9642C15.3234 16.1863 15.6865 16.1835 15.9086 15.9578L15.0914 15.1533ZM15.9086 8.0422C15.6865 7.81652 15.3234 7.81366 15.0978 8.03581C14.8721 8.25797 14.8692 8.62101 15.0914 8.84669L15.9086 8.0422ZM15.5 19.4266L7 19.4266V20.5734L15.5 20.5734V19.4266ZM5.57339 18L5.57339 6H4.42661L4.42661 18H5.57339ZM7 4.57339L15.5 4.57339V3.42661L7 3.42661V4.57339ZM19 11.4266L8.50018 11.4263L8.50015 12.5731L19 12.5734L19 11.4266ZM18.5914 11.5978L15.0914 15.1533L15.9086 15.9578L19.4086 12.4022L18.5914 11.5978ZM19.4086 11.5978L15.9086 8.0422L15.0914 8.84669L18.5914 12.4022L19.4086 11.5978ZM5.57339 6C5.57339 5.21211 6.21211 4.57339 7 4.57339V3.42661C5.57875 3.42661 4.42661 4.57875 4.42661 6H5.57339ZM7 19.4266C6.21211 19.4266 5.57339 18.7879 5.57339 18H4.42661C4.42661 19.4212 5.57875 20.5734 7 20.5734V19.4266Z" fill="white"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.33333 13.8636L10.0606 11.8182M14.6667 13.8636L13.9394 11.8182M13.9394 11.8182L12.4711 7.68863C12.3135 7.2453 11.6865 7.2453 11.5289 7.68863L10.0606 11.8182M13.9394 11.8182H10.0606M11.3213 15.9091H6C4.89543 15.9091 4 15.0137 4 13.9091V7C4 5.89543 4.89543 5 6 5H18C19.1046 5 20 5.89543 20 7V14.5758C20 15.3121 19.403 15.9091 18.6667 15.9091V15.9091C17.9303 15.9091 17.3333 16.506 17.3333 17.2424V18.9863C17.3333 19.4008 16.8579 19.6353 16.529 19.3831L12.5385 16.3222C12.1893 16.0543 11.7614 15.9091 11.3213 15.9091Z" stroke="white" stroke-linecap="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 12.2778L9.20006 19.5L19 6.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00002 19L16 12L9.00002 5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 3L12.4055 2.59455C12.1815 2.37063 11.8185 2.37063 11.5945 2.59455L12 3ZM11.4266 12.5C11.4266 12.8167 11.6833 13.0734 12 13.0734C12.3167 13.0734 12.5734 12.8167 12.5734 12.5L11.4266 12.5ZM13.5945 5.40545C13.8185 5.62937 14.1815 5.62937 14.4055 5.40545C14.6294 5.18153 14.6294 4.81847 14.4055 4.59455L13.5945 5.40545ZM9.59455 4.59455C9.37063 4.81847 9.37063 5.18153 9.59455 5.40545C9.81847 5.62937 10.1815 5.62937 10.4055 5.40545L9.59455 4.59455ZM9 8.07339C9.31668 8.07339 9.57339 7.81668 9.57339 7.5C9.57339 7.18332 9.31668 6.92661 9 6.92661L9 8.07339ZM15 6.92661C14.6833 6.92661 14.4266 7.18332 14.4266 7.5C14.4266 7.81668 14.6833 8.07339 15 8.07339L15 6.92661ZM17.4266 9.5L17.4266 17L18.5734 17L18.5734 9.5L17.4266 9.5ZM16 18.4266L8 18.4266L8 19.5734L16 19.5734L16 18.4266ZM6.57339 17L6.57339 9.5L5.42661 9.5L5.42661 17L6.57339 17ZM11.4266 3L11.4266 12.5L12.5734 12.5L12.5734 3L11.4266 3ZM11.5945 3.40545L13.5945 5.40545L14.4055 4.59455L12.4055 2.59455L11.5945 3.40545ZM11.5945 2.59455L9.59455 4.59455L10.4055 5.40545L12.4055 3.40545L11.5945 2.59455ZM8 8.07339L9 8.07339L9 6.92661L8 6.92661L8 8.07339ZM16 6.92661L15 6.92661L15 8.07339L16 8.07339L16 6.92661ZM6.57339 9.5C6.57339 8.71211 7.21211 8.07339 8 8.07339L8 6.92661C6.57875 6.92661 5.42661 8.07875 5.42661 9.5L6.57339 9.5ZM8 18.4266C7.21211 18.4266 6.57339 17.7879 6.57339 17L5.42661 17C5.42661 18.4212 6.57875 19.5734 8 19.5734L8 18.4266ZM17.4266 17C17.4266 17.7879 16.7879 18.4266 16 18.4266L16 19.5734C17.4212 19.5734 18.5734 18.4212 18.5734 17L17.4266 17ZM18.5734 9.5C18.5734 8.07875 17.4212 6.92661 16 6.92661L16 8.07339C16.7879 8.07339 17.4266 8.71211 17.4266 9.5L18.5734 9.5Z" fill="white"/>
+</svg>
@@ -0,0 +1,23 @@
+import React from "react"; 
+import okIcon from './icons/okIcon.svg';
+
+type TProps = {
+    title: string
+    caption: string
+    isSelected: boolean
+    onClick: () => void
+}
+
+export const LangButton:React.FC<TProps> = React.memo((props) => {
+    return <div className="lang-button-container">
+        <div className="lang-button-text-part">
+            <span className="lang-button-text-title">{props.title}</span>
+            <span className="lang-button-text-caption">{props.caption}</span>
+        </div>
+        {
+            props.isSelected
+            ? <img className="lang-button-selected-icon" src={okIcon} alt='Текущий язык' />
+            : null
+        }
+    </div>
+})
@@ -25,11 +25,23 @@
 }

 .mobile-users-part-header-title {
+    display: flex;
+    gap: 12px;
+    align-items: center;
    font-weight: 400;
    font-size: 22px;
    line-height: 130%;
 }

+.mobile-users-part-header-back-button {
+    border: none;
+    background-color: transparent;
+    width: 24px;
+    height: 24px;
+    background: url('icons/backIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
+
 .mobile-users-part-header-close-button {
    width: 30px;
    height: 30px;
@@ -99,14 +111,93 @@
    align-items: center;
    background-color: #4F4F4F;
    border-radius: 16px;
+    padding: 0 18px;
+
+
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+}
+
+.setting-button-container:active {
+    background-color: #828282;
+}
+
+.setting-button-help-text {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 17px;
+    color: #BDBDBD;
+}
+
+.setting-button-part {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.setting-button-icon {
+    width: 24px;
+    height: 24px;
 }

 .setting-button-container.exit {
-    width: 106px;
+    width: 102px;
    background-color: #EB5757;
    align-self: flex-end;
+    padding: 0;
+    justify-content: center;
 }

+.setting-button-container.exit .setting-button-part {
+    gap: 9px;
+}
+
+.lang-button-container {
+    display: flex;
+    box-sizing: border-box;
+    width: 100%;
+    height: 57px;
+    padding: 0 16px;
+    border-radius: 16px;
+    background-color: #4F4F4F;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.lang-button-container:active {
+    background-color: #828282;   
+}
+
+.lang-button-text-part {
+    color: #FFFFFF;
+    display: flex;
+    flex-direction: column;
+}
+
+.lang-button-text-title {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+}
+
+.lang-button-text-caption {
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+}
+
+.lang-button-selected-icon {
+    width: 24px;
+    height: 24px;
+}
+
+
+
+
+
+
+



@@ -1,18 +1,21 @@
 import React from "react";
 import { BorderLine } from "./borderLine";
 import { MobileAddPartHeader } from "./mobileAddPartHeader";
-import './mobileAddPart.css';
-import { AddPartItem } from "./addPartItem";
 import { UsersList } from "./usersList";
 import { SettingButtons } from "./settingButtons";
+import './mobileAddPart.css';

 type TProps = {
    onClickClose: () => void
    title: string
-    type: 'users' | 'other'
+    type: 'users' | 'other' | 'selectLang' | 'share'
    users?: '???' //
    onClickShare?: () => void
-    onClickExit?: () => void    
+    onClickExit?: () => void
+    onClickChangeLang?: () => void
+    onClickSelectLang?: () => void
+    onClickBackButton?: () => void
+    isContainBack?: boolean
 }

 export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
@@ -20,20 +23,26 @@ export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
        <MobileAddPartHeader
            onClick={props.onClickClose}
            title={props.title}
+            isBackButton={props?.isContainBack}
+            onClickBackButton={props?.onClickBackButton}
        />
        <BorderLine />        
        {
            props.type === 'users'
            ? <UsersList />
-            : <SettingButtons />
+            : props.type === 'other'
+            ? <SettingButtons 
+                type="other"
+                onClickChangeLang={props.onClickChangeLang}
+                onClickShare={props.onClickShare}
+                onClickExit={props.onClickExit}
+            />
+            : props.type === 'selectLang'
+            ? <SettingButtons
+                type="selectLang"
+                onClickSelectLang={props.onClickSelectLang}
+            />
+            : null
        }        
-        {/* <AddPartItem
-            typeUser="share"
-            onClickItem={props?.onClickShare}
-        />
-        <AddPartItem 
-            typeUser="exit"
-            onClickItem={props?.onClickExit}
-        /> */}
    </div>
 })
@@ -3,11 +3,18 @@ import React from "react";
 type TProps = {
    onClick: () => void
    title: string
+    isBackButton?: boolean
+    onClickBackButton?: () => void
 }

 export const MobileAddPartHeader:React.FC<TProps> = React.memo((props) => {
    return <div className="mobile-users-part-header">
        <span className="mobile-users-part-header-title">
+            {
+                props.isBackButton
+                ? <button className="mobile-users-part-header-back-button" onClick={() => props.onClickBackButton()}></button>
+                : null
+            }
            {props.title}
        </span>
        <button 
@@ -11,17 +11,19 @@ type TProps = {

 export const SettingButton:React.FC<TProps> = React.memo((props) => {
    return <div className={`setting-button-container ${props.isExitButton ? 'exit' : ''}`} onClick={() => props.onClick()}>
-        <img className="setting-button-icon" src={props.icon} alt={props.text}></img>
-        <div className="setting-button-text-container">
+        <div className="setting-button-part">
+            <img className="setting-button-icon" src={props.icon} alt={props.text}></img>
            <span className="setting-button-text">{props.text}</span>
+        </div>
+        <div className="setting-button-part">        
            {
                props.helpText &&
                <span className="setting-button-help-text">{props.helpText}</span>
            }
-        </div>        
-        {
-            props.helpIcon &&
-            <img className="setting-button-help-icon" src={props.helpIcon} alt='' />
-        }
+            {
+                props.helpIcon &&
+                <img className="setting-button-icon" src={props.helpIcon} alt='' />
+            }
+        </div>
    </div>
 })
@@ -1,31 +1,65 @@
 import React from "react";
 import { SettingButton } from "./settingButton";
+import langIcon from './icons/languageIcon.svg';
+import shareIcon from './icons/shareIcon.svg';
+import pointerIcon from './icons/pointer2Icon.svg';
+import exitIcon from './icons/exitIcon.svg';
+import { LangButton } from "./langButton";

 type TProps = {
-
+    type: 'other' | 'selectLang'
+    onClickShare?: () => void
+    onClickChangeLang?: () => void
+    onClickSelectLang?: () => void
+    onClickExit?: () => void
 }

 export const SettingButtons:React.FC<TProps> = React.memo((props) => {
    return <div className="setting-buttons-container">
        <div className="setting-buttons-row">
-            <SettingButton
-                text="Пригласить"
-                icon={''}
-                onClick={() => null}
-            />
-            <SettingButton
-                text="Язык"
-                helpText="Русский"
-                icon={''}
-                helpIcon={''}
-                onClick={() => null}
-            />
+            {
+                props.type === 'other' ?
+                <>
+                    <SettingButton
+                        text="Пригласить"
+                        icon={shareIcon}
+                        helpIcon={pointerIcon}
+                        onClick={props.onClickShare}
+                    />
+                    <SettingButton
+                        text="Язык"
+                        helpText="Русский"
+                        icon={langIcon}
+                        helpIcon={pointerIcon}
+                        onClick={props.onClickChangeLang}
+                    />
+                </>
+                :
+                <>
+                    <LangButton 
+                        title="Русский"
+                        caption="Русский"
+                        isSelected={true}
+                        onClick={props.onClickSelectLang}
+                    />
+                    <LangButton 
+                        title="English"
+                        caption="Английский"
+                        isSelected={false}
+                        onClick={props.onClickSelectLang}
+                    />
+                </>
+            }
        </div>
-        <SettingButton 
-            text="Выйти"
-            isExitButton={true}
-            icon={''}
-            onClick={() => null}
-        />
+        {
+            props.type === 'other' ?
+            <SettingButton 
+                text="Выйти"
+                isExitButton={true}
+                icon={exitIcon}
+                onClick={props.onClickExit}
+            />
+            : null
+        }
    </div>
 })
@@ -0,0 +1,29 @@
+import React from "react";
+import { BorderLine } from "./borderLine";
+
+type TProps = {
+
+}
+
+export const ShareContainer:React.FC<TProps> = React.memo((props) => {
+    return <div className="share-container">
+        <div className="share-container-item">
+            <span className="share-container-item-title">Код подключения</span>
+            <div className="share-container-item-buttons">
+                <input className="share-container-item-input code"></input>
+                <div className="share-container-item-copy-code-button-container">
+                    <span className="share-container-item-copy-code-button-icon"></span>
+                    <span className="share-container-item-copy-code-button-text">Скопировать</span>
+                </div>
+            </div>
+        </div>
+        <BorderLine />
+        <div className="share-container-item">
+            <span className="share-container-item-title">Ссылка для подключения</span>
+            <div className="share-container-item-buttons">
+                <input className="share-container-item-input href"></input>
+                <button className="share-container-item-copy-href-button"></button>
+            </div>
+        </div>
+    </div>    
+})
@@ -1,5 +1,5 @@
 import React from "react";
-import { AddPartItem } from "./addPartItem";
+import { AddPartUserItem } from "./addPartUserItem";

 type TProps = {
    users?: '???'
@@ -7,12 +7,12 @@ type TProps = {

 export const UsersList:React.FC<TProps> = React.memo((props) => {
    return <div className="mobile-users-part-users-container">
-        <AddPartItem typeUser="user admin"/>
-        <AddPartItem typeUser="user self" />
-        <AddPartItem typeUser="user guest" />
-        <AddPartItem typeUser="user guest" />
-        <AddPartItem typeUser="user guest" />
-        <AddPartItem typeUser="user guest" />
-        <AddPartItem typeUser="user guest" />
+        <AddPartUserItem typeUser="user admin"/>
+        <AddPartUserItem typeUser="user self" />
+        <AddPartUserItem typeUser="user guest" />
+        <AddPartUserItem typeUser="user guest" />
+        <AddPartUserItem typeUser="user guest" />
+        <AddPartUserItem typeUser="user guest" />
+        <AddPartUserItem typeUser="user guest" />
    </div>
 })