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

Fix annotate overflow and doubled spacing in code views (#1678)

Browse Source 
Fix annotate overflow: Total div size was smaller than minimum size of individual children (+ margin).
Fix doubled spacing in code content views: Spacing duplicates through .panel-block as default for styling, various containers and inner syntax highlighter definition. Unfortunately, the latter is not easy to change, since it is also used with inline syntax highlighter.
This commit is contained in:
Florian Scholdei
2021-06-01 23:57:36 -07:00
committed by GitHub
parent 8ed2c1509f
commit 5cb2f077d9
5 changed files with 66 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/annotate_overflow.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: fixed
description: Fix annotate overflow and doubled spacing in code views ([#1678](https://github.com/scm-manager/scm-manager/pull/1678))

69
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -5,13 +5,10 @@ exports[`Storyshots Annotate Default 1`] = `
className="Annotatestories__Wrapper-sc-1fdvl94-0 BJzTn box" className="Annotatestories__Wrapper-sc-1fdvl94-0 BJzTn box"
> >
<div <div
style={ className="panel-block"
Object {
"position": "relative",
}
}
> >
<pre <pre
className="Annotate__NoSpacingReactSyntaxHighlighter-sc-1fuy482-0 iBNZmH"
style={ style={
Object { Object {
"MozHyphens": "none", "MozHyphens": "none",
@@ -66,7 +63,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -123,7 +120,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
/> />
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -146,7 +143,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -223,7 +220,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
/> />
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -246,7 +243,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -358,7 +355,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -460,7 +457,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -522,7 +519,7 @@ exports[`Storyshots Annotate Default 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
/> />
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -558,13 +555,10 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="Annotatestories__Wrapper-sc-1fdvl94-0 BJzTn box" className="Annotatestories__Wrapper-sc-1fdvl94-0 BJzTn box"
> >
<div <div
style={ className="panel-block"
Object {
"position": "relative",
}
}
> >
<pre <pre
className="Annotate__NoSpacingReactSyntaxHighlighter-sc-1fuy482-0 iBNZmH"
style={ style={
Object { Object {
"MozHyphens": "none", "MozHyphens": "none",
@@ -619,7 +613,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -688,7 +682,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
/> />
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -711,7 +705,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -754,7 +748,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
/> />
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -777,7 +771,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -898,7 +892,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -941,7 +935,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -1003,7 +997,7 @@ exports[`Storyshots Annotate Markdown 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
/> />
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -1039,13 +1033,10 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="Annotatestories__Wrapper-sc-1fdvl94-0 BJzTn box" className="Annotatestories__Wrapper-sc-1fdvl94-0 BJzTn box"
> >
<div <div
style={ className="panel-block"
Object {
"position": "relative",
}
}
> >
<pre <pre
className="Annotate__NoSpacingReactSyntaxHighlighter-sc-1fuy482-0 iBNZmH"
style={ style={
Object { Object {
"MozHyphens": "none", "MozHyphens": "none",
@@ -1100,7 +1091,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -1162,7 +1153,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
/> />
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -1185,7 +1176,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -1267,7 +1258,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
/> />
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"
@@ -1290,7 +1281,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -1407,7 +1398,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -1514,7 +1505,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB iDCXlL has-text-info" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__Metadata-h9c4md-5 egJUkB hNclWk has-text-info"
onMouseOut={[Function]} onMouseOut={[Function]}
onMouseOver={[Function]} onMouseOver={[Function]}
> >
@@ -1581,7 +1572,7 @@ exports[`Storyshots Annotate With Avatars 1`] = `
className="AnnotateLine__Line-h9c4md-4 ePpBEX" className="AnnotateLine__Line-h9c4md-4 ePpBEX"
> >
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB dMcluD" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__EmptyMetadata-h9c4md-6 egJUkB ktCVFA"
/> />
<div <div
className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ" className="AnnotateLine__LineElement-h9c4md-0 AnnotateLine__LineNumber-h9c4md-3 egJUkB iInEwJ"

24
scm-ui/ui-components/src/repos/annotate/Annotate.tsx
View File

@@ -36,6 +36,7 @@ import Popover from "./Popover";
import AnnotateLine from "./AnnotateLine"; import AnnotateLine from "./AnnotateLine";
import { Action } from "./actions"; import { Action } from "./actions";
import { determineLanguage } from "../../languages"; import { determineLanguage } from "../../languages";
import styled from "styled-components";
type Props = { type Props = {
source: AnnotatedSource; source: AnnotatedSource;
@@ -53,9 +54,14 @@ type State = {
const initialState = { const initialState = {
onPopover: false, onPopover: false,
onLine: false onLine: false,
}; };
const NoSpacingReactSyntaxHighlighter = styled(ReactSyntaxHighlighter)`
margin: 0 !important;
padding: 0 !important;
`;
const reducer = (state: State, action: Action): State => { const reducer = (state: State, action: Action): State => {
switch (action.type) { switch (action.type) {
case "enter-line": { case "enter-line": {
@@ -67,14 +73,14 @@ const reducer = (state: State, action: Action): State => {
offset: action.offset, offset: action.offset,
line: action.line, line: action.line,
onLine: true, onLine: true,
onPopover: false onPopover: false,
}; };
} }
case "leave-line": { case "leave-line": {
if (state.onPopover) { if (state.onPopover) {
return { return {
...state, ...state,
onLine: false onLine: false,
}; };
} }
return initialState; return initialState;
@@ -82,14 +88,14 @@ const reducer = (state: State, action: Action): State => {
case "enter-popover": { case "enter-popover": {
return { return {
...state, ...state,
onPopover: true onPopover: true,
}; };
} }
case "leave-popover": { case "leave-popover": {
if (state.onLine) { if (state.onLine) {
return { return {
...state, ...state,
onPopover: false onPopover: false,
}; };
} }
return initialState; return initialState;
@@ -107,7 +113,7 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
node, node,
stylesheet, stylesheet,
useInlineStyles, useInlineStyles,
key: `code-segment${i}` key: `code-segment${i}`,
}); });
if (i + 1 < rows.length) { if (i + 1 < rows.length) {
@@ -144,16 +150,16 @@ const Annotate: FC<Props> = ({ source, repository, baseDate }) => {
}, ""); }, "");
return ( return (
<div style={{ position: "relative" }}> <div className="panel-block">
{popover} {popover}
<ReactSyntaxHighlighter <NoSpacingReactSyntaxHighlighter
showLineNumbers={false} showLineNumbers={false}
language={determineLanguage(source.language)} language={determineLanguage(source.language)}
style={highlightingTheme} style={highlightingTheme}
renderer={defaultRenderer} renderer={defaultRenderer}
> >
{code} {code}
</ReactSyntaxHighlighter> </NoSpacingReactSyntaxHighlighter>
</div> </div>
); );
}; };

8
scm-ui/ui-components/src/repos/annotate/AnnotateLine.tsx
View File

@@ -77,11 +77,11 @@ const Line = styled.div`
const Metadata = styled(LineElement)` const Metadata = styled(LineElement)`
cursor: help; cursor: help;
width: 217px; width: 15.5em;
`; `;
const EmptyMetadata = styled(LineElement)` const EmptyMetadata = styled(LineElement)`
width: 217px; width: 15.5em; // width of author + when
`; `;
const dispatchDeferred = (dispatch: Dispatch<Action>, action: Action) => { const dispatchDeferred = (dispatch: Dispatch<Action>, action: Action) => {
@@ -104,7 +104,7 @@ const AnnotateLine: FC<Props> = ({ annotation, showAnnotation, dispatch, nr, chi
annotation, annotation,
line: nr, line: nr,
offset: link.current!.offsetTop, offset: link.current!.offsetTop,
type: "enter-line" type: "enter-line",
}); });
} }
}; };
@@ -113,7 +113,7 @@ const AnnotateLine: FC<Props> = ({ annotation, showAnnotation, dispatch, nr, chi
if (showAnnotation) { if (showAnnotation) {
dispatchDeferred(dispatch, { dispatchDeferred(dispatch, {
line: nr, line: nr,
type: "leave-line" type: "leave-line",
}); });
} }
}; };

22
scm-ui/ui-webapp/src/repos/sources/containers/SourcesView.tsx
View File

@@ -30,6 +30,14 @@ import { getContentType } from "./contentType";
import { File, Repository } from "@scm-manager/ui-types"; import { File, Repository } from "@scm-manager/ui-types";
import { ErrorNotification, Loading } from "@scm-manager/ui-components"; import { ErrorNotification, Loading } from "@scm-manager/ui-components";
import SwitchableMarkdownViewer from "../components/content/SwitchableMarkdownViewer"; import SwitchableMarkdownViewer from "../components/content/SwitchableMarkdownViewer";
import styled from "styled-components";
const NoSpacingSyntaxHighlighterContainer = styled.div`
& pre {
margin: 0 !important;
padding: 0 0 0.5rem !important;
}
`;
type Props = { type Props = {
repository: Repository; repository: Repository;
@@ -52,26 +60,26 @@ class SourcesView extends React.Component<Props, State> {
this.state = { this.state = {
contentType: "", contentType: "",
language: "", language: "",
loaded: false loaded: false,
}; };
} }
componentDidMount() { componentDidMount() {
const { file } = this.props; const { file } = this.props;
getContentType(file._links.self.href) getContentType(file._links.self.href)
.then(result => { .then((result) => {
this.setState({ this.setState({
...this.state, ...this.state,
contentType: result.type, contentType: result.type,
language: result.language, language: result.language,
loaded: true loaded: true,
}); });
}) })
.catch(error => { .catch((error) => {
this.setState({ this.setState({
...this.state, ...this.state,
error, error,
loaded: true loaded: true,
}); });
}); });
} }
@@ -101,7 +109,7 @@ class SourcesView extends React.Component<Props, State> {
file, file,
contentType, contentType,
revision, revision,
basePath basePath,
}} }}
> >
<DownloadViewer file={file} /> <DownloadViewer file={file} />
@@ -123,7 +131,7 @@ class SourcesView extends React.Component<Props, State> {
const sources = this.showSources(); const sources = this.showSources();
return <div className="panel-block">{sources}</div>; return <NoSpacingSyntaxHighlighterContainer className="panel-block">{sources}</NoSpacingSyntaxHighlighterContainer>;
} }
} }