From fbf7df5e4b9bf94df7bd210b16f8d5b566a9711d Mon Sep 17 00:00:00 2001
From: amdi-odoo <amdi@odoo.com>
Date: Thu, 14 Sep 2023 08:40:50 +0200
Subject: [PATCH] [IMP] survey: improve multiple choice checkboxes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Purpose
=======
Make it easy for users to differenciate bewteen
simple choice and multiple choice question types.

Specification
=============
Change the multiple choice question type checkboxes
icon from a circle to a square in the survey result page
and the survey template.

In the question form view, tick 2 checkboxes instead of
one for the multiple choice question type.

Task-3252870

closes odoo/odoo#129882

Signed-off-by: Stéphane Debauche (std) <std@odoo.com>
---
 .../static/src/scss/survey_templates_form.scss   | 13 +++++--------
 addons/survey/views/survey_question_views.xml    |  2 +-
 addons/survey/views/survey_templates.xml         | 16 +++++++---------
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/addons/survey/static/src/scss/survey_templates_form.scss b/addons/survey/static/src/scss/survey_templates_form.scss
index f468123419d..c7419150ee3 100644
--- a/addons/survey/static/src/scss/survey_templates_form.scss
+++ b/addons/survey/static/src/scss/survey_templates_form.scss
@@ -125,16 +125,13 @@ _::-webkit-full-page-media, _:future, :root .o_survey_wrap {
         i {
             top: 0px;
             font-size: large;
-            &.fa-check-circle {
-                display: none;
-            }
         }
 
-        &.o_survey_selected i {
+        &.o_survey_selected i.fa-circle-thin,
+        &.o_survey_selected i.fa-square-o,
+        &:not(.o_survey_selected) i.fa-check-circle,
+        &:not(.o_survey_selected) i.fa-check-square {
             display: none;
-            &.fa-check-circle {
-                display: inline;
-            }
         }
     }
 
@@ -455,7 +452,7 @@ _::-webkit-full-page-media, _:future, :root .o_survey_wrap {
             background-color: $gray-600;
             opacity: 1;
         }
-        i.fa-circle-thin {
+        i.fa-circle-thin, i.fa-square-o {
             display: none;
         }
     }
diff --git a/addons/survey/views/survey_question_views.xml b/addons/survey/views/survey_question_views.xml
index 6d1e0e8859a..7f0db485980 100644
--- a/addons/survey/views/survey_question_views.xml
+++ b/addons/survey/views/survey_question_views.xml
@@ -50,7 +50,7 @@
                                     <span>Which are yellow?</span><br/>
                                     <div class="o_preview_questions_choice mb-2"><i class="fa fa-square-o fa-lg me-2"/>answer</div>
                                     <div class="o_preview_questions_choice mb-2"><i class="fa fa-check-square-o fa-lg me-2"/>answer</div>
-                                    <div class="o_preview_questions_choice"><i class="fa fa-square-o fa-lg me-2"/>answer</div>
+                                    <div class="o_preview_questions_choice"><i class="fa fa-check-square-o fa-lg me-2"/>answer</div>
                                 </div>
                                 <!-- Multiple Lines Text Zone -->
                                 <div invisible="question_type != 'text_box'">
diff --git a/addons/survey/views/survey_templates.xml b/addons/survey/views/survey_templates.xml
index 56957489ec7..1dfcb9664ad 100644
--- a/addons/survey/views/survey_templates.xml
+++ b/addons/survey/views/survey_templates.xml
@@ -508,14 +508,12 @@
                                t-att-checked="'checked' if answer_line else None"
                                t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
                         <span class="ms-2 text-break" t-field='label.value'/>
-                        <t t-if="has_correct_answer and answer_selected">
-                            <!-- While displaying results: change icons to have a check mark for a right answer and a cross for a wrong one -->
-                            <i t-if="is_correct" class="float-end mt-1 position-relative d-inline fa fa-check-circle"/>
-                            <i t-else="" class="float-end mt-1 position-relative d-inline fa fa-times-circle"/>
-                        </t>
+                        <!-- While displaying results: change icons to have a check mark for a right answer and a cross for a wrong one -->
+                        <i t-if="has_correct_answer and answer_selected" t-attf-class="float-end mt-1 position-relative d-inline
+                            fa {{'fa-check-square' if is_correct else 'fa-times-square'}}"/>
                         <t t-else="">
-                            <i class="fa fa-check-circle float-end mt-1 position-relative"></i>
-                            <i class="fa fa-circle-thin float-end mt-1 position-relative"></i>
+                            <i class="fa fa-check-square float-end mt-1 position-relative"/>
+                            <i class="fa fa-square-o float-end mt-1 position-relative"/>
                         </t>
                         <t t-call="survey.question_suggested_value_image"/>
                     </label>
@@ -533,8 +531,8 @@
                                t-att-checked="comment_line and 'checked' or None"
                                t-att-data-selection-key="letters[item_idx] if useKeySelection else ''"/>
                         <span class="ms-2" t-out="question.comments_message or default_comments_message" />
-                        <i class="fa fa-check-circle float-end mt-1 position-relative"></i>
-                        <i class="fa fa-circle-thin float-end mt-1 position-relative"></i>
+                        <i class="fa fa-check-square float-end mt-1 position-relative"/>
+                        <i class="fa fa-square-o float-end mt-1 position-relative"/>
                     </label>
                 </div>
                 <div t-attf-class="o_survey_comment_container mt-3 py-0 px-1 #{'d-none' if not comment_line else ''}">