devops_admin
/
odex25_standard
mirror of https://github.com/hydracp9/odex25_standard
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Revert "🎨 Fix Hijri Calendar Styling Issues - إصلاح مشاكل تصميم التقويم الهجري"

This commit is contained in:
Mohamed Eltayar 2025-08-29 01:25:53 +03:00 committed by GitHub
parent 65d61bc45b
commit ff44f7d312
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 108 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
odex25_base/web_hijri_datepicker/static/src/js/web_hijri_date.js
View File

@ -49,31 +49,25 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
self.$input_hijri.calendarsPicker('show'); self.$input_hijri.calendarsPicker('show');
}); });
// ✅ Modern configuration with enhanced features and fixed navigation // Modern configuration with enhanced features
this.$input_hijri.calendarsPicker({ this.$input_hijri.calendarsPicker({
calendar: $.calendars.instance('islamic', this.options.locale || 'ar'), calendar: $.calendars.instance('islamic', this.options.locale || 'ar'),
dateFormat: 'M d, yyyy', dateFormat: 'M d, yyyy',
showAnim: 'slideDown', showAnim: 'slideDown', // Modern animation
showSpeed: 'fast', showSpeed: 'fast',
showOnFocus: false, showOnFocus: false,
closeOnDateSelect: true, closeOnDateSelect: true, // Better UX - close after selection
yearRange: 'c-100:c+50', yearRange: 'c-100:c+50', // Extended year range
changeMonth: true, changeMonth: true,
changeYear: true, changeYear: true,
showOtherMonths: true, showOtherMonths: true,
selectOtherMonths: true, selectOtherMonths: true,
localNumbers: true, localNumbers: true, // Enable Arabic numerals
renderer: this._getModernRenderer(), renderer: this._getModernRenderer(),
onSelect: this._convertDateToHijri.bind(this), onSelect: this._convertDateToHijri.bind(this),
onShow: function() { onShow: function() {
// Add modern CSS class for styling // Add modern CSS class for styling
$('.calendars-popup').addClass('hijri-modern-popup'); $('.calendars-popup').addClass('hijri-modern-popup');
// ✅ إصلاح أزرار التنقل بعد ظهور التقويم
setTimeout(function() {
$('.calendars-prev').html('‹').attr('title', 'الشهر السابق');
$('.calendars-next').html('›').attr('title', 'الشهر التالي');
}, 10);
} }
}); });
@ -91,7 +85,7 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
}, },
/** /**
* ✅ Get modern renderer configuration with fixed navigation buttons * Get modern renderer configuration for better styling
*/ */
_getModernRenderer: function() { _getModernRenderer: function() {
return $.extend({}, $.calendarsPicker.defaultRenderer, { return $.extend({}, $.calendarsPicker.defaultRenderer, {
@ -99,9 +93,9 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
monthRow: '<div class="calendars-month-row">{months}</div>', monthRow: '<div class="calendars-month-row">{months}</div>',
month: '<div class="calendars-month">' + month: '<div class="calendars-month">' +
'<div class="calendars-month-header">' + '<div class="calendars-month-header">' +
'<button type="button" class="calendars-nav calendars-prev" title="الشهر السابق">‹</button>' + '<button type="button" class="calendars-nav calendars-prev" title="{prevText}">{prevText}</button>' +
'<div class="calendars-month-year">{monthHeader}</div>' + '<div class="calendars-month-year">{monthHeader}</div>' +
'<button type="button" class="calendars-nav calendars-next" title="الشهر التالي">›</button>' + '<button type="button" class="calendars-nav calendars-next" title="{nextText}">{nextText}</button>' +
'</div>' + '</div>' +
'<table><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table>' + '<table><thead>{weekHeader}</thead><tbody>{weeks}</tbody></table>' +
'</div>', '</div>',

250
odex25_base/web_hijri_datepicker/static/src/scss/hijri_modern.css
View File

@ -1,7 +1,7 @@
/* /*
* Modern Hijri Datepicker CSS - Fixed Issues * Modern Hijri Datepicker CSS
* Designed to integrate seamlessly with Odoo's UI * Designed to integrate seamlessly with Odoo's UI
* Version: 2.2.0 Compatible - Issues Fixed * Version: 2.2.0 Compatible
*/ */
/* ==================== MODERN HIJRI DATEPICKER ==================== */ /* ==================== MODERN HIJRI DATEPICKER ==================== */
@ -26,10 +26,10 @@
border-radius: 8px; border-radius: 8px;
} }
/* ✅ إصلاح Calendar header */ /* Calendar header */
.calendars-month-header { .calendars-month-header {
background: linear-gradient(135deg, #6c5ce7, #74b9ff); background: linear-gradient(135deg, #6c5ce7, #74b9ff);
color: white !important; color: white;
padding: 12px 16px; padding: 12px 16px;
display: flex !important; display: flex !important;
justify-content: space-between; justify-content: space-between;
@ -43,202 +43,150 @@
font-weight: 700; font-weight: 700;
flex: 1; flex: 1;
text-align: center; text-align: center;
color: white !important; color: white;
} }
/* ✅ إصلاح Navigation buttons - الأزرار */ /* Navigation buttons */
.calendars-nav { .calendars-nav {
background: rgba(255, 255, 255, 0.2) !important; background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3) !important; border: none;
color: white !important; color: white;
padding: 6px 10px !important; padding: 8px 12px;
border-radius: 4px !important; border-radius: 6px;
cursor: pointer !important; cursor: pointer;
font-size: 14px !important; font-size: 16px;
font-weight: bold !important;
transition: all 0.2s ease; transition: all 0.2s ease;
margin: 0 4px; margin: 0 4px;
min-width: 28px;
text-align: center;
} }
.calendars-nav:hover { .calendars-nav:hover {
background: rgba(255, 255, 255, 0.3) !important; background: rgba(255, 255, 255, 0.2);
transform: scale(1.05); transform: scale(1.1);
} }
.calendars-nav:active { /* Week header */
transform: scale(0.95);
}
/* تأكد من أن النص داخل الأزرار يظهر صحيح */
.calendars-prev::before {
content: "‹" !important;
font-size: 18px !important;
font-weight: bold !important;
}
.calendars-next::before {
content: "›" !important;
font-size: 18px !important;
font-weight: bold !important;
}
.calendars-prev,
.calendars-next {
font-size: 0 !important; /* إخفاء النص الأصلي */
}
/* ✅ إصلاح Week header - هيدر أيام الأسبوع */
.calendars thead { .calendars thead {
background: #f8f9fa !important; background: #f8f9fa;
border-bottom: 1px solid #e9ecef; border-bottom: 1px solid #e9ecef;
} }
.calendars thead th { .calendars thead th {
background: #f1f3f4 !important; /* خلفية صلبة */ padding: 12px 8px;
padding: 10px 6px !important; font-weight: 600;
font-weight: 600 !important; color: #6c757d;
color: #495057 !important; font-size: 12px;
font-size: 12px !important; text-align: center;
text-align: center !important;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
border: 1px solid #e9ecef;
} }
/* ✅ Calendar days - تحسين الأيام */ /* Calendar days */
.calendars td { .calendars td {
position: relative; position: relative;
padding: 2px !important; padding: 0;
border: none; border: none;
background: white !important; background: white;
} }
.calendars td a, .calendars td a,
.calendars td span { .calendars td span {
display: block !important; display: block;
width: 32px !important; width: 36px;
height: 32px !important; height: 36px;
line-height: 32px !important; line-height: 36px;
text-align: center !important; text-align: center;
text-decoration: none !important; text-decoration: none;
color: #495057 !important; color: #495057;
border-radius: 4px; border-radius: 6px;
margin: 1px auto !important; margin: 2px;
transition: all 0.2s ease; transition: all 0.2s ease;
font-weight: 500; font-weight: 500;
font-size: 13px !important; position: relative;
} }
/* Selectable dates */ /* Selectable dates */
.calendars td a { .calendars td a {
cursor: pointer !important; cursor: pointer;
} }
.calendars td a:hover { .calendars td a:hover {
background: #e3f2fd !important; background: #e3f2fd;
color: #1976d2 !important; color: #1976d2;
transform: scale(1.05); transform: scale(1.05);
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2); box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2);
} }
/* ✅ Selected date */ /* Selected date */
.calendars .calendars-selected a { .calendars .calendars-selected a {
background: linear-gradient(135deg, #4caf50, #66bb6a) !important; background: linear-gradient(135deg, #4caf50, #66bb6a) !important;
color: white !important; color: white !important;
font-weight: 700 !important; font-weight: 700;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4) !important; box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
} }
/* ✅ Today */ /* Today */
.calendars .calendars-today a { .calendars .calendars-today a {
background: #fff3e0 !important; background: #fff3e0;
color: #f57c00 !important; color: #f57c00;
border: 2px solid #ff9800 !important; border: 2px solid #ff9800;
font-weight: 600 !important; font-weight: 600;
} }
.calendars .calendars-today a:hover { .calendars .calendars-today a:hover {
background: #ff9800 !important; background: #ff9800;
color: white !important; color: white;
} }
/* Weekend days */ /* Weekend days */
.calendars .calendars-weekend a { .calendars .calendars-weekend a {
color: #f44336 !important; color: #f44336;
font-weight: 600 !important; font-weight: 600;
} }
/* Other month dates */ /* Other month dates */
.calendars .calendars-other-month span { .calendars .calendars-other-month span {
color: #bdbdbd !important; color: #bdbdbd;
font-weight: 400 !important; font-weight: 400;
} }
/* Disabled dates */ /* Disabled dates */
.calendars .calendars-disabled span { .calendars .calendars-disabled span {
color: #e0e0e0 !important; color: #e0e0e0 !important;
cursor: not-allowed !important; cursor: not-allowed;
opacity: 0.5 !important; opacity: 0.5;
} }
/* ✅ إصلاح Month/Year selectors - القوائم المنسدلة */ /* Control buttons footer */
.calendars select {
background: white !important;
border: 1px solid #ced4da !important;
border-radius: 4px !important;
padding: 4px 8px !important;
font-size: 12px !important;
color: #495057 !important;
margin: 0 2px !important;
cursor: pointer !important;
}
.calendars select:focus {
border-color: #80bdff !important;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
outline: none !important;
}
/* Month/Year selection containers */
.calendars-month-year select {
background: rgba(255, 255, 255, 0.9) !important;
border: 1px solid rgba(255, 255, 255, 0.5) !important;
color: #495057 !important;
font-weight: 500 !important;
}
/* ✅ Control buttons footer */
.calendars-commands { .calendars-commands {
background: #f8f9fa !important; background: #f8f9fa;
border-top: 1px solid #e9ecef; border-top: 1px solid #e9ecef;
padding: 8px 12px; padding: 12px 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.calendars-cmd { .calendars-cmd {
background: #ffffff !important; background: #ffffff;
border: 1px solid #dee2e6 !important; border: 1px solid #dee2e6;
color: #495057 !important; color: #495057;
padding: 4px 8px !important; padding: 6px 12px;
border-radius: 3px !important; border-radius: 4px;
font-size: 11px !important; font-size: 12px;
cursor: pointer !important; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
font-weight: 500 !important; font-weight: 500;
} }
.calendars-cmd:hover { .calendars-cmd:hover {
background: #007bff !important; background: #007bff;
color: white !important; color: white;
border-color: #007bff !important; border-color: #007bff;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
} }
/* ✅ RTL Support */ /* RTL Support */
.calendars.calendars-rtl { .calendars.calendars-rtl {
direction: rtl; direction: rtl;
} }
@ -247,7 +195,7 @@
flex-direction: row-reverse; flex-direction: row-reverse;
} }
/* ✅ Responsive design */ /* Responsive design */
@media (max-width: 480px) { @media (max-width: 480px) {
.calendars { .calendars {
min-width: 260px; min-width: 260px;
@ -255,19 +203,19 @@
.calendars td a, .calendars td a,
.calendars td span { .calendars td span {
width: 28px !important; width: 32px;
height: 28px !important; height: 32px;
line-height: 28px !important; line-height: 32px;
font-size: 11px !important; font-size: 12px;
} }
.calendars-month-header { .calendars-month-header {
padding: 8px 12px; padding: 10px 12px;
font-size: 12px; font-size: 13px;
} }
} }
/* ✅ Animation for popup appearance */ /* Animation for popup appearance */
@keyframes hijriSlideIn { @keyframes hijriSlideIn {
from { from {
opacity: 0; opacity: 0;
@ -283,33 +231,35 @@
animation: hijriSlideIn 0.2s ease-out; animation: hijriSlideIn 0.2s ease-out;
} }
/* ✅ إصلاح خاص بـ Odoo integration */ /* Special styling for Arabic numbers */
.o_datepicker .calendars-popup { .calendars.arabic-numbers {
position: absolute !important; font-family: 'Arial Unicode MS', 'Tahoma', sans-serif;
z-index: 1050 !important;
} }
/* التأكد من أن الـ popup لا يتداخل مع عناصر Odoo */ /* Status bar styling if enabled */
.calendars-popup * { .calendars-status {
box-sizing: border-box !important; background: #343a40;
color: white;
padding: 8px 12px;
font-size: 11px;
text-align: center;
border-top: 1px solid #495057;
} }
/* إصلاح الـ dropdown menus إذا كانت موجودة */ /* Multiple month display */
.calendars .ui-datepicker-month, .calendars-multi .calendars-month {
.calendars .ui-datepicker-year { display: inline-block;
background: white !important; vertical-align: top;
border: 1px solid #ccc !important; margin: 0 4px;
padding: 2px !important;
margin: 0 2px !important;
} }
/* Clear button special styling */ /* Clear button special styling */
.calendars-cmd.calendars-clear { .calendars-cmd.calendars-clear {
color: #dc3545 !important; color: #dc3545;
border-color: #dc3545 !important; border-color: #dc3545;
} }
.calendars-cmd.calendars-clear:hover { .calendars-cmd.calendars-clear:hover {
background: #dc3545 !important; background: #dc3545;
color: white !important; color: white;
} }