Toggle link positioning for truncation directive

Fixes #1277

Author: sg00dwin

Diff for: app/styles/_core.less

@@ -1286,3 +1286,13 @@ copy-to-clipboard .input-group.limit-width {
     width: 100%;
   }
 }
+
+// Within truncation directive controls spacing between content and toggle link
+.truncation-block {
+  margin-right: 10px;
+}
+
+.truncation-collapse-link {
+  margin-left: 10px;
+  white-space: nowrap;
+}

Diff for: app/views/directives/truncate-long-text.html

@@ -1,18 +1,18 @@
 <span ng-if="!truncated" ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>
 <span ng-if="truncated">
   <span ng-if="!toggles.expanded">
-    <span ng-attr-title="{{content}}">
+    <span ng-attr-title="{{content}}" class="truncation-block">
       <span ng-bind-html="truncatedContent | highlightKeywords : keywords" class="truncated-content"></span>&hellip;
     </span>
-    <a ng-if="expandable" href="" ng-click="toggles.expanded = true" style="margin-left: 5px; white-space: nowrap;">See all</a>
+    <a ng-if="expandable" href="" ng-click="toggles.expanded = true" class="nowrap">See All</a>
   </span>
   <span ng-if="toggles.expanded">
     <div ng-if="prettifyJson" class="well">
-      <span class="pull-right" style="margin-top: -10px;"><a href="" ng-click="toggles.expanded = false">Collapse</a></span>
+      <span class="pull-right" style="margin-top: -10px;"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span>
       <span ng-bind-html="content | prettifyJSON | highlightKeywords : keywords" class="pretty-json truncated-content"></span>
     </div>
     <span ng-if="!prettifyJson">
-      <span class="pull-right"><a href="" ng-click="toggles.expanded = false">Collapse</a></span>
+      <span class="pull-right"><a href="" ng-click="toggles.expanded = false" class="truncation-collapse-link">Collapse</a></span>
       <span ng-bind-html="content | highlightKeywords : keywords" class="truncated-content"></span>
     </span>
   </span>

Diff for: dist/scripts/templates.js

@@ -8945,18 +8945,18 @@ angular.module('openshiftConsoleTemplates', []).run(['$templateCache', function(
     "<span ng-if=\"!truncated\" ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
     "<span ng-if=\"truncated\">\n" +
     "<span ng-if=\"!toggles.expanded\">\n" +
-    "<span ng-attr-title=\"{{content}}\">\n" +
+    "<span ng-attr-title=\"{{content}}\" class=\"truncation-block\">\n" +
     "<span ng-bind-html=\"truncatedContent | highlightKeywords : keywords\" class=\"truncated-content\"></span>&hellip;\n" +
     "</span>\n" +
-    "<a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" style=\"margin-left: 5px; white-space: nowrap\">See all</a>\n" +
+    "<a ng-if=\"expandable\" href=\"\" ng-click=\"toggles.expanded = true\" class=\"nowrap\">See All</a>\n" +
     "</span>\n" +
     "<span ng-if=\"toggles.expanded\">\n" +
     "<div ng-if=\"prettifyJson\" class=\"well\">\n" +
-    "<span class=\"pull-right\" style=\"margin-top: -10px\"><a href=\"\" ng-click=\"toggles.expanded = false\">Collapse</a></span>\n" +
+    "<span class=\"pull-right\" style=\"margin-top: -10px\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
     "<span ng-bind-html=\"content | prettifyJSON | highlightKeywords : keywords\" class=\"pretty-json truncated-content\"></span>\n" +
     "</div>\n" +
     "<span ng-if=\"!prettifyJson\">\n" +
-    "<span class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\">Collapse</a></span>\n" +
+    "<span class=\"pull-right\"><a href=\"\" ng-click=\"toggles.expanded = false\" class=\"truncation-collapse-link\">Collapse</a></span>\n" +
     "<span ng-bind-html=\"content | highlightKeywords : keywords\" class=\"truncated-content\"></span>\n" +
     "</span>\n" +
     "</span>\n" +

Diff for: dist/styles/main.css

@@ -4134,6 +4134,8 @@ copy-to-clipboard .input-group.limit-width{max-width:300px}
 .tech-preview-header{justify-content:space-between}
 @media (max-width:479px){.col-xxs-12{width:100%}
 }
+.truncation-block{margin-right:10px}
+.truncation-collapse-link{margin-left:10px;white-space:nowrap}
 .data-toolbar{padding:5px 0}
 .data-toolbar.other-resources-toolbar .data-toolbar-dropdown{min-width:210px}
 .data-toolbar .checkbox{margin-bottom:0;margin-top:10px}