[REF] website_profile: add circular rank progress

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.

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>