Merge pull request #170 from epam/features/EPMUII-5024-hide-ui-contro…

…ls-on-image Feature/EPMUII-5024-Responsiveness - Hide UI controls on image render press
epam · Sep 29, 2023 · 6e337c8 · 6e337c8
2 parents baf5c54 + b5c1de4
commit 6e337c8
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 25 deletions.
diff --git a/src/engine/Graphics2d.module.css b/src/engine/Graphics2d.module.css
@@ -98,7 +98,7 @@
 
 @media screen and (min-width: 2560px) {
     .wrapperStyles {
-        width: 90%;
+        width: 80%;
         border: 2px solid #dc5e47;
         border-radius: 10px;
         display: flex;

diff --git a/src/ui/Main.jsx b/src/ui/Main.jsx
@@ -41,7 +41,7 @@ export const Main = () => {
   const [strAlertTitle, setStrAlertTitle] = useState('');
   const [strAlertText, setStrAlertText] = useState('');
   const [isFullMode, setIsFullMode] = useState(false);
-  const [isMobile, setIsMobile] = useState(window.innerWidth < 1024);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
   const appRef = useRef();
 
   useEffect(() => {
@@ -187,7 +187,7 @@ export const Main = () => {
           ) : (
             <StartScreen />
           )}
-          {isReady && !isMobile && (
+          {isReady && (
             <div className={cx(isFullMode && css.fullscreen)}>
               <div className={css.left}>
                 <LeftToolbar />

diff --git a/src/ui/Main.module.css b/src/ui/Main.module.css
@@ -69,7 +69,9 @@
   right: 0;
   top:50%;
   z-index: 10;
-
+}
+.left {
+  display: none;
 }
 
 .center div {
@@ -126,7 +128,7 @@
     display: block;
     position: absolute;
     left: 25px;
-    top: 10%;
+    top: 12%;
     z-index: 1010;
   }
 
@@ -135,15 +137,12 @@
     flex-direction: column;
     position: absolute;
     left: 25px;
-    bottom: 25px;
+    bottom: 2rem;
     z-index: 1010;
   }
 
-
   .settings {
-    display: block;
-    position: absolute;
-    z-index: 2000;
+    display: none;
   }
 
   .center {
@@ -201,6 +200,9 @@
     transition: opacity 300ms ease-in-out;
     z-index: 1100;
   }
+  .left {
+    top: 8%;
+  }
 
 }
 
@@ -216,15 +218,15 @@
   }
 
   .left {
-    top:12%;
+    top:10%;
   }
 
 }
 
 @media screen and (min-width: 1024px) and (orientation: portrait) {
 
   .header__panels {
-    flex-wrap: nowrap;
+    flex-wrap: wrap;
   }
 
   .settings {
@@ -240,6 +242,7 @@
 
 }
 
+
 @media screen and (min-width: 2560px) and (orientation: landscape) {
 
   .left {

diff --git a/src/ui/MobileSettings/MobileSettings.jsx b/src/ui/MobileSettings/MobileSettings.jsx
@@ -10,7 +10,7 @@ export const MobileSettings = () => {
   const [isSettingsMenuOpen, setIsSettingsMenuOpen] = useState(false);
   const [is2DMenuOpen, setIs2DMenuOpen] = useState(false);
   const [isCursorMenuOpen, setIsCursorMenuOpen] = useState(false);
-  const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia('(max-width: 767px)').matches);
+  const [isSmallScreen, setIsSmallScreen] = useState(window.matchMedia('(max-width: 768px)').matches);
   const [isMenuHidden, setIsMenuHidden] = useState(false);
 
   const containerRef = useRef(null);
@@ -41,17 +41,14 @@ export const MobileSettings = () => {
       setIsMenuHidden((current) => !current);
       closeAllMenu();
     };
-
     const startPress = () => {
       pressTimer.current = setTimeout(() => {
         onLongPress();
       }, 1000);
     };
-
     const endPress = () => {
       clearTimeout(pressTimer.current);
     };
-
     document.addEventListener('touchstart', startPress);
     document.addEventListener('touchend', endPress);
 
@@ -71,7 +68,59 @@ export const MobileSettings = () => {
       window.removeEventListener('resize', handleResize);
     };
   }, []);
-  return (
+  return isSmallScreen ? (
+    <div className={`${css.settings__menu} ${isMenuHidden ? css.hidden : css.settings__menu}`} ref={containerRef}>
+      <div className={css.buttons__container}>
+        <UIButton icon="settings-linear" cx={css['settings__menu__button']} handler={toggleSettingsMenu} testId={'buttonSettingsLinear'}>
+          <SVG name="settings-linear" width={42} height={42} />
+        </UIButton>
+        <UIButton icon="2D" cx={`${css['settings__menu__button']} ${css.hide}`} handler={toggle2DMenu} testId={'button2D'}>
+          <SVG name="2D" width={42} height={42} />
+        </UIButton>
+        <UIButton icon="cursor" cx={css['settings__menu__button']} handler={toggleCursorMenu} testId={'buttonCursor'}>
+          <SVG name="cursor" width={42} height={42} />
+        </UIButton>
+      </div>
+      {isSettingsMenuOpen && (
+        <div className={css.settings__menu_block + ' ' + css.flex}>
+          <Mode2dSettingsPanel />
+        </div>
+      )}
+      {(is2DMenuOpen || !isSmallScreen) && (
+        <div className={css.settings__menu_block}>
+          <LeftToolbar />
+        </div>
+      )}
+      {isCursorMenuOpen && (
+        <div className={css.settings__menu_block + ' ' + css.horizontal}>
+          <TopToolbar />
+        </div>
+      )}
+    </div>
+  ) : (
+    <div className={`${css.settings__menu} ${isMenuHidden ? css.hidden : css.settings__menu}`} ref={containerRef}>
+      <div className={css.buttons__container}>
+        <UIButton icon="settings-linear" cx={css['settings__menu__button']} handler={toggleSettingsMenu} testId={'buttonSettingsLinear'}>
+          <SVG name="settings-linear" width={42} height={42} />
+        </UIButton>
+        <UIButton icon="cursor" cx={css['settings__menu__button']} handler={toggleCursorMenu} testId={'buttonCursor'}>
+          <SVG name="cursor" width={42} height={42} />
+        </UIButton>
+      </div>
+      {isSettingsMenuOpen && (
+        <div className={css.settings__menu_block + ' ' + css.flex}>
+          <Mode2dSettingsPanel />
+        </div>
+      )}
+      {isCursorMenuOpen && (
+        <div className={css.settings__menu_block + ' ' + css.horizontal}>
+          <TopToolbar />
+        </div>
+      )}
+    </div>
+  );
+};
+/*
     <div className={`${css.settings__menu} ${isMenuHidden ? css.hidden : css.settings__menu}`} ref={containerRef}>
       <div className={css.buttons__container}>
         <UIButton icon="settings-linear" cx={css['settings__menu__button']} handler={toggleSettingsMenu} testId={'buttonSettingsLinear'}>
@@ -92,7 +141,7 @@ export const MobileSettings = () => {
         </div>
       )}
       {(is2DMenuOpen || !isSmallScreen) && (
-        <div className={`${css.settings__menu_block} ${css.animation}`}>
+        <div className={css.settings__menu_block}>
           <LeftToolbar />
         </div>
       )}
@@ -102,5 +151,4 @@ export const MobileSettings = () => {
         </div>
       )}
     </div>
-  );
-};
+  );*/
diff --git a/src/ui/MobileSettings/MobileSettings.module.css b/src/ui/MobileSettings/MobileSettings.module.css
@@ -16,7 +16,6 @@
     border-radius: 0.5rem;
     animation: onHide .6s ease-in-out;
     animation-fill-mode: forwards;
-
 }
 
 .buttons__container button {
@@ -56,6 +55,7 @@
     display: flex;
     justify-content: space-around;
     position: absolute;
+    top: 0;
     left: 0;
     right: 0;
     padding: 10px;
@@ -118,9 +118,6 @@
         left: 12%;
         z-index: 10;
     }
-    .animation {
-        animation: none;
-    }
 
     .horizontal {
         width: 10rem;
@@ -139,10 +136,17 @@
 @media screen and (orientation: portrait) and (min-width: 768px) {
 
     .buttons__container {
-        top: 14%;
+        top: 12%;
     }
 
     .horizontal {
         top: 12%;
     }
 }
+
+@media screen and (min-width: 768px)  and (orientation: landscape){
+
+    .settings__menu_block {
+        top: 12%;
+    }
+}