Skip to content

Commit 36c701f

Browse files
author
OpenShift Bot
authored
Merge pull request #1167 from spadgett/fullscreen
Merged by openshift-bot
2 parents 5b16b10 + a6d44e8 commit 36c701f

File tree

10 files changed

+290
-86
lines changed

10 files changed

+290
-86
lines changed

‎app/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -215,6 +215,7 @@ <h1>JavaScript Required</h1>
215215
<script src="scripts/services/environment.js"></script>
216216
<script src="scripts/services/keyValueEditorProvider.js"></script>
217217
<script src="scripts/services/keyValueEditorUtils.js"></script>
218+
<script src="scripts/services/fullscreen.js"></script>
218219
<script src="scripts/controllers/projects.js"></script>
219220
<script src="scripts/controllers/pods.js"></script>
220221
<script src="scripts/controllers/pod.js"></script>

‎app/scripts/app.js

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

‎app/scripts/controllers/pod.js

+16
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ angular.module('openshiftConsole')
1515
Logger,
1616
DataService,
1717
EnvironmentService,
18+
FullscreenService,
1819
ImageStreamResolver,
1920
MetricsService,
2021
PodsService,
@@ -330,6 +331,21 @@ angular.module('openshiftConsole')
330331
}
331332
};
332333

334+
var focusTerminal = function() {
335+
$('.terminal:visible').focus();
336+
};
337+
338+
$scope.hasFullscreen = FullscreenService.hasFullscreen(true);
339+
$scope.fullscreenTerminal = function() {
340+
FullscreenService.requestFullscreen('#container-terminal-wrapper');
341+
// Give focus back to the terminal after the user clicks the link.
342+
setTimeout(focusTerminal);
343+
};
344+
345+
$scope.exitFullscreen = function() {
346+
FullscreenService.exitFullscreen();
347+
};
348+
333349
$scope.debugTerminal = function(containerName) {
334350
var debugPod = PodsService.generateDebugPod($scope.pod, containerName);
335351
if (!debugPod) {

‎app/scripts/services/fullscreen.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
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+
exitFullscreen: function() {
50+
if(document.exitFullscreen) {
51+
document.exitFullscreen();
52+
} else if(document.mozCancelFullScreen) {
53+
document.mozCancelFullScreen();
54+
} else if(document.webkitExitFullscreen) {
55+
document.webkitExitFullscreen();
56+
} else if (document.msExitFullscreen) {
57+
document.msExitFullscreen();
58+
}
59+
}
60+
};
61+
});

‎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

+72-4
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,77 @@ 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+
.style-terminal-action() {
23+
color: @gray-light;
24+
cursor: pointer;
25+
font-size: 18px;
26+
&:hover, &:active, &:focus {
27+
color: #fff;
28+
text-decoration: none;
29+
}
30+
}
31+
position: relative;
32+
.terminal-actions .btn {
33+
.btn-link();
34+
.style-terminal-action();
35+
background: none;
36+
}
37+
.fullscreen-toggle {
38+
display: none;
39+
position: absolute;
40+
top: 7px;
41+
right: 15px;
42+
z-index: 1;
43+
a {
44+
.style-terminal-action();
45+
}
46+
.exit-fullscreen {
47+
display: none;
48+
}
49+
}
50+
&.disconnected .go-fullscreen {
51+
display: none;
52+
}
53+
.fullscreen() {
54+
width: 100%;
55+
height: 100%;
56+
.go-fullscreen {
57+
display: none;
58+
}
59+
.exit-fullscreen {
60+
display: inline;
61+
}
62+
}
63+
&:-webkit-full-screen {
64+
.fullscreen();
65+
}
66+
&:-moz-full-screen {
67+
.fullscreen();
68+
}
69+
&:-ms-full-screen {
70+
.fullscreen();
71+
}
72+
&:-fullscreen {
73+
.fullscreen();
74+
}
75+
@media(min-width: @screen-sm-min) {
76+
// Fill the extra right border we get when we cant quite fit the last col so it lines up with the Actions dropdown button
1577
background-color: #000;
78+
// Show the expand to fullscreen action when hovering over the terminal.
79+
&:hover {
80+
.fullscreen-toggle {
81+
display: inline-block;
82+
}
83+
}
1684
}
17-
}
85+
}

‎app/views/browse/pod.html

+33-22
Original file line numberDiff line numberDiff line change
@@ -131,16 +131,23 @@ <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"
145+
aria-hidden="true">Open Fullscreen Terminal</a>
139146
</div>
140147

141148
<alerts ng-if="selectedTerminalContainer.status === 'disconnected'" alerts="terminalDisconnectAlert"></alerts>
142149

143-
<div class="mar-left-xl mar-bottom-xl">
150+
<div class="mar-left-xl">
144151
<div class="row">
145152
<div class="pad-left-none pad-bottom-md col-sm-6 col-lg-4">
146153
<span ng-if="pod.spec.containers.length === 1">
@@ -182,25 +189,29 @@ <h2>
182189
</ui-select>
183190
</div>
184191
</div>
192+
</div>
185193

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>
194+
<div id="container-terminal-wrapper"
195+
class="container-terminal-wrapper"
196+
ng-class="{ disconnected: selectedTerminalContainer.status === 'disconnected' }">
197+
<div ng-repeat="term in containerTerminals">
198+
<div ng-if="hasFullscreen" class="fullscreen-toggle" aria-hidden="true">
199+
<a ng-href="" ng-click="fullscreenTerminal()" class="go-fullscreen" title="Open Fullscreen Terminal"><i class="fa fa-expand"></i></a>
200+
<a ng-href="" ng-click="exitFullscreen()" class="exit-fullscreen" title="Exit Fullscreen"><i class="fa fa-compress"></i></a>
203201
</div>
202+
<kubernetes-container-terminal
203+
prevent="!terminalTabWasSelected"
204+
ng-if="term.isUsed"
205+
ng-show="term.isVisible"
206+
pod="pod"
207+
container="term.containerName"
208+
status="term.status"
209+
rows="terminalRows"
210+
cols="terminalCols"
211+
autofocus="true"
212+
command='["/bin/sh", "-i", "-c", "TERM=xterm /bin/sh"]'
213+
>
214+
</kubernetes-container-terminal>
204215
</div>
205216
</div>
206217
</div>

0 commit comments

Comments
 (0)