Skip to content
40 changes: 40 additions & 0 deletions my_compassion/templates/footer_links.xml
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<odoo>
<template
id="my2_compassion_footer_links"
inherit_id="theme_compassion_2025.compassion_footer_hook"
name="My Compassion Footer Links"
>
<xpath expr="//div[@id='compassion_dynamic_footer_links']" position="inside">
<t t-set="partner" t-value="request.env.user.partner_id" />
<t t-if="partner and partner.primary_segment_id.link_ids">
<section class="footer-my-compassion-links pt48">
Comment on lines +9 to +10
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe you avoid too many indents by directly injecting the t-if attribute in the section tag:

Suggested change
<t t-if="partner and partner.primary_segment_id.link_ids">
<section class="footer-my-compassion-links pt48">
<section class="footer-my-compassion-links pt48" t-if="partner and partner.primary_segment_id.link_ids">

<div class="container">
<div class="row">
<div class="col-12 d-flex flex-column justify-content-center align-items-center">
<div
id="personal-links-container"
class="w-100 d-flex flex-row flex-wrap justify-content-center"
>
<t t-foreach="partner.primary_segment_id.link_ids" t-as="segment_link">
<t
t-if="not segment_link.language_id or segment_link.language_id.code == request.env.lang or segment_link.language_id.code == 'en_US'"
>
Comment on lines +19 to +21
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This can be removed if my suggested changes are applied in the parent pull request

<a t-att-href="segment_link.url" class="text-pure-white mx-3 mb-2 mb-md-0">
<t t-esc="segment_link.label" />
</a>
</t>
</t>
</div>
</div>
</div>
</div>
<div
id="links-separator"
class="mt48 mb24 ml-auto mr-auto border-bottom border-white"
style="width: 100px;"
/>
</section>
</t>
</xpath>
</template>
</odoo>
1 change: 1 addition & 0 deletions my_compassion_segmentation/__manifest__.py
Comment thread
Danielgergely marked this conversation as resolved.
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@
],
"depends": [
"my_compassion",
"theme_compassion_2025",
"partner_segmentation",
],
"demo": [],
Expand Down
2 changes: 1 addition & 1 deletion my_compassion_segmentation/controllers/my_account.py
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@


class MyAccountControllerSurvey(CustomerPortal):
@route(["/my", "/my/home"], type="http", auth="user", website=True)
@route(["/my", "/my2", "/my/home"], type="http", auth="user", website=True)
def home(self, redirect=None, **post):
partner = request.env.user.partner_id
if not partner.has_segment:
Expand Down
146 changes: 142 additions & 4 deletions my_compassion_segmentation/templates/survey_templates.xml
Original file line number Diff line number Diff line change
@@ -1,10 +1,148 @@
<?xml version="1.0" encoding="utf-8" ?>
<odoo>
<template id="custom_survey_layout" inherit_id="survey.survey_fill_form_start">
<xpath expr="//div[@class='wrap o_survey_start']/div">
<t t-if="survey == survey.env.ref('partner_segmentation.partner_segmentation_survey')">
<a role="button" class="btn btn-light btn-lg" href="/my/children">Ask me again later</a>
<!-- Hide odoo branding -->
<template id="custom_survey_layout" inherit_id="survey.layout">
<xpath expr="//div[@t-call='web.brand_promotion_message']" position="attributes">
<attribute name="class" add="d-none" separator=" " />
</xpath>
<xpath expr="//div[hasclass('o_survey_brand_message')]" position="attributes">
<attribute name="class" add="d-none" separator=" " />
</xpath>
</template>
<!-- Add padding to the survey start page -->
<template id="custom_survey_page_fill" inherit_id="survey.survey_page_fill">
<xpath expr="//div[@class='wrap o_survey_wrap d-flex']" position="attributes">
<attribute name="class" add="p-4 p-md-5" separator=" " />
</xpath>
</template>
<!-- Apply 2025 theme to the title -->
<template id="custom_survey_fill_header" inherit_id="survey.survey_fill_header">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<template id="custom_survey_fill_header" inherit_id="survey.survey_fill_header">
<template id="custom_survey_fill_header" inherit_id="survey.survey_fill_header" website_id="my_compassion.my2_website">

