From b527d394645588bdc5d8b03afc5357377397efef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20Barrag=C3=A1n=20Merino?=
 <david.barragan@kaleidos.net>
Date: Fri, 9 Sep 2016 10:18:19 +0200
Subject: [PATCH] Fix tg-color-selector in admin panel

---
 .../modules/admin/project-values.coffee       | 12 ++++++++--
 .../includes/components/select-color.jade     | 24 ++-----------------
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/app/coffee/modules/admin/project-values.coffee b/app/coffee/modules/admin/project-values.coffee
index 89797b06..42df12a3 100644
--- a/app/coffee/modules/admin/project-values.coffee
+++ b/app/coffee/modules/admin/project-values.coffee
@@ -31,6 +31,8 @@ joinStr = @.taiga.joinStr
 groupBy = @.taiga.groupBy
 bindOnce = @.taiga.bindOnce
 debounce = @.taiga.debounce
+getDefaulColorList = @.taiga.getDefaulColorList
+
 
 module = angular.module("taigaAdmin")
 
@@ -179,7 +181,9 @@ ProjectValuesDirective = ($log, $repo, $confirm, $location, animationFrame, $tra
             }
 
         initializeTextTranslations = ->
-            $scope.addNewElementText = $translate.instant("ADMIN.PROJECT_VALUES_#{objName.toUpperCase()}.ACTION_ADD")
+            $scope.addNewElementText = $translate.instant(
+                "ADMIN.PROJECT_VALUES_#{objName.toUpperCase()}.ACTION_ADD"
+            )
 
         initializeNewValue()
         initializeTextTranslations()
@@ -320,7 +324,8 @@ ProjectValuesDirective = ($log, $repo, $confirm, $location, animationFrame, $tra
 
     return {link:link}
 
-module.directive("tgProjectValues", ["$log", "$tgRepo", "$tgConfirm", "$tgLocation", "animationFrame", "$translate", "$rootScope", ProjectValuesDirective])
+module.directive("tgProjectValues", ["$log", "$tgRepo", "$tgConfirm", "$tgLocation", "animationFrame",
+                                     "$translate", "$rootScope", ProjectValuesDirective])
 
 
 #############################################################################
@@ -331,6 +336,8 @@ ColorSelectionDirective = () ->
     ## Color selection Link
 
     link = ($scope, $el, $attrs, $model) ->
+        $scope.colorList = getDefaulColorList()
+
         $scope.allowEmpty = false
         if $attrs.tgAllowEmpty
             $scope.allowEmpty = true
@@ -369,6 +376,7 @@ ColorSelectionDirective = () ->
             $el.find(".select-color").hide()
 
         $el.on "keyup", "input", (event) ->
+            event.stopPropagation()
             if event.keyCode == 13
                 $scope.$apply ->
                     $model.$modelValue.color = $scope.color
diff --git a/app/partials/includes/components/select-color.jade b/app/partials/includes/components/select-color.jade
index 448455fa..16e3e777 100644
--- a/app/partials/includes/components/select-color.jade
+++ b/app/partials/includes/components/select-color.jade
@@ -1,27 +1,7 @@
 div.popover.select-color
     ul
-        li.color(style="background: #fce94f", data-color="#fce94f")
-        li.color(style="background: #edd400", data-color="#edd400")
-        li.color(style="background: #c4a000", data-color="#c4a000")
-        li.color(style="background: #8ae234", data-color="#8ae234")
-        li.color(style="background: #73d216", data-color="#73d216")
-        li.color(style="background: #4e9a06", data-color="#4e9a06")
-        li.color(style="background: #d3d7cf", data-color="#d3d7cf")
-        li.color(style="background: #fcaf3e", data-color="#fcaf3e")
-        li.color(style="background: #f57900", data-color="#f57900")
-        li.color(style="background: #ce5c00", data-color="#ce5c00")
-        li.color(style="background: #729fcf", data-color="#729fcf")
-        li.color(style="background: #3465a4", data-color="#3465a4")
-        li.color(style="background: #204a87", data-color="#204a87")
-        li.color(style="background: #888a85", data-color="#888a85")
-        li.color(style="background: #ad7fa8", data-color="#ad7fa8")
-        li.color(style="background: #75507b", data-color="#75507b")
-        li.color(style="background: #5c3566", data-color="#5c3566")
-        li.color(style="background: #ef2929", data-color="#ef2929")
-        li.color(style="background: #cc0000", data-color="#cc0000")
-        li.color(style="background: #a40000", data-color="#a40000")
-        li.color(style="background: #2e3436", data-color="#2e3436", ng-if="!allowEmpty")
-        li.color(data-color="", ng-class="{'empty-color': allowEmpty}")
+        li.color(ng-repeat="c in colorList" ng-style="::{background: c}", data-color="{{::c }}")
+        li.color.empty-color(ng-if="allowEmpty", data-color="")
 
     input(type="text", placeholder="personalized colors", ng-model="color")
     div.selected-color(ng-style="{'background-color': color}", ng-if="color !== null")