From 3b09a2b57b4d2a131cacef0c96886a073c30cc61 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Fri, 12 Aug 2022 13:00:07 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=20=D1=81?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=8B=20=D1=8F=D0=B7=D1=8B=D0=BA=D0=B0=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=B4=D0=B5=D0=BA=D1=81=D1=82=D0=BE=D0=BF?=
 =?UTF-8?q?=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                             |  1 +
 src/App.css                                   |  5 ++-
 .../mainScreen/toolbar/buttonContainer.tsx    | 43 +++++++++++++++----
 .../mainScreen/toolbar/icons/enIcon.svg       |  4 ++
 .../mainScreen/toolbar/icons/ruIcon.svg       |  4 ++
 src/components/mainScreen/toolbar/toolbar.css | 27 ++++++++----
 src/components/mainScreen/toolbar/toolbar.tsx | 38 +++++++++++++---
 .../mainScreen/toolbar/toolbarButton.tsx      | 35 ++++-----------
 .../mainScreen/toolbar/typeButtons.ts         |  4 +-
 .../mainScreen/toolbar/typeCaptionButtons.ts  |  4 +-
 10 files changed, 115 insertions(+), 50 deletions(-)
 create mode 100644 src/components/mainScreen/toolbar/icons/enIcon.svg
 create mode 100644 src/components/mainScreen/toolbar/icons/ruIcon.svg

diff --git a/public/index.html b/public/index.html
index ce64ae3..7808a37 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> -->
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
diff --git a/src/App.css b/src/App.css
index 734433b..aa07d6c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,4 +3,7 @@
 
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
   -webkit-tap-highlight-color: transparent;
-}
\ No newline at end of file
+
+  /* padding: env(20px) env(44px) env(20px) env(44px); */
+}
+
diff --git a/src/components/mainScreen/toolbar/buttonContainer.tsx b/src/components/mainScreen/toolbar/buttonContainer.tsx
index fa4ea83..97d3393 100644
--- a/src/components/mainScreen/toolbar/buttonContainer.tsx
+++ b/src/components/mainScreen/toolbar/buttonContainer.tsx
@@ -14,6 +14,8 @@ type TProps = {
         active?: boolean,
         isSelected?: boolean
     }>
