Mohamed Eltayar
GitHub
commit
a0b674c15a
|
|
@ -126,33 +126,32 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
|
|||
var parsed_date = this.value ? this.datewidget._parseDate(this.value) : '';
|
||||
var hijri_value = parsed_date ? this.datewidget._convertGregorianToHijri(parsed_date) : '';
|
||||
|
||||
// Gregorian Date Section
|
||||
// Original Gregorian date (unchanged)
|
||||
$('<div>', {
|
||||
class: 'o_date_section'
|
||||
}).append([
|
||||
$('<label>', {
|
||||
class: 'o_date_label o_gregorian_label',
|
||||
text: 'التاريخ الميلادي'
|
||||
}),
|
||||
$('<div>', {
|
||||
class: 'o_date_value ' + this.$el.attr('class'),
|
||||
text: value,
|
||||
})
|
||||
]).appendTo($div);
|
||||
class: this.$el.attr('class'),
|
||||
text: value,
|
||||
}).appendTo($div);
|
||||
|
||||
// Hijri date with label layout
|
||||
var $hijriContainer = $('<div>', {
|
||||
class: 'o_hijri_readonly_container'
|
||||
});
|
||||
|
||||
var $hijriRow = $('<div>', {
|
||||
class: 'o_hijri_readonly_row'
|
||||
}).appendTo($hijriContainer);
|
||||
|
||||
// Hijri Date Section
|
||||
$('<div>', {
|
||||
class: 'o_date_section'
|
||||
}).append([
|
||||
$('<label>', {
|
||||
class: 'o_date_label o_hijri_label',
|
||||
text: 'التاريخ الهجري'
|
||||
}),
|
||||
$('<div>', {
|
||||
class: 'o_date_value ' + this.$el.attr('class'),
|
||||
text: hijri_value,
|
||||
})
|
||||
]).appendTo($div);
|
||||
class: 'o_hijri_readonly_label',
|
||||
text: 'التاريخ الهجري:'
|
||||
}).appendTo($hijriRow);
|
||||
|
||||
$('<div>', {
|
||||
class: 'o_hijri_readonly_value ' + this.$el.attr('class'),
|
||||
text: hijri_value,
|
||||
}).appendTo($hijriRow);
|
||||
|
||||
$hijriContainer.appendTo($div);
|
||||
|
||||
this.datewidget.appendTo('<div>').then(function () {
|
||||
self._replaceElement($div);
|
||||
|
|
|
|||
|
|
@ -60,34 +60,44 @@
|
|||
.o_datepicker {
|
||||
.o_datepicker_button {
|
||||
&.o_hijri_datepicker_button {
|
||||
top: 30px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
// New styles for date labels and sections
|
||||
.o_date_section {
|
||||
margin-bottom: 5px;
|
||||
// Hijri field container
|
||||
.o_hijri_field_container {
|
||||
margin-top: 8px;
|
||||
|
||||
.o_date_label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #6c757d;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&.o_gregorian_label {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
&.o_hijri_label {
|
||||
color: #28a745;
|
||||
}
|
||||
}
|
||||
|
||||
.o_date_input_container {
|
||||
position: relative;
|
||||
.o_hijri_field_row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.o_hijri_label_container {
|
||||
min-width: 120px;
|
||||
padding-right: 8px;
|
||||
text-align: right;
|
||||
|
||||
.o_hijri_label {
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: #495057;
|
||||
margin-bottom: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.o_hijri_input_container {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
|
||||
.o_hijri {
|
||||
width: 100%;
|
||||
padding-right: 30px; // مساحة للزرار
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -95,30 +105,81 @@
|
|||
// Form view specific styles
|
||||
.o_form_view {
|
||||
.o_datepicker {
|
||||
.o_date_section {
|
||||
.o_date_label {
|
||||
font-size: 12px;
|
||||
margin-bottom: 3px;
|
||||
.o_hijri_field_container {
|
||||
.o_hijri_field_row {
|
||||
.o_hijri_label_container {
|
||||
min-width: 140px; // عرض أكبر في الفورم
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Read-only mode improvements
|
||||
.o_field_date.o_readonly_modifier {
|
||||
.o_date_section {
|
||||
margin-bottom: 8px;
|
||||
// Readonly mode styles for hijri field
|
||||
.o_hijri_readonly_container {
|
||||
margin-top: 8px;
|
||||
|
||||
.o_hijri_readonly_row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.o_date_label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #6c757d;
|
||||
margin-bottom: 2px;
|
||||
.o_hijri_readonly_label {
|
||||
min-width: 120px;
|
||||
padding-right: 8px;
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
color: #495057;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.o_date_value {
|
||||
padding: 2px 0;
|
||||
.o_hijri_readonly_value {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form view readonly specific styles
|
||||
.o_form_view {
|
||||
.o_hijri_readonly_container {
|
||||
.o_hijri_readonly_row {
|
||||
.o_hijri_readonly_label {
|
||||
min-width: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive adjustments
|
||||
@media (max-width: 768px) {
|
||||
.o_datepicker {
|
||||
.o_hijri_field_container {
|
||||
.o_hijri_field_row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.o_hijri_label_container {
|
||||
min-width: auto;
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_hijri_readonly_container {
|
||||
.o_hijri_readonly_row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.o_hijri_readonly_label {
|
||||
min-width: auto;
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -3,30 +3,29 @@
|
|||
<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">
|
||||
<!-- Gregorian Date Section -->
|
||||
<div class="o_date_section">
|
||||
<label class="o_date_label o_gregorian_label">التاريخ الميلادي</label>
|
||||
<div class="o_date_input_container">
|
||||
<input type="text"
|
||||
class="o_datepicker_input o_input datetimepicker-input"
|
||||
t-att-name="widget.name"
|
||||
t-att-placeholder="placeholder"
|
||||
t-attf-data-target="##{datepickerID}"
|
||||
autocomplete="off"/>
|
||||
<span class="o_datepicker_button"/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- الحقل الميلادي العادي بدون تغيير -->
|
||||
<input type="text"
|
||||
class="o_datepicker_input o_input datetimepicker-input"
|
||||
t-att-name="widget.name"
|
||||
t-att-placeholder="placeholder"
|
||||
t-attf-data-target="##{datepickerID}"
|
||||
autocomplete="off"/>
|
||||
<span class="o_datepicker_button"/>
|
||||
|
||||
<!-- Hijri Date Section -->
|
||||
<div class="o_date_section mt-2">
|
||||
<label class="o_date_label o_hijri_label">التاريخ الهجري</label>
|
||||
<div class="o_date_input_container">
|
||||
<input type="text"
|
||||
class="o_hijri o_input"
|
||||
t-att-name="widget.name"
|
||||
t-att-placeholder="'التاريخ الهجري'"
|
||||
readonly="readonly"/>
|
||||
<span class="o_datepicker_button o_hijri_datepicker_button"/>
|
||||
<!-- محاكاة شكل الحقل العادي للهجري -->
|
||||
<div class="o_hijri_field_container">
|
||||
<div class="o_hijri_field_row">
|
||||
<div class="o_hijri_label_container">
|
||||
<label class="o_form_label o_hijri_label">التاريخ الهجري:</label>
|
||||
</div>
|
||||
<div class="o_hijri_input_container">
|
||||
<input type="text"
|
||||
class="o_hijri o_input"
|
||||
t-att-name="widget.name"
|
||||
t-att-placeholder="'التاريخ الهجري'"
|
||||
readonly="readonly"/>
|
||||
<span class="o_datepicker_button o_hijri_datepicker_button"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue