made the presentation modal component (did not deleted it yet)

src/client/js/components/Page/PageManagement.jsx

@@ -12,6 +12,7 @@ import PageDeleteModal from '../PageDeleteModal';
 import PageRenameModal from '../PageRenameModal';
 import PageDuplicateModal from '../PageDuplicateModal';
 import CreateTemplateModal from '../CreateTemplateModal';
+import PagePresentationModal from '../PagePresentationModal';
 
 
 const PageManagement = (props) => {
@@ -25,6 +26,7 @@ const PageManagement = (props) => {
   const [isPageDuplicateModalShown, setIsPageDuplicateModalShown] = useState(false);
   const [isPageTemplateModalShown, setIsPageTempleteModalShown] = useState(false);
   const [isPageDeleteModalShown, setIsPageDeleteModalShown] = useState(false);
+  const [isPagePresentationModalShown, setIsPagePresentationModalShown] = useState(false);
 
   function openPageRenameModalHandler() {
     setIsPageRenameModalShown(true);
@@ -58,6 +60,14 @@ const PageManagement = (props) => {
     setIsPageDeleteModalShown(false);
   }
 
+  function openPagePresentationModalHandler() {
+    setIsPagePresentationModalShown(true);
+  }
+
+  function closePagePresentationModalHandler() {
+    setIsPagePresentationModalShown(false);
+  }
+
 
   // TODO GW-2746 bulk export pages
   // async function getArchivePageData() {
@@ -104,6 +114,9 @@ const PageManagement = (props) => {
         <button type="button" className="dropdown-item" onClick={() => { exportPageHandler('md') }}>
           <i className="icon-fw icon-cloud-download"></i>{t('export_bulk.export_page_markdown')}
         </button>
+        <button type="button" className="dropdown-item" onClick={openPagePresentationModalHandler}>
+          <i className="icon-fw icon-cloud-download"></i>presentation
+        </button>
         {/* TODO GW-2746 create api to bulk export pages */}
         {/* <button className="dropdown-item" type="button" onClick={openArchiveModalHandler}>
           <i className="icon-fw"></i>{t('Create Archive Page')}
@@ -150,6 +163,11 @@ const PageManagement = (props) => {
           path={path}
           isAbleToDeleteCompletely={isAbleToDeleteCompletely}
         />
+        <PagePresentationModal
+          isOpen={isPagePresentationModalShown}
+          onClose={closePagePresentationModalHandler}
+          href="?presentation=1"
+        />
       </>
     );
   }

src/client/js/components/PagePresentationModal.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  Modal, ModalBody,
+} from 'reactstrap';
+
+const PagePresentationModal = (props) => {
+  return (
+    <Modal isOpen={props.isOpen} toggle={props.onClose} className="fullscreen-layer1">
+      <ModalBody className="grw-presentation-page">
+        <iframe src={props.href} />
+      </ModalBody>
+    </Modal>
+  );
+};
+
+export default PagePresentationModal;

src/client/styles/scss/_page-presentation.scss

@@ -0,0 +1,17 @@
+.fullscreen-layer1 {
+  z-index: 9999;
+  // attached !importatnt for updating from .modal-dialog class style
+  width: 90vw !important;
+  max-width: unset !important;
+
+  .grw-presentation-page {
+    height: 90vh;
+    background: black;
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+  }
+}

src/client/styles/scss/style-app.scss

@@ -49,6 +49,7 @@
 @import 'page_list';
 @import 'page-path';
 @import 'page';
+@import 'page-presentation';
 @import 'search';
 @import 'shortcuts';
 @import 'sidebar';