From 743cca255f60f32e9eca3beeb953f910556e0dcb Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 3 Aug 2020 10:24:00 -0400
Subject: [PATCH] fix(calendar(js)): show categories colors in task editor

Fixes #5116
---
 UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
index f614702e0..451cabdd8 100644
--- a/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxTaskEditorTemplate.wox
@@ -52,13 +52,23 @@
           </md-input-container>
           <!-- categories -->
           <md-chips ng-model="editor.component.categories">
-            <md-autocomplete
+            <md-chip-template>
+              <span class="sg-chip-color">
+                <span ng-style="{ 'background-color': editor.component.constructor.$categories[$chip] }"><!-- color --></span>
+              </span>
+              <span>{{$chip}}</span>
+            </md-chip-template>
+           <md-autocomplete
                 md-selected-item="editor.categories.selected"
                 md-search-text="editor.categories.searchText"
                 md-items="category in editor.component.constructor.filterCategories(editor.categories.searchText) | orderBy"
                 md-min-length="0"
                 label:placeholder="Add a category">
-              <span md-highlight-text="editor.categories.searchText">{{category}}</span>
+              <div layout="row" layout-align="start center">
+                <div class="sg-color-chip"
+                     ng-style="{ 'background-color': editor.component.constructor.$categories[category] }"><!-- color --></div>
+                <div md-highlight-text="editor.categories.searchText" md-highlight-flags="^i">{{category}}</div>
+              </div>
             </md-autocomplete>
           </md-chips>
           <div layout="row" layout-align="space-between center" layout-wrap="layout-wrap">