Merge pull request #4403 from expsa/revert-4392-eltayar

Revert "🎯 Simplify Hijri Datepicker - Remove Custom Styling"

odex25_base/web_hijri_datepicker/static/src/js/web_hijri_date.js

@@ -37,6 +37,9 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
             this.$input = this.$('input.o_datepicker_input');
             this.$input_hijri = this.$('input.o_hijri');
             
+            // ✅ تأكد من عرض الـ placeholder للحقل الميلادي
+            this._ensurePlaceholders();
+            
             // Enhanced click handler with better UX
             this.$input_hijri.click(function (e) {
                 e.preventDefault();
@@ -72,6 +75,64 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
             this._setReadonly(false);
         },
 
+        /**
+         * ✅ دالة جديدة لضمان عرض الـ placeholder
+         */
+        _ensurePlaceholders: function() {
+            var self = this;
+            
+            // تأكد من عرض placeholder للحقل الميلادي
+            if (this.$input && this.$input.length) {
+                if (!this.$input.attr('placeholder')) {
+                    this.$input.attr('placeholder', 'التاريخ الميلادي');
+                }
+                
+                // معالج للحفاظ على الـ placeholder حتى لو تغير
+                this.$input.on('focus blur', function() {
+                    if (!$(this).attr('placeholder')) {
+                        $(this).attr('placeholder', 'التاريخ الميلادي');
+                    }
+                });
+            }
+            
+            // تأكد من عرض placeholder للحقل الهجري  
+            if (this.$input_hijri && this.$input_hijri.length) {
+                if (!this.$input_hijri.attr('placeholder')) {
+                    this.$input_hijri.attr('placeholder', 'التاريخ الهجري');
+                }
+                
+                // معالج للحفاظ على الـ placeholder
+                this.$input_hijri.on('focus blur', function() {
+                    if (!$(this).attr('placeholder')) {
+                        $(this).attr('placeholder', 'التاريخ الهجري');
+                    }
+                });
+            }
+            
+            // ✅ معالج إضافي بعد تحميل DOM
+            setTimeout(function() {
+                self._ensurePlaceholdersAfterRender();
+            }, 100);
+        },
+
+        /**
+         * ✅ دالة إضافية للتأكد من الـ placeholder بعد التحميل
+         */
+        _ensurePlaceholdersAfterRender: function() {
+            // البحث عن جميع حقول التاريخ في الصفحة وإضافة placeholder إذا لم يكن موجود
+            this.$el.find('input.o_datepicker_input').each(function() {
+                if (!$(this).attr('placeholder') || $(this).attr('placeholder') === '') {
+                    $(this).attr('placeholder', 'التاريخ الميلادي');
+                }
+            });
+            
+            this.$el.find('input.o_hijri').each(function() {
+                if (!$(this).attr('placeholder') || $(this).attr('placeholder') === '') {
+                    $(this).attr('placeholder', 'التاريخ الهجري');
+                }
+            });
+        },
+
         /**
          * Get modern renderer configuration for better styling
          */
@@ -187,6 +248,9 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
             } else {
                 this.$input_hijri.val('').addClass('o_input_placeholder');
             }
+            
+            // ✅ تأكد من الـ placeholder بعد تعيين القيمة
+            this._ensurePlaceholders();
         },
 
         destroy: function () {
@@ -281,4 +345,35 @@ odoo.define('web_hijri_datepicker.datepicker', function (require) {
         });
     }
 
+    // ✅ معالج شامل للتأكد من الـ placeholder في جميع حقول التاريخ
+    $(document).ready(function() {
+        // مراقب DOM للحقول الجديدة
+        if (window.MutationObserver) {
+            var observer = new MutationObserver(function(mutations) {
+                mutations.forEach(function(mutation) {
+                    if (mutation.type === 'childList') {
+                        // البحث عن حقول تاريخ جديدة وإضافة placeholder
+                        $(mutation.target).find('input.o_datepicker_input').each(function() {
+                            if (!$(this).attr('placeholder')) {
+                                $(this).attr('placeholder', 'التاريخ الميلادي');
+                            }
+                        });
+                        
+                        $(mutation.target).find('input.o_hijri').each(function() {
+                            if (!$(this).attr('placeholder')) {
+                                $(this).attr('placeholder', 'التاريخ الهجري');
+                            }
+                        });
+                    }
+                });
+            });
+            
+            // مراقبة التغييرات في الصفحة
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        }
+    });
+
 });

odex25_base/web_hijri_datepicker/static/src/scss/web_hijri_date.scss

@@ -64,3 +64,115 @@
         }
     }
 }
+
+/* ✅ تحسينات جديدة للـ placeholder */
+
+/* تأكد من عرض placeholder بوضوح */
+.o_datepicker_input::placeholder,
+.o_hijri::placeholder {
+    color: #6c757d !important;
+    opacity: 1 !important;
+    font-style: italic;
+    font-size: 13px;
+}
+
+/* تأكد من عرض placeholder في جميع المتصفحات */
+.o_datepicker_input::-webkit-input-placeholder,
+.o_hijri::-webkit-input-placeholder {
+    color: #6c757d !important;
+    opacity: 1 !important;
+    font-style: italic;
+}
+
+.o_datepicker_input::-moz-placeholder,
+.o_hijri::-moz-placeholder {
+    color: #6c757d !important;
+    opacity: 1 !important;
+    font-style: italic;
+}
+
+.o_datepicker_input:-ms-input-placeholder,
+.o_hijri:-ms-input-placeholder {
+    color: #6c757d !important;
+    opacity: 1 !important;
+    font-style: italic;
+}
+
+.o_datepicker_input:-moz-placeholder,
+.o_hijri:-moz-placeholder {
+    color: #6c757d !important;
+    opacity: 1 !important;
+    font-style: italic;
+}
+
+/* تحسين عرض الحقول في النماذج */
+.o_form_view .o_datepicker {
+    .o_datepicker_input,
+    .o_hijri {
+        border: 1px solid #ced4da;
+        border-radius: 0.375rem;
+        padding: 0.375rem 0.75rem;
+        
+        &:focus {
+            border-color: #80bdff;
+            box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+        }
+        
+        &::placeholder {
+            color: #6c757d !important;
+            opacity: 0.8 !important;
+        }
+    }
+}
+
+/* تحسين العرض في القوائم */
+.o_list_view .o_datepicker {
+    .o_datepicker_input::placeholder,
+    .o_hijri::placeholder {
+        font-size: 12px !important;
+        color: #868e96 !important;
+    }
+}
+
+/* إضافة تمييز بصري للحقل الهجري */
+.o_hijri {
+    background-color: #f8f9fa !important;
+    border-left: 3px solid #28a745 !important;
+}
+
+/* تحسين التباعد */
+.o_datepicker .o_hijri {
+    margin-top: 8px !important;
+}
+
+/* تحسين الأيقونات */
+.o_datepicker_button {
+    color: #6c757d;
+    
+    &:hover {
+        color: #495057;
+    }
+}
+
+.o_hijri_datepicker_button {
+    color: #28a745;
+    
+    &:hover {
+        color: #1e7e34;
+    }
+}
+
+/* استجابة للأجهزة المحمولة */
+@media (max-width: 768px) {
+    .o_datepicker {
+        .o_datepicker_input,
+        .o_hijri {
+            font-size: 14px !important;
+            padding: 0.5rem !important;
+            
+            &::placeholder {
+                font-size: 13px !important;
+            }
+        }
+    }
+}