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