+    isBorderLineTop?: 'hide' | 'show'
+    isBorderLineBottom?: 'hide' | 'show'
 }
 
 export const ButtonContainer:React.FC<TProps> = React.memo((props) => { 
@@ -21,7 +23,11 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
     const windowHeight = useContext(ContextWindowHeight);
     
     return <div className="toolbar-button-container">
-        <BorderLine />
+        {
+            props?.isBorderLineTop === 'hide' ?
+                null
+            : <BorderLine />
+        }
         {props.buttons.map((button, index) => {
             function onClick() {
                 if(openedAddButtons === button.type + index + 'areacont') {
@@ -34,10 +40,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
                 <ToolbarButton
                     // key={button.type + index}
                     onClick={() => {
-                        onClick();
-                        // if(openedAddButtons === button.type + index + 'areacont') {
-                        //     setOpenedAddButtons('');
-                        // } setOpenedAddButtons(button.type + index + 'areacont')
+                        onClick();                        
                         button.onClick()
                     }} 
                     type={button.type} 
@@ -46,7 +49,7 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
                     active={button?.active}
                     isCaption={button.isCaption}
                     isSelected={button?.isSelected}
-                    isVisible={openedAddButtons === button.type + index + 'areacont'}
+                    isVisible={openedAddButtons === button.type + index + 'areacont' && windowHeight > 700 && (button.type.includes('user') || button.type.includes('language'))}
                 />
                 {
                     button.type.includes('user') && windowHeight > 700 ?
@@ -72,14 +75,38 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
                             type={"control"} 
                             caption={''}
                             isCaption={false}
-                            isLarge={true}
+                            size={"large"}
                         />
                     </div>
                     : null
                 }
+                {
+                    button.type.includes('language') && windowHeight > 700 ?
+                    <div className={`toolbar-open-add-button-container ${openedAddButtons === button.type + index + 'areacont' ? 'show' : ''}`}>
+                        <ToolbarButton
+                            onClick={() => {onClick(); button.onClick()}} 
+                            type={button.type} 
+                            caption={CaptionToolbarButtons[button.type]}
+                            isCaption={false}
+                            isSelected={button.isSelected}
+                        />
+                        <ToolbarButton
+                            onClick={() => null} 
+                            type={"language en"} 
+                            caption={CaptionToolbarButtons[button.type]}
+                            isCaption={false}
+                            isSelected={false}
+                        /> 
+                    </div>
+                    : null
+                }
             </div>
             }
         )}
-        <BorderLine />
+        {
+            props?.isBorderLineBottom === 'hide' ?
+                null
+            : <BorderLine />
+        }
     </div>
 })
\ No newline at end of file
diff --git a/src/components/mainScreen/toolbar/icons/enIcon.svg b/src/components/mainScreen/toolbar/icons/enIcon.svg
new file mode 100644
index 0000000..b0fd41e
--- /dev/null
+++ b/src/components/mainScreen/toolbar/icons/enIcon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 16.7273C5.44772 16.7273 5 16.2796 5 15.7273V9C5 8.44772 5.44772 8 6 8H9.90483C10.2178 8 10.4716 8.25375 10.4716 8.56676C10.4716 8.87978 10.2178 9.13352 9.90483 9.13352H6.81676C6.54062 9.13352 6.31676 9.35738 6.31676 9.63352V11.2926C6.31676 11.5688 6.54062 11.7926 6.81676 11.7926H9.62145C9.93329 11.7926 10.1861 12.0454 10.1861 12.3572C10.1861 12.6691 9.93329 12.9219 9.62145 12.9219H6.81676C6.54062 12.9219 6.31676 13.1457 6.31676 13.4219V15.0938C6.31676 15.3699 6.54062 15.5938 6.81676 15.5938H9.95597C10.269 15.5938 10.5227 15.8475 10.5227 16.1605C10.5227 16.4735 10.269 16.7273 9.95597 16.7273H6Z" fill="white"/>
+<path d="M18.6225 8C18.9826 8 19.2745 8.29191 19.2745 8.65199V15.933C19.2745 16.3716 18.9189 16.7273 18.4802 16.7273C18.2197 16.7273 17.9757 16.5995 17.8274 16.3854L13.644 10.3496C13.6341 10.3353 13.6178 10.3267 13.6004 10.3267C13.571 10.3267 13.5472 10.3505 13.5472 10.3798V16.0689C13.5472 16.4325 13.2525 16.7273 12.8888 16.7273C12.5252 16.7273 12.2305 16.4325 12.2305 16.0689V8.79985C12.2305 8.3581 12.5886 8 13.0303 8C13.2927 8 13.5384 8.12867 13.6878 8.34434L17.8737 14.3862C17.8836 14.4005 17.9 14.4091 17.9174 14.4091C17.9467 14.4091 17.9705 14.3853 17.9705 14.356V8.65199C17.9705 8.29191 18.2624 8 18.6225 8Z" fill="white"/>
+</svg>
diff --git a/src/components/mainScreen/toolbar/icons/ruIcon.svg b/src/components/mainScreen/toolbar/icons/ruIcon.svg
new file mode 100644
index 0000000..8ddb110
--- /dev/null
+++ b/src/components/mainScreen/toolbar/icons/ruIcon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.65838 16.7273C5.29477 16.7273 5 16.4325 5 16.0689V9C5 8.44772 5.44772 8 6 8H8.1108C8.78693 8 9.34801 8.11648 9.79403 8.34943C10.2429 8.58239 10.5781 8.90483 10.7997 9.31676C11.0213 9.72585 11.1321 10.1989 11.1321 10.7358C11.1321 11.2699 11.0199 11.7401 10.7955 12.1463C10.5739 12.5497 10.2386 12.8636 9.78977 13.0881C9.34375 13.3125 8.78267 13.4247 8.10653 13.4247H6.31676C6.00375 13.4247 5.75 13.171 5.75 12.858C5.75 12.5449 6.00375 12.2912 6.31676 12.2912H7.98722C8.41335 12.2912 8.75994 12.2301 9.02699 12.108C9.29688 11.9858 9.49432 11.8082 9.61932 11.5753C9.74432 11.3423 9.80682 11.0625 9.80682 10.7358C9.80682 10.4062 9.7429 10.1207 9.61506 9.87926C9.49006 9.63778 9.29261 9.45312 9.02273 9.32528C8.75568 9.1946 8.40483 9.12926 7.97017 9.12926H6.81676C6.54062 9.12926 6.31676 9.35312 6.31676 9.62926V16.0689C6.31676 16.4325 6.02199 16.7273 5.65838 16.7273ZM8.92687 12.7898C9.16203 12.7898 9.37847 12.918 9.49141 13.1243L10.9325 15.7559C11.172 16.1932 10.8556 16.7273 10.357 16.7273C10.1153 16.7273 9.89316 16.5944 9.77884 16.3814L8.35977 13.7378C8.1296 13.309 8.44021 12.7898 8.92687 12.7898Z" fill="white"/>
+<path d="M18.3466 8.66051C18.3466 8.29572 18.6423 8 19.0071 8C19.3719 8 19.6676 8.29572 19.6676 8.66051V13.7401C19.6676 14.3509 19.5241 14.892 19.2372 15.3636C18.9503 15.8324 18.5469 16.2017 18.027 16.4716C17.5071 16.7386 16.8977 16.8722 16.1989 16.8722C15.5028 16.8722 14.8949 16.7386 14.375 16.4716C13.8551 16.2017 13.4517 15.8324 13.1648 15.3636C12.8778 14.892 12.7344 14.3509 12.7344 13.7401V8.65838C12.7344 8.29477 13.0291 8 13.3928 8C13.7564 8 14.0511 8.29477 14.0511 8.65838V13.6335C14.0511 14.0284 14.1378 14.3793 14.3111 14.6861C14.4872 14.9929 14.7358 15.2344 15.0568 15.4105C15.3778 15.5838 15.7585 15.6705 16.1989 15.6705C16.642 15.6705 17.0241 15.5838 17.3452 15.4105C17.669 15.2344 17.9162 14.9929 18.0866 14.6861C18.2599 14.3793 18.3466 14.0284 18.3466 13.6335V8.66051Z" fill="white"/>
+</svg>
diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css
index d999e75..2763768 100644
--- a/src/components/mainScreen/toolbar/toolbar.css
+++ b/src/components/mainScreen/toolbar/toolbar.css
@@ -10,7 +10,7 @@
 
     border-right: 1px solid #4F4F4F;
     background: #333333;
-    box-sizing: border-box;
+    box-sizing: border-box;    
 }
 
 .toolbar-field {
@@ -48,17 +48,14 @@
     position: absolute;
     top: calc((100% - 128px) / 2);
     left: calc(100% - 4px);
+    
     display: flex;
     justify-content: center;
     align-items: center;
 
-    margin-top: auto;
-    margin-bottom: auto;
-
     width: 24px;
     height: 128px;
     border: none;
-    background: url('openToolbarIcon.svg') 50% 50% no-repeat;
     background: url('openToolbarBackIcon.svg') 50% 50% no-repeat;
     background-size: 100% 100%;
 
@@ -66,8 +63,8 @@
 }
 
 .toolbar-open-button-icon {
-    width: 100%;
-    height: 100%;
+    width: 24px;
+    height: 24px;
     background: url('pointerIcon.svg') 50% 50% no-repeat;
     background-size: 24px 24px;
 }
@@ -280,7 +277,21 @@
     background-color: #4F4F4F;
 }
 
