Skip to content

Commit cef55cf

Browse files
committed
feat(SerialConsole): Introduce SerialConsole component
The SerialConsole component wraps access to the Terminal component [1]. The component can be used to access serial console (PTY) of a server or virtual machine. The underlying Terminal component will be replaced by [2] later. Esp. once: - [1] patches are merged into [2] - [2] has desired browser support - look&feel of [2] is acceptable for [4] and others Both [1] and [2] are forks of no-more maintained [3]. The currently chosen [1] is being successfuly used within Cockpit [4] which implementation became base for this commit. [1] https://github.com/cockpit-project/term.js [2] https://github.com/xtermjs/xterm.js [3] https://github.com/chjj/term.js [4] https://github.com/cockpit-project/cockpit/
1 parent 77fcdb1 commit cef55cf

File tree

7 files changed

+648
-246
lines changed

7 files changed

+648
-246
lines changed

less/patternfly-react.less

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,62 @@
11
/**
22
Patternfly React Specific Extensions
33
*/
4+
@import '~patternfly/dist/less/variables';
5+
6+
/** Following is used by SerialConsole */
7+
.console-ct > .terminal {
8+
color: @color-pf-white;
9+
text-align: left;
10+
outline: medium none;
11+
background-color: black;
12+
border: 1px solid @color-pf-black;
13+
padding: 10px;
14+
}
15+
16+
.console-ct {
17+
font-family: @font-family-monospace;
18+
margin-top: 0;
19+
margin-bottom: 0;
20+
font-size: 10px;
21+
text-align: center;
22+
line-height: normal;
23+
}
24+
25+
@media (min-width: 568px) {
26+
.console-ct {
27+
font-size: 12px;
28+
}
29+
}
30+
31+
.console-ct > pre {
32+
padding: 10px;
33+
text-align: left;
34+
display: block;
35+
font-family: inherit;
36+
font-size: inherit;
37+
width: 48em;
38+
height: 310px;
39+
overflow-y: scroll;
40+
white-space: pre-wrap;
41+
margin: 0 auto;
42+
}
43+
44+
.terminal .terminal-cursor {
45+
border: 1px solid @color-pf-white;
46+
}
47+
48+
.terminal:focus .terminal-cursor {
49+
border: none;
50+
animation: blink 1s step-end infinite;
51+
}
52+
53+
@keyframes blink {
54+
from {
55+
color: @color-pf-black;
56+
background: @color-pf-white;
57+
}
58+
50% {
59+
color: @color-pf-white;
60+
background: @color-pf-black;
61+
}
62+
}

0 commit comments

Comments
 (0)