From 38f205ef32a1acd3d5712d203c5f18d2d0805c95 Mon Sep 17 00:00:00 2001
From: Martin Trigaux <mat@openerp.com>
Date: Mon, 22 Apr 2013 11:32:36 +0200
Subject: [PATCH] [IMP] more consistent display of challenges

bzr revid: mat@openerp.com-20130422093236-y76ad91yoyemejxa
---
 addons/gamification/plan.py                   | 29 +++----
 addons/gamification/plan_view.xml             | 14 ++++
 addons/gamification/static/src/css/goal.css   | 78 ++++++++++++-------
 .../static/src/xml/gamification.xml           | 76 +++++++++---------
 4 files changed, 115 insertions(+), 82 deletions(-)

diff --git a/addons/gamification/plan.py b/addons/gamification/plan.py
index 8df348b1af9..4a47987e59d 100644
--- a/addons/gamification/plan.py
+++ b/addons/gamification/plan.py
@@ -158,10 +158,6 @@ class gamification_goal_plan(osv.Model):
             required=True),
         'manager_id': fields.many2one('res.users',
             string='Responsible', help="The user responsible for the challenge."),
-        'start_date': fields.date('Start Date',
-            help="The day a new challenge will be automatically started. If no periodicity is set, will use this date as the goal start date."),
-        'end_date': fields.date('End Date',
-            help="The day a new challenge will be automatically closed. If no periodicity is set, will use this date as the goal end date."),
 
         'user_ids': fields.many2many('res.users', 'user_ids',
             string='Users',
@@ -170,6 +166,21 @@ class gamification_goal_plan(osv.Model):
             string='Auto-subscription Group',
             help='Group of users whose members will automatically be added to the users'),
 
+        'period': fields.selection([
+                ('once', 'Non recurring'),
+                ('daily', 'Daily'),
+                ('weekly', 'Weekly'),
+                ('monthly', 'Monthly'),
+                ('yearly', 'Yearly')
+            ],
+            string='Periodicity',
+            help='Period of automatic goal assigment. If none is selected, should be launched manually.',
+            required=True),
+        'start_date': fields.date('Start Date',
+            help="The day a new challenge will be automatically started. If no periodicity is set, will use this date as the goal start date."),
+        'end_date': fields.date('End Date',
+            help="The day a new challenge will be automatically closed. If no periodicity is set, will use this date as the goal end date."),
+
         'proposed_user_ids': fields.many2many('res.users', 'proposed_user_ids',
             string="Suggest to users"),
 
@@ -190,16 +201,6 @@ class gamification_goal_plan(osv.Model):
         'reward_second_id_many': fields.function(_reward_second_id_many, type="many2many", relation="gamification.badge", string="For 2nd user"),
         'reward_third_id_many': fields.function(_reward_third_id_many, type="many2many", relation="gamification.badge", string="For 3rd user"),
 
