Fix handling of long build commit messages

Fixes #175

static/css/directives/ui/triggered-build-description.css

@@ -51,3 +51,21 @@
 .triggered-build-description-element .fa-user {
   margin-right: 4px;
 }
+
+.triggered-build-description-element .long-commit-description {
+  margin-top: 10px;
+  font-size: 13px;
+  white-space: pre;
+  font-family: Consolas, "Lucida Console", Monaco, monospace;
+  border-left: 1px solid #eee;
+  padding-left: 10px;
+}
+
+.triggered-build-description-element .long-description-toggle {
+  padding: 2px;
+  display: inline-block;
+}
+
+.triggered-build-description-element .long-description-toggle:hover {
+  cursor: pointer;
+}

static/directives/triggered-build-description.html

@@ -29,7 +29,12 @@
       <div class="commit-message">
         <span class="anchor" is-only-text="!TriggerService.getFullLinkTemplate(build, 'commit')"
               target="_blank" href="{{ TriggerService.getFullLinkTemplate(build, 'commit').replace('{sha}', TriggerService.getCommitSHA(build.trigger_metadata)) }}">
-          {{ build.trigger_metadata.commit_info.message }}
+          {{ getMessageSummary(build.trigger_metadata.commit_info.message) }}
+        </span>
+        <span class="long-description-toggle"
+              ng-if="hasLongDescription(build.trigger_metadata.commit_info.message)"
+              ng-click="toggleLongDescription()">
+          ...
         </span>
       </div>
       <div class="commit-information">
@@ -54,5 +59,6 @@
               tag-template="TriggerService.getFullLinkTemplate(build, 'tag')"></span>
       </div>
     </div>
+    <div class="long-commit-description" ng-if="showLongDescription">{{ getMessageLongDescription(build.trigger_metadata.commit_info.message) }}</div>
   </div>
 </div>

static/js/directives/ui/triggered-build-description.js

@@ -13,6 +13,35 @@ angular.module('quay').directive('triggeredBuildDescription', function () {
     },
     controller: function($scope, $element, KeyService, TriggerService) {
       $scope.TriggerService = TriggerService;
+      $scope.showLongDescription = false;
+
+      $scope.toggleLongDescription = function() {
+        $scope.showLongDescription = !$scope.showLongDescription;
+      };
+
+      $scope.hasLongDescription = function(message) {
+        if (!message) { return ''; }
+        return message.length >= 80 || message.split('\n').length > 1;
+      };
+
+      $scope.getMessageSummary = function(message) {
+        if (!message) { return ''; }
+        var lines = message.split('\n');
+        return lines[0].substring(0, 79).trim();
+      };
+
+      $scope.getMessageLongDescription = function(message) {
+        if (!message) { return ''; }
+        var lines = message.split('\n');
+        if (lines[0].length >= 80) {
+          lines[0] = lines[0].substring(80);
+        } else {
+          lines.splice(0, 1);
+        }
+
+        return lines.join('\n').trim();
+      };
+
       $scope.$watch('build', function(build) {
         if (!build) { return; }