ソースを参照

fix can't resize workflow run panel (#18538)

tags/1.3.0
非法操作 6ヶ月前
コミット
35a008af18
コミッターのメールアドレスに関連付けられたアカウントが存在しません
1個のファイルの変更38行の追加2行の削除
  1. 38
    2
      web/app/components/workflow/panel/workflow-preview.tsx

+ 38
- 2
web/app/components/workflow/panel/workflow-preview.tsx ファイルの表示

@@ -1,5 +1,6 @@
import {
memo,
useCallback,
useEffect,
useState,
} from 'react'
@@ -47,10 +48,45 @@ const WorkflowPreview = () => {
switchTab('DETAIL')
}, [workflowRunningData])

const [panelWidth, setPanelWidth] = useState(420)
const [isResizing, setIsResizing] = useState(false)

const startResizing = useCallback((e: React.MouseEvent) => {
e.preventDefault()
setIsResizing(true)
}, [])

const stopResizing = useCallback(() => {
setIsResizing(false)
}, [])

const resize = useCallback((e: MouseEvent) => {
if (isResizing) {
const newWidth = window.innerWidth - e.clientX
if (newWidth > 420 && newWidth < 1024)
setPanelWidth(newWidth)
}
}, [isResizing])

useEffect(() => {
window.addEventListener('mousemove', resize)
window.addEventListener('mouseup', stopResizing)
return () => {
window.removeEventListener('mousemove', resize)
window.removeEventListener('mouseup', stopResizing)
}
}, [resize, stopResizing])

return (
<div className={`
flex h-full w-[420px] flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl
`}>
relative flex h-full flex-col rounded-l-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl
`}
style={{ width: `${panelWidth}px` }}
>
<div
className="absolute bottom-0 left-[3px] top-1/2 z-50 h-6 w-[3px] cursor-col-resize rounded bg-gray-300"
onMouseDown={startResizing}
/>
<div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-text-primary'>
{`Test Run${!workflowRunningData?.result.sequence_number ? '' : `#${workflowRunningData?.result.sequence_number}`}`}
<div className='cursor-pointer p-1' onClick={() => handleCancelDebugAndPreviewPanel()}>

読み込み中…
キャンセル
保存