design bug fix
This commit is contained in:
hamid zarghami
+26
-27
@@ -1,9 +1,11 @@
|
||||
import { FC, useEffect, useState, ChangeEvent } from 'react';
|
||||
import { Filter, CloseCircle } from 'iconsax-react';
|
||||
import { Filter } from 'iconsax-react';
|
||||
import DatePicker from './DatePicker';
|
||||
import Input from './Input';
|
||||
import Select, { ItemsSelectType } from './Select';
|
||||
import DefaulModal from './DefaulModal';
|
||||
import moment from 'moment-jalaali'
|
||||
import Button from './Button';
|
||||
|
||||
// تعریف نوع داده برای فیلدهای مختلف
|
||||
export type DateFieldType = {
|
||||
@@ -156,35 +158,32 @@ const Filters: FC<FiltersProps> = ({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* فیلترها برای موبایل (قابل باز و بسته شدن) */}
|
||||
{isFiltersOpen && (
|
||||
<div className="md:hidden w-full animate-fadeInDown">
|
||||
<div className="bg-gradient-to-br from-white to-gray-50 border border-gray-200 rounded-xl p-5 space-y-4">
|
||||
<div className="flex items-center justify-between pb-3 border-b border-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter size={16} color="#6B7280" />
|
||||
<span className="text-sm font-medium text-gray-700">فیلتر کردن نتایج</span>
|
||||
{/* فیلترها برای موبایل (در قالب مودال) */}
|
||||
<DefaulModal
|
||||
open={isFiltersOpen}
|
||||
close={() => setIsFiltersOpen(false)}
|
||||
isHeader={true}
|
||||
title_header="فیلتر کردن نتایج"
|
||||
>
|
||||
<div className="pb-5 gap-4 flex flex-col-reverse">
|
||||
{otherFields.map(field => (
|
||||
<div key={field.name} className="w-full">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{field.placeholder}
|
||||
</label>
|
||||
<div className="w-full">
|
||||
{renderField(field)}
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsFiltersOpen(false)}
|
||||
className="p-1 hover:bg-gray-100 rounded-full transition-colors"
|
||||
>
|
||||
<CloseCircle size={18} color="#6B7280" />
|
||||
</button>
|
||||
</div>
|
||||
{otherFields.map(field => (
|
||||
<div key={field.name} className="w-full">
|
||||
<label className="block text-xs font-medium text-gray-600 mb-2">
|
||||
{field.placeholder}
|
||||
</label>
|
||||
<div className="transform hover:scale-[1.02] transition-transform duration-200">
|
||||
{renderField(field)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className='mt-6'>
|
||||
<Button
|
||||
label='بستن'
|
||||
onClick={() => setIsFiltersOpen(false)}
|
||||
/>
|
||||
</div>
|
||||
</DefaulModal>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -12,7 +12,7 @@ const HeaderModal: FC<Props> = (props: Props) => {
|
||||
<div className='flex justify-between items-center'>
|
||||
<div className='text-sm'>{props.label}</div>
|
||||
<div className='size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center'>
|
||||
<CloseCircle size={16} color='white' onClick={props.close} />
|
||||
<CloseCircle size={20} color='black' onClick={props.close} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -116,7 +116,7 @@ const NewMessage: FC = () => {
|
||||
}`}
|
||||
onClick={handleClose}
|
||||
/>
|
||||
<div className={`fixed left-2 bottom-2 md:left-4 md:bottom-4 bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] p-4 md:p-6 xl:p-8 w-auto xl:w-[800px] max-h-[90vh] overflow-y-auto transition-transform duration-300 ease-out ${isClosing ? 'translate-y-[120%]' : isOpening ? 'translate-y-full' : 'translate-y-0'
|
||||
<div className={`fixed bottom-2 inset-x-2 md:bottom-4 md:inset-x-4 xl:left-4 xl:right-auto xl:bottom-4 bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] p-4 md:p-6 xl:p-8 xl:w-[800px] max-h-[90vh] overflow-y-auto transition-transform duration-300 ease-out ${isClosing ? 'translate-y-[120%]' : isOpening ? 'translate-y-full' : 'translate-y-0'
|
||||
}`}>
|
||||
{/* Header */}
|
||||
<div className='flex justify-between items-center mb-6 md:mb-8'>
|
||||
|
||||
@@ -49,18 +49,15 @@ const Reply: FC<ReplyProps> = ({
|
||||
|
||||
|
||||
const handleClose = async () => {
|
||||
// اگر محتوایی وارد شده، پیشنویس ذخیره کن
|
||||
if (content.trim()) {
|
||||
await handleSaveDraft()
|
||||
toast('پیشنویس ذخیره شد', 'success')
|
||||
}
|
||||
|
||||
// بسته کردن و برگشت به حالت قبل
|
||||
collapseReply()
|
||||
onClose?.() // این خط مهمه تا parent component بفهمه
|
||||
onClose?.()
|
||||
}
|
||||
|
||||
// اگر showInitialButton true باشه و هنوز expand نشده، فقط دکمه نشون بده
|
||||
if (showInitialButton && !isExpanded) {
|
||||
return (
|
||||
<div className={`flex justify-end ${className}`}>
|
||||
@@ -82,12 +79,8 @@ const Reply: FC<ReplyProps> = ({
|
||||
collapseReply()
|
||||
}
|
||||
|
||||
// در غیر این صورت editor رو نشون بده
|
||||
// (یا showInitialButton false هست یا isExpanded true هست)
|
||||
|
||||
return (
|
||||
<div className={`mt-6 w-full ${className}`}>
|
||||
{/* Reply Header */}
|
||||
<div className='flex items-center justify-between mb-4 p-3 bg-gray-50 rounded-lg border'>
|
||||
<div className='flex items-center gap-2 text-sm text-gray-600'>
|
||||
<img src={AnswerIcon} className='w-4 h-4' />
|
||||
@@ -114,11 +107,10 @@ const Reply: FC<ReplyProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reply Content */}
|
||||
|
||||
<div className='flex gap-4'>
|
||||
<img src={AvatarImage} className='size-10 flex-shrink-0' />
|
||||
<img src={AvatarImage} className='size-10 xl:block hidden flex-shrink-0' />
|
||||
<div className='w-full'>
|
||||
{/* To Field */}
|
||||
<div className='mb-4 text-sm'>
|
||||
<div className='flex items-center gap-2 p-2 bg-gray-50 rounded border'>
|
||||
<span className='text-gray-600 min-w-fit'>به:</span>
|
||||
@@ -126,7 +118,6 @@ const Reply: FC<ReplyProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Subject Field */}
|
||||
<div className='mb-4 text-sm'>
|
||||
<div className='flex items-center gap-2 p-2 bg-gray-50 rounded border'>
|
||||
<span className='text-gray-600 min-w-fit'>موضوع:</span>
|
||||
@@ -138,7 +129,6 @@ const Reply: FC<ReplyProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editor */}
|
||||
<div className='mb-4'>
|
||||
<EmailEditor
|
||||
value={content}
|
||||
@@ -147,7 +137,6 @@ const Reply: FC<ReplyProps> = ({
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<EmailFormActions
|
||||
onSend={handleSend}
|
||||
onClose={handleClose}
|
||||
|
||||
Reference in New Issue
Block a user