From 2a8669b2f4d47c1f8e3b56b4e5b838fb38573a81 Mon Sep 17 00:00:00 2001 From: Joseph Schorr Date: Fri, 7 Mar 2014 21:06:31 -0500 Subject: [PATCH] - Switch to new typeahead (based on our own branch of it until such time as it gets pulled into the mainline) and add an informative empty message on entity search - Add better messaging around pushing to empty repos --- static/css/quay.css | 21 ++- static/directives/trigger-setup-github.html | 2 +- static/js/app.js | 149 +++++++++++++++----- static/lib/typeahead.bundle.min.js | 7 + static/lib/typeahead.min.js | 7 - static/partials/team-view.html | 2 +- static/partials/view-repo.html | 17 ++- templates/base.html | 4 +- 8 files changed, 153 insertions(+), 56 deletions(-) create mode 100644 static/lib/typeahead.bundle.min.js delete mode 100644 static/lib/typeahead.min.js diff --git a/static/css/quay.css b/static/css/quay.css index 636343e4b..bde24600a 100644 --- a/static/css/quay.css +++ b/static/css/quay.css @@ -1538,10 +1538,17 @@ p.editable:hover i { } .repo .empty-description { - max-width: 600px; padding: 6px; } +.repo .empty-description pre:last-child { + margin-bottom: 0px; +} + +.repo .empty-description .panel-default { + margin-top: 20px; +} + .repo dl.dl-horizontal dt { width: 80px; padding-right: 10px; @@ -2834,9 +2841,10 @@ p.editable:hover i { .tt-suggestion { display: block; padding: 3px 20px; + cursor: pointer; } -.tt-suggestion.tt-is-under-cursor { +.tt-suggestion.tt-cursor { color: #fff; background-color: #0081c2; background-image: -moz-linear-gradient(top, #0088cc, #0077b3); @@ -2848,10 +2856,17 @@ p.editable:hover i { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0) } -.tt-suggestion.tt-is-under-cursor a { +.tt-suggestion.tt-cursor a { color: #fff; } +.tt-empty { + padding: 10px; + font-size: 12px; + color: #aaa; + white-space: nowrap; +} + .tt-suggestion p { margin: 0; } diff --git a/static/directives/trigger-setup-github.html b/static/directives/trigger-setup-github.html index 89500bb26..9b0e194ab 100644 --- a/static/directives/trigger-setup-github.html +++ b/static/directives/trigger-setup-github.html @@ -29,7 +29,7 @@
Dockerfile Location:
+ lookahead-items="locations" handle-input="handleLocationInput(input)" handle-item-selected="handleLocationSelected(datum)"> diff --git a/static/js/app.js b/static/js/app.js index 59328673e..7065af6f1 100644 --- a/static/js/app.js +++ b/static/js/app.js @@ -2008,8 +2008,7 @@ quayApp.directive('repoSearch', function () { ++searchToken; }, true); - var element = $($element[0].childNodes[0]); - element.typeahead({ + var repoHound = new Bloodhound({ name: 'repositories', remote: { url: '/api/find/repository?query=%QUERY', @@ -2031,22 +2030,36 @@ quayApp.directive('repoSearch', function () { return datums; } }, - template: function (datum) { - template = '
'; - template += '' - template += '' + datum.repo.namespace +'/' + datum.repo.name + '' - if (datum.repo.description) { - template += '' + getFirstTextLine(datum.repo.description) + '' - } + datumTokenizer: function(d) { + return Bloodhound.tokenizers.whitespace(d.val); + }, + queryTokenizer: Bloodhound.tokenizers.whitespace + }); + repoHound.initialize(); - template += '
' - return template; + var element = $($element[0].childNodes[0]); + element.typeahead({ 'highlight': true }, { + source: repoHound.ttAdapter(), + templates: { + 'suggestion': function (datum) { + template = '
'; + template += '' + template += '' + datum.repo.namespace +'/' + datum.repo.name + '' + if (datum.repo.description) { + template += '' + getFirstTextLine(datum.repo.description) + '' + } + + template += '
' + return template; + } } }); element.on('typeahead:selected', function (e, datum) { - element.typeahead('setQuery', ''); - document.location = '/repository/' + datum.repo.namespace + '/' + datum.repo.name; + element.typeahead('val', ''); + $scope.$apply(function() { + $location.path('/repository/' + datum.repo.namespace + '/' + datum.repo.name); + }); }); } }; @@ -2213,7 +2226,7 @@ quayApp.directive('entitySearch', function () { }; $scope.setEntityInternal = function(entity) { - $(input).typeahead('setQuery', $scope.isPersistent ? entity.name : ''); + $(input).typeahead('val', $scope.isPersistent ? entity.name : ''); if ($scope.isPersistent) { $scope.currentEntity = entity; @@ -2226,8 +2239,7 @@ quayApp.directive('entitySearch', function () { number++; - var input = $element[0].firstChild.firstChild; - $(input).typeahead({ + var entitySearchB = new Bloodhound({ name: 'entities' + number, remote: { url: '/api/entities/%QUERY', @@ -2253,24 +2265,57 @@ quayApp.directive('entitySearch', function () { return datums; } }, - template: function (datum) { - template = '
'; - if (datum.entity.kind == 'user' && !datum.entity.is_robot) { - template += ''; - } else if (datum.entity.kind == 'user' && datum.entity.is_robot) { - template += ''; - } else if (datum.entity.kind == 'team') { - template += ''; - } - template += '' + datum.value + ''; - - if (datum.entity.is_org_member === false && datum.entity.kind == 'user') { - template += ''; - } - - template += '
'; - return template; + datumTokenizer: function(d) { + return Bloodhound.tokenizers.whitespace(d.val); }, + queryTokenizer: Bloodhound.tokenizers.whitespace + }); + entitySearchB.initialize(); + + var counter = 0; + var input = $element[0].firstChild.firstChild; + $(input).typeahead({ + 'highlight': true + }, { + source: entitySearchB.ttAdapter(), + templates: { + 'empty': function(info) { + // Only display the empty dialog if the server load has finished. + if (info.resultKind == 'remote') { + var val = $(input).val(); + if (!val) { + return null; + } + + if (val.indexOf('@') > 0) { + return '
A Quay.io username (not an e-mail address) must be specified
'; + } + + var robots = $scope.isOrganization ? ', robot accounts' : ''; + var teams = ($scope.includeTeams && $scope.isOrganization) ? ' or teams' : ''; + return '
No matching Quay.io users' + robots + teams + ' found
'; + } + + return null; + }, + 'suggestion': function (datum) { + template = '
'; + if (datum.entity.kind == 'user' && !datum.entity.is_robot) { + template += ''; + } else if (datum.entity.kind == 'user' && datum.entity.is_robot) { + template += ''; + } else if (datum.entity.kind == 'team') { + template += ''; + } + template += '' + datum.value + ''; + + if (datum.entity.is_org_member === false && datum.entity.kind == 'user') { + template += ''; + } + + template += '
'; + return template; + }} }); $(input).on('input', function(e) { @@ -2288,7 +2333,7 @@ quayApp.directive('entitySearch', function () { }); $scope.$watch('clearNow', function() { - $(input).typeahead('setQuery', ''); + $(input).typeahead('val', ''); $scope.clearEntityInternal(); }); @@ -2722,12 +2767,34 @@ quayApp.directive('dropdownSelect', function ($compile) { return; } - $(input).typeahead({ + var formattedItems = []; + for (var i = 0; i < items.length; ++i) { + var formattedItem = items[i]; + if (typeof formattedItem == 'string') { + formattedItem = { + 'value': formattedItem + }; + } + formattedItems.push(formattedItem); + } + + var dropdownHound = new Bloodhound({ name: 'dropdown-items-' + $rootScope.__dropdownSelectCounter, - local: items, - template: function (datum) { - template = datum['template'] ? datum['template'](datum) : datum['value']; - return template; + local: formattedItems, + datumTokenizer: function(d) { + return Bloodhound.tokenizers.whitespace(d.val || d.value || ''); + }, + queryTokenizer: Bloodhound.tokenizers.whitespace + }); + dropdownHound.initialize(); + + $(input).typeahead({}, { + source: dropdownHound.ttAdapter(), + templates: { + 'suggestion': function (datum) { + template = datum['template'] ? datum['template'](datum) : datum['value']; + return template; + } } }); @@ -2830,6 +2897,10 @@ quayApp.directive('triggerSetupGithub', function () { $scope.isInvalidLocation = $scope.locations.indexOf(location) < 0; }; + $scope.handleLocationSelected = function(datum) { + $scope.setLocation(datum['value']); + }; + $scope.setLocation = function(location) { $scope.currentLocation = location; $scope.trigger['config']['subdir'] = location || ''; diff --git a/static/lib/typeahead.bundle.min.js b/static/lib/typeahead.bundle.min.js new file mode 100644 index 000000000..4640c40a5 --- /dev/null +++ b/static/lib/typeahead.bundle.min.js @@ -0,0 +1,7 @@ +/*! + * typeahead.js 0.10.1 + * https://github.com/twitter/typeahead.js + * Copyright 2013 Twitter, Inc. and other contributors; Licensed MIT + */ + +!function(a){var b={isMsie:function(){return/(msie|trident)/i.test(navigator.userAgent)?navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2]:!1},isBlankString:function(a){return!a||/^\s*$/.test(a)},escapeRegExChars:function(a){return a.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")},isString:function(a){return"string"==typeof a},isNumber:function(a){return"number"==typeof a},isArray:a.isArray,isFunction:a.isFunction,isObject:a.isPlainObject,isUndefined:function(a){return"undefined"==typeof a},bind:a.proxy,each:function(b,c){function d(a,b){return c(b,a)}a.each(b,d)},map:a.map,filter:a.grep,every:function(b,c){var d=!0;return b?(a.each(b,function(a,e){return(d=c.call(null,e,a,b))?void 0:!1}),!!d):d},some:function(b,c){var d=!1;return b?(a.each(b,function(a,e){return(d=c.call(null,e,a,b))?!1:void 0}),!!d):d},mixin:a.extend,getUniqueId:function(){var a=0;return function(){return a++}}(),templatify:function(b){function c(){return String(b)}return a.isFunction(b)?b:c},defer:function(a){setTimeout(a,0)},debounce:function(a,b,c){var d,e;return function(){var f,g,h=this,i=arguments;return f=function(){d=null,c||(e=a.apply(h,i))},g=c&&!d,clearTimeout(d),d=setTimeout(f,b),g&&(e=a.apply(h,i)),e}},throttle:function(a,b){var c,d,e,f,g,h;return g=0,h=function(){g=new Date,e=null,f=a.apply(c,d)},function(){var i=new Date,j=b-(i-g);return c=this,d=arguments,0>=j?(clearTimeout(e),e=null,g=i,f=a.apply(c,d)):e||(e=setTimeout(h,j)),f}},noop:function(){}},c="0.10.1",d=function(){function a(a){this.maxSize=a||100,this.size=0,this.hash={},this.list=new c}function c(){this.head=this.tail=null}function d(a,b){this.key=a,this.val=b,this.prev=this.next=null}return b.mixin(a.prototype,{set:function(a,b){var c,e=this.list.tail;this.size>=this.maxSize&&(this.list.remove(e),delete this.hash[e.key]),(c=this.hash[a])?(c.val=b,this.list.moveToFront(c)):(c=new d(a,b),this.list.add(c),this.hash[a]=c,this.size++)},get:function(a){var b=this.hash[a];return b?(this.list.moveToFront(b),b.val):void 0}}),b.mixin(c.prototype,{add:function(a){this.head&&(a.next=this.head,this.head.prev=a),this.head=a,this.tail=this.tail||a},remove:function(a){a.prev?a.prev.next=a.next:this.head=a.next,a.next?a.next.prev=a.prev:this.tail=a.prev},moveToFront:function(a){this.remove(a),this.add(a)}}),a}(this),e=function(){function a(a){this.prefix=["__",a,"__"].join(""),this.ttlKey="__ttl__",this.keyMatcher=new RegExp("^"+this.prefix)}function c(){return(new Date).getTime()}function d(a){return JSON.stringify(b.isUndefined(a)?null:a)}function e(a){return JSON.parse(a)}var f,g;try{f=window.localStorage,f.setItem("~~~","!"),f.removeItem("~~~")}catch(h){f=null}return g=f&&window.JSON?{_prefix:function(a){return this.prefix+a},_ttlKey:function(a){return this._prefix(a)+this.ttlKey},get:function(a){return this.isExpired(a)&&this.remove(a),e(f.getItem(this._prefix(a)))},set:function(a,e,g){return b.isNumber(g)?f.setItem(this._ttlKey(a),d(c()+g)):f.removeItem(this._ttlKey(a)),f.setItem(this._prefix(a),d(e))},remove:function(a){return f.removeItem(this._ttlKey(a)),f.removeItem(this._prefix(a)),this},clear:function(){var a,b,c=[],d=f.length;for(a=0;d>a;a++)(b=f.key(a)).match(this.keyMatcher)&&c.push(b.replace(this.keyMatcher,""));for(a=c.length;a--;)this.remove(c[a]);return this},isExpired:function(a){var d=e(f.getItem(this._ttlKey(a)));return b.isNumber(d)&&c()>d?!0:!1}}:{get:b.noop,set:b.noop,remove:b.noop,clear:b.noop,isExpired:b.noop},b.mixin(a.prototype,g),a}(),f=function(){function c(b){b=b||{},this._send=b.transport?e(b.transport):a.ajax,this._get=b.rateLimiter?b.rateLimiter(this._get):this._get}function e(c){return function(d,e){function f(a){b.defer(function(){h.resolve(a)})}function g(a){b.defer(function(){h.reject(a)})}var h=a.Deferred();return c(d,e,f,g),h}}var f=0,g={},h=6,i=new d(10);return c.setMaxPendingRequests=function(a){h=a},c.resetCache=function(){i=new d(10)},b.mixin(c.prototype,{_get:function(a,b,c){function d(b){c&&c(b),i.set(a,b)}function e(){f--,delete g[a],k.onDeckRequestArgs&&(k._get.apply(k,k.onDeckRequestArgs),k.onDeckRequestArgs=null)}var j,k=this;(j=g[a])?j.done(d):h>f?(f++,g[a]=this._send(a,b).done(d).always(e)):this.onDeckRequestArgs=[].slice.call(arguments,0)},get:function(a,c,d){var e;return b.isFunction(c)&&(d=c,c={}),(e=i.get(a))?b.defer(function(){d&&d(e)}):this._get(a,c,d),!!e}}),c}(),g=function(){function c(b){b=b||{},b.datumTokenizer&&b.queryTokenizer||a.error("datumTokenizer and queryTokenizer are both required"),this.datumTokenizer=b.datumTokenizer,this.queryTokenizer=b.queryTokenizer,this.datums=[],this.trie=e()}function d(a){return a=b.filter(a,function(a){return!!a}),a=b.map(a,function(a){return a.toLowerCase()})}function e(){return{ids:[],children:{}}}function f(a){for(var b={},c=[],d=0;db[e]?e++:(f.push(a[d]),d++,e++);return f}return b.mixin(c.prototype,{bootstrap:function(a){this.datums=a.datums,this.trie=a.trie},add:function(a){var c=this;a=b.isArray(a)?a:[a],b.each(a,function(a){var f,g;f=c.datums.push(a)-1,g=d(c.datumTokenizer(a)),b.each(g,function(a){var b,d,g;for(b=c.trie,d=a.split("");g=d.shift();)b=b.children[g]||(b.children[g]=e()),b.ids.push(f)})})},get:function(a){var c,e,h=this;return c=d(this.queryTokenizer(a)),b.each(c,function(a){var b,c,d,f;if(e&&0===e.length)return!1;for(b=h.trie,c=a.split("");b&&(d=c.shift());)b=b.children[d];return b&&0===c.length?(f=b.ids.slice(0),void(e=e?g(e,f):f)):(e=[],!1)}),e?b.map(f(e),function(a){return h.datums[a]}):[]},serialize:function(){return{datums:this.datums,trie:this.trie}}}),c}(),h=function(){function d(a){var c=a.local||null;return b.isFunction(c)&&(c=c.call(null)),c}function e(d){var e,f;return f={url:null,thumbprint:"",ttl:864e5,filter:null,ajax:{}},(e=d.prefetch||null)&&(e=b.isString(e)?{url:e}:e,e=b.mixin(f,e),e.thumbprint=c+e.thumbprint,e.ajax.type=e.ajax.type||"GET",e.ajax.dataType=e.ajax.dataType||"json",!e.url&&a.error("prefetch requires url to be set")),e}function f(c){function d(a){return function(c){return b.debounce(c,a)}}function e(a){return function(c){return b.throttle(c,a)}}var f,g;return g={url:null,wildcard:"%QUERY",replace:null,rateLimitBy:"debounce",rateLimitWait:300,send:null,filter:null,ajax:{}},(f=c.remote||null)&&(f=b.isString(f)?{url:f}:f,f=b.mixin(g,f),f.rateLimiter=/^throttle$/i.test(f.rateLimitBy)?e(f.rateLimitWait):d(f.rateLimitWait),f.ajax.type=f.ajax.type||"GET",f.ajax.dataType=f.ajax.dataType||"json",delete f.rateLimitBy,delete f.rateLimitWait,!f.url&&a.error("remote requires url to be set")),f}return{local:d,prefetch:e,remote:f}}(),i=(window.Bloodhound=function(){function c(b){b&&(b.local||b.prefetch||b.remote)||a.error("one of local, prefetch, or remote is required"),this.limit=b.limit||5,this.sorter=d(b.sorter),this.dupDetector=b.dupDetector||i,this.local=h.local(b),this.prefetch=h.prefetch(b),this.remote=h.remote(b),this.cacheKey=this.prefetch?this.prefetch.cacheKey||this.prefetch.url:null,this.index=new g({datumTokenizer:b.datumTokenizer,queryTokenizer:b.queryTokenizer}),this.storage=this.cacheKey?new e(this.cacheKey):null}function d(a){function c(b){return b.sort(a)}function d(a){return a}return b.isFunction(a)?c:d}function i(){return!1}var j;return j={data:"data",protocol:"protocol",thumbprint:"thumbprint"},c.tokenizers={whitespace:function(a){return a.split(/\s+/)},nonword:function(a){return a.split(/\W+/)}},b.mixin(c.prototype,{_loadPrefetch:function(b){function c(a){var c;c=b.filter?b.filter(a):a,f.add(c),f._saveToStorage(f.index.serialize(),b.thumbprint,b.ttl)}var d,e,f=this;return(d=this._readFromStorage(b.thumbprint))?(this.index.bootstrap(d),e=a.Deferred().resolve()):e=a.ajax(b.url,b.ajax).done(c),e},_getFromRemote:function(a,b){function c(a){var c=f.remote.filter?f.remote.filter(a):a;b(c)}var d,e,f=this;return a=a||"",e=encodeURIComponent(a),d=this.remote.replace?this.remote.replace(this.remote.url,a):this.remote.url.replace(this.remote.wildcard,e),this.transport.get(d,this.remote.ajax,c)},_saveToStorage:function(a,b,c){this.storage&&(this.storage.set(j.data,a,c),this.storage.set(j.protocol,location.protocol,c),this.storage.set(j.thumbprint,b,c))},_readFromStorage:function(a){var b,c={};return this.storage&&(c.data=this.storage.get(j.data),c.protocol=this.storage.get(j.protocol),c.thumbprint=this.storage.get(j.thumbprint)),b=c.thumbprint!==a||c.protocol!==location.protocol,c.data&&!b?c.data:null},initialize:function(){function b(){d.add(d.local)}var c,d=this;return c=this.prefetch?this._loadPrefetch(this.prefetch):a.Deferred().resolve(),this.local&&c.done(b),this.transport=this.remote?new f(this.remote):null,this.initialize=function(){return c.promise()},c.promise()},add:function(a){this.index.add(a)},get:function(a,c){function d(a){var d=e.slice(0);b.each(a,function(a){var c;return c=b.some(d,function(b){return f.dupDetector(a,b)}),!c&&d.push(a),d.length
- To push images to this repository:

- 
sudo docker tag 0u123imageidgoeshere quay.io/{{repo.namespace}}/{{repo.name}}
-sudo docker push quay.io/{{repo.namespace}}/{{repo.name}}
+
+
How to push a new image to this repository:
+
+ First login to Quay.io (if you have not done so already): + 
sudo docker login quay.io
+ + Tag an image to this repository: + 
sudo docker tag 0u123imageidgoeshere quay.io/{{repo.namespace}}/{{repo.name}}
+ + Push the image to this repository: + 
sudo docker push quay.io/{{repo.namespace}}/{{repo.name}}
+
+
+
diff --git a/templates/base.html b/templates/base.html index 767aeacde..5bbda45f3 100644 --- a/templates/base.html +++ b/templates/base.html @@ -45,6 +45,7 @@ + @@ -54,12 +55,11 @@ + - -