<xpath expr="//h1[hasclass('o_survey_main_title')]" position="attributes">
<attribute name="class" add="d-none" separator=" " />
</xpath>
<xpath expr="//div[hasclass('col-lg-10')]" position="attributes">
<attribute name="class">col-12</attribute>
</xpath>
<xpath expr="//div[hasclass('o_survey_timer')]" position="attributes">
<attribute name="class" add="d-none" separator=" " />
</xpath>
<xpath expr="//h1[hasclass('o_survey_main_title')]" position="after">
<t t-call="theme_compassion_2025.TitleComponent">
<t t-set="title_size" t-value="'lg'" />
<t t-set="title_content" t-value="survey.title" />
<t t-set="color" t-value="'core-blue'" />
</t>
</xpath>
</template>
<template id="custom_survey_fill_form_start" inherit_id="survey.survey_fill_form_start">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would restrict to MyCompassion website to avoid theming all surveys that could be used outside of MyCompassion website.

Suggested change
<template id="custom_survey_fill_form_start" inherit_id="survey.survey_fill_form_start">
<template id="custom_survey_fill_form_start" inherit_id="survey.survey_fill_form_start" website_id="my_compassion.my2_website">

<!-- Replace buttons with 2025 theme buttons -->
<xpath expr="//button[hasclass('btn')]" position="attributes">
<attribute name="class" add="d-none" separator=" " />
</xpath>
<xpath expr="//button[hasclass('btn')]" position="after">
<div class="d-flex flex-column flex-sm-row mt-4 justify-content-around align-items-center">
<t t-call="theme_compassion_2025.ThemedButtonComponent">
<t t-set="label">Start Survey</t>
<t t-set="variant" t-value="'impact'" />
<t t-set="variation" t-value="'filled'" />
<t t-set="color" t-value="'core-blue'" />
<t t-set="text_color" t-value="'pure-white'" />
<t t-set="type" t-value="'submit'" />
</t>
<!-- Add an 'Ask me again later' button to the survey start page -->
<t t-if="survey == survey.env.ref('partner_segmentation.partner_segmentation_survey')">
<t t-call="theme_compassion_2025.ThemedButtonComponent">
<t t-set="label">Ask me again later</t>
<t t-set="variant" t-value="'impact'" />
<t t-set="variation" t-value="'filled'" />
<t t-set="color" t-value="'light-grey'" />
<t t-set="text_color" t-value="'off-black'" />
<t t-set="href" t-value="'/my2/dashboard'" />
</t>
</t>
</div>
</xpath>
<!-- Hide 'or press Enter' -->
<xpath expr="//span[hasclass('o_survey_enter')]" position="attributes">
<attribute name="class" add="d-none" separator=" " />
</xpath>
</template>
<!-- Replace 'continue' button with themed version -->
<template id="custom_survey_fill_form_in_progress" inherit_id="survey.survey_fill_form_in_progress">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<template id="custom_survey_fill_form_in_progress" inherit_id="survey.survey_fill_form_in_progress">
<template id="custom_survey_fill_form_in_progress" inherit_id="survey.survey_fill_form_in_progress" website_id="my_compassion.my2_website">

<xpath expr="(//button[@type='submit'])[3]" position="attributes">
<attribute name="class" add="d-none" separator=" " />
Comment thread
Danielgergely marked this conversation as resolved.
</xpath>
<!-- Hide 'or press Enter' -->
<xpath
expr="(//button[@type='submit'])[3]/following-sibling::span[hasclass('text-muted')]"
position="attributes"
>
<attribute name="class">d-none</attribute>
</xpath>
<xpath expr="(//button[@type='submit'])[3]" position="after">
<div class="d-flex justify-content-end">
<t t-call="theme_compassion_2025.ThemedButtonComponent">
<t
t-set="label"
t-value="'Submit' if survey.questions_layout == 'one_page' or survey_last else 'Continue'"
/>
<t t-set="variant" t-value="'impact'" />
<t t-set="variation" t-value="'filled'" />
<t t-set="color" t-value="'core-blue'" />
<t t-set="text_color" t-value="'pure-white'" />
<t t-set="type" t-value="'submit'" />
<t
t-set="value"
t-value="'finish' if survey.questions_layout == 'one_page' or survey_last else 'next'"
/>
</t>
</div>
</xpath>
</template>
<!-- Thank you page -->
<template id="custom_survey_fill_form_done" inherit_id="survey.survey_fill_form_done">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<template id="custom_survey_fill_form_done" inherit_id="survey.survey_fill_form_done">
<template id="custom_survey_fill_form_done" inherit_id="survey.survey_fill_form_done" website_id="my_compassion.my2_website">

