Colorinchis and coloronchos like tronchos 🌈 🐐 🐏 🐊 🌈

app/coffee/modules/backlog/main.coffee

@@ -26,6 +26,7 @@ toggleText = @.taiga.toggleText
 scopeDefer = @.taiga.scopeDefer
 bindOnce = @.taiga.bindOnce
 groupBy = @.taiga.groupBy
+textToColor = @.taiga.textToColor
 
 module = angular.module("taigaBacklog")
 
@@ -315,6 +316,7 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.F
                 id: k,
                 type: "tags",
                 name: k,
+                color: textToColor(k),
                 count: v
             }
             obj.selected = true if isSelected("tags", obj.id)

app/coffee/modules/base/tags.coffee

@@ -20,6 +20,9 @@
 ###
 
 taiga = @.taiga
+textToColor = @.taiga.textToColor
+
+module = angular.module("taigaBase")
 
 # Directive that parses/format tags inputfield.
 
@@ -45,6 +48,18 @@ TagsDirective = ->
         link: link
     }
 
-
-module = angular.module("taigaBase")
 module.directive("tgTags", TagsDirective)
+
+
+ColorizeTagDirective = ->
+    link = ($scope, $el, $attrs, $ctrl) ->
+        text = $scope.$eval($attrs.tgColorizeTag)
+        color = textToColor(text)
+        $el.css("background", color)
+
+    return {link: link}
+
+module.directive("tgColorizeTag", ColorizeTagDirective)
+
+
+

app/coffee/modules/issues/detail.coffee

@@ -28,6 +28,7 @@ joinStr = @.taiga.joinStr
 groupBy = @.taiga.groupBy
 bindOnce = @.taiga.bindOnce
 typeIsArray = @.taiga.typeIsArray
+textToColor = @.taiga.textToColor
 
 module = angular.module("taigaIssues")
 
@@ -179,7 +180,7 @@ TagLineDirective = ($log) ->
     # Tags template (rendered manually using lodash)
     templateTags = _.template("""
     <% _.each(tags, function(tag) { %>
-        <div class="tag">
+        <div class="tag" style="background: <%- tag.color %>;">
             <span class="tag-name"><%- tag.name %></span>
             <% if (editable) { %>
             <a href="" title="delete tag" class="icon icon-delete"></a>
@@ -188,8 +189,11 @@ TagLineDirective = ($log) ->
     <% }); %>""")
 
     renderTags = ($el, tags, editable) ->
-        tags = _.map(tags, (t) -> {name: t})
+        ctx = {
-        html = templateTags({tags: tags, editable:editable})
+            tags: _.map(tags, (t) -> {name: t, color: textToColor(t)})
+            editable: editable
+        }
+        html = templateTags(ctx)
         $el.find("div.tags-container").html(html)
 
     normalizeTags = (tags) ->
@@ -496,7 +500,7 @@ CommentDirective = ->
                 changesText: buildChangesText(comment)
                 hasChanges: countChanges(comment) > 0
             })
-            
+
             $el.html(html)
             activityContentDom = $el.find(".comment-content .us-activity")
             _.each comment.values_diff, (modification, name) ->

app/coffee/modules/issues/list.coffee

@@ -29,6 +29,7 @@ groupBy = @.taiga.groupBy
 bindOnce = @.taiga.bindOnce
 debounce = @.taiga.debounce
 startswith = @.taiga.startswith
+textToColor = @.taiga.textToColor
 
 module = angular.module("taigaIssues")
 
@@ -166,6 +167,7 @@ class IssuesController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.Fi
                 obj = {
                     id: t[0],
                     name: t[0],
+                    color: textToColor(t[0]),
                     count: t[1],
                     type: "tags"
                 }

app/coffee/utils.coffee

@@ -123,6 +123,21 @@ sizeFormat = (input, precision=1) ->
 
 typeIsArray = Array.isArray || ( value ) -> return {}.toString.call( value ) is '[object Array]'
 
+
+textToColor = (text) ->
+    hash = hex_sha1(text.trim().toLowerCase())
+    color = hash.substring(0,6)
+                .replace("0","8")
+                .replace("1","9")
+                .replace("2","a")
+                .replace("3","b")
+                .replace("4","c")
+                .replace("5","d")
+                .replace("6","e")
+                .replace("7","f")
+    return "##{color}"
+
+
 taiga = @.taiga
 taiga.bindOnce = bindOnce
 taiga.mixOf = mixOf
@@ -140,3 +155,4 @@ taiga.debounce = debounce
 taiga.startswith = startswith
 taiga.sizeFormat = sizeFormat
 taiga.typeIsArray = typeIsArray
+taiga.textToColor = textToColor

app/js/sha1.js

