diff options
Diffstat (limited to 'addons')
| -rw-r--r-- | addons/website_profile/static/src/scss/website_profile.scss | 67 | ||||
| -rw-r--r-- | addons/website_profile/views/website_profile.xml | 36 |
2 files changed, 90 insertions, 13 deletions
diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss index 1a00803b1b9..e9fd045da45 100644 --- a/addons/website_profile/static/src/scss/website_profile.scss +++ b/addons/website_profile/static/src/scss/website_profile.scss @@ -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; diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml index 2a29a3a446b..b7ab4704115 100644 --- a/addons/website_profile/views/website_profile.xml +++ b/addons/website_profile/views/website_profile.xml @@ -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> |