className?: string;
apiResponse?: boolean;
containerClassName?: string;
+ fontSize?: number;
}
type CodeSnippetProps = CodeSnippetDataProps & WithStyles<CssRules>;
export const CodeSnippet = withStyles(styles)(
- ({ classes, lines, className, containerClassName, apiResponse }: CodeSnippetProps) =>
+ ({ classes, lines, className, containerClassName, apiResponse, fontSize }: CodeSnippetProps) =>
<Typography
component="div"
className={classNames(classes.root, containerClassName, className)}>
{ lines.map((line: string, index: number) => {
- return <Typography key={index} className={apiResponse ? classes.space : className} component="pre">{line}</Typography>;
+ return <Typography key={index} style={{ fontSize: fontSize }} className={apiResponse ? classes.space : className} component="pre">{line}</Typography>;
}) }
</Typography>
);
\ No newline at end of file
import RemoveRedEye from '@material-ui/icons/RemoveRedEye';
import Computer from '@material-ui/icons/Computer';
import WrapText from '@material-ui/icons/WrapText';
+import TextIncrease from '@material-ui/icons/ZoomIn';
+import TextDecrease from '@material-ui/icons/ZoomOut';
// Import FontAwesome icons
import { library } from '@fortawesome/fontawesome-svg-core';
export const CanManageIcon: IconType = (props) => <Computer {...props} />;
export const AddUserIcon: IconType = (props) => <PersonAdd {...props} />;
export const WordWrapIcon: IconType = (props) => <WrapText {...props} />;
+export const TextIncreaseIcon: IconType = (props) => <TextIncrease {...props} />;
+export const TextDecreaseIcon: IconType = (props) => <TextDecrease {...props} />;
CollectionIcon,
LogIcon,
MaximizeIcon,
+ TextDecreaseIcon,
+ TextIncreaseIcon,
WordWrapIcon
} from 'components/icon/icon';
import { Process } from 'store/processes/process';
({ classes, process, filters, selectedFilter, lines, onLogFilterChange, navigateToLog,
doHidePanel, doMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) => {
const [wordWrapToggle, setWordWrapToggle] = useState<boolean>(true);
+ const [fontSize, setFontSize] = useState<number>(3);
+ const fontBaseSize = 10;
+ const fontStepSize = 1;
+
return <Grid item className={classes.root} xs={12}>
<Card className={classes.card}>
<CardHeader className={classes.header}
<ProcessLogForm selectedFilter={selectedFilter}
filters={filters} onChange={onLogFilterChange} />
</Grid>
+ <Grid item>
+ <Tooltip title="Decrease font size" disableFocusListener>
+ <IconButton onClick={() => fontSize > 1 && setFontSize(fontSize-1)}>
+ <TextDecreaseIcon />
+ </IconButton>
+ </Tooltip>
+ </Grid>
+ <Grid item>
+ <Tooltip title="Increase font size" disableFocusListener>
+ <IconButton onClick={() => fontSize < 5 && setFontSize(fontSize+1)}>
+ <TextIncreaseIcon />
+ </IconButton>
+ </Tooltip>
+ </Grid>
<Grid item>
<Tooltip title="Toggle word wrapping" disableFocusListener>
<IconButton onClick={() => setWordWrapToggle(!wordWrapToggle)}>
spacing={24}
direction='column'>
<Grid className={classes.logViewer} item xs>
- <ProcessLogCodeSnippet wordWrap={wordWrapToggle} lines={lines} />
+ <ProcessLogCodeSnippet fontSize={fontBaseSize+(fontStepSize*fontSize)} wordWrap={wordWrapToggle} lines={lines} />
</Grid>
</Grid>
: <DefaultView
interface ProcessLogCodeSnippetProps {
lines: string[];
+ fontSize: number;
wordWrap?: boolean;
}
export const ProcessLogCodeSnippet = withStyles(styles)(
(props: ProcessLogCodeSnippetProps & WithStyles<CssRules>) =>
<MuiThemeProvider theme={theme}>
- <CodeSnippet lines={props.lines}
+ <CodeSnippet lines={props.lines} fontSize={props.fontSize}
className={props.wordWrap ? props.classes.wordWrap : undefined}
containerClassName={props.classes.codeSnippetContainer} />
</MuiThemeProvider>);
\ No newline at end of file