Merge pull request #17325 from KDSBrowne/bbb-16946

fix: Update Style Menu Position On Iphone

bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx

@@ -9,7 +9,11 @@ import Cursors from './cursors/container';
 import Settings from '/imports/ui/services/settings';
 import logger from '/imports/startup/client/logger';
 import KEY_CODES from '/imports/utils/keyCodes';
-import { presentationMenuHeight } from '/imports/ui/stylesheets/styled-components/general';
+import {
+  presentationMenuHeight,
+  styleMenuOffset,
+  styleMenuOffsetSmall
+} from '/imports/ui/stylesheets/styled-components/general';
 import Styled from './styles';
 import PanToolInjector from './pan-tool-injector/component';
 import {
@@ -64,6 +68,7 @@ export default function Whiteboard(props) {
     hasMultiUserAccess,
     tldrawAPI,
     setTldrawAPI,
+    isIphone,
   } = props;
   const { pages, pageStates } = initDefaultPages(curPres?.pages.length || 1);
   const rDocument = React.useRef({
@@ -961,6 +966,19 @@ export default function Whiteboard(props) {
     }
   }
 
+  const menuOffsetValues = {
+    true: {
+      true: `${styleMenuOffsetSmall}`,
+      false: `${styleMenuOffset}`,
+    },
+    false: {
+      true: `-${styleMenuOffsetSmall}`,
+      false: `-${styleMenuOffset}`,
+    },
+  };
+
+  const menuOffset = menuOffsetValues[isRTL][isIphone];
+
   return (
     <>
       <Cursors
@@ -982,7 +1000,7 @@ export default function Whiteboard(props) {
             isPresenter,
             size,
             darkTheme,
-            isRTL,
+            menuOffset,
           }}
         />
       </Cursors>
@@ -1007,6 +1025,7 @@ export default function Whiteboard(props) {
 
 Whiteboard.propTypes = {
   isPresenter: PropTypes.bool.isRequired,
+  isIphone: PropTypes.bool.isRequired,
   removeShapes: PropTypes.func.isRequired,
   initDefaultPages: PropTypes.func.isRequired,
   persistShape: PropTypes.func.isRequired,

bigbluebutton-html5/imports/ui/components/whiteboard/container.jsx

@@ -25,6 +25,7 @@ import Auth from '/imports/ui/services/auth';
 import PresentationToolbarService from '../presentation/presentation-toolbar/service';
 import { layoutSelect } from '../layout/context';
 import FullscreenService from '/imports/ui/components/common/fullscreen-button/service';
+import deviceInfo from '/imports/utils/deviceInfo';
 
 const ROLE_MODERATOR = Meteor.settings.public.user.role_moderator;
 const WHITEBOARD_CONFIG = Meteor.settings.public.whiteboard;
@@ -91,6 +92,7 @@ export default withTracker(({
 }) => {
   const shapes = getShapes(whiteboardId, curPageId, intl);
   const curPres = getCurrentPres();
+  const { isIphone } = deviceInfo;
 
   shapes['slide-background-shape'] = {
     assetId: `slide-background-asset-${curPageId}`,
@@ -135,6 +137,7 @@ export default withTracker(({
     notifyNotAllowedChange,
     notifyShapeNumberExceeded,
     darkTheme,
+    isIphone,
   };
 })(WhiteboardContainer);
 

bigbluebutton-html5/imports/ui/components/whiteboard/styles.js

@@ -12,10 +12,10 @@ const TldrawGlobalStyle = createGlobalStyle`
       display: none;
     }
   `}
-  ${({ isRTL }) => `
+  ${({ menuOffset }) => `
     #TD-StylesMenu {
       position: relative;
-      right: ${isRTL ? '7rem' : '-7rem'};
+      right: ${menuOffset};
     }
   `}
   #TD-PrimaryTools-Image {

bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js

@@ -86,6 +86,9 @@ const toastIconSm = '1.2rem';
 
 const presentationMenuHeight = '45px';
 
+const styleMenuOffset = '6.25rem';
+const styleMenuOffsetSmall = '5rem';
+
 export {
   borderSizeSmall,
   borderSize,
@@ -165,4 +168,6 @@ export {
   toastIconMd,
   toastIconSm,
   presentationMenuHeight,
+  styleMenuOffset,
+  styleMenuOffsetSmall,
 };