Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-10 15:35:49 +01:00
Code Issues Packages Projects Releases Activity

New Fullscreen component

Browse Source
This commit is contained in:
Florian Scholdei
2020-10-14 22:48:10 +02:00
parent a680b75f85
commit c366203d1f
9 changed files with 190 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
scm-ui/ui-components/src/buttons/OpenInFullscreenButton.tsx Normal file
View File

@@ -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;

1
scm-ui/ui-components/src/buttons/index.ts
View File

@@ -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";

52
scm-ui/ui-components/src/modals/FullscreenModal.tsx Normal file
View File

@@ -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;

2
scm-ui/ui-components/src/modals/Modal.tsx
View File

@@ -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";

1
scm-ui/ui-components/src/modals/index.ts
View File

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

6
scm-ui/ui-webapp/public/locales/de/repos.json
View File

@@ -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.",

6
scm-ui/ui-webapp/public/locales/en/repos.json
View File

@@ -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",

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

@@ -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 { 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<Props> = ({ file, language }) => {
const [content, setContent] = useState("");
const [error, setError] = useState<Error | undefined>(undefined);
const [loading, setLoading] = useState(true);
const [currentFileRevision, setCurrentFileRevision] = useState("");
class SourcecodeViewer extends React.Component<Props, State> {
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;
if (file.revision !== currentFileRevision) {
this.fetchContent();
}
}
fetchContent = () => {
const { file } = this.props;
useEffect(() => {
function fetchContent() {
getContent((file._links.self as Link).href)
.then(content => {
this.setState({
content,
loaded: true,
currentFileRevision: file.revision
});
setLoading(false);
setContent(content);
setCurrentFileRevision(file.revision);
})
.catch(error => {
this.setState({
error,
loaded: true
setLoading(false);
setError(error);
});
});
};
}
render() {
const { content, error, loaded } = this.state;
const language = this.props.language;
if (file.revision !== currentFileRevision) {
fetchContent();
}
});
if (loading) {
return <Loading />;
}
if (error) {
return <ErrorNotification error={error} />;
}
if (!loaded) {
return <Loading />;
}
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;

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

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