Correct alignment/spacing of 'loading log' message when waiting for logs.

Fixes #1190

Author: sg00dwin

app/styles/_ellipsis.less

@@ -18,33 +18,6 @@
 .ellipsis-pulser {
   padding: 10px;
   text-align: center;
-  // Use on light backgrounds
-  &.ellipsis-dark {
-    .dot {
-      &.pulse:before, &.pulse:after {
-        background: @ellipsis-color-dark;
-      }
-    }
-    .ellipsis-msg {
-      color: @ellipsis-color-dark;
-    }
-  }
-  // Use on dark backgrounds
-  &.ellipsis-light {
-    .dot {
-      &.pulse:before, &.pulse:after {
-        background: @ellipsis-color-light;
-      }
-    }
-    .ellipsis-msg {
-      color: @ellipsis-color-light;
-    }
-  }
-  // Use when inline and/or not centered
-  &.ellipsis-inline {
-    display: inline-block;
-    padding: 0 3px 0 0;
-  }
   .dot {
     display: inline-block;
     height: @dot-size-default;
@@ -114,6 +87,33 @@
       margin-right: 6px;
     }
   }
+  // Use on light backgrounds
+  &.ellipsis-dark {
+    .dot {
+      &.pulse:before, &.pulse:after {
+        background: @ellipsis-color-dark;
+      }
+    }
+    .ellipsis-msg {
+      color: @ellipsis-color-dark;
+    }
+  }
+  // Use on dark backgrounds
+  &.ellipsis-light {
+    .dot {
+      &.pulse:before, &.pulse:after {
+        background: @ellipsis-color-light;
+      }
+    }
+    .ellipsis-msg {
+      color: @ellipsis-color-light;
+    }
+  }
+  // Use when inline and/or not centered
+  &.ellipsis-inline {
+    display: inline-block;
+    padding: 0 3px 0 0;
+  }
 }
 
 @keyframes anim {

app/styles/_log.less

@@ -183,15 +183,10 @@
     }
   }
 }
