paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 47 Packages Projects Releases Wiki Activity

core-components: make LogViewer styles overridable

Browse Source 
Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
This commit is contained in:
Patrik Oldsberg
2021-12-06 00:38:45 +01:00
committed by blam
parent da0fdf9b5e
commit 1efed71f60
3 changed files with 144 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/core-components/src/components/LogViewer/index.ts
+1
View File
@@ -16,3 +16,4 @@
export { LogViewer } from './LogViewer';
export type { LogViewerProps } from './LogViewer';
export type { LogViewerClassKey } from './styles';
packages/core-components/src/components/LogViewer/styles.ts
+141 -106
View File
@@ -19,114 +19,149 @@ import * as colors from '@material-ui/core/colors';
export const HEADER_SIZE = 40;
export const useStyles = makeStyles(theme => ({
root: {
background: theme.palette.background.paper,
},
header: {
height: HEADER_SIZE,
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
},
log: {
fontFamily: '"Monaco", monospace',
fontSize: theme.typography.pxToRem(12),
},
line: {
position: 'relative',
whiteSpace: 'pre',
export type LogViewerClassKey =
| 'root'
| 'header'
| 'log'
| 'line'
| 'lineSelected'
| 'lineCopyButton'
| 'lineNumber'
| 'textHighlight'
| 'textSelectedHighlight'
| 'modifierBold'
| 'modifierItalic'
| 'modifierUnderline'
| 'modifierForegroundBlack'
| 'modifierForegroundRed'
| 'modifierForegroundGreen'
| 'modifierForegroundYellow'
| 'modifierForegroundBlue'
| 'modifierForegroundMagenta'
| 'modifierForegroundCyan'
| 'modifierForegroundWhite'
| 'modifierForegroundGrey'
| 'modifierBackgroundBlack'
| 'modifierBackgroundRed'
| 'modifierBackgroundGreen'
| 'modifierBackgroundYellow'
| 'modifierBackgroundBlue'
| 'modifierBackgroundMagenta'
| 'modifierBackgroundCyan'
| 'modifierBackgroundWhite'
| 'modifierBackgroundGrey';
'&:hover': {
background: theme.palette.action.hover,
export const useStyles = makeStyles(
theme => ({
root: {
background: theme.palette.background.paper,
},
},
lineSelected: {
background: theme.palette.action.selected,
header: {
height: HEADER_SIZE,
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
},
log: {
fontFamily: '"Monaco", monospace',
fontSize: theme.typography.pxToRem(12),
},
line: {
position: 'relative',
whiteSpace: 'pre',
'&:hover': {
'&:hover': {
background: theme.palette.action.hover,
},
},
lineSelected: {
background: theme.palette.action.selected,
'&:hover': {
background: theme.palette.action.selected,
},
},
},
lineCopyButton: {
position: 'absolute',
paddingTop: 0,
paddingBottom: 0,
},
lineNumber: {
display: 'inline-block',
textAlign: 'end',
width: 60,
marginRight: theme.spacing(1),
cursor: 'pointer',
},
textHighlight: {
background: alpha(theme.palette.info.main, 0.15),
},
textSelectedHighlight: {
background: alpha(theme.palette.info.main, 0.4),
},
modifierBold: {
fontWeight: theme.typography.fontWeightBold,
},
modifierItalic: {
fontStyle: 'italic',
},
modifierUnderline: {
textDecoration: 'underline',
},
modifierForegroundBlack: {
color: colors.common.black,
},
modifierForegroundRed: {
color: colors.red[500],
},
modifierForegroundGreen: {
color: colors.green[500],
},
modifierForegroundYellow: {
color: colors.yellow[500],
},
modifierForegroundBlue: {
color: colors.blue[500],
},
modifierForegroundMagenta: {
color: colors.purple[500],
},
modifierForegroundCyan: {
color: colors.cyan[500],
},
modifierForegroundWhite: {
color: colors.common.white,
},
modifierForegroundGrey: {
color: colors.grey[500],
},
modifierBackgroundBlack: {
background: colors.common.black,
},
modifierBackgroundRed: {
background: colors.red[500],
},
modifierBackgroundGreen: {
background: colors.green[500],
},
modifierBackgroundYellow: {
background: colors.yellow[500],
},
modifierBackgroundBlue: {
background: colors.blue[500],
},
modifierBackgroundMagenta: {
background: colors.purple[500],
},
modifierBackgroundCyan: {
background: colors.cyan[500],
},
modifierBackgroundWhite: {
background: colors.common.white,
},
modifierBackgroundGrey: {
background: colors.grey[500],
},
}));
lineCopyButton: {
position: 'absolute',
paddingTop: 0,
paddingBottom: 0,
},
lineNumber: {
display: 'inline-block',
textAlign: 'end',
width: 60,
marginRight: theme.spacing(1),
cursor: 'pointer',
},
textHighlight: {
background: alpha(theme.palette.info.main, 0.15),
},
textSelectedHighlight: {
background: alpha(theme.palette.info.main, 0.4),
},
modifierBold: {
fontWeight: theme.typography.fontWeightBold,
},
modifierItalic: {
fontStyle: 'italic',
},
modifierUnderline: {
textDecoration: 'underline',
},
modifierForegroundBlack: {
color: colors.common.black,
},
modifierForegroundRed: {
color: colors.red[500],
},
modifierForegroundGreen: {
color: colors.green[500],
},
modifierForegroundYellow: {
color: colors.yellow[500],
},
modifierForegroundBlue: {
color: colors.blue[500],
},
modifierForegroundMagenta: {
color: colors.purple[500],
},
modifierForegroundCyan: {
color: colors.cyan[500],
},
modifierForegroundWhite: {
color: colors.common.white,
},
modifierForegroundGrey: {
color: colors.grey[500],
},
modifierBackgroundBlack: {
background: colors.common.black,
},
modifierBackgroundRed: {
background: colors.red[500],
},
modifierBackgroundGreen: {
background: colors.green[500],
},
modifierBackgroundYellow: {
background: colors.yellow[500],
},
modifierBackgroundBlue: {
background: colors.blue[500],
},
modifierBackgroundMagenta: {
background: colors.purple[500],
},
modifierBackgroundCyan: {
background: colors.cyan[500],
},
modifierBackgroundWhite: {
background: colors.common.white,
},
modifierBackgroundGrey: {
background: colors.grey[500],
},
}),
{ name: 'BackstageLogViewer' },
);
packages/core-components/src/overridableComponents.ts
+2
View File
@@ -34,6 +34,7 @@ import {
LifecycleClassKey,
MarkdownContentClassKey,
LoginRequestListItemClassKey,
LogViewerClassKey,
OAuthRequestDialogClassKey,
OverflowTooltipClassKey,
GaugeClassKey,
@@ -110,6 +111,7 @@ type BackstageComponentsNameToClassKey = {
BackstageLifecycle: LifecycleClassKey;
BackstageMarkdownContent: MarkdownContentClassKey;
BackstageLoginRequestListItem: LoginRequestListItemClassKey;
BackstageLogViewer: LogViewerClassKey;
OAuthRequestDialog: OAuthRequestDialogClassKey;
BackstageOverflowTooltip: OverflowTooltipClassKey;
BackstageGauge: GaugeClassKey;