لقد أجريت بعض التعديلات البسيطة على صفحة الدردشة لتحسين التصميم وجعلها تبدو أكثر سلاسة. إليك ملخص للتغييرات التي أجريتها:
- نقل مؤشر الكتابة:
لقد قمت بتغيير موضع مؤشر الكتابة بحيث يظهر الآن فوق مربع النص بدلاً من أسفله. يبدو هذا طبيعيًا أكثر ويسهل ملاحظته عندما يكتب شخص ما. - زيادة حجم خط مؤشر الكتابة:
لقد جعلت حجم خط مؤشر الكتابة أكبر قليلاً. أصبح الآن أكثر وضوحًا ويبرز أكثر، مما يجعله أسهل للقراءة بسرعة. - تنظيف الصور:
لقد قمت بإزالة اسم المستند/عنوان URL الذي كان يحيط بالصور، وأضفت إليها نصف قطر حدود صغير. هذا يمنح الصور مظهرًا أنظف وأكثر احترافية ويزيل الفوضى غير الضرورية. - جعل مؤشر الكتابة أكثر ديناميكية:
لقد أضفت تأثيرًا ديناميكيًا بسيطًا إلى مؤشر الكتابة. الآن، عندما يظهر، تنزلق الرسائل لأعلى قليلاً لتفسح المجال، وعندما يختفي المؤشر، تنزلق الرسائل لأسفل مرة أخرى. هذا الانتقال السلس يجعل التجربة بأكملها تبدو أكثر سلاسة وتفاعلية.
هذه مجرد تعديلات تصميم بسيطة. بالنسبة لي، تبدو أنظف، وأكثر سلاسة، وبشكل عام أكثر احترافية. أخبرني برأيك، ولا تتردد في اقتراح أي تغييرات أو تحسينات أخرى!
إليك الكود:
// مؤشر الكتابة
/* إضافة مسافة أسفل مؤشر الرد */
.chat-replying-indicator-container {
order: -1; /* ينقل مؤشر الرد فوق منطقة النص */
}
.chat-composer__outer-container {
display: flex
;
align-items: center;
box-sizing: border-box;
width: 100%;
padding-inline: 0rem;
padding-bottom: 1rem;
}
.chat-message-collapser .chat-message-collapser-header {
display: none;
align-items: center;
}
.chat-message .onebox img:not(.ytp-thumbnail-image, .onebox-avatar-inline),
.chat-message img.onebox,
.chat-message .chat-uploads img,
.chat-message p img,
.chat-message aside.onebox .onebox-body .aspect-image-full-size,
.chat-message aside.onebox .onebox-body .aspect-image-full-size img,
.chat-message .chat-message-text p img:not(.emoji) {
object-fit: cover; /* تغطية الحاوية للحفاظ على نصف قطر الحدود */
max-height: 300px;
max-width: 90%;
width: unset;
overflow: hidden;
border-radius: 20px; /* زوايا مستديرة */
}
.chat-replying-indicator {
color: var(--primary-medium);
display: inline-flex;
font-size: 1em;
padding-bottom:10px;
}
.chat-replying-indicator-container {
margin-bottom: 10px; /* اضبط القيمة حسب الحاجة */
margin-top: -20px;
}
.chat-replying-indicator-container {
margin-top: -30px; /* الموضع الافتراضي عند عدم الكتابة */
transition: margin-top 0.3s ease; /* انتقال سلس */
}
.chat-replying-indicator-container:has(.chat-replying-indicator__text) {
margin-top: 0px; /* الموضع عند الكتابة */
}
ملاحظة: هذا خصيصًا للجوال.
هذا ما تبدو عليه الآن:
