- UI feedback fixes: text cutoffs, misformatting fixes, etc

- Add hotkey support for searching and creating repositories
- Make search animations significantly faster

static/css/directives/ui/build-mini-status.css

@@ -10,6 +10,11 @@
   text-decoration: none !important;
 }
 
+.build-mini-status a {
+  text-decoration: none !important;
+  color: black;
+}
+
 .build-mini-status .timing {
   display: inline-block;
   margin-left: 30px;
@@ -29,5 +34,15 @@
   bottom: 4px;
   line-height: 33px;
   overflow: hidden;
-  text-overflow: ellipsis;
+}
+
+.build-mini-status .build-description .tbd-content {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

static/css/directives/ui/header-bar.css

@@ -42,7 +42,7 @@ nav.navbar-default .navbar-nav>li>a.active {
   top: -50px;
   z-index: 4;
   height: 83px;
-  transition: top 0.7s cubic-bezier(.23,.88,.72,.98);
+  transition: top 0.3s cubic-bezier(.23,.88,.72,.98);
   background: white;
   box-shadow: 0px 1px 16px #444;
   padding: 10px;
@@ -89,7 +89,7 @@ nav.navbar-default .navbar-nav>li>a.active {
   right: 0px;
   top: -130px;
   z-index: 3;
-  transition: top 0.7s cubic-bezier(.23,.88,.72,.98), height 0.5s ease-in-out;
+  transition: top 0.4s cubic-bezier(.23,.88,.72,.98), height 0.25s ease-in-out;
 
   background: white;
   box-shadow: 0px 1px 16px #444;

static/css/pages/repo-view.css

@@ -44,3 +44,7 @@
 .repository-view .heading-controls .btn .fa {
   margin-right: 6px;
 }
+
+.repository-view .tag-span {
+  white-space: nowrap;
+}

static/directives/build-mini-status.html

@@ -1,6 +1,6 @@
 <span class="build-mini-status-element">
-  <a href="/repository/{{ build.repository.namespace }}/{{ build.repository.name }}/build/{{ build.id }}"
+  <span class="anchor" href="/repository/{{ build.repository.namespace }}/{{ build.repository.name }}/build/{{ build.id }}"
-     ng-if="is_admin">
+     is-text-only="!isAdmin">
     <div>
      <span class="build-state-icon" build="build"></span>
      <span class="timing">
@@ -9,14 +9,5 @@
 
      <div class="build-description triggered-build-description" build="build"></div>
     </div>
-  </a>
+  </span>
-
-  <div ng-if="!is_admin">
-   <span class="build-state-icon" build="build"></span>
-   <span class="timing">
-     <i class="fa fa-clock-o"></i><span am-time-ago="build.started || 0"></span>
-   </span>
-
-   <div class="build-description triggered-build-description" build="build"></div>
-  </div>
 </span>

static/directives/new-header-bar.html

@@ -39,7 +39,7 @@
         <li>
           <span class="navbar-left user-tools">
             <i class="fa fa-search fa-lg user-tool" ng-click="toggleSearch()"
-               data-placement="bottom" data-title="Search" bs-tooltip></i>
+               data-placement="bottom" data-title="Search - Keyboard Shortcut: /" bs-tooltip></i>
           </span>
         </li>
         <li>

static/directives/repo-view/repo-panel-builds.html

@@ -37,16 +37,19 @@
         <table class="co-table" ng-if="fullBuilds.length">
            <thead>
             <td class="status-col"></td>
-            <td ng-class="tablePredicateClass('id', options.predicate, options.reverse)">
+            <td ng-class="tablePredicateClass('id', options.predicate, options.reverse)"
+                style="min-width: 85px;">
               <a href="javascript:void(0)" ng-click="orderBy('id')">Build ID</a>
             </td>
-            <td ng-class="tablePredicateClass('commit_sha', options.predicate, options.reverse)">
+            <td ng-class="tablePredicateClass('commit_sha', options.predicate, options.reverse)"
+                style="min-width: 115px">
               <a href="javascript:void(0)" ng-click="orderBy('commit_sha')">Triggered By</a>
             </td>
-            <td ng-class="tablePredicateClass('started_datetime', options.predicate, options.reverse)">
+            <td ng-class="tablePredicateClass('started_datetime', options.predicate, options.reverse)" style="min-width: 120px;">
               <a href="javascript:void(0)" ng-click="orderBy('started_datetime')">Date Started</a>
             </td>
-            <td ng-class="tablePredicateClass('tags', options.predicate, options.reverse)">
+            <td ng-class="tablePredicateClass('tags', options.predicate, options.reverse)"
+                style="min-width: 66px;">
               <a href="javascript:void(0)" ng-click="orderBy('tags')">Tags</a>
             </td>
             <td class="options-col"></td>
@@ -63,7 +66,7 @@
              <td>{{ build.started | amCalendar }}</td>
              <td>
                 <span class="building-tag" ng-repeat="tag in build.building_tags">
-                  <i class="fa fa-tag"></i>{{ tag }}
+                  <span class="tag-span"><i class="fa fa-tag"></i>{{ tag }}</span>
                 </span>
              </td>
            </tr>

static/directives/repo-view/repo-panel-tags.html

@@ -41,14 +41,17 @@
       <td ng-class="tablePredicateClass('name', options.predicate, options.reverse)">
         <a href="javascript:void(0)" ng-click="orderBy('name')">Tag</a>
       </td>
-      <td ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)">
+      <td ng-class="tablePredicateClass('last_modified_datetime', options.predicate, options.reverse)"
+          style="min-width: 120px;">
         <a href="javascript:void(0)" ng-click="orderBy('last_modified_datetime')">Last Modified</a>
       </td>
-      <td ng-class="tablePredicateClass('size', options.predicate, options.reverse)">
+      <td ng-class="tablePredicateClass('size', options.predicate, options.reverse)"
+          style="min-width: 62px;">
         <a href="javascript:void(0)" ng-click="orderBy('size')">Size</a>
       </td>
       <td ng-class="tablePredicateClass('image_id', options.predicate, options.reverse)"
-          colspan="{{ imageTracks.length + 1 }}">
+          colspan="{{ imageTracks.length + 1 }}"
+          style="min-width: 120px;">
         <a href="javascript:void(0)" ng-click="orderBy('image_id')">Image</a>
       </td>
       <td class="options-col"></td>
@@ -59,7 +62,7 @@
          ng-repeat="tag in tags"
          ng-class="checkedTags.isChecked(tag, checkedTags.checked) ? 'checked' : ''">
       <td><span class="cor-checkable-item" controller="checkedTags" item="tag"></span></td>
-      <td><i class="fa fa-tag"></i> {{ tag.name }}</td>
+      <td><span class="tag-span"><i class="fa fa-tag"></i> {{ tag.name }}</span></td>
       <td>
         <span am-time-ago="tag.last_modified" ng-if="tag.last_modified"></span>
         <span ng-if="!tag.last_modified">Unknown</span>

static/directives/triggered-build-description.html

@@ -1,10 +1,10 @@
 <div class="triggered-build-description-element">
 
-<span class="manual" ng-if="!build.trigger && !build.job_config.manual_user">
+<span class="tbd-content" class="manual" ng-if="!build.trigger && !build.job_config.manual_user">
   (Manually Triggered Build)
 </span>
 
-<span ng-if="!build.trigger && build.job_config.manual_user">
+<span class="tbd-content" ng-if="!build.trigger && build.job_config.manual_user">
   <i class="fa fa-user"></i> {{ build.job_config.manual_user }}
 </span>
 
@@ -12,7 +12,7 @@
   <!-- GitHub -->
   <span ng-switch-when="github">
     <!-- Full Commit Information -->
-    <span ng-if="build.job_config.trigger_metadata.commit_info">
+    <span class="tbd-content" ng-if="build.job_config.trigger_metadata.commit_info">
       <div class="commit-message">
         <a ng-href="{{ getGitHubRepoURL(build) }}/commit/{{ build.job_config.trigger_metadata.commit_sha }}"
            target="_blank">
@@ -42,7 +42,7 @@
      </span>
 
     <!-- Just commit SHA -->
-    <span ng-if="build.job_config.trigger_metadata && !build.job_config.trigger_metadata.commit_info">
+    <span class="tbd-content" ng-if="build.job_config.trigger_metadata && !build.job_config.trigger_metadata.commit_info">
       Triggered by commit
       <span class="source-commit-link"
             commit-sha="build.job_config.trigger_metadata.commit_sha"
@@ -50,9 +50,9 @@
     </span>
 
     <!-- No information -->
-    <span ng-if="!build.job_config.trigger_metadata">
+    <span class="tbd-content" ng-if="!build.job_config.trigger_metadata">
       Triggered by commit to
-      <i class="fa fa-github fa-lg" data-title="GitHub" bs-tooltip="tooltip.title"></i>
+      <i class="fa fa-github fa-lg" data-title="GitHub" data-container="body" bs-tooltip></i>
       <a ng-href="{{ getGitHubRepoURL(build) }}" target="_new">
         {{ build.trigger.config.build_source }}
       </a>

static/js/app.js

@@ -35,7 +35,7 @@ quayPages.constant('pages', {
   }
 });
 
-quayDependencies = ['ngRoute', 'chieffancypants.loadingBar', 'angular-tour', 'restangular', 'angularMoment',
+quayDependencies = ['ngRoute', 'chieffancypants.loadingBar', 'cfp.hotkeys', 'angular-tour', 'restangular', 'angularMoment',
                     'mgcrea.ngStrap', 'ngCookies', 'ngSanitize', 'angular-md5', 'pasvaz.bindonce', 'ansiToHtml',
                     'core-ui', 'core-config-setup', 'quayPages'];
 

static/js/directives/ui/header-bar.js

@@ -12,7 +12,28 @@ angular.module('quay').directive('headerBar', function () {
     restrict: 'C',
     scope: {
     },
-    controller: function($rootScope, $scope, $element, $location, $timeout, UserService, PlanService, ApiService, NotificationService, Config, CreateService) {
+    controller: function($rootScope, $scope, $element, $location, $timeout, hotkeys, UserService, PlanService, ApiService, NotificationService, Config, CreateService) {
+      // Register hotkeys:
+      hotkeys.add({
+        combo: '/',
+        description: 'Show search',
+        callback: function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          $scope.toggleSearch();
+        }
+      });
+
+      hotkeys.add({
+        combo: 'alt+c',
+        description: 'Create new repository',
+        callback: function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+          $location.url('/new');
+        }
+      });
+
       $scope.notificationService = NotificationService;
       $scope.searchVisible = false;
       $scope.currentSearchQuery = null;
@@ -94,6 +115,7 @@ angular.module('quay').directive('headerBar', function () {
             conductSearch($scope.currentSearchQuery);
           }
         } else {
+          $('#search-box-input').blur()
           $scope.searchResultState = null;
         }
       };
@@ -112,35 +134,34 @@ angular.module('quay').directive('headerBar', function () {
           return;
         }
 
-        if (!$scope.searchResultState) { return; }
+        var state = $scope.searchResultState;
+        if (!state || !state['results']) { return; }
 
         if (e.keyCode == 40) {
-          $scope.searchResultState['current']++;
+          state['current']++;
           e.preventDefault();
         } else if (e.keyCode == 38) {
-          $scope.searchResultState['current']--;
+          state['current']--;
           e.preventDefault();
         } else if (e.keyCode == 13) {
-          var current = $scope.searchResultState['current'];
+          var current = state['current'];
-          if (current >= 0 &&
+          if (current >= 0 && current < state['results'].length) {
-              current < $scope.searchResultState['results'].length) {
+            $scope.showResult(state['results'][current]);
-            $scope.showResult($scope.searchResultState['results'][current]);
           }
           e.preventDefault();
         }
 
-        if (!$scope.searchResultState) { return; }
+        if (state['current'] < -1) {
-
+          state['current'] = state['results'].length - 1;
-        if ($scope.searchResultState['current'] < -1) {
+        } else if (state['current'] >= state['results'].length) {
-          $scope.searchResultState['current'] = $scope.searchResultState['results'].length - 1;
+          state['current'] = 0;
-        } else if ($scope.searchResultState['current'] >= $scope.searchResultState['results'].length) {
-          $scope.searchResultState['current'] = 0;
         }
       };
 
       $scope.showResult = function(result) {
         $scope.toggleSearch();
         $timeout(function() {
+          $scope.currentSearchQuery = '';
           $location.url(result['href'])
         }, 500);
       };

static/lib/LICENSES

@@ -20,6 +20,7 @@ zlib - MIT (https://github.com/imaya/zlib.js)
 pagedown - Permissive
 jquery.overscroll - MIT (https://github.com/azoff/overscroll/blob/master/mit.license)
 URI.js - MIT (https://github.com/medialize/URI.js)
+angular-hotkeys - MIT (https://github.com/chieffancypants/angular-hotkeys/blob/master/LICENSE)
 
 Issues:
 >>>>> jquery.spotlight - GPLv3 (https://github.com/jameshalsall/jQuery-Spotlight)

static/lib/hotkeys.min.css

@@ -0,0 +1,8 @@
+/*! 
+ * angular-hotkeys v1.4.5
+ * https://chieffancypants.github.io/angular-hotkeys
+ * Copyright (c) 2014 Wes Cruver
+ * License: MIT
+ */
+
+.cfp-hotkeys-container{display:table!important;position:fixed;width:100%;height:100%;top:0;left:0;color:#333;font-size:1em;background-color:rgba(255,255,255,.9)}.cfp-hotkeys-container.fade{z-index:-1024;visibility:hidden;opacity:0;-webkit-transition:opacity .15s linear;-moz-transition:opacity .15s linear;-o-transition:opacity .15s linear;transition:opacity .15s linear}.cfp-hotkeys-container.fade.in{z-index:10002;visibility:visible;opacity:1}.cfp-hotkeys-title{font-weight:700;text-align:center;font-size:1.2em}.cfp-hotkeys{width:100%;height:100%;display:table-cell;vertical-align:middle}.cfp-hotkeys table{margin:auto;color:#333}.cfp-content{display:table-cell;vertical-align:middle}.cfp-hotkeys-keys{padding:5px;text-align:right}.cfp-hotkeys-key{display:inline-block;color:#fff;background-color:#333;border:1px solid #333;border-radius:5px;text-align:center;margin-right:5px;box-shadow:inset 0 1px 0 #666,0 1px 0 #bbb;padding:5px 9px;font-size:1em}.cfp-hotkeys-text{padding-left:10px;font-size:1em}.cfp-hotkeys-close{position:fixed;top:20px;right:20px;font-size:2em;font-weight:700;padding:5px 10px;border:1px solid #ddd;border-radius:5px;min-height:45px;min-width:45px;text-align:center}.cfp-hotkeys-close:hover{background-color:#fff;cursor:pointer}@media all and (max-width:500px){.cfp-hotkeys{font-size:.8em}}@media all and (min-width:750px){.cfp-hotkeys{font-size:1.2em}}