chore: some components upgrage to new ui (#6468)
This commit is contained in:
Joel
@@ -38,13 +38,13 @@ const Filed: FC<Props> = ({
|
||||
onClick={() => supportFold && toggleFold()}
|
||||
className={cn('flex justify-between items-center', supportFold && 'cursor-pointer')}>
|
||||
<div className='flex items-center h-6'>
|
||||
<div className='text-[13px] font-medium text-gray-700 uppercase'>{title}</div>
|
||||
<div className='system-sm-semibold-uppercase text-text-secondary'>{title}</div>
|
||||
{tooltip && (
|
||||
<TooltipPlus popupContent={
|
||||
<div className='w-[120px]'>
|
||||
{tooltip}
|
||||
</div>}>
|
||||
<RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-gray-400' />
|
||||
<RiQuestionLine className='w-3.5 h-3.5 ml-0.5 text-text-quaternary' />
|
||||
</TooltipPlus>
|
||||
)}
|
||||
|
||||
@@ -52,7 +52,7 @@ const Filed: FC<Props> = ({
|
||||
<div className='flex'>
|
||||
{operations && <div>{operations}</div>}
|
||||
{supportFold && (
|
||||
<RiArrowDownSLine className='w-3.5 h-3.5 text-gray-500 cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
|
||||
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary cursor-pointer transform transition-transform' style={{ transform: fold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -51,23 +51,23 @@ const Add = ({
|
||||
return (
|
||||
<div
|
||||
className={`
|
||||
relative flex items-center px-2 h-9 rounded-lg border border-dashed border-gray-200 bg-gray-50
|
||||
hover:bg-gray-100 text-xs text-gray-500 cursor-pointer
|
||||
${open && '!bg-gray-100'}
|
||||
relative flex items-center px-2 h-9 rounded-lg border border-dashed border-divider-regular bg-dropzone-bg
|
||||
hover:bg-dropzone-bg-hover text-xs text-text-placeholder cursor-pointer
|
||||
${open && '!bg-components-dropzone-bg-alt'}
|
||||
${nodesReadOnly && '!cursor-not-allowed'}
|
||||
`}
|
||||
>
|
||||
{
|
||||
branchName && (
|
||||
<div
|
||||
className='absolute left-1 right-1 -top-[7.5px] flex items-center h-3 text-[10px] text-gray-500 font-semibold'
|
||||
className='absolute left-1 right-1 -top-[7.5px] flex items-center h-3 text-[10px] text-text-placeholder font-semibold'
|
||||
title={branchName.toLocaleUpperCase()}
|
||||
>
|
||||
<div className='inline-block px-0.5 rounded-[5px] bg-white truncate'>{branchName.toLocaleUpperCase()}</div>
|
||||
<div className='inline-block px-0.5 rounded-[5px] bg-background-default truncate'>{branchName.toLocaleUpperCase()}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-gray-200'>
|
||||
<div className='flex items-center justify-center mr-1.5 w-5 h-5 rounded-[5px] bg-background-default-dimm'>
|
||||
<RiAddLine className='w-3 h-3' />
|
||||
</div>
|
||||
{t('workflow.panel.selectNextStep')}
|
||||
|
||||
@@ -33,7 +33,7 @@ const NextStep = ({
|
||||
|
||||
return (
|
||||
<div className='flex py-1'>
|
||||
<div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-white rounded-lg border-[0.5px] border-gray-200 shadow-xs'>
|
||||
<div className='shrink-0 relative flex items-center justify-center w-9 h-9 bg-background-default rounded-lg border-[0.5px] border-divider-regular shadow-xs'>
|
||||
<BlockIcon
|
||||
type={selectedNode!.data.type}
|
||||
toolIcon={toolIcon}
|
||||
|
||||
@@ -58,7 +58,7 @@ const Item = ({
|
||||
|
||||
return (
|
||||
<div
|
||||
className='relative group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-gray-200 bg-white hover:bg-gray-50 shadow-xs text-xs text-gray-700 cursor-pointer'
|
||||
className='relative group flex items-center mb-3 last-of-type:mb-0 px-2 h-9 rounded-lg border-[0.5px] border-divider-regular bg-background-default hover:bg-background-default-hover shadow-xs text-xs text-text-secondary cursor-pointer'
|
||||
>
|
||||
{
|
||||
branchName && (
|
||||
@@ -75,7 +75,7 @@ const Item = ({
|
||||
toolIcon={toolIcon}
|
||||
className='shrink-0 mr-1.5'
|
||||
/>
|
||||
<div className='grow'>{data.title}</div>
|
||||
<div className='grow system-xs-medium text-text-secondary'>{data.title}</div>
|
||||
{
|
||||
!nodesReadOnly && (
|
||||
<BlockSelector
|
||||
|
||||
@@ -16,18 +16,18 @@ const Line = ({
|
||||
{
|
||||
index === 0 && (
|
||||
<>
|
||||
<path
|
||||
d='M0,18 L24,18'
|
||||
strokeWidth={1}
|
||||
fill='none'
|
||||
className='stroke-divider-soild'
|
||||
/>
|
||||
<rect
|
||||
x={0}
|
||||
y={16}
|
||||
width={1}
|
||||
height={4}
|
||||
fill='#98A2B3'
|
||||
/>
|
||||
<path
|
||||
d='M0,18 L24,18'
|
||||
strokeWidth={1}
|
||||
stroke='#D0D5DD'
|
||||
fill='none'
|
||||
className='fill-divider-soild-alt'
|
||||
/>
|
||||
</>
|
||||
)
|
||||
@@ -37,8 +37,8 @@ const Line = ({
|
||||
<path
|
||||
d={`M0,18 Q12,18 12,28 L12,${index * 48 + 18 - 10} Q12,${index * 48 + 18} 24,${index * 48 + 18}`}
|
||||
strokeWidth={1}
|
||||
stroke='#D0D5DD'
|
||||
fill='none'
|
||||
className='stroke-divider-soild'
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -47,7 +47,7 @@ const Line = ({
|
||||
y={index * 48 + 18 - 2}
|
||||
width={1}
|
||||
height={4}
|
||||
fill='#98A2B3'
|
||||
className='fill-divider-soild-alt'
|
||||
/>
|
||||
</g>
|
||||
))
|
||||
|
||||
@@ -3,8 +3,10 @@ import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useBoolean } from 'ahooks'
|
||||
import {
|
||||
RiArrowDownSLine,
|
||||
} from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import { ChevronRight } from '@/app/components/base/icons/src/vender/line/arrows'
|
||||
|
||||
type Props = {
|
||||
className?: string
|
||||
@@ -25,9 +27,9 @@ const OutputVars: FC<Props> = ({
|
||||
<div>
|
||||
<div
|
||||
onClick={toggleFold}
|
||||
className={cn(className, 'flex justify-between leading-[18px] text-[13px] font-semibold text-gray-700 uppercase cursor-pointer')}>
|
||||
className={cn(className, 'flex justify-between system-sm-semibold-uppercase text-text-secondary cursor-pointer')}>
|
||||
<div>{title || t('workflow.nodes.common.outputVars')}</div>
|
||||
<ChevronRight className='w-4 h-4 text-gray-500 transform transition-transform' style={{ transform: isFold ? 'rotate(0deg)' : 'rotate(90deg)' }} />
|
||||
<RiArrowDownSLine className='w-4 h-4 text-text-tertiary transform transition-transform' style={{ transform: isFold ? 'rotate(-90deg)' : 'rotate(0deg)' }} />
|
||||
</div>
|
||||
{!isFold && (
|
||||
<div className='mt-2 space-y-1'>
|
||||
@@ -57,10 +59,10 @@ export const VarItem: FC<VarItemProps> = ({
|
||||
return (
|
||||
<div className='py-1'>
|
||||
<div className='flex leading-[18px] items-center'>
|
||||
<div className='text-[13px] font-medium text-gray-900 font-mono'>{name}</div>
|
||||
<div className='ml-2 text-xs font-normal text-gray-500 capitalize'>{type}</div>
|
||||
<div className='code-sm-semibold text-text-secondary'>{name}</div>
|
||||
<div className='ml-2 system-xs-regular text-text-tertiary'>{type}</div>
|
||||
</div>
|
||||
<div className='mt-0.5 leading-[18px] text-xs font-normal text-gray-600'>
|
||||
<div className='mt-0.5 system-xs-regular text-text-tertiary'>
|
||||
{description}
|
||||
{subItems && (
|
||||
<div className='ml-2 border-l border-gray-200 pl-2'>
|
||||
|
||||
Reference in New Issue
Block a user