-.toolbar-button.selected {
+.toolbar-button.language {
+    background-color: #4F4F4F;
+}
+
+.toolbar-button.language.ru {
+    background: url('./icons/ruIcon.svg') 50% 50% no-repeat;
+    background-color: #4F4F4F;
+}
+
+.toolbar-button.language.en {
+    background: url('./icons/enIcon.svg') 50% 50% no-repeat;
+    background-color: #4F4F4F;
+}
+
+.toolbar-button.selected.selected {
     background-color: #CE56C2;
 }
 
diff --git a/src/components/mainScreen/toolbar/toolbar.tsx b/src/components/mainScreen/toolbar/toolbar.tsx
index 4af7b27..03763ac 100644
--- a/src/components/mainScreen/toolbar/toolbar.tsx
+++ b/src/components/mainScreen/toolbar/toolbar.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useState } from "react";
 import { ContextWindowHeight } from "../../contextWindowHeight";
 import { ButtonContainer } from "./buttonContainer";
 import './toolbar.css';
@@ -17,6 +17,11 @@ type TProps = {
 
 export const Toolbar:React.FC<TProps> = React.memo((props) => {
     const windowHeight = useContext(ContextWindowHeight);
+    const [showAddButtonsContOnDekstop, setShowAddButtonsContOnDekstop] = useState<boolean>(false);
+
+    function showAddButtons() {
+        setShowAddButtonsContOnDekstop(!showAddButtonsContOnDekstop);
+    }
 
     if(windowHeight < 700) {
         return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
@@ -137,13 +142,36 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                         }                        
                     ]}
                 />
-                <ToolbarButton 
+                <ButtonContainer
+                    buttons={[
+                        {
+                            type:"share",
+                            onClick: () => null,
+                            isCaption: true
+                        },
+                        {
+                            type: "language ru",
+                            onClick: () => showAddButtons(),
+                            isCaption: true,
+                            isSelected: showAddButtonsContOnDekstop
+                        }
+                    ]}
+                    isBorderLineTop={"hide"}
+                />
+                 {/* <ToolbarButton 
                     type="share"
                     onClick={() => console.log('click')}
                     caption={CaptionToolbarButtons["share"]}
                     isCaption={true}
                 />
-                <BorderLine />                
+                <ToolbarButton 
+                    type="language ru"
+                    onClick={() => showAddButtons()}
+                    caption={CaptionToolbarButtons["language ru"]}
+                    isCaption={true}
+                    isSelected={showAddButtonsContOnDekstop}
+                /> */}
+                {/* <BorderLine />*/}
                 <ToolbarButton
                     type="exit"
                     onClick={() => null}
@@ -152,8 +180,8 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                 />
             </div>
         </div>
-        <button className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
+        <div className='toolbar-open-button' onClick={() => props.onClickOpenButton()}>
             <span className="toolbar-open-button-icon"></span>
-        </button>
+        </div>
     </div>
 })
