Merge pull request #1383 from scm-manager/bugfix/fullscreen

Bugfix/fullscreen

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

@@ -26,10 +26,12 @@ 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`
@@ -39,13 +41,18 @@ const Button = styled.a`
   }
 `;
 
-const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody }) => {
+const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody, tooltipStyle = "tooltipComponent" }) => {
   const [t] = useTranslation("repos");
   const [showModal, setShowModal] = useState(false);
 
-  return (
+  const tooltip = t("diff.fullscreen.open");
+  const content = (
     <>
-      <Button title={t("diff.fullscreen.open")} className="button" onClick={() => setShowModal(true)}>
+      <Button
+        title={tooltipStyle === "htmlTitle" ? tooltip : undefined}
+        className="button"
+        onClick={() => setShowModal(true)}
+      >
         <i className="fas fa-search-plus" />
       </Button>
       {showModal && (
@@ -58,6 +65,15 @@ const OpenInFullscreenButton: FC<Props> = ({ modalTitle, modalBody }) => {
       )}
     </>
   );
+
+  if (tooltipStyle === "htmlTitle") {
+    return <>{content}</>;
+  }
+  return (
+    <Tooltip message={tooltip} location="top">
+      {content}
+    </Tooltip>
+  );
 };
 
 export default OpenInFullscreenButton;

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

@@ -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/repos/DiffFile.tsx

@@ -93,6 +93,11 @@ const ChangeTypeTag = styled(Tag)`
 
 const MarginlessModalContent = styled.div`
   margin: -1.25rem;
+
+  & .panel-block {
+    flex-direction: column;
+    align-items: stretch;
+  }
 `;
 
 class DiffFile extends React.Component<Props, State> {
@@ -410,30 +415,31 @@ 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 openInFullscreen = file?.hunks?.length ? (
       <OpenInFullscreenButton
         modalTitle={file.type === "delete" ? file.oldPath : file.newPath}
-        modalBody={<MarginlessModalContent>{body}</MarginlessModalContent>}
+        modalBody={<MarginlessModalContent>{innerContent}</MarginlessModalContent>}
       />
     ) : null;
     const sideBySideToggle = file?.hunks?.length && (

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

@@ -138,6 +138,7 @@ class Content extends React.Component<Props, State> {
             <OpenInFullscreenButton
               modalTitle={file?.name}
               modalBody={<BorderLessDiv className="panel">{content}</BorderLessDiv>}
+              tooltipStyle="htmlTitle"
             />
             <ExtensionPoint
               name="repos.sources.content.actionbar"