New Fullscreen component

scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx

@@ -0,0 +1,50 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import * as React from "react";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+
+type Props = {
+  onClick?: () => void;
+};
+
+const Button = styled.a`
+  width: 50px;
+  &:hover {
+    color: #33b2e8;
+  }
+`;
+
+const OpenInFullscreenButton: FC<Props> = ({ onClick }) => {
+  const [t] = useTranslation("repos");
+
+  return (
+    <Button title={t("diff.fullscreen.open")} className="button" onClick={onClick}>
+      <i className="fas fa-search-plus" />
+    </Button>
+  );
+};
+
+export default OpenInFullscreenButton;

scm-ui/ui-components/src/buttons/index.ts

@@ -33,4 +33,5 @@ export { default as SubmitButton } from "./SubmitButton";
 export { default as DownloadButton } from "./DownloadButton";
 export { default as ButtonGroup } from "./ButtonGroup";
 export { default as ButtonAddons } from "./ButtonAddons";
+export { default as OpenInFullscreenButton } from "./OpenInFullscreenButton";
 export { default as RemoveEntryOfTableButton } from "./RemoveEntryOfTableButton";

scm-ui/ui-components/src/modals/FullscreenModal.tsx

@@ -0,0 +1,52 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2020-present Cloudogu GmbH and Contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import * as React from "react";
+import { FC, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import { Modal } from "./Modal";
+import Button from "../buttons/Button";
+import styled from "styled-components";
+
+type Props = {
+  title: string;
+  closeFunction: () => void;
+  body: ReactNode;
+  active: boolean;
+};
+
+const FullSizedModal = styled(Modal)`
+  & .modal-card {
+    width: 98%;
+    max-height: 100vh;
+  }
+`;
+
+const FullscreenModal: FC<Props> = ({ title, closeFunction, body, active }) => {
+  const [t] = useTranslation("repos");
+  const footer = <Button label={t("diff.fullscreen.close")} action={closeFunction} color="grey" />;
+
+  return <FullSizedModal title={title} closeFunction={closeFunction} body={body} footer={footer} active={active} />;
+};
+
+export default FullscreenModal;

scm-ui/ui-components/src/modals/Modal.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 import * as React from "react";
-import {FC} from "react";
+import { FC } from "react";
 import classNames from "classnames";
 import usePortalRootElement from "../usePortalRootElement";
 import ReactDOM from "react-dom";

scm-ui/ui-components/src/modals/index.ts

@@ -26,3 +26,4 @@
 
 export { default as ConfirmAlert, confirmAlert } from "./ConfirmAlert";
 export { default as Modal } from "./Modal";
+export { default as FullscreenModal } from "./FullscreenModal";

scm-ui/ui-webapp/public/locales/de/repos.json

@@ -263,7 +263,11 @@
     "expandLastBottomByLines": "Bis zu {{count}} weitere Zeilen laden",
     "expandLastBottomComplete": "Alle verbleibenden Zeilen laden",
     "expanding": "Zeilen werden geladen ...",
-    "expansionFailed": "Fehler beim Laden der zusätzlichen Zeilen"
+    "expansionFailed": "Fehler beim Laden der zusätzlichen Zeilen",
+    "fullscreen": {
+      "open": "In Vollbildansicht öffnen",
+      "close": "Schließen"
+    }
   },
   "fileUpload": {
     "clickHere": "Klicken Sie hier um Ihre Datei hochzuladen.",

scm-ui/ui-webapp/public/locales/en/repos.json

@@ -270,7 +270,11 @@
     "expandLastBottomByLines": "load up to {{count}} more lines",
     "expandLastBottomComplete": "load all remaining lines",
     "expanding": "loading lines ...",
-    "expansionFailed": "Error while loading additional lines"
+    "expansionFailed": "Error while loading additional lines",
+    "fullscreen": {
+      "open": "Open in Fullscreen",
+      "close": "Close"
+    }
   },
   "fileUpload": {
     "clickHere": "Click here to select your file",

scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx

@@ -21,87 +21,54 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import React from "react";
+import React, { FC, useEffect, useState } from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
 import { apiClient, ErrorNotification, Loading, SyntaxHighlighter } from "@scm-manager/ui-components";
 import { File, Link } from "@scm-manager/ui-types";
 
-type Props = WithTranslation & {
+type Props = {
   file: File;
   language: string;
 };
 
-type State = {
+const SourcecodeViewer: FC<Props> = ({ file, language }) => {
-  content: string;
+  const [content, setContent] = useState("");
-  error?: Error;
+  const [error, setError] = useState<Error | undefined>(undefined);
-  loaded: boolean;
+  const [loading, setLoading] = useState(true);
-  currentFileRevision: string;
+  const [currentFileRevision, setCurrentFileRevision] = useState("");
-};
 
-class SourcecodeViewer extends React.Component<Props, State> {
+  useEffect(() => {
-  constructor(props: Props) {
+    function fetchContent() {
-    super(props);
+      getContent((file._links.self as Link).href)
+        .then(content => {
+          setLoading(false);
+          setContent(content);
+          setCurrentFileRevision(file.revision);
+        })
+        .catch(error => {
+          setLoading(false);
+          setError(error);
+        });
+    }
 
-    this.state = {
-      content: "",
-      loaded: false,
-      currentFileRevision: ""
-    };
-  }
-
-  componentDidMount() {
-    this.fetchContentIfChanged();
-  }
-
-  componentDidUpdate() {
-    this.fetchContentIfChanged();
-  }
-
-  private fetchContentIfChanged() {
-    const { file } = this.props;
-    const { currentFileRevision } = this.state;
     if (file.revision !== currentFileRevision) {
-      this.fetchContent();
+      fetchContent();
     }
+  });
+
+  if (loading) {
+    return <Loading />;
   }
 
-  fetchContent = () => {
+  if (error) {
-    const { file } = this.props;
+    return <ErrorNotification error={error} />;
-    getContent((file._links.self as Link).href)
-      .then(content => {
-        this.setState({
-          content,
-          loaded: true,
-          currentFileRevision: file.revision
-        });
-      })
-      .catch(error => {
-        this.setState({
-          error,
-          loaded: true
-        });
-      });
-  };
-
-  render() {
-    const { content, error, loaded } = this.state;
-    const language = this.props.language;
-
-    if (error) {
-      return <ErrorNotification error={error} />;
-    }
-
-    if (!loaded) {
-      return <Loading />;
-    }
-
-    if (!content) {
-      return null;
-    }
-
-    return <SyntaxHighlighter language={getLanguage(language)} value={content} />;
   }
-}
+
+  if (!content) {
+    return null;
+  }
+
+  return <SyntaxHighlighter language={getLanguage(language)} value={content} />;
+};
 
 export function getLanguage(language: string) {
   return language.toLowerCase();
@@ -111,4 +78,4 @@ export function getContent(url: string) {
   return apiClient.get(url).then(response => response.text());
 }
 
-export default withTranslation("repos")(SourcecodeViewer);
+export default SourcecodeViewer;

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 = (
+        content = <SourcesView revision={revision} file={file} repository={repository} path={path} />;
-          <SourcesView revision={revision} file={file} repository={repository} path={path}/>
-        );
         break;
       case "history":
-        content = (
+        content = <HistoryView file={file} repository={repository} />;
-          <HistoryView file={file} repository={repository}/>
-        );
         break;
       case "annotations":
-        content = (
+        content = <AnnotateView file={file} repository={repository} />;
-          <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>