[IMP] better design
bzr revid: mat@openerp.com-20130425085217-bmt8tsdbtrfn7j7d
This commit is contained in:
Martin Trigaux
parent
4bcaa718bd
commit
5794e60f14
|
|
@ -53,7 +53,7 @@ Both goals and badges are flexibles and can be adapted to a large range of modul
|
|||
'installable': True,
|
||||
'application': True,
|
||||
'auto_install': True,
|
||||
'css': ['static/src/css/goal.css'],
|
||||
'css': ['static/src/css/gamification.css'],
|
||||
'js': [
|
||||
'static/src/js/gamification.js',
|
||||
'static/src/js/justgage.js',
|
||||
|
|
|
|||
|
|
@ -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 .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;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
z-index: -1;
|
||||
top: 0; left: 0;
|
||||
}
|
||||
.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;
|
||||
/*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,
|
||||
|
|
@ -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">&</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">&</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue