[IMP] survey: keep navigation buttons at the same location

This commit slightly adapts the survey navigation buttons to make sure that
they are always positioned at the same spot.

Before this change, if you rapidly click the "back" button a lot of times, when
it disappears, you will misclick the "Odoo" button and land on the Odoo
website, which can be very annoying during a real test with a timer.

Now, we disable the button when it becomes non-clickable instead of removing
it, so that it always stays at the same spot.

Task-2665998

closes odoo/odoo#78513

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
Aurélien Warnon
2021-11-16 10:49:13 +00:00
parent 55cd20db47
commit 77324d5dde
2 changed files with 19 additions and 7 deletions
@@ -35,6 +35,14 @@ _::-webkit-full-page-media, _:future, :root .o_survey_wrap {
.o_survey_navigation_wrapper .o_survey_navigation_submit {
cursor: pointer;
&:disabled {
cursor: default;
opacity: 1;
i {
opacity: .3;
}
}
}
.o_survey_timer {
@@ -137,15 +137,19 @@
</template>
<template id="survey_navigation" name="Survey: Navigation">
<!-- Keep this enclosing div so that the template always returns valid HTML content, no matter the use case -->
<div class="d-inline-block">
<button t-if="can_go_back"
type="submit" class="btn p-0 shadow-none o_survey_navigation_submit" name="button_submit" value="previous" t-att-data-previous-page-id="previous_page_id">
<i class="border-left fa fa-chevron-left p-2" />
<button
t-if="survey and survey.users_can_go_back"
t-att-disabled="not can_go_back"
type="submit" class="btn border-left p-0 shadow-none o_survey_navigation_submit" name="button_submit" value="previous" t-att-data-previous-page-id="previous_page_id">
<i class="fa fa-chevron-left p-2" />
</button>
<button t-if="survey and survey.questions_layout in ['page_per_question', 'page_per_section'] and answer and answer.state != 'done' and not answer.is_session_answer"
type="submit" class="btn p-0 shadow-none o_survey_navigation_submit" t-att-value="'next' if not survey_last else 'finish'">
<i class="border-left fa fa-chevron-right p-2" />
<t t-set="can_go_forward"
t-value="survey and survey.questions_layout in ['page_per_question', 'page_per_section'] and answer and answer.state != 'done' and not answer.is_session_answer"/>
<button
t-att-disabled="not can_go_forward"
type="submit" class="btn border-left p-0 shadow-none o_survey_navigation_submit" t-att-value="'next' if not survey_last else 'finish'">
<i class="fa fa-chevron-right p-2" />
</button>
</div>
</template>