From bb305e52bc982dee70363757becdf0fe480d7f97 Mon Sep 17 00:00:00 2001 From: twwu Date: Wed, 8 Jan 2025 15:40:02 +0800 Subject: [PATCH] feat: add dark mode to start node and add input filed modal --- .../base/icons/remove-icon/index.tsx | 16 ++-- .../config-var/config-select/index.tsx | 83 +++++++++++-------- .../config-var/config-select/style.module.css | 1 - .../config-var/select-type-item/index.tsx | 4 +- web/app/components/workflow/block-icon.tsx | 3 +- .../components/workflow/nodes/start/node.tsx | 10 +-- 6 files changed, 65 insertions(+), 52 deletions(-) diff --git a/web/app/components/app/configuration/base/icons/remove-icon/index.tsx b/web/app/components/app/configuration/base/icons/remove-icon/index.tsx index e07a462d49..0d04c854da 100644 --- a/web/app/components/app/configuration/base/icons/remove-icon/index.tsx +++ b/web/app/components/app/configuration/base/icons/remove-icon/index.tsx @@ -1,29 +1,25 @@ 'use client' -import React, { useState } from 'react' +import React from 'react' import cn from '@/utils/classnames' type IRemoveIconProps = { className?: string - isHoverStatus?: boolean onClick: () => void -} +} & React.HTMLAttributes const RemoveIcon = ({ className, - isHoverStatus, onClick, + ...props }: IRemoveIconProps) => { - const [isHovered, setIsHovered] = useState(false) - const computedIsHovered = isHoverStatus || isHovered return (
setIsHovered(true)} - onMouseLeave={() => setIsHovered(false)} + className={cn('flex w-6 h-6 items-center justify-center rounded-md cursor-pointer hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive', className)} onClick={onClick} + {...props} > - +
) diff --git a/web/app/components/app/configuration/config-var/config-select/index.tsx b/web/app/components/app/configuration/config-var/config-select/index.tsx index 449cb8b12f..3310533021 100644 --- a/web/app/components/app/configuration/config-var/config-select/index.tsx +++ b/web/app/components/app/configuration/config-var/config-select/index.tsx @@ -1,12 +1,13 @@ 'use client' import type { FC } from 'react' -import React from 'react' +import React, { useState } from 'react' import { useTranslation } from 'react-i18next' import { PlusIcon } from '@heroicons/react/24/outline' import { ReactSortable } from 'react-sortablejs' import RemoveIcon from '../../base/icons/remove-icon' import s from './style.module.css' +import cn from '@/utils/classnames' export type Options = string[] export type IConfigSelectProps = { @@ -19,6 +20,8 @@ const ConfigSelect: FC = ({ onChange, }) => { const { t } = useTranslation() + const [delBtnHoverIndex, setDelBtnHoverIndex] = useState(-1) + const [focusedIndex, setFocusedIndex] = useState(-1) const optionList = options.map((content, index) => { return ({ @@ -36,48 +39,62 @@ const ConfigSelect: FC = ({ list={optionList} setList={list => onChange(list.map(item => item.name))} handle='.handle' - ghostClass="opacity-50" + ghostClass="opacity-30" animation={150} > - {options.map((o, index) => ( -
-
- - - -
- { + const delBtnHover = delBtnHoverIndex === index + const inputFocused = focusedIndex === index + return ( +
{ - const value = e.target.value - onChange(options.map((item, i) => { - if (index === i) - return value + > +
+ + + +
+ { + const value = e.target.value + onChange(options.map((item, i) => { + if (index === i) + return value - return item - })) - }} - className={'w-full pl-1.5 pr-8 text-sm leading-9 text-gray-900 border-0 grow h-9 bg-transparent focus:outline-none cursor-pointer'} - /> - { - onChange(options.filter((_, i) => index !== i)) - }} - /> -
- ))} + return item + })) + }} + onFocus={() => { setFocusedIndex(index) }} + onBlur={() => { setFocusedIndex(-1) }} + className={'w-full pl-1 pr-8 system-sm-medium text-text-secondary border-0 grow h-8 bg-transparent group focus:outline-none cursor-pointer caret-[#295EFF]'} + /> + { + onChange(options.filter((_, i) => index !== i)) + }} + onMouseEnter={() => setDelBtnHoverIndex(index)} + onMouseLeave={() => setDelBtnHoverIndex(-1)} + /> +
) + })} )}
{ onChange([...options, '']) }} - className='flex items-center h-9 px-3 gap-2 rounded-lg cursor-pointer text-gray-400 bg-gray-100'> - -
{t('appDebug.variableConfig.addOption')}
+ className='flex items-center h-8 px-2 gap-1 rounded-lg cursor-pointer bg-components-button-tertiary-bg'> + +
{t('appDebug.variableConfig.addOption')}
) diff --git a/web/app/components/app/configuration/config-var/config-select/style.module.css b/web/app/components/app/configuration/config-var/config-select/style.module.css index a09d19537d..cf4cb66756 100644 --- a/web/app/components/app/configuration/config-var/config-select/style.module.css +++ b/web/app/components/app/configuration/config-var/config-select/style.module.css @@ -2,7 +2,6 @@ display: flex; align-items: center; border-radius: 8px; - border: 1px solid #EAECF0; padding-left: 10px; cursor: pointer; } diff --git a/web/app/components/app/configuration/config-var/select-type-item/index.tsx b/web/app/components/app/configuration/config-var/select-type-item/index.tsx index b71486b4eb..749993562c 100644 --- a/web/app/components/app/configuration/config-var/select-type-item/index.tsx +++ b/web/app/components/app/configuration/config-var/select-type-item/index.tsx @@ -32,9 +32,9 @@ const SelectTypeItem: FC = ({ onClick={onClick} >
- +
- {typeName} + {typeName} ) } diff --git a/web/app/components/workflow/block-icon.tsx b/web/app/components/workflow/block-icon.tsx index 1001e981c5..f09290c462 100644 --- a/web/app/components/workflow/block-icon.tsx +++ b/web/app/components/workflow/block-icon.tsx @@ -82,7 +82,8 @@ const BlockIcon: FC = ({ }) => { return (
> = ({
{variables.map(variable => ( -
+
- - {variable.variable} + + {variable.variable}
- {variable.required && {t(`${i18nPrefix}.required`)}} - + {variable.required && {t(`${i18nPrefix}.required`)}} +
))}