Merge branch 'develop' into feature/syntax-highlighting

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

@@ -0,0 +1,79 @@
+/*
+ * 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";
+import Tooltip from "../Tooltip";
+
+type Props = {
+  modalTitle: string;
+  modalBody: ReactNode;
+  tooltipStyle?: "tooltipComponent" | "htmlTitle";
+};
+
+const Button = styled.a`
+  width: 50px;
+  &:hover {
+    color: #33b2e8;
+  }
+`;
+
+const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody, tooltipStyle = "tooltipComponent" }) => {
+  const [t] = useTranslation("repos");
+  const [showModal, setShowModal] = useState(false);
+
+  const tooltip = t("diff.fullscreen.open");
+  const content = (
+    <>
+      <Button
+        title={tooltipStyle === "htmlTitle" ? tooltip : undefined}
+        className="button"
+        onClick={() => setShowModal(true)}
+      >
+        <i className="fas fa-search-plus" />
+      </Button>
+      {showModal && (
+        <FullscreenModal
+          title={modalTitle}
+          closeFunction={() => setShowModal(false)}
+          body={modalBody}
+          active={showModal}
+        />
+      )}
+    </>
+  );
+
+  if (tooltipStyle === "htmlTitle") {
+    return <>{content}</>;
+  }
+  return (
+    <Tooltip message={tooltip} location="top">
+      {content}
+    </Tooltip>
+  );
+};
+
+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: 97vh;
+  }
+`;
+
+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";
@@ -53,7 +53,7 @@ export const Modal: FC<Props> = ({ title, closeFunction, body, footer, active, c
 
   const modalElement = (
     <div className={classNames("modal", className, isActive)}>
-      <div className="modal-background" />
+      <div className="modal-background" onClick={closeFunction} />
       <div className="modal-card">
         <header className={classNames("modal-card-head", `has-background-${headColor}`)}>
           <p className="modal-card-title is-marginless">{title}</p>

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-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,15 @@ const ChangeTypeTag = styled(Tag)`
   margin-left: 0.75rem;
 `;
 
+const MarginlessModalContent = styled.div`
+  margin: -1.25rem;
+
+  & .panel-block {
+    flex-direction: column;
+    align-items: stretch;
+  }
+`;
+
 class DiffFile extends React.Component<Props, State> {
   static defaultProps: Partial<Props> = {
     defaultCollapse: false,
@@ -406,27 +415,34 @@ class DiffFile extends React.Component<Props, State> {
     const { file, collapsed, sideBySide, diffExpander, expansionError } = this.state;
     const viewType = sideBySide ? "split" : "unified";
 
-    let body = null;
+    const fileAnnotations = fileAnnotationFactory ? fileAnnotationFactory(file) : null;
+    const innerContent = (
+      <div className="panel-block is-paddingless">
+        {fileAnnotations}
+        <TokenizedDiffView className={viewType} viewType={viewType} file={file}>
+          {(hunks: HunkType[]) =>
+            hunks?.map((hunk, n) => {
+              return this.renderHunk(file, diffExpander.getHunk(n), n);
+            })
+          }
+        </TokenizedDiffView>
+      </div>
+    );
     let icon = "angle-right";
+    let body = null;
     if (!collapsed) {
-      const fileAnnotations = fileAnnotationFactory ? fileAnnotationFactory(file) : null;
       icon = "angle-down";
-      body = (
-        <div className="panel-block is-paddingless">
-          {fileAnnotations}
-          <TokenizedDiffView className={viewType} viewType={viewType} file={file}>
-            {(hunks: HunkType[]) =>
-              hunks?.map((hunk, n) => {
-                return this.renderHunk(file, diffExpander.getHunk(n), n);
-              })
-            }
-          </TokenizedDiffView>
-        </div>
-      );
+      body = innerContent;
     }
     const collapseIcon = this.hasContent(file) ? <Icon name={icon} color="inherit" /> : null;
     const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null;
-    const sideBySideToggle = file.hunks && file.hunks.length && (
+    const openInFullscreen = file?.hunks?.length ? (
+      <OpenInFullscreenButton
+        modalTitle={file.type === "delete" ? file.oldPath : file.newPath}
+        modalBody={<MarginlessModalContent>{innerContent}</MarginlessModalContent>}
+      />
+    ) : null;
+    const sideBySideToggle = file?.hunks?.length && (
       <MenuContext.Consumer>
         {({ setCollapsed }) => (
           <DiffButton
@@ -447,6 +463,7 @@ class DiffFile extends React.Component<Props, State> {
       <ButtonWrapper className={classNames("level-right", "is-flex")}>
         <ButtonGroup>
           {sideBySideToggle}
+          {openInFullscreen}
           {fileControls}
         </ButtonGroup>
       </ButtonWrapper>
@@ -465,7 +482,11 @@ class DiffFile extends React.Component<Props, State> {
     }
 
     return (
-      <DiffFilePanel className={classNames("panel", "is-size-6")} collapsed={(file && file.isBinary) || collapsed} id={this.getAnchorId(file)}>
+      <DiffFilePanel
+        className={classNames("panel", "is-size-6")}
+        collapsed={(file && file.isBinary) || collapsed}
+        id={this.getAnchorId(file)}
+      >
         {errorModal}
         <div className="panel-heading">
           <FlexWrapLevel className="level">