diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
new file mode 100644
index 0000000000..70d4ee5ead
--- /dev/null
+++ b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx
@@ -0,0 +1,63 @@
+/*
+ * 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, useState } from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import FullscreenModal from "../modals/FullscreenModal";
+
+type Props = {
+ modalTitle: string;
+ modalBody: ReactNode;
+};
+
+const Button = styled.a`
+ width: 50px;
+ &:hover {
+ color: #33b2e8;
+ }
+`;
+
+const OpenInFullscreenButton: FC = ({ modalTitle, modalBody }) => {
+ const [t] = useTranslation("repos");
+ const [showModal, setShowModal] = useState(false);
+
+ return (
+ <>
+
+ {showModal && (
+ setShowModal(false)}
+ body={modalBody}
+ active={showModal}
+ />
+ )}
+
+ );
+};
+
+export default OpenInFullscreenButton;
diff --git a/scm-ui/ui-components/src/buttons/index.ts b/scm-ui/ui-components/src/buttons/index.ts
index 3949b333fe..cc7307572d 100644
--- a/scm-ui/ui-components/src/buttons/index.ts
+++ b/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";
diff --git a/scm-ui/ui-components/src/modals/FullscreenModal.tsx b/scm-ui/ui-components/src/modals/FullscreenModal.tsx
new file mode 100644
index 0000000000..72951da5ca
--- /dev/null
+++ b/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: 97vh;
+ }
+`;
+
+const FullscreenModal: FC = ({ title, closeFunction, body, active }) => {
+ const [t] = useTranslation("repos");
+ const footer = ;
+
+ return ;
+};
+
+export default FullscreenModal;
diff --git a/scm-ui/ui-components/src/modals/Modal.tsx b/scm-ui/ui-components/src/modals/Modal.tsx
index 87badb5d4b..d7552ad898 100644
--- a/scm-ui/ui-components/src/modals/Modal.tsx
+++ b/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";
diff --git a/scm-ui/ui-components/src/modals/index.ts b/scm-ui/ui-components/src/modals/index.ts
index 8b79102558..3487d548a3 100644
--- a/scm-ui/ui-components/src/modals/index.ts
+++ b/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";
diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx
index b4ec64a8e8..77d44ec595 100644
--- a/scm-ui/ui-components/src/repos/DiffFile.tsx
+++ b/scm-ui/ui-components/src/repos/DiffFile.tsx
@@ -33,7 +33,7 @@ import Icon from "../Icon";
import { Change, ChangeEvent, DiffObjectProps, File, Hunk as HunkType } from "./DiffTypes";
import TokenizedDiffView from "./TokenizedDiffView";
import DiffButton from "./DiffButton";
-import { MenuContext } from "@scm-manager/ui-components";
+import { MenuContext, OpenInFullscreenButton } from "@scm-manager/ui-components";
import DiffExpander, { ExpandableHunk } from "./DiffExpander";
import HunkExpandLink from "./HunkExpandLink";
import { Modal } from "../modals";
@@ -91,6 +91,10 @@ const ChangeTypeTag = styled(Tag)`
margin-left: 0.75rem;
`;
+const MarginlessModalContent = styled.div`
+ margin: -1.25rem;
+`;
+
class DiffFile extends React.Component {
static defaultProps: Partial = {
defaultCollapse: false,
@@ -426,7 +430,13 @@ class DiffFile extends React.Component {
}
const collapseIcon = this.hasContent(file) ? : null;
const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
- const sideBySideToggle = file.hunks && file.hunks.length && (
+ const openInFullscreen = file?.hunks?.length ? (
+ {body}}
+ />
+ ) : null;
+ const sideBySideToggle = file?.hunks?.length && (
{({ setCollapsed }) => (
{
{sideBySideToggle}
+ {openInFullscreen}
{fileControls}
@@ -465,7 +476,11 @@ class DiffFile extends React.Component {
}
return (
-
+
{errorModal}
diff --git a/scm-ui/ui-webapp/public/locales/de/repos.json b/scm-ui/ui-webapp/public/locales/de/repos.json
index ae0f222765..d3ec72b23f 100644
--- a/scm-ui/ui-webapp/public/locales/de/repos.json
+++ b/scm-ui/ui-webapp/public/locales/de/repos.json
@@ -269,7 +269,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.",
diff --git a/scm-ui/ui-webapp/public/locales/en/repos.json b/scm-ui/ui-webapp/public/locales/en/repos.json
index 3b05c1f48c..5f83ad7ba1 100644
--- a/scm-ui/ui-webapp/public/locales/en/repos.json
+++ b/scm-ui/ui-webapp/public/locales/en/repos.json
@@ -276,7 +276,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",
diff --git a/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx b/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
index 313e4c9ac8..2eae04c8a6 100644
--- a/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/components/content/SourcecodeViewer.tsx
@@ -21,87 +21,47 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
-import React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import React, { FC, useEffect, useState } from "react";
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 = {
- content: string;
- error?: Error;
- loaded: boolean;
- currentFileRevision: string;
-};
+const SourcecodeViewer: FC = ({ file, language }) => {
+ const [content, setContent] = useState("");
+ const [error, setError] = useState(undefined);
+ const [loading, setLoading] = useState(true);
+ const [currentFileRevision, setCurrentFileRevision] = useState("");
-class SourcecodeViewer extends React.Component {
- constructor(props: Props) {
- super(props);
-
- this.state = {
- content: "",
- loaded: false,
- currentFileRevision: ""
- };
- }
-
- componentDidMount() {
- this.fetchContentIfChanged();
- }
-
- componentDidUpdate() {
- this.fetchContentIfChanged();
- }
-
- private fetchContentIfChanged() {
- const { file } = this.props;
- const { currentFileRevision } = this.state;
+ useEffect(() => {
if (file.revision !== currentFileRevision) {
- this.fetchContent();
+ getContent((file._links.self as Link).href)
+ .then(content => {
+ setContent(content);
+ setCurrentFileRevision(file.revision);
+ setLoading(false);
+ })
+ .catch(setError);
}
+ }, [currentFileRevision, file]);
+
+ if (error) {
+ return ;
}
- fetchContent = () => {
- const { file } = this.props;
- 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 ;
- }
-
- if (!loaded) {
- return ;
- }
-
- if (!content) {
- return null;
- }
-
- return ;
+ if (loading) {
+ return ;
}
-}
+
+ if (!content) {
+ return null;
+ }
+
+ return ;
+};
export function getLanguage(language: string) {
return language.toLowerCase();
@@ -111,4 +71,4 @@ export function getContent(url: string) {
return apiClient.get(url).then(response => response.text());
}
-export default withTranslation("repos")(SourcecodeViewer);
+export default SourcecodeViewer;
diff --git a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
index 43ecf40e2b..7f827f855a 100644
--- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
+++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx
@@ -21,14 +21,14 @@
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/
-import React from "react";
+import React, { ReactNode } from "react";
import { connect } from "react-redux";
import { WithTranslation, withTranslation } from "react-i18next";
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 } from "@scm-manager/ui-components";
import { getSources } from "../modules/sources";
import FileButtonAddons from "../components/content/FileButtonAddons";
import SourcesView from "./SourcesView";
@@ -82,6 +82,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 {
@@ -106,7 +112,7 @@ class Content extends React.Component {
});
};
- showHeader() {
+ showHeader(content: ReactNode) {
const { repository, file, revision } = this.props;
const { selected, collapsed } = this.state;
const icon = collapsed ? "angle-right" : "angle-down";
@@ -129,6 +135,10 @@ class Content extends React.Component {