Skip to content

Commit 67dc20d

Browse files
spadgettspadgett
committed
Add fullscreen terminal support
1 parent 857a4e6 commit 67dc20d

File tree

11 files changed

+198
-86
lines changed

11 files changed

+198
-86
lines changed

‎app/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,7 @@ <h1>JavaScript Required</h1>
213213
<script src="scripts/services/modals.js"></script>
214214
<script src="scripts/services/cliHelp.js"></script>
215215
<script src="scripts/services/html.js"></script>
216+
<script src="scripts/services/fullscreen.js"></script>
216217
<script src="scripts/controllers/projects.js"></script>
217218
<script src="scripts/controllers/pods.js"></script>
218219
<script src="scripts/controllers/pod.js"></script>

‎app/scripts/app.js

+2
Original file line numberDiff line numberDiff line change
@@ -448,6 +448,8 @@ angular
448448
.constant('RELATIVE_PATH_PATTERN', /^(?!\/)(?!\.\.(\/|$))(?!.*\/\.\.(\/|$)).*$/)
449449
// http://stackoverflow.com/questions/9038625/detect-if-device-is-ios
450450
.constant('IS_IOS', /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream)
451+
// http://stackoverflow.com/questions/5899783/detect-safari-using-jquery
452+
.constant('IS_SAFARI', /Version\/[\d\.]+.*Safari/.test(navigator.userAgent))
451453
.constant('amTimeAgoConfig', {
452454
// Set the title attribute to a localized time format like "September 4 1986 8:30 PM"
453455
// See http://momentjs.com/docs/#/displaying/format/

‎app/scripts/controllers/pod.js

+12
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ angular.module('openshiftConsole')
1414
$uibModal,
1515
Logger,
1616
DataService,
17+
FullscreenService,
1718
ImageStreamResolver,
1819
MetricsService,
1920
PodsService,
@@ -316,6 +317,17 @@ angular.module('openshiftConsole')
316317
}
317318
};
318319