@@ -0,0 +1,202 @@
+/*
+ * A JavaScript implementation of the Secure Hash Algorithm, SHA-1, as defined
+ * in FIPS PUB 180-1
+ * Version 2.1a Copyright Paul Johnston 2000 - 2002.
+ * Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
+ * Distributed under the BSD License
+ * See http://pajhome.org.uk/crypt/md5 for details.
+ */
+
+/*
+ * Configurable variables. You may need to tweak these to be compatible with
+ * the server-side, but the defaults work in most cases.
+ */
+var hexcase = 0;  /* hex output format. 0 - lowercase; 1 - uppercase        */
+var b64pad  = ""; /* base-64 pad character. "=" for strict RFC compliance   */
+var chrsz   = 8;  /* bits per input character. 8 - ASCII; 16 - Unicode      */
+
+/*
+ * These are the functions you'll usually want to call
+ * They take string arguments and return either hex or base-64 encoded strings
+ */
+function hex_sha1(s){return binb2hex(core_sha1(str2binb(s),s.length * chrsz));}
+function b64_sha1(s){return binb2b64(core_sha1(str2binb(s),s.length * chrsz));}
+function str_sha1(s){return binb2str(core_sha1(str2binb(s),s.length * chrsz));}
+function hex_hmac_sha1(key, data){ return binb2hex(core_hmac_sha1(key, data));}
+function b64_hmac_sha1(key, data){ return binb2b64(core_hmac_sha1(key, data));}
+function str_hmac_sha1(key, data){ return binb2str(core_hmac_sha1(key, data));}
+
+/*
+ * Perform a simple self-test to see if the VM is working
+ */
+function sha1_vm_test()
+{
+  return hex_sha1("abc") == "a9993e364706816aba3e25717850c26c9cd0d89d";
+}
+
+/*
+ * Calculate the SHA-1 of an array of big-endian words, and a bit length
+ */
+function core_sha1(x, len)
+{
+  /* append padding */
+  x[len >> 5] |= 0x80 << (24 - len % 32);
+  x[((len + 64 >> 9) << 4) + 15] = len;
+
+  var w = Array(80);
+  var a =  1732584193;
+  var b = -271733879;
+  var c = -1732584194;
+  var d =  271733878;
+  var e = -1009589776;
+
+  for(var i = 0; i < x.length; i += 16)
+  {
+    var olda = a;
+    var oldb = b;
+    var oldc = c;
+    var oldd = d;
+    var olde = e;
+
+    for(var j = 0; j < 80; j++)
+    {
+      if(j < 16) w[j] = x[i + j];
+      else w[j] = rol(w[j-3] ^ w[j-8] ^ w[j-14] ^ w[j-16], 1);
+      var t = safe_add(safe_add(rol(a, 5), sha1_ft(j, b, c, d)),
+                       safe_add(safe_add(e, w[j]), sha1_kt(j)));
+      e = d;
+      d = c;
+      c = rol(b, 30);
+      b = a;
+      a = t;
+    }
+
+    a = safe_add(a, olda);
+    b = safe_add(b, oldb);
+    c = safe_add(c, oldc);
+    d = safe_add(d, oldd);
+    e = safe_add(e, olde);
+  }
+  return Array(a, b, c, d, e);
+
+}
+
+/*
+ * Perform the appropriate triplet combination function for the current
+ * iteration
+ */
+function sha1_ft(t, b, c, d)
+{
+  if(t < 20) return (b & c) | ((~b) & d);
+  if(t < 40) return b ^ c ^ d;
+  if(t < 60) return (b & c) | (b & d) | (c & d);
+  return b ^ c ^ d;
+}
+
+/*
+ * Determine the appropriate additive constant for the current iteration
+ */
+function sha1_kt(t)
+{
+  return (t < 20) ?  1518500249 : (t < 40) ?  1859775393 :
+         (t < 60) ? -1894007588 : -899497514;
+}
+
+/*
+ * Calculate the HMAC-SHA1 of a key and some data
+ */
+function core_hmac_sha1(key, data)
+{
+  var bkey = str2binb(key);
+  if(bkey.length > 16) bkey = core_sha1(bkey, key.length * chrsz);
+
+  var ipad = Array(16), opad = Array(16);
+  for(var i = 0; i < 16; i++)
+  {
+    ipad[i] = bkey[i] ^ 0x36363636;
+    opad[i] = bkey[i] ^ 0x5C5C5C5C;
+  }
+
+  var hash = core_sha1(ipad.concat(str2binb(data)), 512 + data.length * chrsz);
+  return core_sha1(opad.concat(hash), 512 + 160);
+}
+
+/*
+ * Add integers, wrapping at 2^32. This uses 16-bit operations internally
+ * to work around bugs in some JS interpreters.
+ */
+function safe_add(x, y)
+{
+  var lsw = (x & 0xFFFF) + (y & 0xFFFF);
+  var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+  return (msw << 16) | (lsw & 0xFFFF);
+}
+
+/*
+ * Bitwise rotate a 32-bit number to the left.
+ */
+function rol(num, cnt)
+{
+  return (num << cnt) | (num >>> (32 - cnt));
+}
+
+/*
+ * Convert an 8-bit or 16-bit string to an array of big-endian words
+ * In 8-bit function, characters >255 have their hi-byte silently ignored.
+ */
+function str2binb(str)
+{
+  var bin = Array();
+  var mask = (1 << chrsz) - 1;
+  for(var i = 0; i < str.length * chrsz; i += chrsz)
+    bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (32 - chrsz - i%32);
+  return bin;
+}
+
+/*
+ * Convert an array of big-endian words to a string
+ */
+function binb2str(bin)
+{
+  var str = "";
+  var mask = (1 << chrsz) - 1;
+  for(var i = 0; i < bin.length * 32; i += chrsz)
+    str += String.fromCharCode((bin[i>>5] >>> (32 - chrsz - i%32)) & mask);
+  return str;
+}
+
+/*
+ * Convert an array of big-endian words to a hex string.
+ */
+function binb2hex(binarray)
+{
+  var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
+  var str = "";
+  for(var i = 0; i < binarray.length * 4; i++)
+  {
+    str += hex_tab.charAt((binarray[i>>2] >> ((3 - i%4)*8+4)) & 0xF) +
+           hex_tab.charAt((binarray[i>>2] >> ((3 - i%4)*8  )) & 0xF);
+  }
+  return str;
+}
+
+/*
+ * Convert an array of big-endian words to a base-64 string
+ */
+function binb2b64(binarray)
+{
+  var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+  var str = "";
+  for(var i = 0; i < binarray.length * 4; i += 3)
+  {
+    var triplet = (((binarray[i   >> 2] >> 8 * (3 -  i   %4)) & 0xFF) << 16)
+                | (((binarray[i+1 >> 2] >> 8 * (3 - (i+1)%4)) & 0xFF) << 8 )
+                |  ((binarray[i+2 >> 2] >> 8 * (3 - (i+2)%4)) & 0xFF);
+    for(var j = 0; j < 4; j++)
+    {
+      if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
+      else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
+    }
+  }
+  return str;
+}

app/partials/views/components/backlog-row.jade

@@ -1,7 +1,7 @@
 div.row.us-item-row(ng-repeat="us in visibleUserstories|orderBy:order track by us.id", tg-draggable)
     div.user-stories
         div.user-story-tags
-            span.tag(ng-repeat="tag in us.tags") {{ tag }}
+            span.tag(ng-repeat="tag in us.tags", tg-bind-html="tag", tg-colorize-tag="tag")
         div.user-story-name
             input(type="checkbox", name="")
             a.clickable(tg-nav="project-userstories-detail:project=project.slug,ref=us.ref", title="{{ us.subject }}") {{ us.subject }}

app/partials/views/components/kanban-task.jade

@@ -1,5 +1,5 @@
 div.kanban-tagline
-    a.taskboard-tag(ng-repeat="tag in us.tags", href="", tg-bo-title="tag")
+    a.taskboard-tag(ng-repeat="tag in us.tags", href="", tg-bo-title="tag", tg-colorize-tag="tag")
 div.kanban-task-inner
     tg-kanban-user-avatar(model="us.assigned_to", click="ctrl.changeUsAssignedTo(us)")
     div.task-text

app/partials/views/components/tag.jade

@@ -1 +0,0 @@
-span.tag Tag name

app/partials/views/components/taskboard-task.jade

@@ -1,5 +1,5 @@
 div.taskboard-tagline
-    a.taskboard-tag(ng-repeat="tag in task.tags", href="", tg-bo-title="tag")
+    a.taskboard-tag(ng-repeat="tag in task.tags", href="", tg-bo-title="tag", tg-colorize-tag="tag")
 div.taskboard-task-inner
     tg-taskboard-user-avatar(model="task.assigned_to", click="ctrl.editTaskAssignedTo(task)")
     p.taskboard-text

gulpfile.coffee

@@ -63,7 +63,6 @@ paths = {
         "app/vendor/angular-sanitize/angular-sanitize.js",
         "app/vendor/angular-animate/angular-animate.js",
         "app/vendor/i18next/i18next.js",
-        "app/js/Sortable.js",
         "app/vendor/moment/min/moment-with-langs.js",
         "app/vendor/checksley/checksley.js",
         "app/vendor/pikaday/pikaday.js",
@@ -72,7 +71,9 @@ paths = {
         "app/vendor/jquery-flot/jquery.flot.time.js",
         "app/vendor/jquery-textcomplete/jquery.textcomplete.js",
         "app/vendor/markitup/markitup/jquery.markitup.js"
+        "app/js/Sortable.js",
         "app/js/jquery.ui.git.js",
+        "app/js/sha1.js"
     ]
 }