recover presentation option menu | position inside tldraw menu

bigbluebutton-html5/client/main.html

@@ -108,6 +108,11 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
     #TD-Tools > div {
       flex-direction: column;
     }
+
+    #TD-Styles + div {
+      display: flex;
+      padding-right: 2.5rem;
+    }
   </style>
   <script>
     document.addEventListener('gesturestart', function (e) {

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

@@ -10,6 +10,7 @@ import { politeSRAlert } from '/imports/utils/dom-utils';
 import { Session } from 'meteor/session';
 import PresentationToolbarContainer from './presentation-toolbar/container';
 import PresentationPlaceholder from './presentation-placeholder/component';
+import PresentationMenu from './presentation-menu/container';
 import CursorWrapperContainer from './cursor/cursor-wrapper-container/container';
 import AnnotationGroupContainer from '../whiteboard/annotation-group/container';
 import PresentationOverlayContainer from './presentation-overlay/container';
@@ -88,6 +89,7 @@ class Presentation extends PureComponent {
     this.getPresentationSizesAvailable = this.getPresentationSizesAvailable.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.setTldrawAPI = this.setTldrawAPI.bind(this);
+    this.renderPresentationMenu = this.renderPresentationMenu.bind(this);
 
     this.onResize = () => setTimeout(this.handleResize.bind(this), 0);
     this.renderCurrentPresentationToast = this.renderCurrentPresentationToast.bind(this);
@@ -641,9 +643,10 @@ class Presentation extends PureComponent {
         }}
       >
         <Styled.VisuallyHidden id="currentSlideText">{slideContent}</Styled.VisuallyHidden>
-        {this.renderPresentationClose()}
+        {/* {this.renderPresentationClose()}
         {this.renderPresentationDownload()}
-        {this.renderPresentationFullscreen()}
+        {this.renderPresentationFullscreen()} */}
+        {this.renderPresentationMenu()}
         <Styled.PresentationSvg
           key={currentSlide.id}
           data-test={!presentationIsOpen ? 'hiddenWhiteboard' : 'whiteboard'}
@@ -790,6 +793,7 @@ class Presentation extends PureComponent {
       intl,
       fullscreenElementId,
     } = this.props;
+    const { isFullscreen } = this.state;
 
     if (!ALLOW_FULLSCREEN) return null;
 
@@ -843,6 +847,25 @@ class Presentation extends PureComponent {
     );
   }
 
+  renderPresentationMenu() {
+    const {
+      intl,
+      fullscreenElementId,
+      layoutContextDispatch,
+    } = this.props;
+
+    return (
+      <PresentationMenu
+        fullscreenRef={this.refPresentationContainer}
+        getScreenshotRef={this.getSvgRef}
+        elementName={intl.formatMessage(intlMessages.presentationLabel)}
+        elementId={fullscreenElementId}
+        toggleSwapLayout={MediaService.toggleSwapLayout}
+        layoutContextDispatch={layoutContextDispatch}
+      />
+    );
+  }
+
   render() {
     const {
       userIsPresenter,
@@ -859,6 +882,8 @@ class Presentation extends PureComponent {
       podId,
       intl,
       isViewersCursorLocked,
+      fullscreenElementId,
+      layoutContextDispatch,
     } = this.props;
 
     const {
@@ -914,7 +939,7 @@ class Presentation extends PureComponent {
     }
 
     return (
-      <>   
+      <>
         <Styled.PresentationContainer
           role="region"
 
@@ -933,6 +958,7 @@ class Presentation extends PureComponent {
               : null,
           }}
         >
+          {this.renderPresentationMenu()}
           <WhiteboardContainer 
             whiteboardId={currentSlide?.id}
             podId={podId}

bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/styles.js

@@ -22,19 +22,17 @@ import {
 } from '/imports/ui/stylesheets/styled-components/general';
 
 const DropdownButton = styled.button`
-  background-color: ${colorGrayLightest};
+  background-color: #FFF;
   border: none;
-  border-radius: 1px;
+  border-radius: 7px;
   color: ${colorGrayDark};
   cursor: pointer;
-  padding: .2rem .5rem;
+  padding: .3rem .5rem;
+  padding-bottom: 6px;
+  tab-index: 0;
 
-  &:hover, &:focus {
-    color: ${colorGray};
-  }
-
-  &:focus {
-    outline: ${colorGray} solid ${borderSize};
+  &:hover {
+    background-color: #ececec;
   }
 `;
 
@@ -42,8 +40,8 @@ const Right = styled.div`
   cursor: pointer;
   position: absolute;
   left: auto;
-  top: ${borderSize};
-  right: ${borderSize};
+  top: .5rem;
+  right: .5rem;
   z-index: 999;
 
   [dir="rtl"] & {