External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-05-20 07:17:40 -02:30
Code Issues Packages Projects Releases Wiki Activity

Extend standard out line border to full length of container

Browse Source
This commit is contained in:
Marliana Lara
2018-06-20 13:49:41 -04:00
parent d1bc9758db
commit 2824e750cb
3 changed files with 42 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
awx/ui/client/features/output/_index.less
View File

@@ -74,23 +74,34 @@
color: @at-blue; color: @at-blue;
} }
&-row {
display: flex;
&:hover div {
background-color: white;
}
}
&-toggle { &-toggle {
color: @at-gray-848992;
background-color: @at-gray-eb; background-color: @at-gray-eb;
color: @at-gray-848992;
display: flex;
flex: 0 0 30px;
font-size: 18px; font-size: 18px;
justify-content: center;
line-height: 12px; line-height: 12px;
& > i { & > i {
cursor: pointer; cursor: pointer;
} }
padding: 0 10px 0 10px;
user-select: none; user-select: none;
} }
&-line { &-line {
color: @at-gray-161b1f; color: @at-gray-161b1f;
background-color: @at-gray-eb; background-color: @at-gray-eb;
flex: 0 0 45px;
text-align: right; text-align: right;
vertical-align: top; vertical-align: top;
padding-right: 5px; padding-right: 5px;
@@ -100,6 +111,7 @@
&-event { &-event {
.at-mixin-event(); .at-mixin-event();
flex: 1;
} }
&-event--host { &-event--host {
@@ -123,6 +135,8 @@
} }
&-container { &-container {
display: flex;
flex-direction: column;
font-family: monospace; font-family: monospace;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
@@ -136,15 +150,16 @@
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
max-height: ~"calc(100vh - 350px)"; max-height: ~"calc(100vh - 350px)";
white-space: nowrap; }
& > table { &-borderHeader {
table-layout: fixed; .at-mixin-stdoutBorder();
height: 10px;
}
tr:hover > td { &-borderFooter {
background: white; .at-mixin-stdoutBorder();
} flex: 1;
}
} }
&--fullscreen { &--fullscreen {
@@ -157,7 +172,12 @@
padding: 0 10px; padding: 0 10px;
word-wrap: break-word; word-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
}
.at-mixin-stdoutBorder() {
background-color: @at-gray-eb;
border-right: 1px solid @at-gray-b7;
width: 75px;
} }
// Search --------------------------------------------------------------------------------- // Search ---------------------------------------------------------------------------------

17
awx/ui/client/features/output/index.view.html
View File

@@ -39,18 +39,11 @@
<div class="at-u-clear"></div> <div class="at-u-clear"></div>
</div> </div>
<pre class="at-Stdout-container"> <div class="at-Stdout-container">
<table> <div class="at-Stdout-borderHeader"></div>
<thead> <div id="atStdoutResultTable"></div>
<tr> <div class="at-Stdout-borderFooter"></div>
<th class="at-Stdout-toggle">&nbsp;</th> </div>
<th class="at-Stdout-line"></th>
<th class="at-Stdout-event"></th>
</tr>
</thead>
<tbody id="atStdoutResultTable"></tbody>
</table>
</pre>
<div ng-show="vm.menu.showBackToTop" class="at-Stdout-menuBottom"> <div ng-show="vm.menu.showBackToTop" class="at-Stdout-menuBottom">
<div class="at-Stdout-menuIconGroup" ng-click="vm.menu.home()"> <div class="at-Stdout-menuIconGroup" ng-click="vm.menu.home()">

16
awx/ui/client/features/output/render.service.js
View File

@@ -198,11 +198,11 @@ function JobRenderService ($q, $sce, $window) {
if (current) { if (current) {
if (this.createToggles && current.isParent && current.line === ln) { if (this.createToggles && current.isParent && current.line === ln) {
id = current.uuid; id = current.uuid;
tdToggle = `<td class="at-Stdout-toggle" ng-click="vm.toggleLineExpand('${id}')"><i class="fa fa-angle-down can-toggle"></i></td>`; tdToggle = `<div class="at-Stdout-toggle" ng-click="vm.toggleLineExpand('${id}')"><i class="fa fa-angle-down can-toggle"></i></div>`;
} }
if (current.isHost) { if (current.isHost) {
tdEvent = `<td class="at-Stdout-event--host" ng-click="vm.showHostDetails('${current.id}', '${current.uuid}')">${content}</td>`; tdEvent = `<div class="at-Stdout-event--host" ng-click="vm.showHostDetails('${current.id}', '${current.uuid}')">${content}</div>`;
} }
if (current.time && current.line === ln) { if (current.time && current.line === ln) {
@@ -215,11 +215,11 @@ function JobRenderService ($q, $sce, $window) {
} }
if (!tdEvent) { if (!tdEvent) {
tdEvent = `<td class="at-Stdout-event">${content}</td>`; tdEvent = `<div class="at-Stdout-event">${content}</div>`;
} }
if (!tdToggle) { if (!tdToggle) {
tdToggle = '<td class="at-Stdout-toggle"></td>'; tdToggle = '<div class="at-Stdout-toggle"></div>';
} }
if (!ln) { if (!ln) {
@@ -227,12 +227,12 @@ function JobRenderService ($q, $sce, $window) {
} }
return ` return `
<tr id="${id}" class="${classList}"> <div id="${id}" class="at-Stdout-row ${classList}">
${tdToggle} ${tdToggle}
<td class="at-Stdout-line">${ln}</td> <div class="at-Stdout-line">${ln}</div>
${tdEvent} ${tdEvent}
<td class="at-Stdout-time">${timestamp}</td> <div class="at-Stdout-time">${timestamp}</div>
</tr>`; </div>`;
}; };
this.getTimestamp = created => { this.getTimestamp = created => {