mirror of https://github.com/langgenius/dify.git
UI improvements: fix translation and custom icons for schedule trigger (#24167)
This commit is contained in:
parent
16ef5ebb97
commit
6acbcfe679
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.58325 1.75L7.58314 5.98908L11.2549 3.86982L11.8382 4.88018L8.16705 6.99942L11.8382 9.11983L11.2549 10.1302L7.58314 8.01033L7.58325 12.25H6.41659L6.41647 8.01033L2.74495 10.1302L2.16162 9.11983L5.83254 7L2.16162 4.88018L2.74495 3.86982L6.41647 5.98908L6.41659 1.75H7.58325Z" fill="#354052"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 406 B |
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.24984 0.583252V1.74992H8.74984V0.583252H9.9165V1.74992H12.2498C12.572 1.74992 12.8332 2.01109 12.8332 2.33325V11.6666C12.8332 11.9888 12.572 12.2499 12.2498 12.2499H1.74984C1.42767 12.2499 1.1665 11.9888 1.1665 11.6666V2.33325C1.1665 2.01109 1.42767 1.74992 1.74984 1.74992H4.08317V0.583252H5.24984ZM11.6665 5.83325H2.33317V11.0833H11.6665V5.83325ZM8.77055 6.49592L9.5955 7.32093L6.70817 10.2083L4.64578 8.14588L5.47073 7.32093L6.70817 8.55835L8.77055 6.49592ZM4.08317 2.91659H2.33317V4.66659H11.6665V2.91659H9.9165V3.49992H8.74984V2.91659H5.24984V3.49992H4.08317V2.91659Z" fill="#354052"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 706 B |
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "14",
|
||||
"height": "14",
|
||||
"viewBox": "0 0 14 14",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"d": "M7.58325 1.75L7.58314 5.98908L11.2549 3.86982L11.8382 4.88018L8.16705 6.99942L11.8382 9.11983L11.2549 10.1302L7.58314 8.01033L7.58325 12.25H6.41659L6.41647 8.01033L2.74495 10.1302L2.16162 9.11983L5.83254 7L2.16162 4.88018L2.74495 3.86982L6.41647 5.98908L6.41659 1.75H7.58325Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "Asterisk"
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './Asterisk.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'Asterisk'
|
||||
|
||||
export default Icon
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"icon": {
|
||||
"type": "element",
|
||||
"isRootNode": true,
|
||||
"name": "svg",
|
||||
"attributes": {
|
||||
"width": "14",
|
||||
"height": "14",
|
||||
"viewBox": "0 0 14 14",
|
||||
"fill": "none",
|
||||
"xmlns": "http://www.w3.org/2000/svg"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "element",
|
||||
"name": "path",
|
||||
"attributes": {
|
||||
"d": "M5.24984 0.583252V1.74992H8.74984V0.583252H9.9165V1.74992H12.2498C12.572 1.74992 12.8332 2.01109 12.8332 2.33325V11.6666C12.8332 11.9888 12.572 12.2499 12.2498 12.2499H1.74984C1.42767 12.2499 1.1665 11.9888 1.1665 11.6666V2.33325C1.1665 2.01109 1.42767 1.74992 1.74984 1.74992H4.08317V0.583252H5.24984ZM11.6665 5.83325H2.33317V11.0833H11.6665V5.83325ZM8.77055 6.49592L9.5955 7.32093L6.70817 10.2083L4.64578 8.14588L5.47073 7.32093L6.70817 8.55835L8.77055 6.49592ZM4.08317 2.91659H2.33317V4.66659H11.6665V2.91659H9.9165V3.49992H8.74984V2.91659H5.24984V3.49992H4.08317V2.91659Z",
|
||||
"fill": "currentColor"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
]
|
||||
},
|
||||
"name": "CalendarCheckLine"
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// GENERATE BY script
|
||||
// DON NOT EDIT IT MANUALLY
|
||||
|
||||
import * as React from 'react'
|
||||
import data from './CalendarCheckLine.json'
|
||||
import IconBase from '@/app/components/base/icons/IconBase'
|
||||
import type { IconData } from '@/app/components/base/icons/IconBase'
|
||||
|
||||
const Icon = (
|
||||
{
|
||||
ref,
|
||||
...props
|
||||
}: React.SVGProps<SVGSVGElement> & {
|
||||
ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
|
||||
},
|
||||
) => <IconBase {...props} ref={ref} data={data as IconData} />
|
||||
|
||||
Icon.displayName = 'CalendarCheckLine'
|
||||
|
||||
export default Icon
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
export { default as Agent } from './Agent'
|
||||
export { default as Answer } from './Answer'
|
||||
export { default as Assigner } from './Assigner'
|
||||
export { default as Asterisk } from './Asterisk'
|
||||
export { default as CalendarCheckLine } from './CalendarCheckLine'
|
||||
export { default as Code } from './Code'
|
||||
export { default as DocsExtractor } from './DocsExtractor'
|
||||
export { default as End } from './End'
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ const getIcon = (type: BlockEnum, className: string) => {
|
|||
[BlockEnum.Agent]: <Agent className={className} />,
|
||||
[BlockEnum.TriggerSchedule]: <Schedule className={className} />,
|
||||
[BlockEnum.TriggerWebhook]: <WebhookLine className={className} />,
|
||||
[BlockEnum.TriggerPlugin]: null,
|
||||
}[type]
|
||||
}
|
||||
const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
|
||||
|
|
@ -89,6 +90,7 @@ const ICON_CONTAINER_BG_COLOR_MAP: Record<string, string> = {
|
|||
[BlockEnum.Agent]: 'bg-util-colors-indigo-indigo-500',
|
||||
[BlockEnum.TriggerSchedule]: 'bg-util-colors-violet-violet-500',
|
||||
[BlockEnum.TriggerWebhook]: 'bg-util-colors-blue-blue-500',
|
||||
[BlockEnum.TriggerPlugin]: 'bg-util-colors-white-white-500',
|
||||
}
|
||||
const BlockIcon: FC<BlockIconProps> = ({
|
||||
type,
|
||||
|
|
@ -107,7 +109,11 @@ const BlockIcon: FC<BlockIconProps> = ({
|
|||
>
|
||||
{
|
||||
type !== BlockEnum.Tool && (
|
||||
getIcon(type, size === 'xs' ? 'w-3 h-3' : 'w-3.5 h-3.5')
|
||||
getIcon(type,
|
||||
(type === BlockEnum.TriggerSchedule || type === BlockEnum.TriggerWebhook)
|
||||
? (size === 'xs' ? 'w-4 h-4' : 'w-4.5 h-4.5')
|
||||
: (size === 'xs' ? 'w-3 h-3' : 'w-3.5 h-3.5'),
|
||||
)
|
||||
)
|
||||
}
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiAsterisk, RiCalendarLine } from '@remixicon/react'
|
||||
import { Asterisk, CalendarCheckLine } from '@/app/components/base/icons/src/vender/workflow'
|
||||
import type { ScheduleMode } from '../types'
|
||||
|
||||
type ModeToggleProps = {
|
||||
|
|
@ -20,7 +20,7 @@ const ModeToggle = ({ mode, onChange }: ModeToggleProps) => {
|
|||
? t('workflow.nodes.triggerSchedule.useCronExpression')
|
||||
: t('workflow.nodes.triggerSchedule.useVisualPicker')
|
||||
|
||||
const currentIcon = mode === 'visual' ? RiAsterisk : RiCalendarLine
|
||||
const currentIcon = mode === 'visual' ? Asterisk : CalendarCheckLine
|
||||
|
||||
return (
|
||||
<button
|
||||
|
|
@ -28,7 +28,7 @@ const ModeToggle = ({ mode, onChange }: ModeToggleProps) => {
|
|||
onClick={handleToggle}
|
||||
className="flex cursor-pointer items-center gap-1 rounded-lg px-2 py-1 text-sm text-text-secondary hover:bg-state-base-hover"
|
||||
>
|
||||
{React.createElement(currentIcon, { className: 'w-3 h-3' })}
|
||||
{React.createElement(currentIcon, { className: 'w-4 h-4' })}
|
||||
<span>{currentText}</span>
|
||||
</button>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -221,7 +221,7 @@ const translation = {
|
|||
},
|
||||
tabs: {
|
||||
'searchBlock': 'Search node',
|
||||
'start': 'User Input',
|
||||
'start': 'Start',
|
||||
'blocks': 'Nodes',
|
||||
'searchTool': 'Search tool',
|
||||
'tools': 'Tools',
|
||||
|
|
|
|||
Loading…
Reference in New Issue