Common: Navigation: Added action buttons for frame mode

packages/common/components/Navigation/Navigation.js

@@ -49,6 +49,7 @@ const Navigation = ({
   isEmptyPage,
   isDesktop: isDesktopClient,
   isRoom,
+  isFrame,
   ...rest
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -201,6 +202,7 @@ const Navigation = ({
               titles={titles}
               withMenu={withMenu}
               onPlusClick={onPlusClick}
+              isFrame={isFrame}
             />
           </StyledContainer>
           {isTrashFolder && !isEmptyPage && (

packages/common/components/Navigation/sub-components/control-btn.js

@@ -22,12 +22,12 @@ const StyledContainer = styled.div`
     min-width: 15px;
 
     @media ${tablet} {
-      display: none;
+      display: ${(props) => (props.isFrame ? "flex" : "none")};
     }
 
     ${isMobile &&
     css`
-      display: none;
+      display: ${(props) => (props.isFrame ? "flex" : "none")};
     `}
   }
 
@@ -105,6 +105,7 @@ const ControlButtons = ({
   titles,
   withMenu,
   onPlusClick,
+  isFrame,
 }) => {
   const toggleInfoPanelAction = () => {
     toggleInfoPanel && toggleInfoPanel();
@@ -112,7 +113,7 @@ const ControlButtons = ({
   };
 
   return (
-    <StyledContainer isDropBoxComponent={isDropBoxComponent}>
+    <StyledContainer isDropBoxComponent={isDropBoxComponent} isFrame={isFrame}>
       {!isRootFolder || (isRecycleBinFolder && !isEmptyFilesList) ? (
         <>
           {!isMobile && canCreate && (
@@ -121,6 +122,7 @@ const ControlButtons = ({
               getData={getContextOptionsPlus}
               withMenu={withMenu}
               onPlusClick={onPlusClick}
+              isFrame={isFrame}
             />
           )}
 
@@ -153,6 +155,7 @@ const ControlButtons = ({
               getData={getContextOptionsPlus}
               withMenu={withMenu}
               onPlusClick={onPlusClick}
+              isFrame={isFrame}
             />
           )}
           {!isDesktop && (

packages/common/components/Navigation/sub-components/plus-btn.js

@@ -11,7 +11,7 @@ const PlusButton = (props) => {
   const ref = useRef(null);
   const menuRef = useRef(null);
 
-  const { className, getData, withMenu, onPlusClick } = props;
+  const { className, getData, withMenu, onPlusClick, isFrame } = props;
 
   const toggle = (e, isOpen) => {
     isOpen ? menuRef.current.show(e) : menuRef.current.hide(e);
@@ -44,7 +44,8 @@ const PlusButton = (props) => {
         ref={menuRef}
         onHide={onHide}
         scaled={false}
-        leftOffset={150}
+        directionX="right"
+        leftOffset={isFrame ? 190 : 150}
       />
     </div>
   );