Enhanced XML templates with better Odoo 14 integration and accessibility
This commit is contained in:
Mohamed Eltayar
parent
aaa8c7da30
commit
bf1776e219
|
|
@ -1,25 +1,97 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates id="template" xml:space="preserve">
|
||||
<!--
|
||||
Enhanced Hijri Datepicker Template for Odoo 14
|
||||
Seamlessly integrates with Odoo's standard datepicker template structure
|
||||
Maintains all Hijri functionality while following Odoo's UI patterns
|
||||
-->
|
||||
<templates id="template" xml:space="preserve">
|
||||
|
||||
<!-- Main datepicker template extension -->
|
||||
<t t-name="web.datepicker" t-extend="web.datepicker">
|
||||
<t t-jquery=".o_datepicker" t-operation="replace">
|
||||
<div class="o_datepicker" aria-atomic="true" t-att-id="datepickerID" data-target-input="nearest">
|
||||
<!-- الحقل الميلادي -->
|
||||
<input type="text"
|
||||
class="o_datepicker_input o_input datetimepicker-input"
|
||||
t-att-name="widget.name"
|
||||
t-att-placeholder="'التاريخ الميلادي'"
|
||||
t-attf-data-target="##{datepickerID}"
|
||||
autocomplete="off"/>
|
||||
<span class="o_datepicker_button"/>
|
||||
<div class="o_datepicker input-group"
|
||||
aria-atomic="true"
|
||||
t-att-id="datepickerID"
|
||||
data-target-input="nearest">
|
||||
|
||||
<!-- الحقل الهجري -->
|
||||
<!-- Primary Gregorian date input - maintaining Odoo's exact structure -->
|
||||
<input type="text"
|
||||
class="o_hijri o_input mt-2"
|
||||
class="o_datepicker_input o_input form-control datetimepicker-input"
|
||||
t-att-name="widget.name"
|
||||
t-att-placeholder="'التاريخ الهجري'"
|
||||
readonly="readonly"/>
|
||||
<span class="o_datepicker_button o_hijri_datepicker_button"/>
|
||||
t-att-placeholder="widget.options.datepicker.placeholder || 'mm/dd/yyyy'"
|
||||
t-attf-data-target="##{datepickerID}"
|
||||
autocomplete="off"
|
||||
t-att-readonly="widget.readonly ? 'readonly' : null"/>
|
||||
|
||||
<!-- Gregorian datepicker trigger button -->
|
||||
<div class="input-group-append" data-target-input="nearest">
|
||||
<span class="o_datepicker_button input-group-text"
|
||||
t-attf-data-target="##{datepickerID}"
|
||||
data-toggle="datetimepicker">
|
||||
<i class="fa fa-calendar" aria-hidden="true" title="Open Gregorian Calendar"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Secondary Hijri date input container -->
|
||||
<div class="o_hijri_datepicker input-group mt-2"
|
||||
style="position: relative;">
|
||||
|
||||
<!-- Hijri date input field -->
|
||||
<input type="text"
|
||||
class="o_hijri o_input form-control"
|
||||
t-att-name="widget.name + '_hijri'"
|
||||
placeholder="التاريخ الهجري"
|
||||
readonly="readonly"
|
||||
style="background-color: rgba(40, 167, 69, 0.1); border-color: rgba(40, 167, 69, 0.2); color: #28a745;"
|
||||
title="Hijri date equivalent"
|
||||
aria-label="Hijri date"/>
|
||||
|
||||
<!-- Hijri datepicker trigger button -->
|
||||
<div class="input-group-append">
|
||||
<span class="o_datepicker_button o_hijri_datepicker_button input-group-text"
|
||||
style="background-color: rgba(40, 167, 69, 0.1); border-color: rgba(40, 167, 69, 0.2); color: #28a745; cursor: pointer;"
|
||||
title="Open Hijri Calendar">
|
||||
<i class="fa fa-calendar-alt" aria-hidden="true"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<!-- Enhanced date widget template for form views -->
|
||||
<t t-name="web.DateWidget" t-extend="web.DateWidget">
|
||||
<t t-jquery=".o_datepicker" t-operation="after">
|
||||
<!-- Hijri date display in readonly mode -->
|
||||
<div class="o_hijri_readonly d-none" style="margin-top: 0.25rem;">
|
||||
<small class="text-muted">
|
||||
<i class="fa fa-calendar-alt text-success mr-1" aria-hidden="true"/>
|
||||
<span class="o_hijri_label">التاريخ الهجري:</span>
|
||||
<span class="o_hijri_value text-success font-weight-medium"></span>
|
||||
</small>
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<!-- List view date cell template enhancement -->
|
||||
<t t-name="ListView.row" t-extend="ListView.row">
|
||||
<t t-jquery="td[t-att-class*='o_data_cell']" t-operation="attributes">
|
||||
<t t-att-data-hijri-enabled="widget.type === 'date' ? 'true' : null"/>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<!-- Form view date field template enhancement -->
|
||||
<t t-name="FieldDate" t-extend="FieldDate">
|
||||
<t t-jquery=".o_field_date" t-operation="attributes">
|
||||
<t t-att-data-hijri-supported="true"/>
|
||||
</t>
|
||||
</t>
|
||||
|
||||
<!-- Accessibility enhancements for screen readers -->
|
||||
<t t-name="web.datepicker.hijri_accessibility">
|
||||
<div class="sr-only" aria-live="polite" id="hijri_announce">
|
||||
<!-- Screen reader announcements for Hijri date changes -->
|
||||
</div>
|
||||
</t>
|
||||
|
||||
</templates>
|
||||
Loading…
Reference in New Issue