Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
@@ -17,18 +17,18 @@ const Footer: FC<DatePickerFooterProps> = ({
|
||||
|
||||
return (
|
||||
<div className={cn(
|
||||
'flex justify-between items-center p-2 border-t-[0.5px] border-divider-regular',
|
||||
'flex items-center justify-between border-t-[0.5px] border-divider-regular p-2',
|
||||
!needTimePicker && 'justify-end',
|
||||
)}>
|
||||
{/* Time Picker */}
|
||||
{needTimePicker && (
|
||||
<button
|
||||
type='button'
|
||||
className='flex items-center rounded-md px-1.5 py-1 gap-x-[1px] border-[0.5px] border-components-button-secondary-border system-xs-medium
|
||||
bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px] text-components-button-secondary-accent-text'
|
||||
className='system-xs-medium flex items-center gap-x-[1px] rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-1.5
|
||||
py-1 text-components-button-secondary-accent-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[5px]'
|
||||
onClick={handleClickTimePicker}
|
||||
>
|
||||
<RiTimeLine className='w-3.5 h-3.5' />
|
||||
<RiTimeLine className='h-3.5 w-3.5' />
|
||||
{view === ViewType.date && <span>{displayTime}</span>}
|
||||
{view === ViewType.time && <span>{t('time.operation.pickDate')}</span>}
|
||||
</button>
|
||||
@@ -37,7 +37,7 @@ const Footer: FC<DatePickerFooterProps> = ({
|
||||
{/* Now */}
|
||||
<button
|
||||
type='button'
|
||||
className='flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text system-xs-medium'
|
||||
className='system-xs-medium flex items-center justify-center px-1.5 py-1 text-components-button-secondary-accent-text'
|
||||
onClick={handleSelectCurrentDate}
|
||||
>
|
||||
<span className='px-[3px]'>{t('time.operation.now')}</span>
|
||||
|
||||
@@ -12,27 +12,27 @@ const Header: FC<DatePickerHeaderProps> = ({
|
||||
const months = useMonths()
|
||||
|
||||
return (
|
||||
<div className='flex items-center mx-2 mt-2'>
|
||||
<div className='mx-2 mt-2 flex items-center'>
|
||||
<div className='flex-1'>
|
||||
<button
|
||||
onClick={handleOpenYearMonthPicker}
|
||||
className='flex items-center gap-x-0.5 px-2 py-1.5 rounded-lg hover:bg-state-base-hover text-text-primary system-md-semibold'
|
||||
className='system-md-semibold flex items-center gap-x-0.5 rounded-lg px-2 py-1.5 text-text-primary hover:bg-state-base-hover'
|
||||
>
|
||||
<span>{`${months[currentDate.month()]} ${currentDate.year()}`}</span>
|
||||
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClickPrevMonth}
|
||||
className='p-1.5 hover:bg-state-base-hover rounded-lg'
|
||||
className='rounded-lg p-1.5 hover:bg-state-base-hover'
|
||||
>
|
||||
<RiArrowUpSLine className='w-[18px] h-[18px] text-text-secondary' />
|
||||
<RiArrowUpSLine className='h-[18px] w-[18px] text-text-secondary' />
|
||||
</button>
|
||||
<button
|
||||
onClick={onClickNextMonth}
|
||||
className='p-1.5 hover:bg-state-base-hover rounded-lg'
|
||||
className='rounded-lg p-1.5 hover:bg-state-base-hover'
|
||||
>
|
||||
<RiArrowDownSLine className='w-[18px] h-[18px] text-text-secondary' />
|
||||
<RiArrowDownSLine className='h-[18px] w-[18px] text-text-secondary' />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -213,25 +213,25 @@ const DatePicker = ({
|
||||
handleClickTrigger,
|
||||
})) : (
|
||||
<div
|
||||
className='w-[252px] flex items-center gap-x-0.5 rounded-lg px-2 py-1 bg-components-input-bg-normal cursor-pointer group hover:bg-state-base-hover-alt'
|
||||
className='group flex w-[252px] cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt'
|
||||
onClick={handleClickTrigger}
|
||||
>
|
||||
<input
|
||||
className='flex-1 p-1 bg-transparent text-components-input-text-filled placeholder:text-components-input-text-placeholder truncate system-xs-regular
|
||||
outline-none appearance-none cursor-pointer'
|
||||
className='system-xs-regular flex-1 cursor-pointer appearance-none truncate bg-transparent p-1
|
||||
text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder'
|
||||
readOnly
|
||||
value={isOpen ? '' : displayValue}
|
||||
placeholder={placeholderDate}
|
||||
/>
|
||||
<RiCalendarLine className={cn(
|
||||
'shrink-0 w-4 h-4 text-text-quaternary',
|
||||
'h-4 w-4 shrink-0 text-text-quaternary',
|
||||
isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
|
||||
(displayValue || (isOpen && selectedDate)) && 'group-hover:hidden',
|
||||
)} />
|
||||
<RiCloseCircleFill
|
||||
className={cn(
|
||||
'hidden shrink-0 w-4 h-4 text-text-quaternary',
|
||||
(displayValue || (isOpen && selectedDate)) && 'group-hover:inline-block hover:text-text-secondary',
|
||||
'hidden h-4 w-4 shrink-0 text-text-quaternary',
|
||||
(displayValue || (isOpen && selectedDate)) && 'hover:text-text-secondary group-hover:inline-block',
|
||||
)}
|
||||
onClick={handleClear}
|
||||
/>
|
||||
@@ -239,7 +239,7 @@ const DatePicker = ({
|
||||
)}
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className={popupZIndexClassname}>
|
||||
<div className='w-[252px] mt-1 bg-components-panel-bg rounded-xl shadow-lg shadow-shadow-shadow-5 border-[0.5px] border-components-panel-border'>
|
||||
<div className='mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
|
||||
{/* Header */}
|
||||
{view === ViewType.date ? (
|
||||
<DatePickerHeader
|
||||
|
||||
Reference in New Issue
Block a user