From 943d281f12638571022b98a54f35b8514bb42085 Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Mon, 15 Aug 2022 18:39:15 +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=BE=D0=B1=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA?=
 =?UTF-8?q?=D0=B0=20safe-=D0=B7=D0=BE=D0=BD=20=D0=B4=D0=BB=D1=8F=20=D0=BD?=
 =?UTF-8?q?=D0=BE=D1=80=D0=BC=D0=B0=D0=BB=D1=8C=D0=BD=D0=BE=D0=B3=D0=BE=20?=
 =?UTF-8?q?=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F=20=D0=BF=D1=80=D0=B8=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD=D0=B8?=
 =?UTF-8?q?=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                             |  2 +-
 src/App.css                                   |  4 +-
 src/App.tsx                                   | 35 +++++++----
 .../mobileAddPart/mobileAddPart.css           |  9 +++
 .../mobileAddPart/mobileAddPart.tsx           | 54 ++++++++---------
 src/components/mainScreen/toolbar/toolbar.css | 58 +++++++++++++++++--
 src/index.css                                 |  5 ++
 7 files changed, 121 insertions(+), 46 deletions(-)

diff --git a/public/index.html b/public/index.html
index 7808a37..7c722d1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,7 +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"> -->
+    <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 aa07d6c..f2e75ec 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,8 +2,6 @@
   font-family: inter;
 
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  -webkit-tap-highlight-color: transparent;
-
-  /* padding: env(20px) env(44px) env(20px) env(44px); */
+  -webkit-tap-highlight-color: transparent;  
 }
 
diff --git a/src/App.tsx b/src/App.tsx
index 6d3ba9c..318ec68 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,26 +4,37 @@ import { ContextWindowHeight } from './components/contextWindowHeight';
 import { MainScreen } from './components/mainScreen/mainScreen';
 
 function App() {
-  // const [windowHeight, setWindowHeight] = useState<number>(window.screen.availHeight);
+  // const [windowHeight, setWindowHeight] = useState<number>(window.screen.availHeight); - не робит на iphone
   const [windowHeight, setWindowHeight] = useState<number>(window.visualViewport.height);
-
-  // window.addEventListener('resize', e => {
-  //   //@ts-ignore
-  //   setWindowHeight(e.currentTarget.screen.availHeight)
-  // })
+  const [currentOrientaton, setCurrentOrientaton] = useState<number>(window.orientation);
+  
 
   window.visualViewport.addEventListener('resize', (e) => {
     //@ts-ignore
     setWindowHeight(e.currentTarget.height, windowHeight)
   })
 
-  useEffect(() => {
-    // alert(navigator.userAgent.includes('iPhone'))
-    // alert(window.visualViewport.height + '\n' + windowHeight)
-  }, [])
-    
+ 
 
-  
+  window.addEventListener('orientationchange', e => { // !!! работает на свойстве помеченном как deprecate - на айфоне иначе хз как
+    //@ts-ignore
+    let angle = e.target.orientation as number;
+    if(currentOrientaton !== angle) {      
+      setCurrentOrientaton(angle);
+    }
+    return
+  })
+
+  useEffect(() => {
+    if(!navigator.userAgent.includes('iPhone')) {
+      return;
+    }
+    if(currentOrientaton === 90) {
+      document.querySelector('body').style['paddingLeft'] = 'env(safe-area-inset-left)'
+    } else if(currentOrientaton === -90) {
+      document.querySelector('body').style['paddingLeft'] = '0'
+    }
+  }, [currentOrientaton]);
 
   return (
     <div className="App">
diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.css b/src/components/mainScreen/mobileAddPart/mobileAddPart.css
index aff148b..2eeccd9 100644
--- a/src/components/mainScreen/mobileAddPart/mobileAddPart.css
+++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.css
@@ -1,3 +1,9 @@
+.mobile-users-part-container-help {
+    width: 100%;
+    
+    /* padding-right: env(safe-area-inset-right); */
+}
+
 .mobile-users-part {
     position: relative;
     width: 100%;
@@ -9,6 +15,9 @@
     color: #FFFFFF;
     box-sizing: border-box;
     background-color: #333333;
+
+    padding-right: 48px;
+    
 }
 
 .border-line {
diff --git a/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx b/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx
index ed69854..160c709 100644
--- a/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx
+++ b/src/components/mainScreen/mobileAddPart/mobileAddPart.tsx
@@ -20,32 +20,34 @@ type TProps = {
 }
 
 export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
-    return <div className="mobile-users-part">
-        <MobileAddPartHeader
-            onClick={props.onClickClose}
-            title={props.title}
-            isBackButton={props?.isContainBack}
-            onClickBackButton={props?.onClickBackButton}
-        />
-        <BorderLine />        
-        {
-            props.type === 'users'
-            ? <UsersList />
-            : props.type === 'other'
-            ? <SettingButtons 
-                type="other"
-                onClickChangeLang={props.onClickChangeLang}
-                onClickShare={props.onClickShare}
-                onClickExit={props.onClickExit}
+    return <div className="mobile-users-part-container-help">
+        <div className="mobile-users-part">
+            <MobileAddPartHeader
+                onClick={props.onClickClose}
+                title={props.title}
+                isBackButton={props?.isContainBack}
+                onClickBackButton={props?.onClickBackButton}
             />
-            : props.type === 'selectLang'
-            ? <SettingButtons
-                type="selectLang"
-                onClickSelectLang={props.onClickSelectLang}
-            />
-            : props.type === 'share'
-            ? <ShareContainer />
-            : null
-        }        
+            <BorderLine />        
+            {
+                props.type === 'users'
+                ? <UsersList />
+                : props.type === 'other'
+                ? <SettingButtons 
+                    type="other"
+                    onClickChangeLang={props.onClickChangeLang}
+                    onClickShare={props.onClickShare}
+                    onClickExit={props.onClickExit}
+                />
+                : props.type === 'selectLang'
+                ? <SettingButtons
+                    type="selectLang"
+                    onClickSelectLang={props.onClickSelectLang}
+                />
+                : props.type === 'share'
+                ? <ShareContainer />
+                : null
+            }        
+        </div>
     </div>
 })
\ No newline at end of file
diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css
index 3ab0ab1..ec9abdc 100644
--- a/src/components/mainScreen/toolbar/toolbar.css
+++ b/src/components/mainScreen/toolbar/toolbar.css
@@ -22,7 +22,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    align-items: center;
+    align-items: center;    
 }
 
 .toolbar-field-part {
@@ -47,18 +47,20 @@
     z-index: 0;
     position: absolute;
     top: calc((100% - 128px) / 2);
-    left: calc(100% - 4px);
+    left: calc(100% - 7px);
     
     display: flex;
     justify-content: center;
     align-items: center;
 
-    width: 24px;
+    width: 32px;
     height: 128px;
     border: none;
     background: url('openToolbarBackIcon.svg') 50% 50% no-repeat;
     background-size: 100% 100%;
 
+    /* background-color: #2F80ED; */
+
     cursor: pointer;
 }
 
