pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] website_profile: add circular rank progress

Browse Source 
Purpose of this commit is to add a circular progress around the rank of
a user when seing its profile. It allows to see at a glance advance for
next karma rank.

Commit linked to task ID 1941250 and PR #31317.
This commit is contained in:
sri-odoo
2019-02-21 16:37:58 +00:00
committed by Thibault Delavallée
parent 45bb68db0a
commit 920a48b32f
2 changed files with 90 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_profile/static/src/scss/website_profile.scss
+67
View File
@@ -120,6 +120,73 @@ $bronze: #eea91e;
}
}
/// Progress Circle
.o_wprofile_progress_circle {
position: relative;
$circle-size: 220px;
$circle-background: rgba(black, 0.1);
$circle-color: theme-color('primary');
$inset-size: $circle-size - 20;
$transition-length: 1s;
.o_progress_circle_container, .o_pc, .o_pc div {
@include size($circle-size);
}
.o_pc_overlay, .o_pc, .o_pc div {
border-radius: 50%;
}
.o_progress_circle_container {
position: relative;
margin: 0 auto;
background-color: inherit;
}
.o_pc_overlay {
$tmp-gap: ($circle-size - $inset-size)/2;
@include o-position-absolute($tmp-gap, $left: $tmp-gap);
@include size($inset-size);
background-color: inherit;
}
.o_pc {
background-color: $circle-background;
div {
position: absolute;
-webkit-backface-visibility: hidden;
transition: transform $transition-length;
&.o_pc_slice {
clip: rect(0px, $circle-size, $circle-size, $circle-size/2);
.o_pc_fill {
clip: rect(0px, $circle-size/2, $circle-size, 0px);
background-color: $circle-color;
}
}
}
$i: 0;
$increment: 180deg / 100;
@while $i <= 100 {
&[data-progress='#{$i}'] {
.o_pc_slice.full, .o_pc_fill {
transform: rotate($increment * $i);
}
.o_pc_fill.o_pc_bar {
transform: rotate($increment * $i * 2);
}
$i: $i + 1;
}
}
}
}
.o_wprofile_next_rank_card {
div {
text-align: center;
addons/website_profile/views/website_profile.xml
+23 -13
View File
@@ -252,19 +252,29 @@
</template>
<template id="profile_next_rank_card" name="Profile Next Rank Card">
<div class="card-body o_wprofile_next_rank_card mt-2 pt-2">
<div><img class="o_wprofile_img_medium" t-attf-src="/web/image/gamification.karma.rank/#{user.next_rank_id.id}/image_medium"/></div>
<div><span class="text-center font-weight-bold">"<span t-field="user.next_rank_id.name"/>"</span></div>
<div><span class="text-center"><span class="font-weight-bold text-primary" t-field="user.karma"/>/<span class="font-weight-bold" t-field="user.next_rank_id.karma_min"/> xp</span></div>
<div class="progress o_wprofile_next_rank_progress">
<t t-if="user.next_rank_id.karma_min - user.rank_id.karma_min > 0">
<div class="progress-bar o_wprofile_next_rank_progress_bar" style="background-color: #00A09D !important"
t-att-style="'width: '+ str(100*(user.karma - user.rank_id.karma_min)/(user.next_rank_id.karma_min - user.rank_id.karma_min))+'%'"></div>
</t>
<t t-else="">
<div class="progress-bar o_wprofile_next_rank_progress_bar" style="background-color: #00A09D !important"
t-att-style="'width: 0%'"></div>
</t>
<div t-attf-class="o_wprofile_progress_circle #{bg_class if bg_class else ''}">
<div class="o_progress_circle_container">
<div class="o_pc" t-att-data-progress="int(100*(user.karma - user.rank_id.karma_min)/(user.next_rank_id.karma_min - user.rank_id.karma_min))" >
<div class="o_pc_circle">
<div class="o_pc_slice full">
<div class="o_pc_fill"/>
</div>
<div class="o_pc_slice">
<div class="o_pc_fill full"/>
<div class="o_pc_fill o_pc_bar"/>
</div>
</div>
</div>
<div class="o_pc_overlay d-flex flex-column align-items-center justify-content-center">
<img class="img-fluid"
t-attf-src="/web/image/gamification.karma.rank/#{user.next_rank_id.id}/image_medium"
t-att-alt="user.next_rank_id.name + ' badge'"
t-att-style="'max-width: ' + (img_max_width if img_max_width else '60%;')"/>
<h4 class="mt-2 mb-0">"<span t-field="user.next_rank_id.name"/>"</h4>
<small>
<span class="font-weight-bold text-primary" t-field="user.karma"/>/<span class="font-weight-bold" t-field="user.next_rank_id.karma_min"/> xp
</small>
</div>
</div>
</div>
</template>