From 10533a933dfe604d11835f8e7aeec9c2262d4b62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 14 Sep 2016 09:36:36 +0200
Subject: [PATCH] Add color to timeline

---
 app/locales/taiga/locale-en.json               |  1 +
 .../user-timeline-item-type.service.coffee     |  9 +++++++++
 .../user-timeline-item/user-timeline-item.jade | 18 +++++++++---------
 .../user-timeline/user-timeline.jade           | 15 ++++++++++++---
 .../user-timeline/user-timeline.scss           |  9 +++++++++
 5 files changed, 40 insertions(+), 12 deletions(-)

diff --git a/app/locales/taiga/locale-en.json b/app/locales/taiga/locale-en.json
index e90ba578..86bb1688 100644
--- a/app/locales/taiga/locale-en.json
+++ b/app/locales/taiga/locale-en.json
@@ -1594,6 +1594,7 @@
         "WIKI_UPDATED": "{{username}} has updated the wiki page {{obj_name}}",
         "EPIC_UPDATED": "{{username}} has updated the attribute \"{{field_name}}\" of the epic {{obj_name}}",
         "EPIC_UPDATED_WITH_NEW_VALUE": "{{username}} has updated the attribute \"{{field_name}}\" of the epic {{obj_name}} to {{new_value}}",
+        "EPIC_UPDATED_WITH_NEW_COLOR": "{{username}} has updated the \"{{field_name}}\" of the epic {{obj_name}} to <span class=\"new-color\" style=\"background: {{new_value}}\"></span>",
         "NEW_COMMENT_US": "{{username}} has commented in the US {{obj_name}}",
         "NEW_COMMENT_ISSUE": "{{username}} has commented in the issue {{obj_name}}",
         "NEW_COMMENT_TASK": "{{username}} has commented in the task {{obj_name}}",
diff --git a/app/modules/user-timeline/user-timeline-item/user-timeline-item-type.service.coffee b/app/modules/user-timeline/user-timeline-item/user-timeline-item-type.service.coffee
index b13d6de4..9e33dcd0 100644
--- a/app/modules/user-timeline/user-timeline-item/user-timeline-item-type.service.coffee
+++ b/app/modules/user-timeline/user-timeline-item/user-timeline-item-type.service.coffee
@@ -288,6 +288,15 @@ timelineType = (timeline, event) ->
             key: 'TIMELINE.EPIC_UPDATED',
             translate_params: ['username', 'field_name', 'obj_name']
         },
+        { # EpicUpdated color
+            check: (timeline, event) ->
+                return event.obj == 'epic' &&
+                    event.type == 'change' &&
+                    timeline.hasIn(['data', 'value_diff']) &&
+                    timeline.getIn(['data', 'value_diff', 'key']) == 'color'
+            key: 'TIMELINE.EPIC_UPDATED_WITH_NEW_COLOR',
+            translate_params: ['username', 'field_name', 'obj_name', 'new_value']
+        },
         { # EpicUpdated general
             check: (timeline, event) ->
                 return event.obj == 'epic' &&
diff --git a/app/modules/user-timeline/user-timeline-item/user-timeline-item.jade b/app/modules/user-timeline/user-timeline-item/user-timeline-item.jade
index 43604994..a85bcf0b 100644
--- a/app/modules/user-timeline/user-timeline-item/user-timeline-item.jade
+++ b/app/modules/user-timeline/user-timeline-item/user-timeline-item.jade
@@ -1,22 +1,22 @@
-div.activity-item
+.activity-item
     span.activity-date {{::timeline.get('created') | momentFromNow}}
 
-    div.activity-info(tg-user-timeline-title="timeline")
+    .activity-info(tg-user-timeline-title="timeline")
 
-    div.activity-info
+    .activity-info
         // profile image with url
-        div.profile-contact-picture(ng-if="timeline.getIn(['data', 'user', 'is_profile_visible'])")
+        .profile-contact-picture(ng-if="timeline.getIn(['data', 'user', 'is_profile_visible'])")
             a(tg-nav="user-profile:username=timeline.getIn(['data', 'user', 'username'])", title="{{::timeline.getIn(['data', 'user', 'name']) }}")
                 img(
                     tg-avatar="timeline.getIn(['data', 'user'])"
                     alt="{{::timeline.getIn(['data', 'user', 'name'])}}"
                 )
         // profile image without url
-        div.profile-contact-picture(ng-if="!timeline.getIn(['data', 'user', 'is_profile_visible'])")
-          img(
-              tg-avatar="timeline.getIn(['data', 'user'])"
-              alt="{{::timeline.getIn(['data', 'user', 'name'])}}"
-          )
+        .profile-contact-picture(ng-if="!timeline.getIn(['data', 'user', 'is_profile_visible'])")
+            img(
+                tg-avatar="timeline.getIn(['data', 'user'])"
+                alt="{{::timeline.getIn(['data', 'user', 'name'])}}"
+            )
 
         p(tg-compile-html="timeline.get('title_html')")
 
diff --git a/app/modules/user-timeline/user-timeline/user-timeline.jade b/app/modules/user-timeline/user-timeline/user-timeline.jade
index b227d860..8c8bdcc1 100644
--- a/app/modules/user-timeline/user-timeline/user-timeline.jade
+++ b/app/modules/user-timeline/user-timeline/user-timeline.jade
@@ -1,7 +1,16 @@
 section.profile-timeline
     div(ng-if="!vm.timelineList.size")
          div.spin
-            img(src="/#{v}/svg/spinner-circle.svg", alt="Loading...")
+            img(
+                src="/#{v}/svg/spinner-circle.svg"
+                alt="Loading..."
+            )
 
-    div(infinite-scroll="vm.loadTimeline()", infinite-scroll-disabled="vm.scrollDisabled")
-        div(tg-repeat="timeline in vm.timelineList", tg-user-timeline-item="timeline")
+    div(
+        infinite-scroll="vm.loadTimeline()"
+        infinite-scroll-disabled="vm.scrollDisabled"
+    )
+        div(
+            tg-repeat="timeline in vm.timelineList"
+            tg-user-timeline-item="timeline"
+        )
diff --git a/app/modules/user-timeline/user-timeline/user-timeline.scss b/app/modules/user-timeline/user-timeline/user-timeline.scss
index 54d03b71..bcb89710 100644
--- a/app/modules/user-timeline/user-timeline/user-timeline.scss
+++ b/app/modules/user-timeline/user-timeline/user-timeline.scss
@@ -56,6 +56,15 @@
                 width: 100%;
             }
         }
+        .new-color {
+            border-radius: 50%;
+            display: inline-block;
+            height: 1rem;
+            margin-left: .2rem;
+            position: relative;
+            top: .1rem;
+            width: 1rem;
+        }
     }
     .activity-member-view {
         display: flex;