320+
var focusTerminal = function() {
321+
$('.terminal').focus();
322+
};
323+
324+
$scope.hasFullscreen = FullscreenService.hasFullscreen(true);
325+
$scope.fullscreenTerminal = function() {
326+
FullscreenService.requestFullscreen('#container-terminal-wrapper');
327+
// Give focus back to the terminal after the user clicks the link.
328+
setTimeout(focusTerminal);
329+
};
330+
319331
$scope.debugTerminal = function(containerName) {
320332
var debugPod = PodsService.generateDebugPod($scope.pod, containerName);
321333
if (!debugPod) {

‎app/scripts/services/fullscreen.js

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
'use strict';
2+
3+
angular.module("openshiftConsole")
4+
.factory("FullscreenService", function(IS_SAFARI) {
5+
var requestFullscreen =
6+
document.documentElement.requestFullScreen ||
7+
document.documentElement.webkitRequestFullScreen ||
8+
document.documentElement.mozRequestFullScreen ||
9+
document.documentElement.msRequestFullscreen;
10+
11+
var findElement = function(element) {
12+
if (!element || !_.isString(element)) {
13+
return element;
14+
}
15+
16+
var matches = $(element);
17+
if (!matches.length) {
18+
return null;
19+
}
20+
21+
return matches[0];
22+
};
23+
24+
return {
25+
hasFullscreen: function(needsKeyboard) {
26+
// Safari blocks keyboard input in fullscreen mode. Unfortunately
27+
// there's no feature detection for this, so fall back to user agent
28+
// sniffing.
29+
if (needsKeyboard && IS_SAFARI) {
30+
return false;
31+
}
32+
return !!requestFullscreen;
33+
},
34+
35+
// `element` is a DOM element or selector
36+
requestFullscreen: function(element) {
37+
if (!requestFullscreen) {
38+
return;
39+
}
40+
41+
element = findElement(element);
42+
if (!element) {
43+
return;
44+
}
45+
46+
requestFullscreen.call(element);
47+
}
48+
};
49+
});

‎app/styles/_components.less

-8
Original file line numberDiff line numberDiff line change
@@ -216,14 +216,6 @@ code.command {
216216
}
217217
}
218218

219-
.pod-container-terminal {
220-
margin-top: 15px;
221-
margin-bottom: 15px;
222-
kubernetes-container-terminal .terminal-wrapper {
223-
max-width: 100%;
224-
overflow-x: auto;
225-
}
226-
}
227219
.builds-no-service {
228220
.builds-block {
229221
.builds {

‎app/styles/_container-terminal.less

+14-4
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,19 @@ kubernetes-container-terminal .terminal {
99
.terminal-font();
1010
}
1111

12-
// Fill the extra right border we get when we cant quite fit the last col so it lines up with the Actions dropdown button
13-
@media(min-width: @screen-sm-min) {
14-
.container-terminal-wrapper {
12+
.pod-container-terminal {
13+
margin-top: 15px;
14+
margin-bottom: 15px;
15+
kubernetes-container-terminal .terminal-wrapper {
16+
max-width: 100%;
17+
overflow-x: auto;
18+
}
19+
}
20+
21+
.container-terminal-wrapper {
22+
.supportsFullscreen();
23+
// Fill the extra right border we get when we cant quite fit the last col so it lines up with the Actions dropdown button
24+
@media(min-width: @screen-sm-min) {
1525
background-color: #000;
1626
}
17-
}
27+
}

‎app/styles/_mixins.less

+19
Original file line numberDiff line numberDiff line change
@@ -141,3 +141,22 @@
141141
max-width: 540px
142142
}
143143
}
144+
145+
.supportsFullscreen() {
146+
.fill() {
147+
width: 100%;
148+
height: 100%;
149+
}
150+
&:-webkit-full-screen {
151+
.fill();
152+
}
153+
&:-moz-full-screen {
154+
.fill();
155+
}
156+
&:-ms-full-screen {
157+
.fill();
158+
}
159+
&:-fullscreen {
160+
.fill();
161+
}
162+
}

‎app/views/browse/pod.html

+27-23
Original file line numberDiff line numberDiff line change
@@ -131,16 +131,22 @@ <h2>
131131
</h2>
132132
</div>
133133

134-
<div ng-if="!noContainersYet">
135-
<div class="mar-bottom-md mar-top-xl">
134+
<div ng-if="!noContainersYet" class="mar-top-xl mar-bottom-xl">
135+
<div class="mar-bottom-md">
136136
<span class="pficon pficon-info" aria-hidden="true"></span>
137-
When you navigate away from this pod, any open terminal connections will be closed.
138-
This will kill any foreground processes you started from the terminal.
137+
<span ng-class="{ 'mar-right-md': hasFullscreen }">
138+
When you navigate away from this pod, any open terminal connections will be closed.
139+
This will kill any foreground processes you started from the&nbsp;terminal.
140+
</span>
141+
<a href=""
142+
ng-if="hasFullscreen"
143+
ng-click="fullscreenTerminal()"
144+
class="nowrap">Open Fullscreen Terminal</a>
139145
</div>
140146

141147
<alerts ng-if="selectedTerminalContainer.status === 'disconnected'" alerts="terminalDisconnectAlert"></alerts>
142148

143-
<div class="mar-left-xl mar-bottom-xl">
149+
<div class="mar-left-xl">
144150
<div class="row">
145151
<div class="pad-left-none pad-bottom-md col-sm-6 col-lg-4">
146152
<span ng-if="pod.spec.containers.length === 1">
@@ -182,25 +188,23 @@ <h2>
182188
</ui-select>
183189
</div>
184190
</div>
191+
</div>
185192

186-
<div class="container-terminal-wrapper">
187-
<div class="row" ng-repeat="term in containerTerminals">
188-
<div class="column">
189-
<kubernetes-container-terminal
190-
prevent="!terminalTabWasSelected"
191-
ng-if="term.isUsed"
192-
ng-show="term.isVisible"
193-
pod="pod"
194-
container="term.containerName"
195-
status="term.status"
196-
rows="terminalRows"
197-
cols="terminalCols"
198-
autofocus="true"
199-
command='["/bin/sh", "-i", "-c", "TERM=xterm /bin/sh"]'
200-
>
201-
</kubernetes-container-terminal>
202-
</div>
203-
</div>
193+
<div id="container-terminal-wrapper" class="container-terminal-wrapper">
194+
<div ng-repeat="term in containerTerminals">
195+
<kubernetes-container-terminal
196+
prevent="!terminalTabWasSelected"
197+
ng-if="term.isUsed"
198+
ng-show="term.isVisible"
199+
pod="pod"
200+
container="term.containerName"
201+
status="term.status"
202+
rows="terminalRows"
203+
cols="terminalCols"
204+
autofocus="true"
205+
command='["/bin/sh", "-i", "-c", "TERM=xterm /bin/sh"]'
206+
>
207+
</kubernetes-container-terminal>
204208
</div>
205209
</div>
206210
</div>

0 commit comments

Comments
 (0)