estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Dark Mode: Workflow darkmode style (#11695)

Browse Source
This commit is contained in:
NFish
2024-12-17 12:20:49 +08:00
committed by GitHub
parent 92a840f1b2
commit a399502ecd
26 changed files with 179 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/components/workflow/operator/add-block.tsx
View File

@@ -78,9 +78,9 @@ const AddBlock = ({
title={t('workflow.common.addBlock')}
>
<div className={cn(
'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`,
open && '!bg-black/5',
'flex items-center justify-center w-8 h-8 rounded-lg text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
`${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
open && 'bg-state-accent-active text-text-accent',
)}>
<RiAddCircleFill className='w-4 h-4' />
</div>

23
web/app/components/workflow/operator/control.tsx
View File

@@ -18,6 +18,7 @@ import {
ControlMode,
} from '../types'
import { useStore } from '../store'
import Divider from '../../base/divider'
import AddBlock from './add-block'
import TipPopup from './tip-popup'
import { useOperator } from './hooks'
@@ -43,26 +44,26 @@ const Control = () => {
}
return (
<div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-gray-100 bg-white shadow-lg text-gray-500'>
<div className='flex items-center p-0.5 rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-lg text-text-tertiary'>
<AddBlock />
<TipPopup title={t('workflow.nodes.note.addNote')}>
<div
className={cn(
'flex items-center justify-center ml-[1px] w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`,
'flex items-center justify-center ml-[1px] w-8 h-8 rounded-lg hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
`${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
)}
onClick={addNote}
>
<RiStickyNoteAddLine className='w-4 h-4' />
</div>
</TipPopup>
<div className='mx-[3px] w-[1px] h-3.5 bg-gray-200'></div>
<Divider type='vertical' className='h-3.5 mx-0.5' />
<TipPopup title={t('workflow.common.pointerMode')} shortcuts={['v']}>
<div
className={cn(
'flex items-center justify-center mr-[1px] w-8 h-8 rounded-lg cursor-pointer',
controlMode === ControlMode.Pointer ? 'bg-primary-50 text-primary-600' : 'hover:bg-black/5 hover:text-gray-700',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`,
controlMode === ControlMode.Pointer ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
`${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
)}
onClick={handleModePointer}
>
@@ -73,20 +74,20 @@ const Control = () => {
<div
className={cn(
'flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer',
controlMode === ControlMode.Hand ? 'bg-primary-50 text-primary-600' : 'hover:bg-black/5 hover:text-gray-700',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`,
controlMode === ControlMode.Hand ? 'bg-state-accent-active text-text-accent' : 'hover:bg-state-base-hover hover:text-text-secondary',
`${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
)}
onClick={handleModeHand}
>
<RiHand className='w-4 h-4' />
</div>
</TipPopup>
<div className='mx-[3px] w-[1px] h-3.5 bg-gray-200'></div>
<Divider type='vertical' className='h-3.5 mx-0.5' />
<TipPopup title={t('workflow.panel.organizeBlocks')} shortcuts={['ctrl', 'o']}>
<div
className={cn(
'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-black/5 hover:text-gray-700 cursor-pointer',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`,
'flex items-center justify-center w-8 h-8 rounded-lg hover:bg-state-base-hover hover:text-text-secondary cursor-pointer',
`${nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled'}`,
)}
onClick={handleLayout}
>

4
web/app/components/workflow/operator/index.tsx
View File

@@ -17,7 +17,9 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
width: 102,
height: 72,
}}
className='!absolute !left-4 !bottom-14 z-[9] !m-0 !w-[102px] !h-[72px] !border-[0.5px] !border-black/8 !rounded-lg !shadow-lg'
maskColor='var(--color-shadow-shadow-5)'
className='!absolute !left-4 !bottom-14 z-[9] !m-0 !w-[102px] !h-[72px] !border-[0.5px] !border-divider-subtle
!rounded-lg !shadow-md !shadow-shadow-shadow-5 !bg-workflow-minimap-bg'
/>
<div className='flex items-center mt-1 gap-2 absolute left-4 bottom-4 z-[9]'>
<ZoomInOut />

8
web/app/components/workflow/operator/tip-popup.tsx
View File

@@ -15,12 +15,12 @@ const TipPopup = ({
return (
<Tooltip
offset={4}
popupClassName='!p-0 !bg-gray-25'
popupClassName='p-0 bg-transparent'
popupContent={
<div className='flex items-center gap-1 px-2 h-6 text-xs font-medium text-gray-700 rounded-lg border-[0.5px] border-black/5'>
{title}
<div className='flex items-center gap-1 p-1.5 backdrop-blur-[5px] shadow-lg rounded-lg border-[0.5px] border-components-panel-border bg-components-tooltip-bg'>
<span className='system-xs-medium text-text-secondary'>{title}</span>
{
shortcuts && <ShortcutsName keys={shortcuts} className='!text-[11px]' />
shortcuts && <ShortcutsName keys={shortcuts} />
}
</div>
}

62
web/app/components/workflow/operator/zoom-in-out.tsx
View File

@@ -18,10 +18,9 @@ import {
useNodesSyncDraft,
useWorkflowReadOnly,
} from '../hooks'
import {
getKeyboardKeyNameBySystem,
} from '../utils'
import ShortcutsName from '../shortcuts-name'
import Divider from '../../base/divider'
import TipPopup from './tip-popup'
import cn from '@/utils/classnames'
import {
@@ -132,53 +131,54 @@ const ZoomInOut: FC = () => {
>
<PortalToFollowElemTrigger asChild onClick={handleTrigger}>
<div className={`
p-0.5 h-9 cursor-pointer text-[13px] text-gray-500 font-medium rounded-lg bg-white shadow-lg border-[0.5px] border-gray-100
p-0.5 h-9 cursor-pointer text-[13px] backdrop-blur-[5px] rounded-lg
bg-components-actionbar-bg shadow-lg border-[0.5px] border-components-actionbar-border
hover:bg-state-base-hover
${workflowReadOnly && '!cursor-not-allowed opacity-50'}
`}>
<div className={cn(
'flex items-center justify-between w-[98px] h-8 hover:bg-gray-50 rounded-lg',
open && 'bg-gray-50',
'flex items-center justify-between w-[98px] h-8 rounded-lg',
)}>
<TipPopup
title={t('workflow.operator.zoomOut')}
shortcuts={['ctrl', '-']}
>
<div
className='flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer hover:bg-black/5'
className='flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
onClick={(e) => {
e.stopPropagation()
zoomOut()
}}
>
<RiZoomOutLine className='w-4 h-4' />
<RiZoomOutLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
</div>
</TipPopup>
<div className='w-[34px]'>{parseFloat(`${zoom * 100}`).toFixed(0)}%</div>
<div className={cn('w-[34px] system-sm-medium text-text-tertiary hover:text-text-secondary')}>{parseFloat(`${zoom * 100}`).toFixed(0)}%</div>
<TipPopup
title={t('workflow.operator.zoomIn')}
shortcuts={['ctrl', '+']}
>
<div
className='flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer hover:bg-black/5'
className='flex items-center justify-center w-8 h-8 rounded-lg cursor-pointer'
onClick={(e) => {
e.stopPropagation()
zoomIn()
}}
>
<RiZoomInLine className='w-4 h-4' />
<RiZoomInLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
</div>
</TipPopup>
</div>
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-10'>
<div className='w-[145px] rounded-lg border-[0.5px] border-gray-200 bg-white shadow-lg'>
<div className='w-[145px] backdrop-blur-[5px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
{
ZOOM_IN_OUT_OPTIONS.map((options, i) => (
<Fragment key={i}>
{
i !== 0 && (
<div className='h-[1px] bg-gray-100' />
<Divider className='m-0' />
)
}
<div className='p-1'>
@@ -186,25 +186,27 @@ const ZoomInOut: FC = () => {
options.map(option => (
<div
key={option.key}
className='flex items-center justify-between px-3 h-8 rounded-lg hover:bg-gray-50 cursor-pointer text-sm text-gray-700'
className='flex items-center justify-between space-x-1 py-1.5 pl-3 pr-2 h-8 rounded-lg hover:bg-state-base-hover cursor-pointer system-md-regular text-text-secondary'
onClick={() => handleZoom(option.key)}
>
{option.text}
{
option.key === ZoomType.zoomToFit && (
<ShortcutsName keys={[`${getKeyboardKeyNameBySystem('ctrl')}`, '1']} />
)
}
{
option.key === ZoomType.zoomTo50 && (
<ShortcutsName keys={['shift', '5']} />
)
}
{
option.key === ZoomType.zoomTo100 && (
<ShortcutsName keys={['shift', '1']} />
)
}
<span>{option.text}</span>
<div className='flex items-center space-x-0.5'>
{
option.key === ZoomType.zoomToFit && (
<ShortcutsName keys={['ctrl', '1']} />
)
}
{
option.key === ZoomType.zoomTo50 && (
<ShortcutsName keys={['shift', '5']} />
)
}
{
option.key === ZoomType.zoomTo100 && (
<ShortcutsName keys={['shift', '1']} />
)
}
</div>
</div>
))
}