New Fullscreen component

scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx

@@ -28,7 +28,14 @@ import classNames from "classnames";
 import styled from "styled-components";
 import { ExtensionPoint } from "@scm-manager/ui-extensions";
 import { File, Repository } from "@scm-manager/ui-types";
-import { DateFromNow, ErrorNotification, FileSize, Icon } from "@scm-manager/ui-components";
+import {
+  DateFromNow,
+  ErrorNotification,
+  FileSize,
+  Icon,
+  OpenInFullscreenButton,
+  FullscreenModal
+} from "@scm-manager/ui-components";
 import { getSources } from "../modules/sources";
 import FileButtonAddons from "../components/content/FileButtonAddons";
 import SourcesView from "./SourcesView";
@@ -48,6 +55,7 @@ type State = {
   collapsed: boolean;
   selected: SourceViewSelection;
   errorFromExtension?: Error;
+  showFullscreenModal: boolean;
 };
 
 const Header = styled.div`
@@ -82,6 +90,12 @@ const LighterGreyBackgroundTable = styled.table`
   background-color: #fbfbfb;
 `;
 
+const BorderLessDiv = styled.div`
+  margin: -1.25rem;
+  border: none;
+  box-shadow: none;
+`;
+
 export type SourceViewSelection = "source" | "history" | "annotations";
 
 class Content extends React.Component<Props, State> {
@@ -90,7 +104,8 @@ class Content extends React.Component<Props, State> {
 
     this.state = {
       collapsed: true,
-      selected: "source"
+      selected: "source",
+      showFullscreenModal: false
     };
   }
 
@@ -100,6 +115,18 @@ class Content extends React.Component<Props, State> {
     }));
   };
 
+  openModal = () => {
+    this.setState({
+      showFullscreenModal: true
+    });
+  };
+
+  closeModal = () => {
+    this.setState({
+      showFullscreenModal: false
+    });
+  };
+
   handleExtensionError = (error: Error) => {
     this.setState({
       errorFromExtension: error
@@ -129,6 +156,7 @@ class Content extends React.Component<Props, State> {
           </div>
           <div className="buttons is-grouped">
             {selector}
+            <OpenInFullscreenButton onClick={this.openModal} />
             <ExtensionPoint
               name="repos.sources.content.actionbar"
               props={{
@@ -209,25 +237,19 @@ class Content extends React.Component<Props, State> {
 
   render() {
     const { file, revision, repository, path, breadcrumb } = this.props;
-    const { selected, errorFromExtension } = this.state;
+    const { selected, errorFromExtension, showFullscreenModal } = this.state;
 
     const header = this.showHeader();
     let content;
     switch (selected) {
       case "source":
-        content = (
-          <SourcesView revision={revision} file={file} repository={repository} path={path}/>
-        );
+        content = <SourcesView revision={revision} file={file} repository={repository} path={path} />;
         break;
       case "history":
-        content = (
-          <HistoryView file={file} repository={repository}/>
-        );
+        content = <HistoryView file={file} repository={repository} />;
         break;
       case "annotations":
-        content = (
-          <AnnotateView file={file} repository={repository} />
-        );
+        content = <AnnotateView file={file} repository={repository} />;
     }
     const moreInformation = this.showMoreInformation();
 
@@ -238,6 +260,12 @@ class Content extends React.Component<Props, State> {
           <Header>{header}</Header>
           {moreInformation}
           {content}
+          <FullscreenModal
+            title={file?.name}
+            closeFunction={() => this.closeModal()}
+            body={<BorderLessDiv className="panel">{content}</BorderLessDiv>}
+            active={showFullscreenModal}
+          />
         </div>
         {errorFromExtension && <ErrorNotification error={errorFromExtension} />}
       </div>