From 4363598582268b40a8dd24d4a1cab2e2a58c85c1 Mon Sep 17 00:00:00 2001
From: sri-odoo <sri@odoo.com>
Date: Mon, 25 Feb 2019 13:10:18 +0000
Subject: [PATCH] [REF] website_profile: improve rank progress template
Purpose is to make it better looking and responsive.
Commit linked to task ID 1941250 and PR #31453
---
.../static/src/scss/website_profile.scss | 73 ++++++-------------
.../website_profile/views/website_profile.xml | 46 ++++++------
2 files changed, 45 insertions(+), 74 deletions(-)
diff --git a/addons/website_profile/static/src/scss/website_profile.scss b/addons/website_profile/static/src/scss/website_profile.scss
index e9fd045da456..bafe42a03cde 100644
--- a/addons/website_profile/static/src/scss/website_profile.scss
+++ b/addons/website_profile/static/src/scss/website_profile.scss
@@ -124,64 +124,37 @@ $bronze: #eea91e;
.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;
+ svg.o_pc_circular_chart {
+ display: block;
+ max-width: 100%;
- .o_progress_circle_container, .o_pc, .o_pc div {
- @include size($circle-size);
- }
+ .o_pc_circle_bg, .o_pc_circle {
+ fill: none;
+ stroke-width: 1.5px;
+ stroke-linecap: round;
+ }
- .o_pc_overlay, .o_pc, .o_pc div {
- border-radius: 50%;
- }
+ .o_pc_circle_bg {
+ stroke: rgba(black, 0.1);
+ }
- .o_progress_circle_container {
- position: relative;
- margin: 0 auto;
- background-color: inherit;
+ .o_pc_circle {
+ animation: progress 1s ease-out forwards;
+ }
+
+ #gradient {
+ --o-pc-color-stop-1: lighten(theme-color('primary'), 10%);
+ --o-pc-color-stop-2: theme-color('primary');
+ }
}
.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;
+ @include o-position-absolute(0,0,0,0);
}
- .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;
- }
+ @keyframes progress {
+ 0% {
+ stroke-dasharray: 0 100;
}
}
}
diff --git a/addons/website_profile/views/website_profile.xml b/addons/website_profile/views/website_profile.xml
index b7ab47041150..6c5a816402e0 100644
--- a/addons/website_profile/views/website_profile.xml
+++ b/addons/website_profile/views/website_profile.xml
@@ -185,7 +185,9 @@
<th><span class="font-weight-bold text-muted">Current <a href="/profile/ranks">Rank</a> : </span></th>
<th><span class="float-right" t-field="user.rank_id"/></th>
</tr></tbody></table>
- <t t-call="website_profile.profile_next_rank_card"></t>
+ <t t-call="website_profile.profile_next_rank_card">
+ <t t-set="img_max_width">40%</t>
+ </t>
<hr/>
</div>
</div>
@@ -252,29 +254,25 @@
</template>
<template id="profile_next_rank_card" name="Profile Next Rank Card">
- <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 class="o_wprofile_progress_circle">
+ <svg viewBox="0 0 36 36" class="o_pc_circular_chart">
+ <t t-set="user_points" t-value="int(100*(user.karma - user.rank_id.karma_min)/(user.next_rank_id.karma_min - user.rank_id.karma_min))"/>
+ <path class="o_pc_circle_bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
+ <path class="o_pc_circle" t-attf-stroke-dasharray="#{user_points}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" stroke="url(#gradient)" />
+ <linearGradient id="gradient">
+ <stop offset="0%" stop-color="var(--o-pc-color-stop-1)"/>
+ <stop offset="100%" stop-color="var(--o-pc-color-stop-2)"/>
+ </linearGradient>
+ </svg>
+ <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 '50%;')"/>
+ <h4 class=" 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>
</template>
--
GitLab