[IMP][ADD] mail, various: timeline view.

This commit introduces a new view type, the timeline view. This view is
intended to display messages like the previous chatter. This is now a view
like the form or list view. Like other views it will be possible to have
custom templates for some specific needs, allowing customization.

[IMP] mail: the value tracking is modified. Previously messages were created
containing the modified values. Those values are now stored, using a new
model mail.tracking.value. The message body is dynamically build based on
the values. Tests have been updated.

This version is temporary. Indeed two main modifications will come in a short
future :

 - the new design will improve the display
 - the slack mode will change the way the Inbox and notifications are managed

All glory to the Hypnotoad.

Special thanks to Valerie Pirenne (vpi), Jerome Maes (jem) and Richat Mathot
(rim) that did not code but said a lot of things. Martin Trigaux (mat) did
nothing, a bit like for the slides modules, but he is busy sending emails.

4 files changed, 152 insertions, 200 deletions

diff --git a/addons/gamification/static/src/css/gamification.css b/addons/gamification/static/src/css/gamification.css
index b21e4e4e010..a2c416ffc2d 100644
--- a/addons/gamification/static/src/css/gamification.css
+++ b/addons/gamification/static/src/css/gamification.css
@@ -1,185 +1,146 @@
 @charset "UTF-8";
 .openerp .oe_kanban_view .oe_kanban_card.oe_kanban_goal {
   width: 230px;
-  min-height: 200px;
-}
-.openerp .oe_kanban_goal .oe_goal_state_block {
-  width: 200px;
-  height: 130px;
-  margin: auto;
-  margin-bottom: -20px;
-}
-.openerp .oe_kanban_goal .oe_goal_state_block .oe_goal_state {
-  font-size: 2.5em;
-  font-weight: bold;
-  padding-top: 30px;
-}
-.openerp .oe_kanban_goal .oe_goal_state_block .oe_goal_state .fa {
-  font-size: 3em;
-  margin-top: -17px;
-  margin-left: 17px;
-}
-.openerp .oe_kanban_goal .oe_goal_state_block, .openerp .oe_kanban_goal p {
-  text-align: center;
-}
-
+  min-height: 200px; }
 .openerp .oe_kanban_view .oe_kanban_card.oe_kanban_badge {
   width: 250px;
-  min-height: 150px;
-}
+  min-height: 150px; }
 .openerp .oe_kanban_badge_avatars {
-  width: 30px;
-}
+  margin-top: 8px; }
+  .openerp .oe_kanban_badge_avatars img {
+    width: 30px;
+    height: 30px;
+    padding-left: 0;
+    margin-top: 3px;
+    border-radius: 2px;
+    -box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
 .openerp .oe_margin_top_8 {
-  margin-top: 8px;
-}
+  margin-top: 8px; }
 .openerp .oe_margin_top_16 {
-  margin-top: 16px;
-}
+  margin-top: 16px; }
+.openerp .oe_kanban_goal .oe_goal_state_block {
+  width: 200px;
+  height: 130px;
+  margin: auto;
+  margin-bottom: -20px; }
+  .openerp .oe_kanban_goal .oe_goal_state_block .oe_goal_state {
+    font-size: 2.5em;
+    font-weight: bold;
+    padding-top: 30px; }
+  .openerp .oe_kanban_goal .oe_goal_state_block .oe_goal_state .fa {
+    font-size: 3em;
+    margin-top: -17px;
+    margin-left: 17px; }
+.openerp .oe_kanban_goal .oe_goal_state_block, .openerp .oe_kanban_goal p {
+  text-align: center; }
+.openerp .oe_kanban_content .oe_goal_gauge:first-child {
+  margin: auto; }
+.openerp .oe_kanban_content .oe_goal_gauge svg {
+  margin-top: -20px; }
 .openerp .oe_no_overflow {
-  overflow: hidden;
-}
+  overflow: hidden; }
 .openerp .oe_red {
-  color: red;
-}
+  color: red; }
 .openerp .oe_green {
-  color: green;
-}
+  color: green; }
 .openerp .oe_orange {
-  color: orange;
-}
+  color: orange; }
 .openerp .oe_form td .oe_no_padding {
-  margin-left: -6px;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside {
-  margin-top: 15px;
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
-  width: 280px;
-  border-radius: 2px;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_gamification_challenge_list {
-  background-color: #ededf6;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_gamification_suggestion {
-  background-color: #d3def1;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_gamification_suggestion ul {
-  padding-left: 15px;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside h4, .openerp .oe_mail_wall .oe_mail_wall_aside .oe_goals_list .oe_thead {
-  text-align: center;
-  padding-bottom: 15px;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside > div {
-  border-bottom: solid 5px white;
-  border-radius: 2px;
-}
-.openerp .oe_mail_wall .oe_goal {
-  border-bottom: solid 3px white;
-  padding: 5px 10px;
-}
-.openerp .oe_mail_wall .oe_goal .oe_update_challenge.fa, .openerp .oe_mail_wall .oe_goal .oe_goal_action.fa {
-  visibility: hidden;
-  font-size: 16px;
-  float: right;
-  position: relative;
-}
-.openerp .oe_mail_wall .oe_goal div:hover > .oe_update_challenge, .openerp .oe_mail_wall .oe_goal div:hover > .oe_goal_action, .openerp .oe_mail_wall .oe_goal th:hover > .oe_goal_action {
-  visibility: visible;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list {
-  padding-left: 0;
-  margin-top: 5px;
-  margin-bottom: 10px;
-  width: 100%;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_no_progress div {
-  display: inline-block;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_no_progress::before {
-  content: "•";
-  padding-right: 4px;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_no_progress.oe_goal_reached::before {
-  content: "✓";
-  padding-right: 0;
-  margin-left: -2px;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_no_progress.oe_goal_reached .oe_cell {
-  text-decoration: line-through;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_cell.oe_goal_current {
-  font-size: 150%;
-  font-weight: bold;
-  min-width: 50px;
-  padding: 0 5px;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_goal_outer_box {
-  display: inline-block;
-  position: relative;
-  z-index: 0;
-  vertical-align: middle;
-  width: 100%;
-  border: solid 1px rgba(0, 0, 0, 0.03);
-  border-radius: 2px;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_goal_outer_box.oe_no_progress {
-  border: none;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_goal_progress_background {
-  background-color: white;
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  z-index: -2;
-  top: 0;
-  left: 0;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_goal_progress {
-  background-color: #d4e9de;
-  position: absolute;
-  height: 100%;
-  width: 0;
-  z-index: -1;
-  top: 0;
-  left: 0;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_thead {
-  font-weight: normal;
-  padding: 5px;
-  text-align: center;
-}
-.openerp .oe_mail_wall .oe_goal .oe_goals_list .oe_cell {
-  padding: 3px 0;
-}
-.openerp .oe_mail_wall .oe_table.oe_goals_list .col0 {
+  margin-left: -6px; }
+.openerp .oe_timeline .oe_tl_inbox_aside .oe_gamification_suggestion {
+  background-color: #d3def1; }
+  .openerp .oe_timeline .oe_tl_inbox_aside .oe_gamification_suggestion ul {
+    padding-left: 15px; }
+  .openerp .oe_timeline .oe_tl_inbox_aside .oe_gamification_suggestion span {
+    background-color: #f0eeee;
+    display: inline-block;
+    height: 25px;
+    vertical-align: middle;
+    font-size: 14px;
+    font-weight: bold;
+    margin-top: -20px;
+    padding-left: 0 5px 0px 5px; }
+.openerp .oe_timeline .oe_goal {
+  background-color: #f0eeee;
+  border: solid 1px #cacaca;
+  margin-top: 20px;
+  padding-left: 10px; }
+  .openerp .oe_timeline .oe_goal .oe_update_challenge.fa, .openerp .oe_timeline .oe_goal .oe_goal_action.fa {
+    visibility: hidden;
+    font-size: 16px;
+    float: right;
+    position: relative; }
+  .openerp .oe_timeline .oe_goal div:hover > .oe_update_challenge, .openerp .oe_timeline .oe_goal div:hover > .oe_goal_action, .openerp .oe_timeline .oe_goal th:hover > .oe_goal_action {
+    visibility: visible; }
+  .openerp .oe_timeline .oe_goal .oe_goals_list {
+    padding-left: 0;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    width: 100%; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_no_progress div {
+      display: inline-block; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_no_progress::before {
+      content: "•";
+      padding-right: 4px; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_no_progress.oe_goal_reached::before {
+      content: "✓";
+      padding-right: 0;
+      margin-left: -2px; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_no_progress.oe_goal_reached .oe_cell {
+      text-decoration: line-through; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_cell.oe_goal_current {
+      font-size: 150%;
+      font-weight: bold;
+      min-width: 50px;
+      padding: 0 5px; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_goal_outer_box {
+      display: inline-block;
+      position: relative;
+      z-index: 0;
+      vertical-align: middle;
+      width: 100%;
+      border: solid 1px rgba(0, 0, 0, 0.03);
+      border-radius: 2px; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_goal_outer_box.oe_no_progress {
+      border: none; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_goal_progress_background {
+      background-color: white;
+      position: absolute;
+      height: 100%;
+      width: 100%;
+      z-index: -2;
+      top: 0;
+      left: 0; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_goal_progress {
+      background-color: #d4e9de;
+      position: absolute;
+      height: 100%;
+      width: 0;
+      z-index: -1;
+      top: 0;
+      left: 0; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_thead {
+      font-weight: normal;
+      padding: 5px;
+      text-align: center; }
+    .openerp .oe_timeline .oe_goal .oe_goals_list .oe_cell {
+      padding: 3px 0; }
+.openerp .oe_timeline .oe_table.oe_goals_list .col0 {
   font-size: 200%;
   font-weight: bold;
   width: 25px;
-  text-align: center;
-}
-.openerp .oe_mail_wall .oe_table.oe_goals_list .col1 {
-  padding: 0 5px;
-}
-.openerp .oe_mail_wall .oe_table.oe_goals_list .col2 {
-  width: auto;
-}
-.openerp .oe_mail_wall .oe_user_avatar {
+  text-align: center; }
+.openerp .oe_timeline .oe_table.oe_goals_list .col1 {
+  padding: 0 5px; }
+.openerp .oe_timeline .oe_table.oe_goals_list .col2 {
+  width: auto; }
+.openerp .oe_timeline .oe_user_avatar {
   width: 24px;
-  padding-right: 5px;
-}
-.openerp .oe_mail_wall .oe_mail {
-  display: inline-block;
-}
-.openerp .oe_mail_wall .oe_table {
-  display: table;
-}
-.openerp .oe_mail_wall .oe_row {
-  display: table-row;
-}
-.openerp .oe_mail_wall .oe_cell {
+  padding-right: 5px; }
+.openerp .oe_timeline .oe_table {
+  display: table; }
+.openerp .oe_timeline .oe_row {
+  display: table-row; }
+.openerp .oe_timeline .oe_cell {
   display: table-cell;
-  vertical-align: middle;
-}
\ No newline at end of file
+  vertical-align: middle; }
diff --git a/addons/gamification/static/src/css/gamification.sass b/addons/gamification/static/src/css/gamification.sass
index fa5e4f86dcf..b524c9486b8 100644
--- a/addons/gamification/static/src/css/gamification.sass
+++ b/addons/gamification/static/src/css/gamification.sass
@@ -62,34 +62,29 @@
     .oe_form td .oe_no_padding
         margin-left: -6px
 
-
-    .oe_mail_wall
-        .oe_mail_wall_aside
-            margin-top: 15px
-            position: relative
-            display: inline-block
-            vertical-align: top
-            width: 280px
-            border-radius: 2px
-
-            .oe_gamification_challenge_list
-                background-color: #EDEDF6
+    .oe_timeline
+        .oe_tl_inbox_aside
             .oe_gamification_suggestion
-                background-color: rgb(211, 222, 241)
-                ul
-                    padding-left: 15px
+                background-color: #d3def1
 
-            h4, .oe_goals_list .oe_thead
-                text-align: center
-                padding-bottom: 15px
+                ul 
+                    padding-left: 15px
 
-        .oe_mail_wall_aside > div
-            border-bottom: solid 5px white
-            border-radius: 2px
+                span
+                    background-color: #f0eeee
+                    display: inline-block
+                    height: 25px
+                    vertical-align: middle
+                    font-size: 14px
+                    font-weight: bold
+                    margin-top: -20px
+                    padding-left: 0 5px 0px 5px
 
         .oe_goal
-            border-bottom: solid 3px white
-            padding: 5px 10px
+            background-color: #f0eeee
+            border: solid 1px #CACACA
+            margin-top: 20px
+            padding-left: 10px
             .oe_update_challenge.fa, .oe_goal_action.fa
                 visibility: hidden
                 font-size: 16px
@@ -97,7 +92,6 @@
                 position: relative
             div:hover > .oe_update_challenge, div:hover > .oe_goal_action, th:hover > .oe_goal_action
                 visibility: visible
-
             .oe_goals_list
                 padding-left: 0
                 margin-top: 5px
@@ -170,18 +164,15 @@
                 padding: 0 5px
             .col2
                 width: auto
-        
+
         .oe_user_avatar
             width: 24px
             padding-right: 5px
 
-        .oe_mail
-            display: inline-block
-
         .oe_table
             display: table
         .oe_row
             display: table-row
         .oe_cell
             display: table-cell
-            vertical-align: middle
+            vertical-align: middle
\ No newline at end of file
diff --git a/addons/gamification/static/src/js/gamification.js b/addons/gamification/static/src/js/gamification.js
index fb70b7e3d61..37a4f334e78 100644
--- a/addons/gamification/static/src/js/gamification.js
+++ b/addons/gamification/static/src/js/gamification.js
@@ -119,11 +119,11 @@ var Sidebar = Widget.extend({
     }
 });
 
-mail.Wall.include({
+mail.TimelineView.include({
     start: function() {
         this._super();
         var sidebar = new Sidebar(this);
-        sidebar.appendTo($('.oe_mail_wall_aside'));
+        sidebar.appendTo($('.o_timeline__inbox_aside'));
     },
 });
 
diff --git a/addons/gamification/static/src/xml/gamification.xml b/addons/gamification/static/src/xml/gamification.xml
index d20bf3a722b..570cfe936d1 100644
--- a/addons/gamification/static/src/xml/gamification.xml
+++ b/addons/gamification/static/src/xml/gamification.xml
@@ -7,9 +7,9 @@
     </t>
     <t t-name="gamification.ChallengeSummary">
         <div class="oe_goal">
-            <div>
+            <div class="oe_gamification_title">
                 <i class="oe_update_challenge fa fa-refresh" rol="button" t-attf-id="{challenge.id}"/>
-                <h4><t t-esc="challenge.name" /></h4>
+                <span><t t-esc="challenge.name" /></span>
             </div>
 
             <t t-if="challenge.visibility_mode == 'personal'">