Expose tags to the user interface (first prototype)

assets/css/src/board.css

@@ -157,16 +157,3 @@ div.draggable-item-selected {
     float: left;
     padding-right: 5px;
 }
-
-/* board saving state */
-.task-board-saving-state {
-    opacity: 0.3;
-}
-
-.task-board-saving-icon {
-    position: absolute;
-    margin: auto;
-    width: 100%;
-    text-align: center;
-    color: #000;
-}

assets/css/src/form.css

@@ -61,6 +61,15 @@ select:focus {
     outline: 0;
 }
 
+.tag-autocomplete {
+    width: 400px;
+}
+
+span.select2-container {
+    margin-top: 3px;
+    margin-bottom: 10px;
+}
+
 ::-webkit-input-placeholder {
     color: #ddd;
     padding-top: 2px;
@@ -169,7 +178,6 @@ input.form-input-large {
     margin-top: 8%;
 }
 
-.form-column li,
 .form-login li {
     margin-left: 25px;
     line-height: 25px;

assets/css/src/task.css

@@ -53,6 +53,19 @@ div.task-board-status-closed {
     text-overflow: ellipsis;
 }
 
+/* board saving state */
+.task-board-saving-state {
+    opacity: 0.3;
+}
+
+.task-board-saving-icon {
+    position: absolute;
+    margin: auto;
+    width: 100%;
+    text-align: center;
+    color: #000;
+}
+
 /* title one the card */
 .task-board-title {
     font-size: 1.15em;
@@ -83,6 +96,21 @@ div.task-board-status-closed {
     opacity: 0.6;
 }
 
+/* tags list */
+.task-tags li {
+    display: inline;
+    margin: 0;
+    margin-right: 4px;
+    padding: 2px;
+    color: #666;
+    border: 1px solid #666;
+    border-radius: 2px;
+}
+
+.task-summary-container .task-tags {
+    margin-top: 10px;
+}
+
 /* avatars on the card */
 .task-board-avatars {
     text-align: right;
@@ -181,6 +209,9 @@ span.task-board-age-column {
     border: 2px solid #000;
     border-radius: 8px;
     padding: 15px;
+}
+
+.task-summary-columns {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: row;

assets/js/src/App.js

@@ -35,6 +35,7 @@ Kanboard.App.prototype.execute = function() {
     this.keyboardShortcuts();
     this.datePicker();
     this.autoComplete();
+    this.tagAutoComplete();
 };
 
 Kanboard.App.prototype.keyboardShortcuts = function() {
@@ -131,6 +132,12 @@ Kanboard.App.prototype.datePicker = function() {
     });
 };
 
+Kanboard.App.prototype.tagAutoComplete = function() {
+    $(".tag-autocomplete").select2({
+        tags: true
+    })
+};
+
 Kanboard.App.prototype.autoComplete = function() {
     $(".autocomplete").each(function() {
         var input = $(this);

assets/js/src/Popover.js

@@ -147,4 +147,5 @@ Kanboard.Popover.prototype.afterOpen = function() {
 
     this.app.datePicker();
     this.app.autoComplete();
+    this.app.tagAutoComplete();
 };