diff options
| author | Patrick Hoste <pko@odoo.com> | 2019-07-09 13:27:55 +0000 |
|---|---|---|
| committer | Aurélien Warnon <awa@odoo.com> | 2019-11-06 13:01:17 +0000 |
| commit | c957949b8c47b3cc6c0ca556fbe9303ce965fc92 (patch) | |
| tree | f342121b118dbdfc5d879890dcd9e147273863ed /addons/website_slides/static/src/xml | |
| parent | 3773a0c552e1e671fa5dbcfa23cac82e12d24f67 (diff) | |
[IMP] website_slides: add an animation when user levels up
PURPOSE
If a user levels up after passing a quiz, we want to clearly show him in the success modal that he
actually passed a level instead of just showing his new rank and xp gauge.
This commit introduces an animation with the progress bar when the user is levelling up.
After reaching the upper bound of the next level:
- The progress bar goes back to 0 ;
- The lower/upper bounds change to reflect the new reached level bounds ;
- The message "Amazing!" becomes "Level Up!" ;
- The motivational phrase changes with a fade out/fade in animation.
LINKS
PR : #39870
Task ID : 2032649
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
Co-authored-by: Aurélien Warnon <awa@odoo.com>
Diffstat (limited to 'addons/website_slides/static/src/xml')
| -rw-r--r-- | addons/website_slides/static/src/xml/slide_quiz.xml | 43 |
1 files changed, 29 insertions, 14 deletions
diff --git a/addons/website_slides/static/src/xml/slide_quiz.xml b/addons/website_slides/static/src/xml/slide_quiz.xml index 455e9019c19..81cb59e16bb 100644 --- a/addons/website_slides/static/src/xml/slide_quiz.xml +++ b/addons/website_slides/static/src/xml/slide_quiz.xml @@ -96,24 +96,39 @@ </div> <div class="d-flex flex-column flex-grow-1 justify-content-between pl-md-5 p-3 overflow-auto"> <div> - <h1 class="mt-3 display-4 font-weight-bold">Amazing!</h1> + <h1 class="o_wslides_quiz_modal_title mt-3 display-4 font-weight-bold">Amazing!</h1> <div class="pb-3"> - <h4 class="pb-2 d-flex">You gained <span class="badge badge-pill badge-success text-white font-weight-bold ml-2 mr-1"><t t-esc="widget.quiz.quizKarmaWon"/> XP</span> !</h4> - <div class="progress" style="height: 8px"> - <div class="progress-bar" role="progressbar" t-att-aria-valuenow="widget.quiz.rankProgress.progress" aria-valuemin="0" aria-valuemax="100" - t-attf-style="width: #{widget.quiz.rankProgress.progress}%"/> + <h4 class="o_wslides_quiz_modal_xp_gained pb-2 d-flex fade">You gained <span class="badge badge-pill badge-success text-white font-weight-bold ml-2 mr-1"><t t-esc="widget.quiz.quizKarmaWon"/> XP</span> !</h4> + <div class="mt-5 mb-4"> + <div class="progress"> + <div class="progress-bar" role="progressbar" t-att-aria-valuenow="widget.quiz.rankProgress.previous_rank.progress" aria-valuemin="0" aria-valuemax="100" + t-attf-style="width: #{widget.quiz.rankProgress.previous_rank.progress}%"/> + <div class="progress-bar-tooltip" data-toggle="tooltip" data-placement="top" t-att-title="widget.quiz.rankProgress.new_rank.karma" /> + </div> + <small class="float-left text-primary font-weight-bold o_wslides_quiz_modal_rank_lower_bound"> + <t t-esc="widget.quiz.rankProgress.previous_rank.lower_bound"/> + </small> + <small t-if="widget.quiz.rankProgress.previous_rank.upper_bound" class="float-right font-weight-bold o_wslides_quiz_modal_rank_upper_bound"> + <t t-esc="widget.quiz.rankProgress.previous_rank.upper_bound"/> + </small> </div> - <small t-if="widget.quiz.rankProgress.lowerBound" class="float-left text-primary font-weight-bold"><t t-esc="widget.quiz.rankProgress.lowerBound"/></small> - <small t-if="widget.quiz.rankProgress.upperBound" class="float-right font-weight-bold"><t t-esc="widget.quiz.rankProgress.upperBound"/></small> </div> - <div class="pb-3" t-raw="widget.quiz.rankProgress.motivational"/> + <div class="pb-3 o_wslides_quiz_modal_rank_motivational"> + <t t-set="showLastRankDescription" t-value="widget.quiz.rankProgress.last_rank && !widget.quiz.rankProgress.level_up" /> + <t t-raw="showLastRankDescription ? widget.quiz.rankProgress.description : widget.quiz.rankProgress.previous_rank.motivational" /> + </div> + </div> + <div class="o_wslides_quiz_modal_dismiss align-self-end d-none"> + <t t-if="widget.quiz.rankProgress.level_up"> + <a type="button" target="_blank" t-attf-href="/profile/user/#{widget.userId}" class="btn btn-light border">Check Profile</a> + </t> + <t t-if="widget.slide.hasNext"> + <button type="button" class="btn btn-light border o_wslides_quiz_modal_btn">Next <i class="fa fa-chevron-right"/></button> + </t> + <t t-else=""> + <a type="button" href="/slides" class="btn btn-light border">End course</a> + </t> </div> - <t t-if="widget.slide.hasNext"> - <button type="button" class="btn btn-light border o_wslides_quiz_btn align-self-end">Next <i class="fa fa-chevron-right"/></button> - </t> - <t t-else=""> - <a type="button" href="/slides" class="btn btn-light border align-self-end">End course</a> - </t> </div> </div> </div> |