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

View File

@@ -55,6 +55,7 @@ function parseLine (event) {
const { stdout } = event; const { stdout } = event;
const lines = stdout.split('\r\n'); const lines = stdout.split('\r\n');
const isTruncated = (event.end_line - event.start_line) > lines.length;
let ln = event.start_line; let ln = event.start_line;
@@ -63,17 +64,32 @@ function parseLine (event) {
const time = getTime(event, i); const time = getTime(event, i);
const group = getGroup(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)}`; 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) { function createRow (ln, content, time, group) {
content = hasAnsi(content) ? ansi.toHtml(content) : content; content = hasAnsi(content) ? ansi.toHtml(content) : content;
let expand = ''; let expand = '';
if (group.parent) { 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 ` return `

View File

@@ -7,16 +7,28 @@
<div class="col-md-8"> <div class="col-md-8">
<at-panel class="at-Stdout"> <at-panel class="at-Stdout">
<div class="at-Stdout-controls"> <div class="at-Stdout-controls">
<div class="pull-left"><i class="at-Stdout-controlIcon fa fa-minus-circle"></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-circle-down"></i></div> <div class="pull-right"><i class="at-Stdout-controlIcon fa fa-arrow-down"></i></div>
<div class="at-u-clear"></div> <div class="at-u-clear"></div>
</div> </div>
<pre class="at-Stdout-output"> <pre class="at-Stdout-output"><table>
<table> <thead>
<tbody ng-bind-html="vm.html"></tbody> <tr>
</table> <th class="at-Stdout-expand">&nbsp;</th>
</pre> <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> </at-panel>
</div> </div>
</div> </div>