[IMP] better design

bzr revid: mat@openerp.com-20130425085217-bmt8tsdbtrfn7j7d

2 files changed, 108 insertions, 60 deletions

diff --git a/addons/gamification/static/src/css/goal.css b/addons/gamification/static/src/css/gamification.css
index 1d9aee31500..c5c5a3be6dd 100644
--- a/addons/gamification/static/src/css/goal.css
+++ b/addons/gamification/static/src/css/gamification.css
@@ -80,49 +80,82 @@
     text-transform: capitalize;
     line-height: 1em;
 }
-
-.openerp .oe_mail_wall_aside .oe_gamification_goal .oe_goal_reached {
-    text-decoration: line-through;
-    color: rgb(138, 137, 137);
+.openerp .oe_mail_wall_aside .oe_goal {
+    width: 95%;
 }
+.openerp .oe_mail_wall_aside ul.oe_goals_list {
 
+}
 .openerp .oe_mail_wall_aside .oe_goals_list {
-    list-style-type: none; 
-    padding-left: 15px;
+    list-style-type: none;
+    /*list-style-type: disc;*/
+    padding-left: 0;
+    /*margin-left: 15px;*/
+    margin-top: 0;
     margin-bottom: 15px;
-    width: 200px;
 }
+.openerp .oe_mail_wall_aside table.oe_goals_list {
+    /*width: 95%;*/
+    border: 1px dotted rgb(221, 221, 221);
+    border-color: rgba(133, 133, 133, 0.3);
+}
+.openerp .oe_mail_wall_aside .oe_goals_list > li::before {
+    content: "\0BB \020";
+    width: 15px;
+}
+.openerp .oe_mail_wall_aside .oe_goals_list > li.oe_goal_reached::before {
+    color: rgb(27, 70, 7);
+    content: "✓";
+    font-size: 65%; /* reduce font to have the same size as "\0BB \020" */
+}
+.openerp .oe_mail_wall_aside .oe_gamification_goal .oe_goal_reached .oe_goal_inner_box {
+    text-decoration: line-through;
+}
+
 .openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_outer_box {
-    background: rgb(213, 213, 213);
-    min-height: 32px;
+    display: inline-block;
+    position: relative;
+    height: 100%;
+    min-height: 12px;
+    width: 94%;
+    z-index: 0;
+    vertical-align: top;
 }
-.openerp .oe_mail_wall_aside .oe_goals_list .oe_goal_inner_box {
+.openerp .oe_mail_wall .oe_mail_wall_aside li .oe_goal_outer_box {
+    border: 1px dotted rgb(221, 221, 221);
+    border-color: rgba(133, 133, 133, 0.3);
+}
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal_progress {
+    background: rgb(183, 231, 179);
+    background: rgba(183, 231, 179, 0.5);
     display: inline-block;
-    width: 200px;
-    min-height: 32px;
-    vertical-align: middle;
-    border: solid 1px white;
+    position: absolute;
+    height: 100%;
+    width: 0;
+    z-index: -1;
+    top: 0; left: 0;
 }
-.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 {
+    display: inline-block;
+    /*position: absolute;*/
+    /*width: 200px;*/
+    /*min-height: 32px;*/
+    /*vertical-align: middle;*/
+    z-index: 2;
+    /*top: 0; left: 0;*/
+    height: 100%;
 }
 .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.oe_goals_list {
-    margin: 10px 0;
-    border: solid 1px white;
-}
 .openerp .oe_mail_wall .oe_mail_wall_aside .oe_goals_list thead {
     font-weight: normal;
-}
-.oe_mail_wall_aside .oe_goals_list tbody tr:nth-child(even) {
-    background-color: #fff;
+    background: none;
 }
 .openerp .oe_mail_wall_aside td,
 .openerp .oe_mail_wall_aside th {
     vertical-align: middle;
-    border: none;
+    /*border: none;*/
 }
 .openerp .oe_mail_wall_aside .oe_goals_list thead th {
     font-weight: normal;
@@ -131,6 +164,9 @@
 .openerp .oe_mail_wall_aside .oe_goals_list tbody tr {
     height: 32px;
 }
+.oe_mail_wall_aside .oe_goals_list tbody tr:nth-child(even) {
+    background-color: #fff;
+}
 .openerp .oe_mail_wall_aside .oe_goals_list tbody th {
     padding-left: 5px;
     height: 32px;
@@ -138,19 +174,23 @@
 .openerp .oe_mail_wall_aside table.oe_goals_list .col0 {
     font-size: 160%;
     font-weight: bold;
-    width: 24px;
 }
 .openerp .oe_mail_wall_aside table.oe_goals_list .col1 {
+    padding: 0 5px;
+}
+.openerp .oe_mail_wall_aside table.oe_goals_list .col2 {
     width: 200px;
 }
 .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 .oe_update_plan.oe_e,
+.openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal .oe_goal_action.oe_e {
     visibility: hidden;
     font-size: 25px;
+    float: right;
+    position: relative;
 }
 .openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal div:hover > .oe_update_plan,
 .openerp .oe_mail_wall .oe_mail_wall_aside .oe_goal div:hover > .oe_goal_action,
diff --git a/addons/gamification/static/src/xml/gamification.xml b/addons/gamification/static/src/xml/gamification.xml
index 6d6edfbd49a..9e35b2d51bf 100644
--- a/addons/gamification/static/src/xml/gamification.xml
+++ b/addons/gamification/static/src/xml/gamification.xml
@@ -4,7 +4,6 @@
         <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">
             <div>
                 <h4 style="display:inline-block;"><t t-esc="plan.name" /></h4>
@@ -13,31 +12,39 @@
 
             <t t-if="plan.visibility_mode == 'progressbar'">
 
-                <div class="oe_goals_list">
-                    <div t-attf-class="#{goal.type_display == 'progress' ? 'oe_goal_outer_box' : ''}" t-foreach="plan.goals" t-as="goal" t-attf-style="#{goal.type_display == 'progress' ? 'width: '+goal.completeness+'%;' : ''}">
-                    <div class="oe_goal_inner_box">
-                        <strong t-attf-class="#{goal.state == 'reached' ? 'oe_goal_reached' : ''}" 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><br/>
-
-                        <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>
-                            </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>
-                    </div>
-                    </div>
-                </div>
+                <ul class="oe_goals_list">
+                    <li t-foreach="plan.goals" t-as="goal" t-attf-class="#{goal.state == 'reached' ? 'oe_goal_reached' : ''}">
+                        <div class="oe_goal_outer_box">
+                            <div class="oe_goal_progress" t-attf-style="#{goal.type_display == 'progress' ? 'width: '+goal.completeness+'%;' : 'width:0;'}"></div>
+                            <div class="oe_goal_inner_box">
+                                <t t-if="goal.computation_mode != 'manually' and !goal.type_action">
+                                    <span t-att-title="goal.type_description"><t t-esc="goal.type_name" /></span>
+                                </t>
+                                <t t-if="goal.type_action">
+                                    <span t-att-title="goal.type_description"><a class="oe_goal_action" t-att-id="goal.id"><t t-esc="goal.type_name" /></a></span>
+                                </t>
+                                <t t-if="goal.computation_mode == 'manually' and !goal.type_action">
+                                    <span t-att-title="goal.type_description"><t t-esc="goal.type_name" /></span>
+                                    <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'">
+                                            <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>
+                                    </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>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
             </t>
             <t t-if="plan.visibility_mode == 'board'">
                 <table t-foreach="plan.planlines" t-as="planline" class="oe_goals_list">
@@ -63,13 +70,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><img class="oe_user_avatar" t-attf-alt="#{goal.user_name}" t-attf-data-id="#{goal.user_id}"/></td>
-                            <td class="col1">
-                                <div class="oe_goal_outer_box" t-attf-style="width: #{goal.completeness}%;">
-                                <div class="oe_goal_inner_box">
-                                    <t t-esc="goal.user_name"/><br/>
-                                    <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>
+                            <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">
+                                <div class="oe_goal_outer_box">
+                                    <div class="oe_goal_progress" t-attf-style="#{planline.type_display == 'progress' ? 'width: '+goal.completeness+'%;' : 'width:0;'}"></div>
+                                    <div class="oe_goal_inner_box">
+                                        <t t-esc="goal.user_name"/><br/>
+                                        <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>
                             </td>
                         </div>