mirror of
https://github.com/scm-manager/scm-manager.git
synced 2025-11-14 17:26:22 +01:00
restructure annotate components
This commit is contained in:
131
scm-ui/ui-components/src/repos/annotate/Annotate.stories.tsx
Normal file
131
scm-ui/ui-components/src/repos/annotate/Annotate.stories.tsx
Normal file
@@ -0,0 +1,131 @@
|
||||
/*
|
||||
* 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 { storiesOf } from "@storybook/react";
|
||||
import React, { FC } from "react";
|
||||
import styled from "styled-components";
|
||||
import Annotate from "./Annotate";
|
||||
import { MemoryRouter } from "react-router-dom";
|
||||
import repository from "../../__resources__/repository";
|
||||
import { Binder, BinderContext } from "@scm-manager/ui-extensions";
|
||||
import { Person } from "../../avatar/Avatar";
|
||||
import { AnnotatedSource } from "@scm-manager/ui-types";
|
||||
|
||||
const Wrapper = styled.div`
|
||||
margin: 2rem;
|
||||
`;
|
||||
|
||||
const commitCreateNewApp = {
|
||||
revision: "0d8c1d328f4599b363755671afe667c7ace52bae",
|
||||
author: {
|
||||
name: "Arthur Dent",
|
||||
mail: "arthur.dent@hitchhiker.com"
|
||||
},
|
||||
description: "create new app",
|
||||
when: new Date("2020-04-09T13:07:42Z")
|
||||
};
|
||||
|
||||
const commitFixedMissingImport = {
|
||||
revision: "fab38559ce3ab8c388e067712b4bd7ab94b9fa9b",
|
||||
author: {
|
||||
name: "Tricia Marie McMillan",
|
||||
mail: "trillian@hitchhiker.com"
|
||||
},
|
||||
description: "fixed missing import",
|
||||
when: new Date("2020-05-10T09:18:42Z")
|
||||
};
|
||||
|
||||
const commitImplementMain = {
|
||||
revision: "5203292ab2bc0c020dd22adc4d3897da4930e43f",
|
||||
author: {
|
||||
name: "Ford Prefect",
|
||||
mail: "ford.prefect@hitchhiker.com"
|
||||
},
|
||||
description: "implemented main function",
|
||||
when: new Date("2020-04-12T16:29:42Z")
|
||||
};
|
||||
|
||||
const source: AnnotatedSource = {
|
||||
language: "go",
|
||||
lines: [
|
||||
{
|
||||
lineNumber: 1,
|
||||
code: "package main",
|
||||
...commitCreateNewApp
|
||||
},
|
||||
{
|
||||
lineNumber: 2,
|
||||
code: "",
|
||||
...commitCreateNewApp
|
||||
},
|
||||
{
|
||||
lineNumber: 3,
|
||||
code: 'import "fmt"',
|
||||
...commitFixedMissingImport
|
||||
},
|
||||
{
|
||||
lineNumber: 4,
|
||||
code: "",
|
||||
...commitFixedMissingImport
|
||||
},
|
||||
{
|
||||
lineNumber: 5,
|
||||
code: "func main() {",
|
||||
...commitCreateNewApp
|
||||
},
|
||||
{
|
||||
lineNumber: 6,
|
||||
code: ' fmt.Println("Hello World")',
|
||||
...commitImplementMain
|
||||
},
|
||||
{
|
||||
lineNumber: 7,
|
||||
code: "}",
|
||||
...commitCreateNewApp
|
||||
},
|
||||
{
|
||||
lineNumber: 8,
|
||||
code: "",
|
||||
...commitCreateNewApp
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const Robohash: FC = ({ children }) => {
|
||||
const binder = new Binder("robohash");
|
||||
binder.bind("avatar.factory", (person: Person) => `https://robohash.org/${person.mail}.png`);
|
||||
return <BinderContext.Provider value={binder}>{children}</BinderContext.Provider>;
|
||||
};
|
||||
|
||||
storiesOf("Annotate", module)
|
||||
.addDecorator(storyFn => <MemoryRouter initialEntries={["/"]}>{storyFn()}</MemoryRouter>)
|
||||
.addDecorator(storyFn => <Wrapper className="box">{storyFn()}</Wrapper>)
|
||||
.add("Default", () => (
|
||||
<Annotate source={source} repository={repository} baseDate={new Date("2020-04-16T09:22:42Z")} />
|
||||
))
|
||||
.add("With Avatars", () => (
|
||||
<Robohash>
|
||||
<Annotate source={source} repository={repository} baseDate={new Date("2020-04-15T09:47:42Z")} />
|
||||
</Robohash>
|
||||
));
|
||||
157
scm-ui/ui-components/src/repos/annotate/Annotate.tsx
Normal file
157
scm-ui/ui-components/src/repos/annotate/Annotate.tsx
Normal file
@@ -0,0 +1,157 @@
|
||||
/*
|
||||
* 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 React, { FC, useReducer } from "react";
|
||||
import { Repository, AnnotatedSource, AnnotatedLine } from "@scm-manager/ui-types";
|
||||
|
||||
// @ts-ignore
|
||||
import { LightAsync as ReactSyntaxHighlighter, createElement } from "react-syntax-highlighter";
|
||||
import { arduinoLight } from "react-syntax-highlighter/dist/cjs/styles/hljs";
|
||||
import { DateInput } from "../../dates";
|
||||
import Popover from "./Popover";
|
||||
import AnnotateLine from "./AnnotateLine";
|
||||
import { Action } from "./actions";
|
||||
|
||||
type Props = {
|
||||
source: AnnotatedSource;
|
||||
repository: Repository;
|
||||
baseDate?: DateInput;
|
||||
};
|
||||
|
||||
type State = {
|
||||
annotation?: AnnotatedLine;
|
||||
offset?: number;
|
||||
line?: number;
|
||||
onPopover: boolean;
|
||||
onLine: boolean;
|
||||
};
|
||||
|
||||
const initialState = {
|
||||
onPopover: false,
|
||||
onLine: false
|
||||
};
|
||||
|
||||
const reducer = (state: State, action: Action): State => {
|
||||
switch (action.type) {
|
||||
case "enter-line": {
|
||||
if (state.onPopover) {
|
||||
return state;
|
||||
}
|
||||
return {
|
||||
annotation: action.annotation,
|
||||
offset: action.offset,
|
||||
line: action.line,
|
||||
onLine: true,
|
||||
onPopover: false
|
||||
};
|
||||
}
|
||||
case "leave-line": {
|
||||
if (state.onPopover) {
|
||||
return {
|
||||
...state,
|
||||
onLine: false
|
||||
};
|
||||
}
|
||||
return initialState;
|
||||
}
|
||||
case "enter-popover": {
|
||||
return {
|
||||
...state,
|
||||
onPopover: true
|
||||
};
|
||||
}
|
||||
case "leave-popover": {
|
||||
if (state.onLine) {
|
||||
return {
|
||||
...state,
|
||||
onPopover: false
|
||||
};
|
||||
}
|
||||
return initialState;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
|
||||
const [state, dispatch] = useReducer(reducer, initialState);
|
||||
|
||||
const defaultRenderer = ({ rows, stylesheet, useInlineStyles }: any) => {
|
||||
let lastRevision = "";
|
||||
return rows.map((node: React.ReactNode, i: number) => {
|
||||
const line = createElement({
|
||||
node,
|
||||
stylesheet,
|
||||
useInlineStyles,
|
||||
key: `code-segement${i}`
|
||||
});
|
||||
|
||||
if (i + 1 < rows.length) {
|
||||
const annotation = source.lines[i];
|
||||
const newAnnotation = annotation.revision !== lastRevision;
|
||||
lastRevision = annotation.revision;
|
||||
return (
|
||||
<AnnotateLine dispatch={dispatch} annotation={annotation} showAnnotation={newAnnotation} nr={i + 1}>
|
||||
{line}
|
||||
</AnnotateLine>
|
||||
);
|
||||
}
|
||||
|
||||
return line;
|
||||
});
|
||||
};
|
||||
|
||||
let popover = null;
|
||||
if ((state.onPopover || state.onLine) && state.annotation) {
|
||||
popover = (
|
||||
<Popover
|
||||
annotation={state.annotation}
|
||||
dispatch={dispatch}
|
||||
offsetTop={state.offset}
|
||||
repository={repository}
|
||||
baseDate={baseDate}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const code = source.lines.reduce((content, line) => {
|
||||
content += line.code + "\n";
|
||||
return content;
|
||||
}, "");
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative" }}>
|
||||
{popover}
|
||||
<ReactSyntaxHighlighter
|
||||
showLineNumbers={false}
|
||||
language={source.language}
|
||||
style={arduinoLight}
|
||||
renderer={defaultRenderer}
|
||||
>
|
||||
{code}
|
||||
</ReactSyntaxHighlighter>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Annotate;
|
||||
145
scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
Normal file
145
scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
/*
|
||||
* 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 React, { FC, Dispatch, useRef } from "react";
|
||||
import styled from "styled-components";
|
||||
import AuthorImage from "./AuthorImage";
|
||||
import DateShort from "../../DateShort";
|
||||
import { Action } from "./actions";
|
||||
import { AnnotatedLine } from "@scm-manager/ui-types";
|
||||
|
||||
const LineElement = styled.div`
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
vertical-align: top;
|
||||
`;
|
||||
|
||||
const Author = styled(LineElement)`
|
||||
width: 8em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
`;
|
||||
|
||||
const When = styled(LineElement)`
|
||||
display: inline-block;
|
||||
|
||||
width: 6.5em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
margin: 0 0.5em;
|
||||
`;
|
||||
|
||||
const LineNumber = styled(LineElement)`
|
||||
width: 3em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
border-left: 1px solid lightgrey;
|
||||
border-right: 1px solid lightgrey;
|
||||
|
||||
text-align: right;
|
||||
|
||||
padding: 0 0.5em;
|
||||
`;
|
||||
|
||||
const Line = styled.div`
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 1.5em;
|
||||
vertical-align: top;
|
||||
`;
|
||||
|
||||
const Metadata = styled(LineElement)`
|
||||
cursor: help;
|
||||
`;
|
||||
|
||||
const EmptyMetadata = styled(LineElement)`
|
||||
width: 16.7em;
|
||||
`;
|
||||
|
||||
const dispatchDeferred = (dispatch: Dispatch<Action>, action: Action) => {
|
||||
setTimeout(() => dispatch(action), 250);
|
||||
};
|
||||
|
||||
type Props = {
|
||||
annotation: AnnotatedLine;
|
||||
showAnnotation: boolean;
|
||||
nr: number;
|
||||
dispatch: Dispatch<Action>;
|
||||
};
|
||||
|
||||
const AnnotateLine: FC<Props> = ({ annotation, showAnnotation, dispatch, nr, children }) => {
|
||||
const link = useRef<HTMLDivElement>(null);
|
||||
|
||||
const onMouseEnter = () => {
|
||||
if (showAnnotation) {
|
||||
dispatchDeferred(dispatch, {
|
||||
annotation,
|
||||
line: nr,
|
||||
offset: link.current!.offsetTop,
|
||||
type: "enter-line"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const OnMouseLeave = () => {
|
||||
if (showAnnotation) {
|
||||
dispatchDeferred(dispatch, {
|
||||
line: nr,
|
||||
type: "leave-line"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (!showAnnotation) {
|
||||
return (
|
||||
<Line>
|
||||
<EmptyMetadata />
|
||||
<LineNumber>{nr}</LineNumber> <LineElement>{children}</LineElement>
|
||||
</Line>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Line>
|
||||
<Metadata className="has-text-info" onMouseOver={onMouseEnter} onMouseOut={OnMouseLeave} ref={link}>
|
||||
<Author>
|
||||
<AuthorImage person={annotation.author} />
|
||||
{annotation.author.name}
|
||||
</Author>{" "}
|
||||
<When>
|
||||
<DateShort value={annotation.when} />
|
||||
</When>{" "}
|
||||
</Metadata>
|
||||
<LineNumber>{nr}</LineNumber> <LineElement>{children}</LineElement>
|
||||
</Line>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnnotateLine;
|
||||
34
scm-ui/ui-components/src/repos/annotate/AuthorImage.tsx
Normal file
34
scm-ui/ui-components/src/repos/annotate/AuthorImage.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
/*
|
||||
* 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 { AvatarImage } from "../../avatar";
|
||||
import styled from "styled-components";
|
||||
|
||||
const AuthorImage = styled(AvatarImage)`
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-right: 0.2em;
|
||||
`;
|
||||
|
||||
export default AuthorImage;
|
||||
140
scm-ui/ui-components/src/repos/annotate/Popover.tsx
Normal file
140
scm-ui/ui-components/src/repos/annotate/Popover.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
/*
|
||||
* 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 React, { FC, useState, useRef, useLayoutEffect, Dispatch } from "react";
|
||||
import styled from "styled-components";
|
||||
import { Link } from "react-router-dom";
|
||||
import DateFromNow from "../../DateFromNow";
|
||||
import { SingleContributor } from "../changesets";
|
||||
import { DateInput } from "../../dates";
|
||||
import { Repository, AnnotatedLine } from "@scm-manager/ui-types";
|
||||
import AuthorImage from "./AuthorImage";
|
||||
import { Action } from "./actions";
|
||||
|
||||
const PopoverContainer = styled.div`
|
||||
position: absolute;
|
||||
left: 2.25em;
|
||||
z-index: 100;
|
||||
width: 30em;
|
||||
display: block;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
border-style: solid;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
width: 0;
|
||||
top: 100%;
|
||||
left: 5.5em;
|
||||
border-color: transparent;
|
||||
border-bottom-color: white;
|
||||
border-left-color: white;
|
||||
border-width: 0.4rem;
|
||||
margin-left: -0.4rem;
|
||||
margin-top: -0.4rem;
|
||||
-webkit-transform-origin: center;
|
||||
transform-origin: center;
|
||||
box-shadow: -1px 1px 2px rgba(10, 10, 10, 0.2);
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
`;
|
||||
|
||||
const SmallHr = styled.hr`
|
||||
margin: 0.5em 0;
|
||||
`;
|
||||
|
||||
const PopoverHeading = styled.div`
|
||||
height: 1.5em;
|
||||
`;
|
||||
|
||||
const PopoverDescription = styled.p`
|
||||
margin-top: 0.5em;
|
||||
`;
|
||||
|
||||
const shortRevision = (revision: string) => {
|
||||
if (revision.length > 7) {
|
||||
return revision.substring(0, 7);
|
||||
}
|
||||
return revision;
|
||||
};
|
||||
|
||||
type PopoverProps = {
|
||||
annotation: AnnotatedLine;
|
||||
offsetTop?: number;
|
||||
repository: Repository;
|
||||
baseDate?: DateInput;
|
||||
dispatch: Dispatch<Action>;
|
||||
};
|
||||
|
||||
const Popover: FC<PopoverProps> = ({ annotation, offsetTop, repository, baseDate, dispatch }) => {
|
||||
const [height, setHeight] = useState(125);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
useLayoutEffect(() => {
|
||||
if (ref.current) {
|
||||
setHeight(ref.current.clientHeight);
|
||||
}
|
||||
}, [ref]);
|
||||
|
||||
const onMouseEnter = () => {
|
||||
dispatch({
|
||||
type: "enter-popover"
|
||||
});
|
||||
};
|
||||
|
||||
const OnMouseLeave = () => {
|
||||
dispatch({
|
||||
type: "leave-popover"
|
||||
});
|
||||
};
|
||||
|
||||
const top = (offsetTop || 0) - height - 5;
|
||||
return (
|
||||
<PopoverContainer
|
||||
ref={ref}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={OnMouseLeave}
|
||||
className="box"
|
||||
style={{ top: `${top}px` }}
|
||||
>
|
||||
<PopoverHeading className="is-clearfix">
|
||||
<span className="is-pulled-left">
|
||||
<AuthorImage person={annotation.author} />
|
||||
<SingleContributor person={annotation.author} displayTextOnly={true} />
|
||||
</span>
|
||||
<DateFromNow className="is-pulled-right" date={annotation.when} baseDate={baseDate} />
|
||||
</PopoverHeading>
|
||||
<SmallHr />
|
||||
<p>
|
||||
Changeset{" "}
|
||||
<Link to={`/repo/${repository.namespace}/${repository.name}/code/changeset/${annotation.revision}`}>
|
||||
{shortRevision(annotation.revision)}
|
||||
</Link>
|
||||
</p>
|
||||
<PopoverDescription className="content">{annotation.description}</PopoverDescription>
|
||||
</PopoverContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Popover;
|
||||
47
scm-ui/ui-components/src/repos/annotate/actions.ts
Normal file
47
scm-ui/ui-components/src/repos/annotate/actions.ts
Normal file
@@ -0,0 +1,47 @@
|
||||
/*
|
||||
* 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 { AnnotatedLine } from "@scm-manager/ui-types";
|
||||
|
||||
type EnterLine = {
|
||||
annotation: AnnotatedLine;
|
||||
offset: number;
|
||||
line: number;
|
||||
type: "enter-line";
|
||||
};
|
||||
|
||||
type LeaveLine = {
|
||||
line: number;
|
||||
type: "leave-line";
|
||||
};
|
||||
|
||||
type EnterPopover = {
|
||||
type: "enter-popover";
|
||||
};
|
||||
|
||||
type LeavePopover = {
|
||||
type: "leave-popover";
|
||||
};
|
||||
|
||||
export type Action = EnterLine | LeaveLine | EnterPopover | LeavePopover;
|
||||
25
scm-ui/ui-components/src/repos/annotate/index.ts
Normal file
25
scm-ui/ui-components/src/repos/annotate/index.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
/*
|
||||
* 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.
|
||||
*/
|
||||
|
||||
export { default as Annotate } from "./Annotate";
|
||||
@@ -39,6 +39,7 @@ import {
|
||||
|
||||
export { diffs };
|
||||
|
||||
export * from "./annotate";
|
||||
export * from "./changesets";
|
||||
|
||||
export { default as Diff } from "./Diff";
|
||||
|
||||
Reference in New Issue
Block a user