CopyIcon,
LogIcon,
MaximizeIcon,
+ UnMaximizeIcon,
TextDecreaseIcon,
TextIncreaseIcon,
- WordWrapIcon
+ WordWrapOffIcon,
+ WordWrapOnIcon,
} from 'components/icon/icon';
import { Process } from 'store/processes/process';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
},
logViewer: {
height: '100%',
+ overflowY: 'scroll', // Required for MacOS's Safari -- See #19687
},
logViewerContainer: {
height: '100%',
},
title: {
overflow: 'hidden',
- paddingTop: theme.spacing.unit * 0.5
+ paddingTop: theme.spacing.unit * 0.5,
+ color: theme.customs.colors.greyD
},
iconHeader: {
fontSize: '1.875rem',
- color: theme.customs.colors.green700
+ color: theme.customs.colors.greyL
},
root: {
height: '100%',
export const ProcessLogsCard = withStyles(styles)(
({ classes, process, filters, selectedFilter, lines,
onLogFilterChange, navigateToLog, onCopy,
- doHidePanel, doMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) => {
- const [wordWrapToggle, setWordWrapToggle] = useState<boolean>(true);
+ doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) => {
+ const [wordWrap, setWordWrap] = useState<boolean>(true);
const [fontSize, setFontSize] = useState<number>(3);
const fontBaseSize = 10;
const fontStepSize = 1;
</Tooltip>
</Grid>
<Grid item>
- <Tooltip title="Toggle word wrapping" disableFocusListener>
- <IconButton onClick={() => setWordWrapToggle(!wordWrapToggle)}>
- <WordWrapIcon />
+ <Tooltip title={`${wordWrap ? 'Disable' : 'Enable'} word wrapping`} disableFocusListener>
+ <IconButton onClick={() => setWordWrap(!wordWrap)}>
+ {wordWrap ? <WordWrapOffIcon /> : <WordWrapOnIcon />}
</IconButton>
</Tooltip>
</Grid>
</IconButton>
</Tooltip>
</Grid>
+ { doUnMaximizePanel && panelMaximized &&
+ <Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
+ <IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
+ </Tooltip> }
{ doMaximizePanel && !panelMaximized &&
<Tooltip title={`Maximize ${panelName || 'panel'}`} disableFocusListener>
<IconButton onClick={doMaximizePanel}><MaximizeIcon /></IconButton>
</Tooltip> }
- { doHidePanel && <Grid item>
- <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
- <IconButton onClick={doHidePanel}><CloseIcon /></IconButton>
- </Tooltip>
- </Grid> }
+ { doHidePanel &&
+ <Tooltip title={`Close ${panelName || 'panel'}`} disableFocusListener>
+ <IconButton disabled={panelMaximized} onClick={doHidePanel}><CloseIcon /></IconButton>
+ </Tooltip> }
</Grid>}
title={
<Typography noWrap variant='h6' className={classes.title}>
spacing={24}
direction='column'>
<Grid className={classes.logViewer} item xs>
- <ProcessLogCodeSnippet fontSize={fontBaseSize+(fontStepSize*fontSize)} wordWrap={wordWrapToggle} lines={lines} />
+ <ProcessLogCodeSnippet fontSize={fontBaseSize+(fontStepSize*fontSize)} wordWrap={wordWrap} lines={lines} />
</Grid>
</Grid>
: <DefaultView