Skip to content

Commit d6df56e

Browse files
mareklibrajeff-phillips-18
mareklibra
authored and
jeff-phillips-18
committed
feat(Font style for SerialConsole): allow customized font styling for the SerialConsole component (#356)
affects: @patternfly/react-console Default font family and size can be changed for the SerialConsole. Underlying xterm component uses html canvas to render text and seems not to support font style change via CSS.
1 parent c090051 commit d6df56e

2 files changed

Lines changed: 18 additions & 1 deletion

File tree

‎packages/console/src/SerialConsole/SerialConsole.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ class SerialConsole extends React.Component {
7373
}}
7474
cols={this.props.cols}
7575
rows={this.props.rows}
76+
fontFamily={this.props.fontFamily}
77+
fontSize={this.props.fontSize}
7678
onConnect={this.props.onConnect}
7779
onDisconnect={this.props.onDisconnect}
7880
onData={this.props.onData}
@@ -143,6 +145,10 @@ SerialConsole.propTypes = {
143145
rows: PropTypes.number,
144146
cols: PropTypes.number,
145147

148+
/** Font for text rendered to xterm canvas */
149+
fontFamily: PropTypes.string,
150+
fontSize: PropTypes.number,
151+
146152
/** Enable customization */
147153
topClassName: PropTypes.string,
148154

@@ -162,6 +168,9 @@ SerialConsole.defaultProps = {
162168
rows: 25,
163169
cols: 80,
164170

171+
fontFamily: undefined /** Use xterm default: 'courier-new, courier, monospace' */,
172+
fontSize: undefined /** Use xterm default: 15 */,
173+
165174
onTitleChanged: noop,
166175
onData: noop,
167176
onResize: noop,

‎packages/console/src/SerialConsole/XTerm.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ class XTerm extends React.Component {
1616
const term = new Terminal({
1717
cols: this.props.cols,
1818
rows: this.props.rows,
19-
screenKeys: true
19+
screenKeys: true,
20+
fontFamily: this.props.fontFamily,
21+
fontSize: this.props.fontSize
2022
});
2123

2224
if (this.props.onData) {
@@ -142,6 +144,9 @@ XTerm.propTypes = {
142144
cols: PropTypes.number,
143145
rows: PropTypes.number,
144146

147+
fontFamily: PropTypes.string,
148+
fontSize: PropTypes.number,
149+
145150
onTitleChanged: PropTypes.func, // (title) => {}
146151
onData: PropTypes.func, // Data to be sent from terminal to backend; (data) => {}
147152
onResize: PropTypes.func // (rows, cols) => {}
@@ -151,6 +156,9 @@ XTerm.defaultProps = {
151156
cols: 80,
152157
rows: 25,
153158

159+
fontFamily: undefined,
160+
fontSize: undefined,
161+
154162
onTitleChanged: noop,
155163
onData: noop,
156164
onResize: noop

0 commit comments

Comments
 (0)