@@ -66,7 +68,6 @@
     width: 24px;
     height: 24px;
     background: url('pointerIcon.svg') 50% 50% no-repeat;
-    background-size: 24px 24px;
 }
 
 .toolbar-container.opened .toolbar-open-button-icon {
@@ -501,4 +502,53 @@
     .control-button {
         height: 44px;
     }
+
+    .show-toolbar-enter {
+        transform: translateX(-60px);
+    }
+    
+    .show-toolbar-enter-done {
+        transform: translateX(0px);
+    }
+
+    .show-toolbar-enter-active {
+        transform: translateX(0px);
+        transition: .3s;
+    }
+    
+    .show-toolbar-exit {
+        transform: translateX(0);
+    }
+    
+    .show-toolbar-exit-active {
+        transform: translateX(-60px);
+        transition: .3s;
+    }        
+    
+    .show-toolbar-exit-done {
+        transform: translateX(-60px);
+    }
+
+
+    .show-toolbar-enter .toolbar-field {
+        opacity: 0;
+    }
+    
+    .show-toolbar-enter-done .toolbar-field {
+        opacity: 1;
+    }
+
+    .show-toolbar-enter-active .toolbar-field {
+        opacity: 1;
+        transition: .3s;
+    }
+
+    .show-toolbar-exit-active .toolbar-field {
+        opacity: 0;
+        transition: .3s;
+    }
+
+    .show-toolbar-exit-done .toolbar-field {
+        opacity: 0;        
+    }
 }
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index ec2585e..f62d45e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -5,6 +5,11 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #333333;
+  box-sizing: border-box;
+  padding-left: env(safe-area-inset-left);
+  /* padding-right: env(safe-area-inset-right); */
+  padding-top: env(safe-area-inset-top);
 }
 
 code {