-        'period': fields.selection([
-                ('once', 'Non recurring'),
-                ('daily', 'Daily'),
-                ('weekly', 'Weekly'),
-                ('monthly', 'Monthly'),
-                ('yearly', 'Yearly')
-            ],
-            string='Periodicity',
-            help='Period of automatic goal assigment. If none is selected, should be launched manually.',
-            required=True),
         'visibility_mode': fields.selection([
                 ('progressbar', 'Individual Goals'),
                 ('board', 'Leader Board (Group Ranking)'),
diff --git a/addons/gamification/plan_view.xml b/addons/gamification/plan_view.xml
index 394d70578b6..4f2e71ad0bd 100644
--- a/addons/gamification/plan_view.xml
+++ b/addons/gamification/plan_view.xml
@@ -242,7 +242,21 @@
                         <h1><field name="name" nolabel="1" readonly="1"/></h1>
                     </div>
                     <field name="description" nolabel="1" readonly="1" />
+                    <div attrs="{'invisible': ['|',('start_date','!=', False),('end_date','!=', False)]}" class="oe_grey">
+                        This  challenge has no starting and end date specified, it will be closed 
+                    </div>
                     The challenge is running from <field name="start_date" class="oe_inline" readonly="1" /> to <field name="end_date" class="oe_inline" readonly="1" />
+                    <group string="Goals">
+                        <field name="planline_ids" nolabel="1" readonly="1" colspan="4">
+                            <tree string="Planline List" version="7.0" editable="bottom" >
+                                <field name="sequence" widget="handle"/>
+                                <field name="type_id"/>
+                                <field name="type_condition"/>
+                                <field name="target_goal"/>
+                                <field name="type_full_suffix"/>
+                            </tree>
+                        </field>
+                    </group>
                     <group string="Reward">
                         <div class="oe_grey" attrs="{'invisible': ['|',('reward_id','!=',False),('reward_first_id','!=',False)]}">
                             There is no reward upon completion of this challenge.
diff --git a/addons/gamification/static/src/css/goal.css b/addons/gamification/static/src/css/goal.css
index e481a800c79..c113ac6ad2e 100644
--- a/addons/gamification/static/src/css/goal.css
+++ b/addons/gamification/static/src/css/goal.css
@@ -71,23 +71,49 @@
     background: #EDEDF6;
     padding: 5px 5px 0 15px;
 }
-.openerp .oe_mail_wall_aside .oe_gamification_goal .oe_goal_reached,
+.openerp .oe_mail_wall_aside h3 {
+    font-size: 1.3em;
+    margin-left: -7px;
+    font-variant: small-caps;
+    text-transform: capitalize;
+    line-height: 1em;
+}
+/* mark goal as completed */
+.openerp .oe_mail_wall_aside .oe_gamification_goal .oe_goal_reached {
+    /*text-decoration: line-through;*/
+    color: rgb(17, 95, 17);
+}
 .openerp .oe_mail_wall_aside .oe_gamification_goal .oe_goal_failed {
-    text-decoration: line-through;
+    color: rgb(95, 17, 17);
 }
 
-.openerp .oe_mail_wall .oe_mail_wall_aside ul {
+.openerp .oe_mail_wall_aside .oe_goals_list {
     list-style-type: none; 
-    padding-left: 20px;
+    padding-left: 15px;
     margin-bottom: 15px;
+    width: 200px;
 }
-.openerp .oe_mail_wall .oe_mail_wall_aside li {
-    margin-bottom: 15px;
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_outer_box {
+    background: rgb(173, 219, 178);
+    min-height: 32px;
+}
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_inner_box {
+    display: inline-block;
+    width: 200px;
+    min-height: 32px;
+    vertical-align: middle;
+    border: solid 1px white;
+}
+.openerp .oe_mail_wall_aside table.oe_goals_list .oe_goal_inner_box {
+    border: none;
+}
+.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_inner_box strong {
+    padding-left: 5px;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside table {
     margin: 10px 0;
 }
-.oe_mail_wall_aside .oe_list_content tbody tr:nth-child(even) {
+.oe_mail_wall_aside .oe_goals_list tbody tr:nth-child(even) {
     background-color: #fff;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside td,
@@ -95,41 +121,33 @@
     vertical-align: middle;
     border: none;
 }
-.openerp .oe_mail_wall_aside .oe_list_content tbody th {
+.openerp .oe_mail_wall_aside .oe_goals_list thead th {
+    padding: 5px;
+}
+.openerp .oe_mail_wall_aside .oe_goals_list tbody tr {
+    height: 32px;
+}
+.openerp .oe_mail_wall_aside .oe_goals_list tbody th {
     padding-left: 5px;
+    height: 32px;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside table .col0 {
-    font-size: 150%;
+    font-size: 160%;
     font-weight: bold;
+    width: 24px;
 }
-.openerp .oe_mail_wall .oe_mail_wall_aside table td.col0 { width: 25px; }
-.openerp .oe_mail_wall .oe_mail_wall_aside table td.col1 { width: 32px; }
-
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_user_avatar { width: 32px; }
-
-/* background progress bar */
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_progress {
-    background: rgb(173, 219, 178);
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside table progress,.oe_form_field_progressbar {
-    width: 100%;
-    display: inline-block;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside li progress,.oe_form_field_progressbar {
-    width: 80%;
-    display: inline-block;
-}
-.openerp .oe_mail_wall .oe_mail_wall_aside li p {
-    margin:5px 0;
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_user_avatar {
+    width: 32px;
+    padding-right: 5px;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal .oe_update_plan,
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal .oe_goal_action {
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_inner_box .oe_goal_action {
     visibility: hidden;
     display: block;
     float: right;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal:hover > .oe_update_plan,
-.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal:hover .oe_goal_action {
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_inner_box:hover .oe_goal_action {
     visibility: visible;
 }
 .openerp .oe_mail_wall .oe_mail {
diff --git a/addons/gamification/static/src/xml/gamification.xml b/addons/gamification/static/src/xml/gamification.xml
index 428342e08b6..e3782a7d22b 100644
--- a/addons/gamification/static/src/xml/gamification.xml
+++ b/addons/gamification/static/src/xml/gamification.xml
@@ -4,42 +4,41 @@
         <div class="oe_gamification_goal"><em>Your goal list is empty</em></div>
     </t>
     <t t-name="gamification.goal_list_to_do">
+        <h3>Challenges</h3>
         <div t-foreach="widget.goals_info.info" t-as="plan" class="oe_goal">
             <a class="oe_update_plan oe_e" rol="button" t-attf-id="{plan.id}">e</a>
-            <h3><t t-esc="plan.name" /></h3>
+            <h4><t t-esc="plan.name" /></h4>
 
             <t t-if="plan.visibility_mode == 'progressbar'">
-                <ul class="oe_goals_list" style="width:200px;">
-                <li t-foreach="plan.goals" t-as="goal" t-attf-style="width: #{goal.completeness}%;" class="oe_goal_progress">
-                    <div style="width:200px;">
-                    <!-- <span class="oe_goal_sparkline_piechart" t-att-data-completeness="goal.completeness"></span> -->
-                    <strong t-attf-class="#{goal.state == 'reached' ? 'oe_goal_reached' : goal.state == 'failed' ? 'oe_goal_failed' : ''}" t-att-title="goal.type_description"><t t-esc="goal.type_name" /></strong>
-                    <t t-if="goal.computation_mode == 'manually' or goal.type_action">
-                        <a class="oe_goal_action oe_e" t-att-id="goal.id">&amp;</a>
-                    </t>
-                    <t t-if="goal.type_display == 'progress'">
-                        <t t-if="goal.type_condition == 'higher'">
-                            <p>
-                                <t t-esc="goal.current" />/<span t-attf-class="#{goal.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="goal.target_goal"/></span>
-                                <t t-if="goal.type_unit"><t t-esc="goal.type_unit"/></t>
-                            </p>
-                            <!-- <p><progress class="oe_goal_progress" t-att-value="goal.completeness" max="100"/></p> -->
+                <div class="oe_goals_list">
+                    <div class="oe_goal_outer_box" t-foreach="plan.goals" t-as="goal" t-attf-style="width: #{goal.completeness}%;">
+                    <div class="oe_goal_inner_box">
+                        <!-- <span class="oe_goal_sparkline_piechart" t-att-data-completeness="goal.completeness"></span> -->
+                        <strong t-attf-class="#{goal.state == 'reached' ? 'oe_goal_reached' : goal.state == 'failed' ? 'oe_goal_failed' : ''}" t-att-title="goal.type_description"><t t-esc="goal.type_name" /></strong>
+                        <t t-if="goal.computation_mode == 'manually' or goal.type_action">
+                            <a class="oe_goal_action oe_e" t-att-id="goal.id">&amp;</a>
                         </t>
-                        <t t-if="goal.type_condition == 'lower'">
-                            <p>
-                                <t t-esc="goal.current" /> (less than 
-                                    <span t-attf-class="#{goal.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="goal.target_goal"/></span>
+
+                        <t t-if="goal.type_display == 'progress'">
+                            <t t-if="goal.type_condition == 'higher'">
+                                    <t t-esc="goal.current" />/<span t-attf-class="#{goal.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="goal.target_goal"/></span>
                                     <t t-if="goal.type_unit"><t t-esc="goal.type_unit"/></t>
-                                )
-                            </p>
+                            </t>
+                            <t t-if="goal.type_condition == 'lower'">
+                                
+                                    <t t-esc="goal.current" /> (less than 
+                                        <span t-attf-class="#{goal.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="goal.target_goal"/></span>
+                                        <t t-if="goal.type_unit"><t t-esc="goal.type_unit"/></t>
+                                    )
+                                
+                            </t>
                         </t>
-                    </t>
                     </div>
-                </li>
-                </ul>
+                    </div>
+                </div>
             </t>
             <t t-if="plan.visibility_mode == 'board'">
-                <table width="100%" border="1" t-foreach="plan.planlines" t-as="planline" class="oe_list_content">
+                <table width="100%" border="1" t-foreach="plan.planlines" t-as="planline" class="oe_goals_list">
                     <thead>
                     <tr>
                         <th colspan="4" t-attf-title="#{planline.type_description ? planline.type_description : ''}">
@@ -55,14 +54,14 @@
                     <tr t-foreach="planline.goals" t-as="goal" t-attf-class="#{goal.id == planline.own_goal_id ? 'oe_bold' : ''}">
                         <div style="background: #fff;">
                             <th class="col0"><t t-esc="goal.rank" /></th>
-                            <td class="col1"><img class="oe_user_avatar" t-attf-alt="#{goal.user_name}" t-attf-data-id="#{goal.user_id}"/></td>
-                            <td class="col2" style="width:150px;">
-                                <div class="oe_goal_progress" t-attf-style="width: #{goal.completeness}%;">
-                                    <div style="width:150px;">
+                            <td><img class="oe_user_avatar" t-attf-alt="#{goal.user_name}" t-attf-data-id="#{goal.user_id}"/></td>
+                            <td class="col1" style="width:200px;">
+                                <div class="oe_goal_outer_box" t-attf-style="width: #{goal.completeness}%;">
+                                <div class="oe_goal_inner_box">
                                     <!-- <span class="oe_goal_sparkline_piechart" t-att-data-completeness="goal.completeness"></span> -->
-                                    <t t-esc="goal.user_name"/><br/>
+                                    <t t-esc="goal.user_name"/>
                                     <span t-attf-class="#{planline.type_monetary ? 'oe_goal_field_monetary' : ''}"><t t-esc="goal.current" /></span><t t-if="planline.type_unit"> <t t-esc="planline.type_unit"/></t>
-                                    </div>
+                                </div>
                                 </div>
                             </td>
                         </div>
@@ -74,12 +73,13 @@
     </t>
 
     <t t-name="gamification.challenge_suggestions">
-        <h3>Suggested challenges</h3>
-        <div t-foreach="widget.challenge_suggestions.info" t-as="challenge" class="oe_challenge">
-            <p>
-                <strong><t t-esc="challenge.name"/></strong> <a class="oe_challenge_reply" t-attf-title="#{challenge.description.value ? challenge.description.value : ''}" t-attf-id="{challenge.id}">reply</a>
-            </p>
-        </div>
+        <h3>Suggestions</h3>
+        <em>You have been invited to the following challenges:</em>
+        <ul t-foreach="widget.challenge_suggestions.info" t-as="challenge" class="oe_challenge">
+            <li>
+                <strong><t t-esc="challenge.name"/></strong> <a class="oe_challenge_reply" t-attf-title="#{challenge.description.value ? challenge.description.value : ''}" t-attf-id="{challenge.id}">accept?</a>
+            </li>
+        </ul>
     </t>
 
 </templates>