Update style to match latest mockup

This commit is contained in:
gconsidine 2017-11-30 11:57:00 -05:00 committed by Jake McDermott
parent 5c10ce3082
commit 3096a58272
3 changed files with 48 additions and 14 deletions

View File

@ -2,6 +2,7 @@
font-family: monospace;
&-controls {
color: @at-gray-dark-4x;
border: 1px solid @at-gray-dark-2x;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
@ -9,29 +10,34 @@
}
&-controlIcon {
font-size: 16px;
font-size: 12px;
padding: 10px;
}
&-expand {
background-color: @at-gray-light-2x;
color: @at-gray-dark-4x;
background-color: @at-gray-light;
font-size: 12px;
padding: 0 10px;
padding: 0 20px 0 10px;
}
&-lineNumber {
background-color: @at-gray-light-2x;
color: @at-gray-dark-4x;
background-color: @at-gray-light;
padding-right: 5px;
border-right: 1px solid gray;
border-right: 1px solid @at-gray-dark;
}
&-content {
padding-left: 5px;
padding-left: 20px;
}
&-timestamp {
padding-left: 20px;
font-size: 12px;
text-align: right;
}
&-output {

View File

@ -55,6 +55,7 @@ function parseLine (event) {
const { stdout } = event;
const lines = stdout.split('\r\n');
const isTruncated = (event.end_line - event.start_line) > lines.length;
let ln = event.start_line;
@ -63,17 +64,32 @@ function parseLine (event) {
const time = getTime(event, i);
const group = getGroup(event, i);
const isLastLine = i === lines.length - 1;
if (isTruncated && isLastLine) {
return `${html}${createRow(ln, line, time, group)}${createTruncatedRow()}`;
}
return `${html}${createRow(ln, line, time, group)}`;
}, '');
}
function createTruncatedRow () {
return `
<tr class="">
<td class="at-Stdout-expand"></td>
<td class="at-Stdout-lineNumber text-center"><i class="fa fa-long-arrow-down"></i></td>
<td class="at-Stdout-content"></td>
<td class="at-Stdout-timestamp"></td>
</tr>`;
}
function createRow (ln, content, time, group) {
content = hasAnsi(content) ? ansi.toHtml(content) : content;
let expand = '';
if (group.parent) {
expand = '<i class="fa fa-caret-down" ng-click="vm.toggle(group.level)"></i>';
expand = '<i class="fa fa-chevron-down" ng-click="vm.toggle(group.level)"></i>';
}
return `

View File

@ -7,16 +7,28 @@
<div class="col-md-8">
<at-panel class="at-Stdout">
<div class="at-Stdout-controls">
<div class="pull-left"><i class="at-Stdout-controlIcon fa fa-minus-circle"></i></div>
<div class="pull-right"><i class="at-Stdout-controlIcon fa fa-arrow-circle-down"></i></div>
<div class="pull-left"><i class="at-Stdout-controlIcon fa fa-minus"></i></div>
<div class="pull-right"><i class="at-Stdout-controlIcon fa fa-arrow-down"></i></div>
<div class="at-u-clear"></div>
</div>
<pre class="at-Stdout-output">
<table>
<tbody ng-bind-html="vm.html"></tbody>
</table>
</pre>
<pre class="at-Stdout-output"><table>
<thead>
<tr>
<th class="at-Stdout-expand">&nbsp;</th>
<th class="at-Stdout-lineNumber"></th>
<th class="at-Stdout-content"></th>
</tr>
</thead>
<tbody ng-bind-html="vm.html"></tbody>
<tfoot>
<tr>
<td class="at-Stdout-expand">&nbsp;</td>
<td class="at-Stdout-lineNumber"></td>
<td class="at-Stdout-content"></td>
<td class="at-Stdout-backToTop"><i class="fa fa-caret-up"></i> <span>Back to Top</span></td>
</tr>
</tfoot></table></pre>
</at-panel>
</div>
</div>