From c366203d1fe1ba7aba2226b5a0d9b3076d835098 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Wed, 14 Oct 2020 22:48:10 +0200 Subject: [PATCH 01/20] New Fullscreen component --- .../src/buttons/OpenInFullscreenButton.tsx | 50 +++++++++ scm-ui/ui-components/src/buttons/index.ts | 1 + .../src/modals/FullscreenModal.tsx | 52 +++++++++ scm-ui/ui-components/src/modals/Modal.tsx | 2 +- scm-ui/ui-components/src/modals/index.ts | 1 + scm-ui/ui-webapp/public/locales/de/repos.json | 6 +- scm-ui/ui-webapp/public/locales/en/repos.json | 6 +- .../components/content/SourcecodeViewer.tsx | 103 ++++++------------ .../src/repos/sources/containers/Content.tsx | 52 +++++++-- 9 files changed, 190 insertions(+), 83 deletions(-) create mode 100644 scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx create mode 100644 scm-ui/ui-components/src/modals/FullscreenModal.tsx 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..c1b4cab65e --- /dev/null +++ b/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 = ({ onClick }) => { + const [t] = useTranslation("repos"); + + return ( + + ); +}; + +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..fb95712708 --- /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: 100vh; + } +`; + +const FullscreenModal: FC = ({ title, closeFunction, body, active }) => { + const [t] = useTranslation("repos"); + const footer = + <> + + setShowModal(false)} + body={modalBody} + active={showModal} + /> + ); }; diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx index d8fee267df..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, OpenInFullscreenButton, FullscreenModal } 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"; @@ -57,7 +57,6 @@ type State = Collapsible & { sideBySide?: boolean; diffExpander: DiffExpander; expansionError?: any; - showFullscreenModal: boolean; }; const DiffFilePanel = styled.div` @@ -108,8 +107,7 @@ class DiffFile extends React.Component { collapsed: this.defaultCollapse(), sideBySide: props.sideBySide, diffExpander: new DiffExpander(props.file), - file: props.file, - showFullscreenModal: false + file: props.file }; } @@ -150,18 +148,6 @@ class DiffFile extends React.Component { ); }; - openModal = () => { - this.setState({ - showFullscreenModal: true - }); - }; - - closeModal = () => { - this.setState({ - showFullscreenModal: false - }); - }; - setCollapse = (collapsed: boolean) => { this.setState({ collapsed @@ -421,7 +407,7 @@ class DiffFile extends React.Component { render() { const { fileControlFactory, fileAnnotationFactory, t } = this.props; - const { file, collapsed, sideBySide, diffExpander, expansionError, showFullscreenModal } = this.state; + const { file, collapsed, sideBySide, diffExpander, expansionError } = this.state; const viewType = sideBySide ? "split" : "unified"; let body = null; @@ -444,7 +430,12 @@ class DiffFile extends React.Component { } const collapseIcon = this.hasContent(file) ? : null; const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null; - const openInFullscreen = file?.hunks?.length ? : null; + const openInFullscreen = file?.hunks?.length ? ( + {body}} + /> + ) : null; const sideBySideToggle = file?.hunks?.length && ( {({ setCollapsed }) => ( @@ -484,18 +475,6 @@ class DiffFile extends React.Component { ); } - let modalContent; - if (file?.hunks?.length) { - modalContent = ( - this.closeModal()} - body={{body}} - active={showFullscreenModal} - /> - ); - } - return ( { {body} - {modalContent} ); } 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 080db32b2d..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 @@ -37,32 +37,25 @@ const SourcecodeViewer: FC = ({ file, language }) => { const [currentFileRevision, setCurrentFileRevision] = useState(""); useEffect(() => { - function fetchContent() { + if (file.revision !== currentFileRevision) { getContent((file._links.self as Link).href) .then(content => { - setLoading(false); setContent(content); setCurrentFileRevision(file.revision); - }) - .catch(error => { setLoading(false); - setError(error); - }); + }) + .catch(setError); } - - if (file.revision !== currentFileRevision) { - fetchContent(); - } - }); - - if (loading) { - return ; - } + }, [currentFileRevision, file]); if (error) { return ; } + if (loading) { + return ; + } + if (!content) { return null; } 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 7a2af3e2fa..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,21 +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, - OpenInFullscreenButton, - FullscreenModal -} 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"; @@ -55,7 +48,6 @@ type State = { collapsed: boolean; selected: SourceViewSelection; errorFromExtension?: Error; - showFullscreenModal: boolean; }; const Header = styled.div` @@ -104,8 +96,7 @@ class Content extends React.Component { this.state = { collapsed: true, - selected: "source", - showFullscreenModal: false + selected: "source" }; } @@ -115,25 +106,13 @@ class Content extends React.Component { })); }; - openModal = () => { - this.setState({ - showFullscreenModal: true - }); - }; - - closeModal = () => { - this.setState({ - showFullscreenModal: false - }); - }; - handleExtensionError = (error: Error) => { this.setState({ errorFromExtension: error }); }; - showHeader() { + showHeader(content: ReactNode) { const { repository, file, revision } = this.props; const { selected, collapsed } = this.state; const icon = collapsed ? "angle-right" : "angle-down"; @@ -156,7 +135,10 @@ class Content extends React.Component {
{selector} - + {content}} + /> { render() { const { file, revision, repository, path, breadcrumb } = this.props; - const { selected, errorFromExtension, showFullscreenModal } = this.state; + const { selected, errorFromExtension } = this.state; - const header = this.showHeader(); let content; switch (selected) { case "source": @@ -251,6 +232,7 @@ class Content extends React.Component { case "annotations": content = ; } + const header = this.showHeader(content); const moreInformation = this.showMoreInformation(); return ( @@ -260,12 +242,6 @@ class Content extends React.Component {
{header}
{moreInformation} {content} - this.closeModal()} - body={{content}} - active={showFullscreenModal} - />
{errorFromExtension && } From 445d26e2b77d004de9b2a108239eaa44992ac732 Mon Sep 17 00:00:00 2001 From: Eduard Heimbuch Date: Tue, 20 Oct 2020 10:31:56 +0200 Subject: [PATCH 13/20] fix storyshots --- scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx index afe16908f6..4f5323a921 100644 --- a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx +++ b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx @@ -48,12 +48,12 @@ const OpenInFullscreenButton: FC = ({ modalTitle, modalBody }) => { - setShowModal(false)} body={modalBody} active={showModal} - /> + />} ); }; From 5889bb0365257187c2599c54db3d8121a0d8b10b Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Tue, 20 Oct 2020 10:49:56 +0200 Subject: [PATCH 14/20] Update storyshots --- .../src/__snapshots__/storyshots.test.ts.snap | 884 ++++++++++++++++++ .../src/buttons/OpenInFullscreenButton.tsx | 14 +- 2 files changed, 892 insertions(+), 6 deletions(-) diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index eec24b0966..9bbf3d36c6 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -3951,6 +3951,19 @@ exports[`Storyshots Diff Binaries 1`] = ` +
+ + + +
@@ -4219,6 +4232,19 @@ exports[`Storyshots Diff Collapsed 1`] = ` +
+ + + +
@@ -4315,6 +4341,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
+
+ + + +
@@ -4411,6 +4450,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
+
+ + + +
@@ -4507,6 +4559,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
+
+ + + +
@@ -4603,6 +4668,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
+
+ + + +
@@ -4699,6 +4777,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
+
+ + + +
@@ -4804,6 +4895,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = `
+
+ + + +
@@ -4862,6 +4966,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` +
+ + + +
@@ -5703,6 +5820,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` +
+ + + +
@@ -6140,6 +6270,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` +
+ + + +
@@ -6577,6 +6720,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` +
+ + + +
@@ -6635,6 +6791,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` +
+ + + +
@@ -6702,6 +6871,19 @@ exports[`Storyshots Diff Default 1`] = ` +
+ + + +
@@ -7266,6 +7448,19 @@ exports[`Storyshots Diff Default 1`] = ` +
+ + + +
@@ -8107,6 +8302,19 @@ exports[`Storyshots Diff Default 1`] = ` +
+ + + +
@@ -8544,6 +8752,19 @@ exports[`Storyshots Diff Default 1`] = ` +
+ + + +
@@ -8981,6 +9202,19 @@ exports[`Storyshots Diff Default 1`] = ` +
+ + + +
@@ -10025,6 +10259,19 @@ exports[`Storyshots Diff Default 1`] = ` +
+ + + +
@@ -10546,6 +10793,19 @@ exports[`Storyshots Diff Expandable 1`] = ` +
+ + + +
@@ -11147,6 +11407,19 @@ exports[`Storyshots Diff Expandable 1`] = ` +
+ + + +
@@ -12085,6 +12358,19 @@ exports[`Storyshots Diff Expandable 1`] = ` +
+ + + +
@@ -12594,6 +12880,19 @@ exports[`Storyshots Diff Expandable 1`] = ` +
+ + + +
@@ -13103,6 +13402,19 @@ exports[`Storyshots Diff Expandable 1`] = ` +
+ + + +
@@ -14302,6 +14614,19 @@ exports[`Storyshots Diff Expandable 1`] = ` +
+ + + +
@@ -14860,6 +15185,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` +
+ + + +
@@ -15428,6 +15766,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` +
+ + + +
@@ -16273,6 +16624,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` +
+ + + +
@@ -16714,6 +17078,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` +
+ + + +
@@ -17155,6 +17532,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` +
+ + + +
@@ -18203,6 +18593,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` +
+ + + +
@@ -18728,6 +19131,19 @@ exports[`Storyshots Diff File Controls 1`] = ` +
+ + + +
@@ -19310,6 +19726,19 @@ exports[`Storyshots Diff File Controls 1`] = `
+
+ + + +
@@ -20169,6 +20598,19 @@ exports[`Storyshots Diff File Controls 1`] = `
+
+ + + +
@@ -20624,6 +21066,19 @@ exports[`Storyshots Diff File Controls 1`] = `
+
+ + + +
@@ -21079,6 +21534,19 @@ exports[`Storyshots Diff File Controls 1`] = `
+
+ + + +
@@ -22141,6 +22609,19 @@ exports[`Storyshots Diff File Controls 1`] = `
+
+ + + +
@@ -22680,6 +23161,19 @@ exports[`Storyshots Diff Hunks 1`] = `
+
+ + + +
@@ -23508,6 +24002,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` +
+ + + +
@@ -24084,6 +24591,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` +
+ + + +
@@ -24937,6 +25457,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` +
+ + + +
@@ -25374,6 +25907,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` +
+ + + +
@@ -25811,6 +26357,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` +
+ + + +
@@ -26855,6 +27414,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` +
+ + + +
@@ -27388,6 +27960,19 @@ exports[`Storyshots Diff OnClick 1`] = ` +
+ + + +
@@ -27992,6 +28577,19 @@ exports[`Storyshots Diff OnClick 1`] = ` +
+ + + +
@@ -28895,6 +29493,19 @@ exports[`Storyshots Diff OnClick 1`] = ` +
+ + + +
@@ -29362,6 +29973,19 @@ exports[`Storyshots Diff OnClick 1`] = ` +
+ + + +
@@ -29829,6 +30453,19 @@ exports[`Storyshots Diff OnClick 1`] = ` +
+ + + +
@@ -30949,6 +31586,19 @@ exports[`Storyshots Diff OnClick 1`] = ` +
+ + + +
@@ -31506,6 +32156,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` +
+ + + +
@@ -32163,6 +32826,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` +
+ + + +
@@ -33094,6 +33770,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` +
+ + + +
@@ -33583,6 +34272,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` +
+ + + +
@@ -34072,6 +34774,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` +
+ + + +
@@ -35285,6 +36000,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` +
+ + + +
@@ -35879,6 +36607,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` +
+ + + +
@@ -36443,6 +37184,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` +
+ + + +
@@ -37284,6 +38038,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` +
+ + + +
@@ -37721,6 +38488,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` +
+ + + +
@@ -38158,6 +38938,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` +
+ + + +
@@ -39202,6 +39995,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` +
+ + + +
@@ -39723,6 +40529,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` +
+ + + +
@@ -40324,6 +41143,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` +
+ + + +
@@ -41262,6 +42094,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` +
+ + + +
@@ -41771,6 +42616,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` +
+ + + +
@@ -42280,6 +43138,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` +
+ + + +
@@ -43479,6 +44350,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` +
+ + + +
diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx index 4f5323a921..70d4ee5ead 100644 --- a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx +++ b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx @@ -48,12 +48,14 @@ const OpenInFullscreenButton: FC = ({ modalTitle, modalBody }) => { - {showModal && setShowModal(false)} - body={modalBody} - active={showModal} - />} + {showModal && ( + setShowModal(false)} + body={modalBody} + active={showModal} + /> + )} ); }; From 6024d8c3e162b2ecec7443e9580e3feef085d2cf Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Wed, 21 Oct 2020 10:47:05 +0200 Subject: [PATCH 15/20] Unify title usage within an area --- .../src/buttons/OpenInFullscreenButton.tsx | 18 +++++++++++++++--- .../src/repos/sources/containers/Content.tsx | 1 + 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx index 70d4ee5ead..707e86055e 100644 --- a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx +++ b/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; + useTitleTooltip?: boolean; // not recommended }; const Button = styled.a` @@ -39,13 +41,14 @@ const Button = styled.a` } `; -const OpenInFullscreenButton: FC = ({ modalTitle, modalBody }) => { +const OpenInFullscreenButton: FC = ({ modalTitle, modalBody, useTitleTooltip = false }) => { const [t] = useTranslation("repos"); const [showModal, setShowModal] = useState(false); - return ( + const tooltip = t("diff.fullscreen.open"); + const content = ( <> - {showModal && ( @@ -58,6 +61,15 @@ const OpenInFullscreenButton: FC = ({ modalTitle, modalBody }) => { )} ); + + if (useTitleTooltip) { + return <>{content}; + } + return ( + + {content} + + ); }; export default OpenInFullscreenButton; 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 7f827f855a..2f3ccfb3c0 100644 --- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx +++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx @@ -138,6 +138,7 @@ class Content extends React.Component { {content}} + useTitleTooltip={true} /> Date: Wed, 21 Oct 2020 10:48:45 +0200 Subject: [PATCH 16/20] Fix vertical placement of comments and code in pr diff view --- scm-ui/ui-components/src/repos/DiffFile.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx index 77d44ec595..c977e228a4 100644 --- a/scm-ui/ui-components/src/repos/DiffFile.tsx +++ b/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 { From 6a93d861fa8cc5906a564a88ae79c21c85985e14 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Wed, 21 Oct 2020 10:50:14 +0200 Subject: [PATCH 17/20] Fix empty content in modal view of collapsed panel --- scm-ui/ui-components/src/repos/DiffFile.tsx | 31 +++++++++++---------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/scm-ui/ui-components/src/repos/DiffFile.tsx b/scm-ui/ui-components/src/repos/DiffFile.tsx index c977e228a4..e98d6fc39f 100644 --- a/scm-ui/ui-components/src/repos/DiffFile.tsx +++ b/scm-ui/ui-components/src/repos/DiffFile.tsx @@ -415,30 +415,31 @@ class DiffFile extends React.Component { const { file, collapsed, sideBySide, diffExpander, expansionError } = this.state; const viewType = sideBySide ? "split" : "unified"; - let body = null; + const fileAnnotations = fileAnnotationFactory ? fileAnnotationFactory(file) : null; + const innerContent = ( +
+ {fileAnnotations} + + {(hunks: HunkType[]) => + hunks?.map((hunk, n) => { + return this.renderHunk(file, diffExpander.getHunk(n), n); + }) + } + +
+ ); let icon = "angle-right"; + let body = null; if (!collapsed) { - const fileAnnotations = fileAnnotationFactory ? fileAnnotationFactory(file) : null; icon = "angle-down"; - body = ( -
- {fileAnnotations} - - {(hunks: HunkType[]) => - hunks?.map((hunk, n) => { - return this.renderHunk(file, diffExpander.getHunk(n), n); - }) - } - -
- ); + body = innerContent; } const collapseIcon = this.hasContent(file) ? : null; const fileControls = fileControlFactory ? fileControlFactory(file, this.setCollapse) : null; const openInFullscreen = file?.hunks?.length ? ( {body}} + modalBody={{innerContent}} /> ) : null; const sideBySideToggle = file?.hunks?.length && ( From 8995cb4c81f9cc010460b7103ceb810d349fefe6 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Wed, 21 Oct 2020 11:00:09 +0200 Subject: [PATCH 18/20] Close Modal by clicking into the background --- scm-ui/ui-components/src/modals/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scm-ui/ui-components/src/modals/Modal.tsx b/scm-ui/ui-components/src/modals/Modal.tsx index d7552ad898..21825e5c75 100644 --- a/scm-ui/ui-components/src/modals/Modal.tsx +++ b/scm-ui/ui-components/src/modals/Modal.tsx @@ -53,7 +53,7 @@ export const Modal: FC = ({ title, closeFunction, body, footer, active, c const modalElement = (
-
+

{title}

From 5ef3e2ed5219c78e3da2730e5f0433b0db74bf59 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Wed, 21 Oct 2020 11:04:09 +0200 Subject: [PATCH 19/20] Update storyshots --- .../src/__snapshots__/storyshots.test.ts.snap | 1360 ++++++++++------- 1 file changed, 816 insertions(+), 544 deletions(-) diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap index 9bbf3d36c6..55f0977dc9 100644 --- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap +++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap @@ -3954,15 +3954,19 @@ exports[`Storyshots Diff Binaries 1`] = `
@@ -4235,15 +4239,19 @@ exports[`Storyshots Diff Collapsed 1`] = `
@@ -4969,15 +5001,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` @@ -5823,15 +5859,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` @@ -6273,15 +6313,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` @@ -6723,15 +6767,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` @@ -6794,15 +6842,19 @@ exports[`Storyshots Diff CollapsingWithFunction 1`] = ` @@ -6874,15 +6926,19 @@ exports[`Storyshots Diff Default 1`] = ` @@ -7451,15 +7507,19 @@ exports[`Storyshots Diff Default 1`] = ` @@ -8305,15 +8365,19 @@ exports[`Storyshots Diff Default 1`] = ` @@ -8755,15 +8819,19 @@ exports[`Storyshots Diff Default 1`] = ` @@ -9205,15 +9273,19 @@ exports[`Storyshots Diff Default 1`] = ` @@ -10262,15 +10334,19 @@ exports[`Storyshots Diff Default 1`] = ` @@ -10796,15 +10872,19 @@ exports[`Storyshots Diff Expandable 1`] = ` @@ -11410,15 +11490,19 @@ exports[`Storyshots Diff Expandable 1`] = ` @@ -12361,15 +12445,19 @@ exports[`Storyshots Diff Expandable 1`] = ` @@ -12883,15 +12971,19 @@ exports[`Storyshots Diff Expandable 1`] = ` @@ -13405,15 +13497,19 @@ exports[`Storyshots Diff Expandable 1`] = ` @@ -14617,15 +14713,19 @@ exports[`Storyshots Diff Expandable 1`] = ` @@ -15188,15 +15288,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` @@ -15769,15 +15873,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` @@ -16627,15 +16735,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` @@ -17081,15 +17193,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` @@ -17535,15 +17651,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` @@ -18596,15 +18716,19 @@ exports[`Storyshots Diff File Annotation 1`] = ` @@ -19134,15 +19258,19 @@ exports[`Storyshots Diff File Controls 1`] = ` @@ -24005,15 +24157,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` @@ -24594,15 +24750,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` @@ -25460,15 +25620,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` @@ -25910,15 +26074,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` @@ -26360,15 +26528,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` @@ -27417,15 +27589,19 @@ exports[`Storyshots Diff Line Annotation 1`] = ` @@ -27963,15 +28139,19 @@ exports[`Storyshots Diff OnClick 1`] = ` @@ -28580,15 +28760,19 @@ exports[`Storyshots Diff OnClick 1`] = ` @@ -29496,15 +29680,19 @@ exports[`Storyshots Diff OnClick 1`] = ` @@ -29976,15 +30164,19 @@ exports[`Storyshots Diff OnClick 1`] = ` @@ -30456,15 +30648,19 @@ exports[`Storyshots Diff OnClick 1`] = ` @@ -31589,15 +31785,19 @@ exports[`Storyshots Diff OnClick 1`] = ` @@ -32159,15 +32359,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` @@ -32829,15 +33033,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` @@ -33773,15 +33981,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` @@ -34275,15 +34487,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` @@ -34777,15 +34993,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` @@ -36003,15 +36223,19 @@ exports[`Storyshots Diff Side-By-Side 1`] = ` @@ -36610,15 +36834,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` @@ -37187,15 +37415,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` @@ -38041,15 +38273,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` @@ -38491,15 +38727,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` @@ -38941,15 +39181,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` @@ -39998,15 +40242,19 @@ exports[`Storyshots Diff SyntaxHighlighting 1`] = ` @@ -40532,15 +40780,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` @@ -41146,15 +41398,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` @@ -42097,15 +42353,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` @@ -42619,15 +42879,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` @@ -43141,15 +43405,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` @@ -44353,15 +44621,19 @@ exports[`Storyshots Diff WithLinkToFile 1`] = ` From e141e33aa341ac387abdac7eb0ae56df9e5b58b7 Mon Sep 17 00:00:00 2001 From: Florian Scholdei Date: Wed, 21 Oct 2020 12:23:58 +0200 Subject: [PATCH 20/20] Clarify prop usage by renaming in more self-evident name --- .../src/buttons/OpenInFullscreenButton.tsx | 12 ++++++++---- .../src/repos/sources/containers/Content.tsx | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx index 707e86055e..c1cd1c6da2 100644 --- a/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx +++ b/scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx @@ -31,7 +31,7 @@ import Tooltip from "../Tooltip"; type Props = { modalTitle: string; modalBody: ReactNode; - useTitleTooltip?: boolean; // not recommended + tooltipStyle?: "tooltipComponent" | "htmlTitle"; }; const Button = styled.a` @@ -41,14 +41,18 @@ const Button = styled.a` } `; -const OpenInFullscreenButton: FC = ({ modalTitle, modalBody, useTitleTooltip = false }) => { +const OpenInFullscreenButton: FC = ({ modalTitle, modalBody, tooltipStyle = "tooltipComponent" }) => { const [t] = useTranslation("repos"); const [showModal, setShowModal] = useState(false); const tooltip = t("diff.fullscreen.open"); const content = ( <> - {showModal && ( @@ -62,7 +66,7 @@ const OpenInFullscreenButton: FC = ({ modalTitle, modalBody, useTitleTool ); - if (useTitleTooltip) { + if (tooltipStyle === "htmlTitle") { return <>{content}; } return ( 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 2f3ccfb3c0..03f2d6dc84 100644 --- a/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx +++ b/scm-ui/ui-webapp/src/repos/sources/containers/Content.tsx @@ -138,7 +138,7 @@ class Content extends React.Component { {content}} - useTitleTooltip={true} + tooltipStyle="htmlTitle" />