<xpath expr="//div[hasclass('o_survey_finished')]" position="attributes">
<attribute name="class" add="d-none" separator=" " />
</xpath>
<xpath expr="//div[hasclass('o_survey_finished')]" position="after">
<!-- Extract href and label from survey.description_done if the exist -->
<t
t-set="extracted_href"
t-value="survey.description_done.split('href=\&quot;')[1].split('\&quot;')[0] if 'href=\&quot;' in survey.description_done else '/my/home'"
/>
<t
t-set="extracted_label"
t-value="survey.description_done.split('&lt;/a')[0].split('&gt;')[-1] if survey.description_done and '&lt;/a' in survey.description_done else 'Continue'"
/>
<t t-call="theme_compassion_2025.TitleComponent">
<t t-set="title_content" t-value="'Thank you!'" />
<t t-set="color" t-value="'core-blue'" />
<t t-set="show_underline" t-value="True" />
<t t-set="underline_color" t-value="'low-yellow'" />
<t t-set="description" t-value="False" />
<div class="title-description text-low-black done-description">
<t t-raw="survey.description_done" />
</div>
<div class="text-center mt-5">
<!-- Add styled continue button -->
<t t-call="theme_compassion_2025.ThemedButtonComponent">
<t t-set="label" t-value="extracted_label" />
<t t-set="href" t-value="extracted_href" />
<t t-set="variant" t-value="'impact'" />
<t t-set="variation" t-value="'filled'" />
</t>
</div>
</t>
</xpath>
</template>
<!-- Overwrite odoo progres bar -->
<template id="custom_survey_progression" inherit_id="survey.survey_progression">
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<template id="custom_survey_progression" inherit_id="survey.survey_progression">
<template id="custom_survey_progression" inherit_id="survey.survey_progression" website_id="my_compassion.my2_website">

<xpath expr="//div[hasclass('o_survey_progress')]" position="attributes">
<attribute name="class" add="progress-bar-container native-width" separator=" " />
</xpath>
<xpath expr="//div[hasclass('progress-bar')]" position="attributes">
<attribute name="class" remove="bg-primary" add="is-flowing density-low" separator=" " />
<attribute name="t-att-style">'width: ' + str(percentage) + '%; --flow-speed: 10s;'</attribute>
</xpath>
</template>
</odoo>
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,22 @@ $num-colors: length($color-pattern);
background-position: -200% 0%;
}
100% {
background-position: 0% 0%;
background-position: 0 0;
}
}

/* For native-width odoo progress bars */
.o_survey_progress_wrapper {
min-width: calc(100vw - 3rem)!important;
Comment thread
Danielgergely marked this conversation as resolved.
}
.progress-bar-container.native-width {
height: 5px;

.progress-bar.is-flowing {
/* Use 100vw to anchor the gradient to the screen so it doesn't compress */
background-size: 100vw 100%;
transition: width 0.5s ease-out;

&.density-low { background-image: create-gradient(0); }
}
}
106 changes: 106 additions & 0 deletions theme_compassion_2025/static/src/scss/components/_survey_form.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
/* ============================================================================
MyCompassion 2025 Theme - Survey Overrides
============================================================================
This file overrides the default Odoo 14 Survey module styling to match
the MyCompassion 2.0 design system.
============================================================================ */

/* Transforms standard boxed inputs into minimal "bottom-border only" inputs */
.o_survey_form .o_survey_question_text_box, .o_survey_form .o_survey_question_date, .o_survey_form .o_survey_question_datetime, .o_survey_form .o_survey_question_numerical_box, .o_survey_print .o_survey_question_text_box, .o_survey_print .o_survey_question_date, .o_survey_print .o_survey_question_datetime, .o_survey_print .o_survey_question_numerical_box, .o_survey_session_manage .o_survey_question_text_box, .o_survey_session_manage .o_survey_question_date, .o_survey_session_manage .o_survey_question_datetime, .o_survey_session_manage .o_survey_question_numerical_box, .o_survey_quick_access .o_survey_question_text_box, .o_survey_quick_access .o_survey_question_date, .o_survey_quick_access .o_survey_question_datetime, .o_survey_quick_access .o_survey_question_numerical_box {
border-bottom: 1px solid var(--mid-blue)!important;
Comment thread
Danielgergely marked this conversation as resolved.
}

/* Sets the default text color for standard survey choice options. */
.o_survey_form .o_survey_choice_btn, .o_survey_print .o_survey_choice_btn, .o_survey_session_manage .o_survey_choice_btn, .o_survey_quick_access .o_survey_choice_btn {
color: var(--mid-blue)!important;
Comment thread
Danielgergely marked this conversation as resolved.
}

/* Applies the primary theme color to the top row and left column headers. */
.o_survey_form .o_survey_question_matrix th, .o_survey_session_manage .o_survey_question_matrix th {
background-color: var(--mid-blue)!important;
}
Comment thread
Danielgergely marked this conversation as resolved.

/* Sets the default background color for the clickable matrix cells. */
.o_survey_form .o_survey_question_matrix td, .o_survey_session_manage .o_survey_question_matrix td {
background-color: var(--high-blue)!important;
Comment thread
Danielgergely marked this conversation as resolved.
}

