pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] event: redesign badges with multiple formats

Browse Source 
Before, event badges were an a4 page divided in 4
quarters, meant to be foldable into a single badge.
It contained folding instructions, event instructions
and was white mostly everywhere.

We want to introduce some customization to allow
different colors between ticket types and a background
image.

Therefore, we introduce 3 different formats to print badges
(also sent to attendees through event communication)
- a4 foldable (french fold) (~ previous one but redesigned)
- a6
- a4 4 per page

The templates are intensively redesigned to a new style.
New templates are introduced to match new formats.
Example tickets are still managed, printing an appropriate
example ticket according to the event format.
Printing several event example tickets will still use each
event format appropriately

Models:

- event.event receives a selection field badge_format
and an image field badge_image. This will be printed
on the background of badge cards.

- event.event.ticket receives a color char field. It
can be picked from the event form view with a color picker,
and will be the backgroud of a band on the bottom of badge cards.

Renaming:

Scss file, records and templates are renamed from "_foldable_badge"
to "_badge", as now badges are not always foldable. Namespaces
of selectors follow the same logic. We still have specific
styling for the foldable version so there are still selectors
using a 'foldable' name.

Task-3473293

ENT PR: odoo/enterprise#46163
UPG PR: odoo/upgrade#5126

closes odoo/odoo#132855

