diff --git a/external_libraries.py b/external_libraries.py index f2f9c3832..edefae890 100644 --- a/external_libraries.py +++ b/external_libraries.py @@ -19,6 +19,7 @@ EXTERNAL_JS = [ 'cdn.ravenjs.com/3.1.0/angular/raven.min.js', 'cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js', 'cdnjs.cloudflare.com/ajax/libs/angular-recaptcha/3.2.1/angular-recaptcha.min.js', + 'cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js', ] EXTERNAL_CSS = [ @@ -28,6 +29,7 @@ EXTERNAL_CSS = [ 's3.amazonaws.com/cdn.core-os.net/icons/core-icons.css', 'cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css', 'cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css', + 'cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css', ] EXTERNAL_FONTS = [ diff --git a/static/css/directives/ui/label-input.css b/static/css/directives/ui/label-input.css new file mode 100644 index 000000000..4726c8ca2 --- /dev/null +++ b/static/css/directives/ui/label-input.css @@ -0,0 +1,40 @@ +.label-input-element .tags { + background-color: #fff; + border: 1px solid #ccc; + border-radius: 4px; + box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); + transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; +} + +.label-input-element .tags.focused { + border-color: #66afe9; + box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 8px rgba(102,175,233,0.6); +} + +.label-input-element .tags .tag-item { + display: inline-block; + border-radius: 9px; + background: #eee; + font-size: 12px; + border: 0px; + padding: 0px; + padding-left: 8px; + padding-right: 8px; + height: 22px; + line-height: 22px; +} + +.label-input-element tags-input .tags .input { + height: 22px; +} + +.label-input-element .tags .tag-item.selected { + background: #31b0d5; + color: #fff; +} + +.label-input-element .tags .tag-item button { + background: transparent; + color: #000; + opacity: .4; +} \ No newline at end of file diff --git a/static/directives/label-input.html b/static/directives/label-input.html new file mode 100644 index 000000000..aeddac69f --- /dev/null +++ b/static/directives/label-input.html @@ -0,0 +1,12 @@ +
+ +
\ No newline at end of file diff --git a/static/js/directives/ui/label-input.js b/static/js/directives/ui/label-input.js new file mode 100644 index 000000000..3c54f646a --- /dev/null +++ b/static/js/directives/ui/label-input.js @@ -0,0 +1,43 @@ +/** + * An element which allows for editing labels. + */ +angular.module('quay').directive('labelInput', function () { + return { + templateUrl: '/static/directives/label-input.html', + restrict: 'C', + replace: true, + scope: { + 'labels': '=labels', + 'updatedLabels': '=?updatedLabels', + }, + controller: function($scope) { + $scope.tags = []; + + $scope.$watch('tags', function(tags) { + if (!tags) { return; } + $scope.updatedLabels = tags.filter(function(tag) { + parts = tag['keyValue'].split('=', 2); + return tag['label'] ? tag['label'] : { + 'key': parts[0], + 'value': parts[1], + 'is_new': true + }; + }); + }, true); + + $scope.$watch('labels', function(labels) { + $scope.filteredLabels = labels.filter(function(label) { + return label['source_type'] == 'api'; + }); + + $scope.tags = $scope.filteredLabels.map(function(label) { + return { + 'id': label['id'], + 'keyValue': label['key'] + '=' + label['value'], + 'label': label + }; + }); + }); + } + }; +}); diff --git a/static/js/quay.module.ts b/static/js/quay.module.ts index f8d54c5a0..7cbf2ba63 100644 --- a/static/js/quay.module.ts +++ b/static/js/quay.module.ts @@ -45,4 +45,4 @@ angular .constant('NAME_PATTERNS', NAME_PATTERNS) .constant('INJECTED_CONFIG', INJECTED_CONFIG) .constant('INJECTED_FEATURES', INJECTED_FEATURES) - .constant('INJECTED_ENDPOINTS', INJECTED_ENDPOINTS); + .constant('INJECTED_ENDPOINTS', INJECTED_ENDPOINTS); \ No newline at end of file diff --git a/static/lib/LICENSES b/static/lib/LICENSES index 77450b6e0..c5c5c7af3 100644 --- a/static/lib/LICENSES +++ b/static/lib/LICENSES @@ -23,6 +23,7 @@ URI.js - MIT (https://github.com/medialize/URI.js) angular-hotkeys - MIT (https://github.com/chieffancypants/angular-hotkeys/blob/master/LICENSE) angular-debounce - MIT (https://github.com/shahata/angular-debounce/blob/master/LICENSE) infinite-scroll - MIT (https://github.com/sroze/ngInfiniteScroll/blob/master/LICENSE) +ngTagsInput - MIT (https://github.com/mbenford/ngTagsInput/blob/master/LICENSE) Issues: >>>>> jquery.spotlight - GPLv3 (https://github.com/jameshalsall/jQuery-Spotlight) \ No newline at end of file