/* Overrides table row hover effect. */
.o_survey_form .o_survey_question_matrix td:hover {
background-color: var(--high-blue)!important;
Comment thread
Danielgergely marked this conversation as resolved.
}

/* Forces the active/selected radio icon to use the theme's low-blue. */
.o_survey_matrix_btn.text-primary {
color: var(--low-blue)!important;
Comment thread
Danielgergely marked this conversation as resolved.
}

/* Centers the radio icons within the matrix cells and adjusts the checkmark position. */
td.o_survey_matrix_btn {
vertical-align: middle !important;
text-align: center !important;
padding: 0 !important;
Comment thread
Danielgergely marked this conversation as resolved.

i {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top: 0;
left: 0;
transform: none;
}

.fa-check-circle {
margin-top: -1.2em;
}
}

/* Transforms the standard survey choice buttons into pill-shaped options with centered text. */
label.o_survey_choice_btn {
border-radius: 25px !important;
padding: 10px 15px !important;
background-color: var(--light-grey) !important;
box-shadow: #000000 0 0 0 0 !important;
Comment thread
Danielgergely marked this conversation as resolved.
display: flex;
justify-content: center;
align-items: center;

/* Hides the Odoo selection key letters (A, B, C...) */
& div {
display: none !important;
}
Comment thread
Danielgergely marked this conversation as resolved.

/* Hides the FontAwesome radio/checkbox icons */
& i {
display: none !important;
}
Comment thread
Danielgergely marked this conversation as resolved.

/* Centers and styles the actual answer text */
& span {
color: var(--off-black) !important;
display: flex;
Comment thread
Danielgergely marked this conversation as resolved.
text-align: center;
}
}

/* Adds a subtle visual highlight when a user mouses over an unselected option. */
label.o_survey_choice_btn:hover {
background-color: var(--high-blue) !important;
Comment thread
Danielgergely marked this conversation as resolved.
}

/* Highlights the chosen answer(s) with a solid theme color and white text. */
label.o_survey_choice_btn.o_survey_selected {
background-color: var(--mid-blue) !important;
Comment thread
Danielgergely marked this conversation as resolved.

& span {
color: var(--pure-white) !important;
}
}

/* Hide default done button */
.done-description {
a.btn, .mt-4 {
display: none!important;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,8 @@
for security).
- data_toggle (char, optional): data-toggle attribute to be added to the button or link element, e.g., `data-toggle="dropdown"`
- add_class (string, optional): An optional class which will be added to the button
- type (string, optional): The type attribute for the button element (e.g., 'submit', 'button', 'reset').
- value (string, optional): The value attribute for the button element.
-->
<odoo>
<template id="ThemedButtonComponent_Content" name="Button Content">
Expand Down Expand Up @@ -87,7 +89,7 @@
<a
t-att-href="href"
t-att-id="id"
t-attf-class="btn #{btn_class} btn--radius-#{radius} #{style_class} text-#{text_color} #{add_class or ''}"
t-attf-class="btn #{btn_class} btn--radius-#{radius} #{style_class} text-#{text_color} #{add_class or ''} m-1"
t-att-data-custom="data_custom"
t-att-target="target"
t-att-rel="computed_rel or None"
Expand All @@ -98,11 +100,13 @@
</t>
<t t-else="">
<button
t-att-type="type or None"
t-att-id="id"
t-attf-class="btn #{btn_class} btn--radius-#{radius} #{style_class} text-#{text_color} #{add_class or ''}"
t-attf-class="btn #{btn_class} btn--radius-#{radius} #{style_class} text-#{text_color} #{add_class or ''} m-1"
t-att-data-custom="data_custom"
t-att-data-mode="mode"
t-att-data-toggle="data_toggle"
t-att-value="value or ''"
>
<t t-call="theme_compassion_2025.ThemedButtonComponent_Content" />
</button>
Expand Down
5 changes: 5 additions & 0 deletions theme_compassion_2025/views/assets.xml
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,11 @@
type="text/scss"
href="/theme_compassion_2025/static/src/scss/components/_progress_bar.scss"
/>
<link
rel="stylesheet"
type="text/scss"
href="/theme_compassion_2025/static/src/scss/components/_survey_form.scss"
/>
<script type="text/javascript" src="/theme_compassion_2025/static/src/js/_password.js" />
<script type="text/javascript" src="/theme_compassion_2025/static/src/js/_range_input.js" />
<script type="text/javascript" src="/theme_compassion_2025/static/src/js/_event_banner.js" />
Expand Down
Loading