Signed-off-by: Stéphane Debauche (std) <std@odoo.com>
This commit is contained in:
Noe Antoine
2023-09-27 14:56:56 +00:00
parent 24ee5de588
commit 1da6cbc4c8
15 changed files with 189 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/event/__manifest__.py
+1 -1
View File
@@ -57,7 +57,7 @@ Key Features
'event/static/src/js/tours/**/*',
],
'web.report_assets_common': [
'/event/static/src/scss/event_foldable_badge_report.scss',
'/event/static/src/scss/event_badge_report.scss',
'/event/static/src/scss/event_full_page_ticket_report.scss',
'/event/static/src/scss/event_full_page_ticket_responsive_html_report.scss',
],
addons/event/controllers/main.py
+1 -1
View File
@@ -65,7 +65,7 @@ class EventController(Controller):
return request.make_response(html)
pdf = request.env['ir.actions.report'].sudo()._render_qweb_pdf(
'event.action_report_event_registration_foldable_badge' if badge_mode else
'event.action_report_event_registration_badge' if badge_mode else
'event.action_report_event_registration_full_page_ticket',
event_registrations_sudo.ids,
)[0]
addons/event/data/mail_template_data.xml
+3 -1
View File
@@ -97,6 +97,7 @@
<img src="/web_editor/font_to_img/61555/rgb(81,81,102)/34" style="padding:4px;max-width:inherit;" height="34" alt=""/>
</td>
<td style="padding: 0px 10px 0px 10px;width:50%;line-height:20px;vertical-align:top;">
<div><t t-out="object.event_id.name or ''">OpenWood Collection Online Reveal</t></div>
<div><strong>From</strong> <t t-out="object.event_id.date_begin_located or ''">May 4, 2021, 7:00:00 AM</t></div>
<div><strong>To</strong> <t t-out="object.event_id.date_end_located or ''">May 6, 2021, 5:00:00 PM</t></div>
<div style="font-size:12px;color:#9e9e9e"><i>(<t t-out="object.event_id.date_tz or ''">Europe/Brussels</t>)</i></div>
@@ -228,7 +229,7 @@
</td></tr>
</table>
</field>
<field name="report_template_ids" eval="[(4, ref('event.action_report_event_registration_foldable_badge'))]"/>
<field name="report_template_ids" eval="[(4, ref('event.action_report_event_registration_badge'))]"/>
<field name="lang">{{ object.event_id.lang or object.partner_id.lang }}</field>
<field name="auto_delete" eval="True"/>
</record>
@@ -340,6 +341,7 @@
<img src="/web_editor/font_to_img/61555/rgb(81,81,102)/34" style="padding:4px;max-width:inherit;" height="34" alt=""/>
</td>
<td style="padding: 0px 10px 0px 10px;width:50%;line-height:20px;vertical-align:top;">
<div><t t-out="object.event_id.name or ''">OpenWood Collection Online Reveal</t></div>
<div><strong>From</strong> <t t-out="object.event_id.date_begin_located or ''">May 4, 2021, 7:00:00 AM</t></div>
<div><strong>To</strong> <t t-out="object.event_id.date_end_located or ''">May 6, 2021, 5:00:00 PM</t></div>
<div style="font-size:12px;color:#9e9e9e"><i>(<t t-out="object.event_id.date_tz or ''">Europe/Brussels</t>)</i></div>
addons/event/models/event_event.py
+8
View File
@@ -224,6 +224,14 @@ class EventEvent(models.Model):
lang = fields.Selection(_lang_get, string='Language',
help="All the communication emails sent to attendees will be translated in this language.")
# ticket reports
badge_format = fields.Selection(
string='Badge Dimension',
selection=[
('A4_french_fold', 'A4 foldable'),
('A6', 'A6'),
('four_per_sheet', '4 per sheet')
], default='A6', required=True)
badge_image = fields.Image('Badge Background', max_width=1024, max_height=1024)
ticket_instructions = fields.Html('Ticket Instructions', translate=True,
compute='_compute_ticket_instructions', store=True, readonly=False,
help="This information will be printed on your tickets.")
addons/event/models/event_ticket.py
+2
View File
@@ -80,6 +80,8 @@ class EventTicket(models.Model):
seats_used = fields.Integer(string='Used Seats', compute='_compute_seats', store=False)
is_sold_out = fields.Boolean(
'Sold Out', compute='_compute_is_sold_out', help='Whether seats are not available for this ticket.')
# reports
color = fields.Char('Color', default="#875A7B")
@api.depends('end_sale_datetime', 'event_id.date_tz')
def _compute_is_expired(self):
addons/event/report/event_event_reports.xml
+16 -17
View File
@@ -1,8 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<record id="paperformat_event_foldable_badge" model="report.paperformat">
<field name="name">Custom Paperformat for the Event Foldable Badge report</field>
<record id="paperformat_event_badge" model="report.paperformat">
<field name="name">Custom Paperformat for the Event Badge report</field>
<field name="default" eval="False"/>
<field name="disable_shrinking" eval="True"/>
<field name="format">A4</field>
@@ -31,9 +31,8 @@
<field name="dpi">96</field>
</record>
<!-- The "Full Page Ticket", as opposed to the foldable badge that is meant to be folded and
only contains the bare minimum (attendee name + barcode), gives all the information of the
ticket in a portrait A4 format.
<!-- The "Full Page Ticket", as opposed to the (a6) badge that only contains the bare minimum
(attendee name + barcode), gives all the information of the ticket in a portrait A4 format.
It allows to add some information in the ticket_instructions field and, when printed, functions
as an "official" ticket that the attendee can show to the registration desk where all
the information are available (event name, organizer, SO reference, barcode, footer with
@@ -62,28 +61,28 @@
<field name="paperformat_id" ref="paperformat_event_full_page_ticket"/>
</record>
<record id="action_report_event_registration_foldable_badge" model="ir.actions.report">
<field name="name">Foldable Badge</field>
<record id="action_report_event_registration_badge" model="ir.actions.report">
<field name="name">Badge</field>
<field name="model">event.registration</field>
<field name="report_type">qweb-pdf</field>
<field name="report_name">event.event_registration_report_template_foldable_badge</field>
<field name="report_file">event.event_registration_report_template_foldable_badge</field>
<field name="print_report_name">'Foldable Badge - %s - %s' % ((object.event_id.name or 'Event').replace('/',''), (object.name or '').replace('/',''))</field>
<field name="report_name">event.event_registration_report_template_badge</field>
<field name="report_file">event.event_registration_report_template_badge</field>
<field name="print_report_name">'Badge - %s - %s' % ((object.event_id.name or 'Event').replace('/',''), (object.name or '').replace('/',''))</field>
<field name="binding_model_id" ref="model_event_registration"/>
<field name="binding_type">report</field>
<field name="paperformat_id" ref="paperformat_event_foldable_badge"/>
<field name="paperformat_id" ref="paperformat_event_badge"/>
</record>
<record id="action_report_event_event_foldable_badge" model="ir.actions.report">
<field name="name">Foldable Badge Example</field>
<record id="action_report_event_event_badge" model="ir.actions.report">
<field name="name">Badge Example</field>
<field name="model">event.event</field>
<field name="report_type">qweb-pdf</field>
<field name="report_name">event.event_event_report_template_foldable_badge</field>
<field name="report_file">event.event_event_report_template_foldable_badge</field>
<field name="print_report_name">'Foldable Badge - %s' % (object.name or 'Event').replace('/','')</field>
<field name="report_name">event.event_event_report_template_badge</field>
<field name="report_file">event.event_event_report_template_badge</field>
<field name="print_report_name">'Badge - %s' % (object.name or 'Event').replace('/','')</field>
<field name="binding_model_id" ref="model_event_event"/>
<field name="binding_type">report</field>
<field name="paperformat_id" ref="paperformat_event_foldable_badge"/>
<field name="paperformat_id" ref="paperformat_event_badge"/>
</record>
<record id="action_report_event_registration_responsive_html_ticket" model="ir.actions.report">
addons/event/report/event_event_templates.xml
+98 -75
View File
@@ -1,108 +1,105 @@
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<!-- EVENT FOLDABLE BADGE -->
<!-- EVENT A4 FOLDABLE BADGE (A4_french_fold) -->
<template id="event_report_template_foldable_badge">
<div class="o_event_foldable_badge_container">
<div class="o_event_foldable_badge_container o_event_badge_report_page_break">
<div class="row">
<!-- Front -->
<div class="page p-1 col-6 o_event_foldable_badge_top">
<div class="page col-6 o_event_badge_height pt-2">
<div class="oe_structure"/>
<t t-call="event.event_report_template_badge_card"/>
</div>
<!-- Back -->
<div class="page col-6 o_event_foldable_badge_top o_event_foldable_badge_ticket pt-4">
<div class="page col-6 position-relative p-1">
<div class="oe_structure"/>
<div class="o_event_foldable_badge_ticket_wrapper p-2">
<div class="o_event_foldable_badge_ticket_wrapper_top page">
<h5 class="o_event_foldable_badge_event_name text-odoo fw-bold text-center" t-field="event.name"/>
<div class="text-center o_event_foldable_badge_font_small">
<span itemprop="startDate" t-field="event.date_begin"
t-options='{"widget": "datetime", "date_only": True}'
class="fw-bold"/>
<span itemprop="startDateTime" t-field="event.date_begin"
class="fw-bold"
t-options='{"widget": "datetime", "time_only": True, "tz_name": event.date_tz, "hide_seconds": True}'/>
<span class="oi oi-arrow-right o_event_foldable_badge_font_faded"/>
<span t-if="not event.is_one_day"
itemprop="endDate" t-field="event.date_end"
t-options='{"widget": "datetime", "date_only": True}'
class="fw-bold"/>
<span itemprop="endDateTime" t-field="event.date_end"
class="fw-bold"
t-options='{"widget": "datetime", "time_only": True, "tz_name": event.date_tz, "hide_seconds": True}'/>
</div>
<div class="o_event_foldable_badge_font_faded o_event_foldable_badge_font_small text-center">
(<span itemprop="timezone" t-out="event.date_tz"/>)
</div>
<div t-if="event.address_id" class="o_event_foldable_badge_font_faded o_event_foldable_badge_font_small text-center">
<t t-set="use_map_marker" t-value="True"/>
<t t-call="event.event_report_template_formatted_event_address"/>
</div>
<div class="text-center mt-5 pt-2">
<h2 t-if="attendee" t-field="attendee.name"/>
<h2 t-elif="not attendee"><span>John Doe</span></h2>
<t t-set="first_ticket" t-value="event.event_ticket_ids[0] if event.event_ticket_ids else None"/>
<div t-if="attendee" class="o_event_foldable_badge_font_faded" t-field="attendee.event_ticket_id"/>
<div t-elif="first_ticket" t-out="first_ticket.name"
class="o_event_foldable_badge_font_faded"/>
</div>
</div>
<div class="o_event_foldable_badge_barcode mt-2">
<div class="o_event_foldable_badge_barcode_container">
</div>
<div class="o_event_foldable_badge_back text-center">
<div class="o_event_foldable_badge_barcode_container_top"></div>
<div class="o_event_foldable_badge_barcode_id_top fs-4 mt-2">
ID: <span t-out="attendee.id if attendee else '0123456789'"/>
</div>
</div>
</div>
</div>
<div class="row">
<!-- Inner left -->
<div class="page o_event_foldable_badge_bottom o_event_foldable_badge_left p-1 px-2 col-6 overflow-hidden">
<div class="row o_event_foldable_badge_bottom_row">
<!-- Reversed Back -->
<div class="o_event_foldable_badge_bottom_quarter page col-6 p-1">
<div class="oe_structure"/>
<div t-field="event.ticket_instructions" class="p-4"></div>
<div class="o_event_foldable_badge_back text-center">
<div class="o_event_foldable_badge_barcode_container_bottom"></div>
<div class="o_event_foldable_badge_barcode_id_bottom fs-4 mt-2">
ID: <span t-out="attendee.id if attendee else '0123456789'"/>
</div>
</div>
</div>
<!-- Inner right -->
<div class="page o_event_foldable_badge_bottom o_event_foldable_badge_right col-6 text-center">
<!-- Reversed Front -->
<div class="o_event_foldable_badge_bottom_quarter page col-6 pt-2">
<div class="oe_structure"/>
<div class="h-50 col-12 row m-0">
<div class="col-6 h-100 p-0">
<div class="o_event_foldable_badge_step fw-bold">1</div>
<img src="/event/static/src/img/how_to_fold_1.png" class="w-100 h-100" alt="How to Fold (1)"/>
</div>
<div class="col-6 h-100 p-0">
<div class="o_event_foldable_badge_step fw-bold">2</div>
<img src="/event/static/src/img/how_to_fold_2.png" class="w-100 h-100" alt="How to Fold (2)"/>
</div>
</div>
<div class="h-50 col-12 row m-0">
<div class="col-6 h-100 p-0">
<div class="o_event_foldable_badge_step fw-bold">3</div>
<img src="/event/static/src/img/how_to_fold_3.png" class="w-100 h-100" alt="How to Fold (3)"/>
</div>
<div class="col-6 h-100 p-0">
<div class="o_event_foldable_badge_step fw-bold">4</div>
<img src="/event/static/src/img/how_to_fold_4.png" class="w-100 h-100" alt="How to Fold (4)"/>
</div>
</div>
<t t-call="event.event_report_template_badge_card"/>
</div>
</div>
</div>
</template>
<template id="event_registration_report_template_foldable_badge">
<!-- EVENT A6 BADGE -->
<template id="event_report_template_a6_badge">
<div class="o_event_badge_report_page_break">
<div class="row">
<div class="o_event_badge_height page col-6 pt-2">
<div class="oe_structure"/>
<t t-call="event.event_report_template_badge_card"/>
</div>
</div>
</div>
</template>
<!-- EVENT A4 4 PER SHEET -->
<template id="event_report_template_four_per_sheet_badge">
<t t-if="example_badge" t-foreach="[(0, 1), (2, 3)]" t-as="indices_pair">
<div t-att-class="'row' + (' o_event_badge_report_page_break' if indices_pair_index else '')">
<div t-foreach="indices_pair" t-as="attendee_number" class="col-6 o_event_badge_height pt-2">
<t t-call="event.event_report_template_badge_card"/>
</div>
</div>
</t>
<t t-if="not example_badge" t-foreach="[attendees[n:n+2] for n in range(0, len(attendees), 2)] if attendees else []" t-as="attendee_pair">
<t t-set="do_page_break" t-value="attendee_pair_index > 0 and attendee_pair_index % 2 or (attendee_pair_index + 1) * 2 >= len(attendees)"/>
<div t-att-class="'row' + (' o_event_badge_report_page_break' if do_page_break else '')">
<div t-foreach="attendee_pair" t-as="attendee" class="col-6 o_event_badge_height pt-2">
<t t-call="event.event_report_template_badge_card"/>
</div>
</div>
</t>
</template>
<!-- EVENT REGISTRATION BADGE - REDIRECTING TO EVENT FORMAT BADGE ABOVE -->
<template id="event_registration_report_template_badge">
<t t-call="web.basic_layout">
<t t-foreach="docs" t-as="attendee">
<t t-set="event" t-value="attendee.event_id.with_context(tz=attendee.event_id.date_tz)"/>
<t t-call="event.event_report_template_foldable_badge"/>
<t t-foreach="docs.grouped('event_id').items()" t-as="attendees_per_event">
<t t-set="event" t-value="attendees_per_event[0]"/>
<t t-set="attendees" t-value="attendees_per_event[1]"/>
<t t-if="event.badge_format != 'four_per_sheet'" t-foreach="attendees" t-as="attendee">
<t t-if="event.badge_format == 'A4_french_fold'" t-call="event.event_report_template_foldable_badge"/>
<t t-else="" t-call="event.event_report_template_a6_badge"/>
</t>
<t t-if="event.badge_format == 'four_per_sheet'" t-call="event.event_report_template_four_per_sheet_badge"/>
</t>
</t>
</template>
<template id="event_event_report_template_foldable_badge">
<!-- EVENT EVENT BADGE - EXAMPLE BADGE - ATTENDEE NOT SET -->
<template id="event_event_report_template_badge">
<t t-call="web.basic_layout">
<t t-foreach="docs" t-as="event">
<t t-set="event" t-value="event.with_context(tz=event.date_tz)"/>
<t t-call="event.event_report_template_foldable_badge"/>
<t t-set="example_badge" t-value="True"/>
<t t-if="event.badge_format == 'A4_french_fold'" t-call="event.event_report_template_foldable_badge"/>
<t t-elif="event.badge_format == 'four_per_sheet'" t-call="event.event_report_template_four_per_sheet_badge"/>
<t t-else="" t-call="event.event_report_template_a6_badge"/>
</t>
</t>
</template>
@@ -218,6 +215,32 @@
</t>
</template>
<!-- EVENT BADGE CARD (tool template used in all badge templates)-->
<template id="event_report_template_badge_card">
<t t-set="badge_image_url" t-value="image_data_uri(event.badge_image) if event.badge_image else ''"/>
<div class="o_event_badge_ticket_wrapper" t-attf-style="background-image: url({{badge_image_url}});">
<div class="position-relative h-100">
<h3 class="fw-bold text-center" t-field="event.name"/>
<div class="text-center mt-5 py-2">
<h2 class="mb-0" t-if="attendee" t-field="attendee.name"/>
<h2 class="mb-0" t-elif="not attendee"><span>John Doe</span> <span t-if="attendee_number" t-out="attendee_number + 1"/></h2>
<h4 t-if="attendee and attendee.company_id" class="o_event_badge_font_faded" t-field="attendee.company_id.name"/>
<h4 t-elif="not attendee"><span class="o_event_badge_font_faded">My Placeholder Company</span></h4>
</div>
<div class="position-absolute bottom-0 w-100 text-center">
<img t-if="event.organizer_id.image_256" class="o_event_badge_logo text-center mb-2" t-att-src="image_data_uri(event.organizer_id.image_256)"/>
<span t-if="event.badge_format != 'A4_french_fold'" class="o_event_badge_barcode_container mb-2"></span>
<t t-set="first_ticket" t-value="event.event_ticket_ids[0] if event.event_ticket_ids else None"/>
<t t-set="ticket" t-value="attendee.event_ticket_id if attendee else first_ticket"/>
<div t-if="ticket" class="text-center w-100" t-attf-style="background-color: {{ticket.color or '#875A7B'}};">
<div class="p-3 fs-3" t-out="ticket.name"/>
</div>
</div>
</div>
</div>
</template>
<!-- MISC -->
<template id="event_report_template_formatted_event_address">
addons/event/static/src/img/how_to_fold_1.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.6 KiB

addons/event/static/src/img/how_to_fold_2.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 10 KiB

addons/event/static/src/img/how_to_fold_3.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.1 KiB

addons/event/static/src/img/how_to_fold_4.png
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 KiB

addons/event/static/src/scss/event_badge_report.scss
+57
View File
@@ -0,0 +1,57 @@
/* EVENT BADGE : CARD USED IN ALL FORMATS */
.o_event_badge_report_page_break {
page-break-after:always;
}
.o_event_badge_height {
height: 148mm;
}
.o_event_badge_ticket_wrapper {
background-color: white;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: solid 1px #939393;
margin: 16px 8px;
padding: 10px 0px 0px;
font-size: 1.2rem;
box-shadow: -3px 3px 9px 0px rgba(0,0,0,0.51);
height: 138mm;
.o_event_badge_font_faded {
color: #939393;
}
.o_event_badge_logo {
max-height: 116px;
max-width: 174px;
}
}
/* EVENT BADGE : A4 FOLDABLE (A4_french_fold) */
.o_event_foldable_badge_container {
.o_event_foldable_badge_bottom_row {
margin-top: 1mm;
.o_event_foldable_badge_bottom_quarter {
height: 148mm;
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
}
.o_event_foldable_badge_back {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
}
addons/event/static/src/scss/event_foldable_badge_report.scss
-62
View File
@@ -1,62 +0,0 @@
.o_event_foldable_badge_container {
.o_event_foldable_badge_top {
height: 148mm;
&.o_event_foldable_badge_ticket {
border-left: 1px dashed black;
}
}
.o_event_foldable_badge_font_small {
font-size: .8rem;
}
.o_event_foldable_badge_bottom.o_event_foldable_badge_left {
border-top: 1px dashed black;
height: 148mm;
p {
margin: 0px; // to match editor style (.o_field_html p)
}
}
.o_event_foldable_badge_bottom.o_event_foldable_badge_right {
border-left: 1px dashed black;
border-top:1px dashed black;
height: 148mm;
background: white;
}
.o_event_foldable_badge_ticket {
.o_event_foldable_badge_ticket_wrapper {
background-color: white;
border: solid 1px #939393;
margin: 0px 8px;
padding: 10px 3px;
font-size: 1.2rem;
box-shadow: -3px 3px 9px 0px rgba(0,0,0,0.51);
.o_event_foldable_badge_ticket_wrapper_top {
min-height: 80mm;
}
.o_event_foldable_badge_font_faded {
color: #939393;
}
.o_event_foldable_badge_barcode {
min-height: 35mm;
}
}
}
.o_event_foldable_badge_step {
position: absolute;
padding: 3px 9px;
top: 5mm;
left: 0mm;
border-radius: 50%;
background-color: black;
color: white;
}
}
addons/event/views/event_event_views.xml
+2
View File
@@ -60,6 +60,8 @@
<span invisible="not seats_limited" required="not seats_limited">to <field name="seats_max" class="oe_inline o_input_9ch"/> Confirmed Attendees</span>
</div>
<field name="auto_confirm"/>
<field name="badge_format"/>
<field name="badge_image"/>
</group>
</group>
<notebook>
addons/event/views/event_ticket_views.xml
+1
View File
@@ -79,6 +79,7 @@
<field name="seats_max" sum="Total" width="105px" string="Maximum"/>
<field name="seats_reserved" sum="Total" width="105px" string="Confirmed"/>
<field name="seats_unconfirmed" sum="Total" width="110px" string="Unconfirmed"/>
<field name="color" widget="color" optional="show"/>
</tree>
</field>
</record>