-.ellipsis-loader {
-  // Show the loading dots at the bottom, even when the log content doesn't fill the page.
-  position: absolute;
-  bottom: 10px;
-  // Center the dots.
-  margin-left: auto;
-  margin-right: auto;
-  left: 0;
-  right: 0;
+.log-pending-ellipsis {
+  display: inline-block;
+  padding-top: @grid-gutter-width / 2;
+  width: 100%;
 }
 .log-end-msg {
   font-family: @font-family-base;
@@ -201,14 +196,22 @@
   bottom: 5px;
   left: 10px;
 }
-// TODO: need to encapsulate this better
-.chromeless .log-scroll-top.affix {
-  right: 0px; // override
-}
-.chromeless .log-scroll-top.affix.target-logger-node {
-  right: @scrollbar-width;  // override
+.chromeless {
+  background-color:  @log-bg-color;
+  color: #d1d1d1;
+  .log-pending-ellipsis {
+    background-color: @log-bg-color;
+    padding: @grid-gutter-width 0 0 (@grid-gutter-width - 10px);
+  }
+  .log-scroll-top.affix {
+    right: 0px; // override
+  }
+  .log-scroll-top.affix.target-logger-node {
+    right: @scrollbar-width;  // override
+  }
 }
 
+
 .log-link-external {
   text-align: right;
   a {

app/views/directives/logs/_log-viewer.html

@@ -41,7 +41,10 @@
 
 
 <!-- show this message until the log viewer starts. important for pending state, etc -->
-<ellipsis-pulser color="dark" size="sm" display="inline" msg="Loading log" ng-if="(!state)"></ellipsis-pulser>
+<div ng-if="(!state)">
+  <ellipsis-pulser ng-if="!chromeless" color="dark" size="sm" display="inline" msg="Loading log" class="log-pending-ellipsis"></ellipsis-pulser>
+  <ellipsis-pulser ng-if="chromeless" color="light" size="sm" display="inline" msg="Loading log" class="log-pending-ellipsis"></ellipsis-pulser>
+</div>
 
 <div class="empty-state-message text-center" ng-if="state=='empty'" ng-class="{'log-fixed-height': fixedHeight}">
   <h2>Logs are not available.</h2>

dist/scripts/templates.js

@@ -7528,7 +7528,10 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "Only the previous {{options.tailLines || 5000}} log lines and new log messages will be displayed because of the large log size.\n" +
     "</div>\n" +
     "\n" +
-    "<ellipsis-pulser color=\"dark\" size=\"sm\" display=\"inline\" msg=\"Loading log\" ng-if=\"(!state)\"></ellipsis-pulser>\n" +
+    "<div ng-if=\"(!state)\">\n" +
+    "<ellipsis-pulser ng-if=\"!chromeless\" color=\"dark\" size=\"sm\" display=\"inline\" msg=\"Loading log\" class=\"log-pending-ellipsis\"></ellipsis-pulser>\n" +
+    "<ellipsis-pulser ng-if=\"chromeless\" color=\"light\" size=\"sm\" display=\"inline\" msg=\"Loading log\" class=\"log-pending-ellipsis\"></ellipsis-pulser>\n" +
+    "</div>\n" +
     "<div class=\"empty-state-message text-center\" ng-if=\"state=='empty'\" ng-class=\"{'log-fixed-height': fixedHeight}\">\n" +
     "<h2>Logs are not available.</h2>\n" +
     "<p>\n" +

dist/styles/main.css

@@ -4046,11 +4046,6 @@ copy-to-clipboard .input-group.limit-width{max-width:300px}
 @media (min-width:768px){.data-toolbar .vertical-divider+.data-toolbar-filter{margin-top:0}
 }
 .ellipsis-pulser{padding:10px;text-align:center}
-.ellipsis-pulser.ellipsis-dark .dot.pulse:after,.ellipsis-pulser.ellipsis-dark .dot.pulse:before{background:#333}
-.ellipsis-pulser.ellipsis-dark .ellipsis-msg{color:#333}
-.ellipsis-pulser.ellipsis-light .dot.pulse:after,.ellipsis-pulser.ellipsis-light .dot.pulse:before{background:#b3b3b3}
-.ellipsis-pulser.ellipsis-light .ellipsis-msg{color:#b3b3b3}
-.ellipsis-pulser.ellipsis-inline{display:inline-block;padding:0 3px 0 0}
 .ellipsis-pulser .dot{display:inline-block;height:4px;position:relative;width:4px}
 .ellipsis-pulser .dot:before{animation-name:anim;animation-duration:1.5s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal;border-radius:100em;content:" ";display:block;height:100%;left:0px;opacity:.33;position:absolute;top:0px;transform-origin:50% 50%;transform:scale(.66);width:100%}
 .ellipsis-pulser .dot:nth-of-type(+1):before{animation-delay:.25s}
@@ -4062,6 +4057,11 @@ copy-to-clipboard .input-group.limit-width{max-width:300px}
 .ellipsis-pulser.ellipsis-md .ellipsis-msg{font-size:17px;font-weight:300;margin-right:3px}
 .ellipsis-pulser.ellipsis-lg .dot{height:12px;margin-bottom:-2px;width:12px}
 .ellipsis-pulser.ellipsis-lg .ellipsis-msg{font-size:25px;font-weight:300;margin-right:6px}
+.ellipsis-pulser.ellipsis-dark .dot.pulse:after,.ellipsis-pulser.ellipsis-dark .dot.pulse:before{background:#333}
+.ellipsis-pulser.ellipsis-dark .ellipsis-msg{color:#333}
+.ellipsis-pulser.ellipsis-light .dot.pulse:after,.ellipsis-pulser.ellipsis-light .dot.pulse:before{background:#b3b3b3}
+.ellipsis-pulser.ellipsis-light .ellipsis-msg{color:#b3b3b3}
+.ellipsis-pulser.ellipsis-inline{display:inline-block;padding:0 3px 0 0}
 @keyframes anim{0%{opacity:.33;transform:scale(.66)}
 35%{opacity:1;transform:scale(1)}
 70%{transform:scale(.66)}
@@ -5174,13 +5174,15 @@ a.subtle-link:active,a.subtle-link:focus,a.subtle-link:hover{color:#00659c;borde
 .log-view.log-fixed-height .log-scroll-bottom,.log-view.log-fixed-height .log-scroll-top{border-right-width:1px;right:17px}
 .log-view.log-fixed-height .log-view-output{overflow:auto;padding-bottom:0;padding-top:0}
 .log-view.log-fixed-height .log-view-output table{margin-bottom:40px;margin-top:30px}
-.ellipsis-loader{position:absolute;bottom:10px;margin-left:auto;margin-right:auto;left:0;right:0}
+.log-pending-ellipsis{display:inline-block;padding-top:20px;width:100%}
 .log-end-msg{font-size:12px;color:#72767b;position:absolute;bottom:5px;left:10px}
+.chromeless,.log-line{color:#d1d1d1}
+.chromeless{background-color:#101214}
+.chromeless .log-pending-ellipsis{background-color:#101214;padding:40px 0 0 30px}
 .chromeless .log-scroll-top.affix{right:0px}
 .chromeless .log-scroll-top.affix.target-logger-node{right:15px}
 .log-link-external a{margin-left:20px;margin-right:10px;white-space:nowrap}
 .log-link-external i{font-size:10px;margin-left:5px}
-.log-line{color:#d1d1d1}
 .log-line:hover{background-color:#22262b;color:#ededed}
 .log-line-number:before{content:attr(data-line-number)}
 .log-line-number{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;border-right:1px #272b30 solid;padding-right:10px;vertical-align:top;white-space:nowrap;width:60px;color:#72767b}