From 2e0cb7bc14c19634a853cb350e8b655f593a797b Mon Sep 17 00:00:00 2001
From: Mohamed Eltayar <152964073+maltayyar2@users.noreply.github.com>
Date: Fri, 29 Aug 2025 01:07:42 +0300
Subject: [PATCH 1/2] Fix Hijri Calendar Styling Issues
- Fix navigation buttons (prev/next) - now show as proper arrows and clickable
- Fix week header background - solid background instead of transparent
- Fix month/year dropdown selectors with proper styling
- Add proper hover and focus states for all interactive elements
- Improve overall calendar appearance and usability
- Ensure proper integration with Odoo without affecting other components
- Add responsive design for mobile devices
---
.../static/src/scss/hijri_modern.css | 250 +++++++++++-------
1 file changed, 150 insertions(+), 100 deletions(-)
diff --git a/odex25_base/web_hijri_datepicker/static/src/scss/hijri_modern.css b/odex25_base/web_hijri_datepicker/static/src/scss/hijri_modern.css
index db0dbd269..7a10ccb6f 100644
--- a/odex25_base/web_hijri_datepicker/static/src/scss/hijri_modern.css
+++ b/odex25_base/web_hijri_datepicker/static/src/scss/hijri_modern.css
@@ -1,7 +1,7 @@
/*
- * Modern Hijri Datepicker CSS
+ * Modern Hijri Datepicker CSS - Fixed Issues
* Designed to integrate seamlessly with Odoo's UI
- * Version: 2.2.0 Compatible
+ * Version: 2.2.0 Compatible - Issues Fixed
*/
/* ==================== MODERN HIJRI DATEPICKER ==================== */
@@ -26,10 +26,10 @@
border-radius: 8px;
}
-/* Calendar header */
+/* ✅ إصلاح Calendar header */
.calendars-month-header {
background: linear-gradient(135deg, #6c5ce7, #74b9ff);
- color: white;
+ color: white !important;
padding: 12px 16px;
display: flex !important;
justify-content: space-between;
@@ -43,150 +43,202 @@
font-weight: 700;
flex: 1;
text-align: center;
- color: white;
+ color: white !important;
}
-/* Navigation buttons */
+/* ✅ إصلاح Navigation buttons - الأزرار */
.calendars-nav {
- background: transparent;
- border: none;
- color: white;
- padding: 8px 12px;
- border-radius: 6px;
- cursor: pointer;
- font-size: 16px;
+ background: rgba(255, 255, 255, 0.2) !important;
+ border: 1px solid rgba(255, 255, 255, 0.3) !important;
+ color: white !important;
+ padding: 6px 10px !important;
+ border-radius: 4px !important;
+ cursor: pointer !important;
+ font-size: 14px !important;
+ font-weight: bold !important;
transition: all 0.2s ease;
margin: 0 4px;
+ min-width: 28px;
+ text-align: center;
}
.calendars-nav:hover {
- background: rgba(255, 255, 255, 0.2);
- transform: scale(1.1);
+ background: rgba(255, 255, 255, 0.3) !important;
+ transform: scale(1.05);
}
-/* Week header */
+.calendars-nav:active {
+ 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 {
- background: #f8f9fa;
+ background: #f8f9fa !important;
border-bottom: 1px solid #e9ecef;
}
.calendars thead th {
- padding: 12px 8px;
- font-weight: 600;
- color: #6c757d;
- font-size: 12px;
- text-align: center;
+ background: #f1f3f4 !important; /* خلفية صلبة */
+ padding: 10px 6px !important;
+ font-weight: 600 !important;
+ color: #495057 !important;
+ font-size: 12px !important;
+ text-align: center !important;
text-transform: uppercase;
letter-spacing: 0.5px;
+ border: 1px solid #e9ecef;
}
-/* Calendar days */
+/* ✅ Calendar days - تحسين الأيام */
.calendars td {
position: relative;
- padding: 0;
+ padding: 2px !important;
border: none;
- background: white;
+ background: white !important;
}
.calendars td a,
.calendars td span {
- display: block;
- width: 36px;
- height: 36px;
- line-height: 36px;
- text-align: center;
- text-decoration: none;
- color: #495057;
- border-radius: 6px;
- margin: 2px;
+ display: block !important;
+ width: 32px !important;
+ height: 32px !important;
+ line-height: 32px !important;
+ text-align: center !important;
+ text-decoration: none !important;
+ color: #495057 !important;
+ border-radius: 4px;
+ margin: 1px auto !important;
transition: all 0.2s ease;
font-weight: 500;
- position: relative;
+ font-size: 13px !important;
}
/* Selectable dates */
.calendars td a {
- cursor: pointer;
+ cursor: pointer !important;
}
.calendars td a:hover {
- background: #e3f2fd;
- color: #1976d2;
+ background: #e3f2fd !important;
+ color: #1976d2 !important;
transform: scale(1.05);
- box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2);
+ box-shadow: 0 2px 4px rgba(25, 118, 210, 0.2);
}
-/* Selected date */
+/* ✅ Selected date */
.calendars .calendars-selected a {
background: linear-gradient(135deg, #4caf50, #66bb6a) !important;
color: white !important;
- font-weight: 700;
- box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
+ font-weight: 700 !important;
+ box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4) !important;
}
-/* Today */
+/* ✅ Today */
.calendars .calendars-today a {
- background: #fff3e0;
- color: #f57c00;
- border: 2px solid #ff9800;
- font-weight: 600;
+ background: #fff3e0 !important;
+ color: #f57c00 !important;
+ border: 2px solid #ff9800 !important;
+ font-weight: 600 !important;
}
.calendars .calendars-today a:hover {
- background: #ff9800;
- color: white;
+ background: #ff9800 !important;
+ color: white !important;
}
/* Weekend days */
.calendars .calendars-weekend a {
- color: #f44336;
- font-weight: 600;
+ color: #f44336 !important;
+ font-weight: 600 !important;
}
/* Other month dates */
.calendars .calendars-other-month span {
- color: #bdbdbd;
- font-weight: 400;
+ color: #bdbdbd !important;
+ font-weight: 400 !important;
}
/* Disabled dates */
.calendars .calendars-disabled span {
color: #e0e0e0 !important;
- cursor: not-allowed;
- opacity: 0.5;
+ cursor: not-allowed !important;
+ opacity: 0.5 !important;
}
-/* Control buttons footer */
+/* ✅ إصلاح Month/Year selectors - القوائم المنسدلة */
+.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 {
- background: #f8f9fa;
+ background: #f8f9fa !important;
border-top: 1px solid #e9ecef;
- padding: 12px 16px;
+ padding: 8px 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
.calendars-cmd {
- background: #ffffff;
- border: 1px solid #dee2e6;
- color: #495057;
- padding: 6px 12px;
- border-radius: 4px;
- font-size: 12px;
- cursor: pointer;
+ background: #ffffff !important;
+ border: 1px solid #dee2e6 !important;
+ color: #495057 !important;
+ padding: 4px 8px !important;
+ border-radius: 3px !important;
+ font-size: 11px !important;
+ cursor: pointer !important;
transition: all 0.2s ease;
- font-weight: 500;
+ font-weight: 500 !important;
}
.calendars-cmd:hover {
- background: #007bff;
- color: white;
- border-color: #007bff;
+ background: #007bff !important;
+ color: white !important;
+ border-color: #007bff !important;
transform: translateY(-1px);
- box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}
-/* RTL Support */
+/* ✅ RTL Support */
.calendars.calendars-rtl {
direction: rtl;
}
@@ -195,7 +247,7 @@
flex-direction: row-reverse;
}
-/* Responsive design */
+/* ✅ Responsive design */
@media (max-width: 480px) {
.calendars {
min-width: 260px;
@@ -203,19 +255,19 @@
.calendars td a,
.calendars td span {
- width: 32px;
- height: 32px;
- line-height: 32px;
- font-size: 12px;
+ width: 28px !important;
+ height: 28px !important;
+ line-height: 28px !important;
+ font-size: 11px !important;
}
.calendars-month-header {
- padding: 10px 12px;
- font-size: 13px;
+ padding: 8px 12px;
+ font-size: 12px;
}
}
-/* Animation for popup appearance */
+/* ✅ Animation for popup appearance */
@keyframes hijriSlideIn {
from {
opacity: 0;
@@ -231,35 +283,33 @@
animation: hijriSlideIn 0.2s ease-out;
}
-/* Special styling for Arabic numbers */
-.calendars.arabic-numbers {
- font-family: 'Arial Unicode MS', 'Tahoma', sans-serif;
+/* ✅ إصلاح خاص بـ Odoo integration */
+.o_datepicker .calendars-popup {
+ position: absolute !important;
+ z-index: 1050 !important;
}
-/* Status bar styling if enabled */
-.calendars-status {
- background: #343a40;
- color: white;
- padding: 8px 12px;
- font-size: 11px;
- text-align: center;
- border-top: 1px solid #495057;
+/* التأكد من أن الـ popup لا يتداخل مع عناصر Odoo */
+.calendars-popup * {
+ box-sizing: border-box !important;
}
-/* Multiple month display */
-.calendars-multi .calendars-month {
- display: inline-block;
- vertical-align: top;
- margin: 0 4px;
+/* إصلاح الـ dropdown menus إذا كانت موجودة */
+.calendars .ui-datepicker-month,
+.calendars .ui-datepicker-year {
+ background: white !important;
+ border: 1px solid #ccc !important;
+ padding: 2px !important;
+ margin: 0 2px !important;
}
/* Clear button special styling */
.calendars-cmd.calendars-clear {
- color: #dc3545;
- border-color: #dc3545;
+ color: #dc3545 !important;
+ border-color: #dc3545 !important;
}
.calendars-cmd.calendars-clear:hover {
- background: #dc3545;
- color: white;
-}
\ No newline at end of file
+ background: #dc3545 !important;
+ color: white !important;
+}
From ca78074f0372bef7233cb0acf2195217b72ef14a Mon Sep 17 00:00:00 2001
From: Mohamed Eltayar <152964073+maltayyar2@users.noreply.github.com>
Date: Fri, 29 Aug 2025 01:08:43 +0300
Subject: [PATCH 2/2] Fix Hijri Calendar Navigation and Rendering Issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
- Fix navigation buttons in renderer to show proper arrow symbols (‹ ›)
- Add onShow callback to ensure buttons display correctly after calendar loads
- Add proper Arabic titles for navigation buttons
- Ensure navigation buttons are clickable and functional
- Keep minimal code changes focused only on navigation fixes
---
.../static/src/js/web_hijri_date.js | 22 ++++++++++++-------
1 file changed, 14 insertions(+), 8 deletions(-)
diff --git a/odex25_base/web_hijri_datepicker/static/src/js/web_hijri_date.js b/odex25_base/web_hijri_datepicker/static/src/js/web_hijri_date.js
index c24aacdb3..ba201ee2d 100644
--- a/odex25_base/web_hijri_datepicker/static/src/js/web_hijri_date.js
+++ b/odex25_base/web_hijri_datepicker/static/src/js/web_hijri_date.js
@@ -49,25 +49,31 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
self.$input_hijri.calendarsPicker('show');
});
- // Modern configuration with enhanced features
+ // ✅ Modern configuration with enhanced features and fixed navigation
this.$input_hijri.calendarsPicker({
calendar: $.calendars.instance('islamic', this.options.locale || 'ar'),
dateFormat: 'M d, yyyy',
- showAnim: 'slideDown', // Modern animation
+ showAnim: 'slideDown',
showSpeed: 'fast',
showOnFocus: false,
- closeOnDateSelect: true, // Better UX - close after selection
- yearRange: 'c-100:c+50', // Extended year range
+ closeOnDateSelect: true,
+ yearRange: 'c-100:c+50',
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
- localNumbers: true, // Enable Arabic numerals
+ localNumbers: true,
renderer: this._getModernRenderer(),
onSelect: this._convertDateToHijri.bind(this),
onShow: function() {
// Add modern CSS class for styling
$('.calendars-popup').addClass('hijri-modern-popup');
+
+ // ✅ إصلاح أزرار التنقل بعد ظهور التقويم
+ setTimeout(function() {
+ $('.calendars-prev').html('‹').attr('title', 'الشهر السابق');
+ $('.calendars-next').html('›').attr('title', 'الشهر التالي');
+ }, 10);
}
});
@@ -85,7 +91,7 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
},
/**
- * Get modern renderer configuration for better styling
+ * ✅ Get modern renderer configuration with fixed navigation buttons
*/
_getModernRenderer: function() {
return $.extend({}, $.calendarsPicker.defaultRenderer, {
@@ -93,9 +99,9 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
monthRow: '{months}
',
month: '',