\ No newline at end of file
diff --git a/src/components/mainScreen/toolbar/toolbarButton.tsx b/src/components/mainScreen/toolbar/toolbarButton.tsx
index f4caf60..492089c 100644
--- a/src/components/mainScreen/toolbar/toolbarButton.tsx
+++ b/src/components/mainScreen/toolbar/toolbarButton.tsx
@@ -10,21 +10,16 @@ type TProps = {
     active?: boolean
     isNotification?: boolean
     isSelected?: boolean
-    isLarge?: boolean
+    size?: 'large' | 'medium'
     isVisible?: boolean | false
 }
 
 export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
     const [isActive, setIsActive] = useState<boolean>(props?.active || false);
-    const [showAddButtons, setShowAddButtons] = useState(false)
 
     function onClick() {
         setIsActive(!isActive)
-    }
-
-    function showAdd() {
-        setShowAddButtons(!showAddButtons);
-    }
+    }    
 
     return <div className={`toolbar-button-area ${props?.isVisible ? 'hidden' : ''}`}>
         <button 
@@ -33,42 +28,30 @@ export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
                 ${props.type} ${isActive ? 'on' : ''} 
                 ${props?.isNotification ? 'notification' : ''}
                 ${props?.isSelected ? 'selected' : ''}
-                ${props?.isLarge ? `large ${props.type}` : ''}
+                ${props?.size ? `large ${props.type}` : ''}
                 `
             } 
             onClick={() => {
                 props.onClick();
-                showAdd();
                 //@ts-ignore
                 if(CaptionToolbarButtons[`${props.type} on`] || props.type === 'users' || props.type === 'other')
                     onClick();
             }}
         >
             {
-                props?.isLarge
+                props?.size === 'large'
                 ? <div className="toolbar-button-large-view">
                     <span className="toolbar-button-large-view-icon"></span>
                     <span className="toolbar-button-large-view-title">{CaptionToolbarButtons[props.type]}</span>
                 </div>
+                : props?.size === 'medium'
+                ? <div className="toolbar-button-medium-view">
+                    <span className="toolbar-button-medium-view-icon"></span>
+                    <span className="toolbar-button-medium-view-title">{CaptionToolbarButtons[props.type]}</span>
+                </div>
                 : null
             }
         </button>        
-        {/* {
-            showAddButtons && props.type.includes('user')
-            &&
-            <div className="toolbar-button-add-buttons">
-                <button 
-                    className={`toolbar-button micro ${isActive ? 'on' : ''}`} 
-                    onClick={() => onClick()}
-                >
-                </button>
-                <button 
-                    className={`toolbar-button control ${isActive2 ? 'on' : ''}`} 
-                    onClick={() => onClick2()}
-                >
-                </button>
-            </div>
-        }         */}
         {
             props.isCaption && <div className="toolbar-button-description-container">
                 <span className="toolbar-button-description-triangle"></span>
diff --git a/src/components/mainScreen/toolbar/typeButtons.ts b/src/components/mainScreen/toolbar/typeButtons.ts
index 0ab9f4b..fbb87ab 100644
--- a/src/components/mainScreen/toolbar/typeButtons.ts
+++ b/src/components/mainScreen/toolbar/typeButtons.ts
@@ -14,4 +14,6 @@ export type TypeToolbarButtons =
     | 'sound'
     | 'exit'
     | 'copy'
-    | 'share'    
\ No newline at end of file
+    | 'share'
+    | 'language ru'
+    | 'language en'
\ No newline at end of file
diff --git a/src/components/mainScreen/toolbar/typeCaptionButtons.ts b/src/components/mainScreen/toolbar/typeCaptionButtons.ts
index ab1428f..6aab539 100644
--- a/src/components/mainScreen/toolbar/typeCaptionButtons.ts
+++ b/src/components/mainScreen/toolbar/typeCaptionButtons.ts
@@ -14,5 +14,7 @@ export const CaptionToolbarButtons = {
     'sound': 'Включить звук',
     'exit': 'Завершить презентацию',
     'copy': 'Скопировать',
-    'share': 'Поделиться'
+    'share': 'Поделиться',
+    'language ru': 'Язык',
+    'language en': 'Language'
 }    
\ No newline at end of file