diff --git a/src/custom/Panel/Panel.tsx b/src/custom/Panel/Panel.tsx index e13a5de4d..d68478ef3 100644 --- a/src/custom/Panel/Panel.tsx +++ b/src/custom/Panel/Panel.tsx @@ -2,7 +2,7 @@ import { Resizable } from 're-resizable'; import React from 'react'; import Draggable from 'react-draggable'; import { Box, BoxProps, Tooltip } from '../../base'; -import { CloseIcon, CollapseAllIcon, ExpandAllIcon, FullScreenIcon } from '../../icons'; +import { CloseIcon, CollapseAllIcon, ExpandAllIcon, FullScreenIcon, ResizeIcon } from '../../icons'; import { useTheme } from '../../theme'; import { ErrorBoundary } from '../ErrorBoundary'; import { @@ -14,7 +14,8 @@ import { PanelBody, PanelContainer, PanelTitle, - ResizableContent + ResizableContent, + ResizeIconContainer } from './style'; export type PanelProps = { @@ -108,6 +109,9 @@ const Panel_: React.FC = ({ {children} + + + diff --git a/src/custom/Panel/style.tsx b/src/custom/Panel/style.tsx index 17c6fc80b..83599740a 100644 --- a/src/custom/Panel/style.tsx +++ b/src/custom/Panel/style.tsx @@ -129,3 +129,17 @@ export const PanelTitle = styled('div')(() => ({ marginInline: 'auto', width: 'fit-content' })); + +export const ResizeIconContainer = styled('div')(({ theme }) => ({ + position: 'absolute', + bottom: '2px', + left: '4px', + pointerEvents: 'none', + '& svg': { + width: '18px', + height: '18px', + stroke: 'currentColor', + fill: 'currentColor', + color: theme.palette.text.primary + } +})); diff --git a/src/icons/Resize/ResizeIcon.tsx b/src/icons/Resize/ResizeIcon.tsx new file mode 100644 index 000000000..4d7777d73 --- /dev/null +++ b/src/icons/Resize/ResizeIcon.tsx @@ -0,0 +1,23 @@ +import { FC } from 'react'; +import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from '../../constants/constants'; +import { IconProps } from '../types'; + +export const ResizeIcon: FC = ({ + width = DEFAULT_WIDTH, + height = DEFAULT_HEIGHT, + ...props +}) => { + return ( + + + + ); +}; + +export default ResizeIcon; diff --git a/src/icons/Resize/index.ts b/src/icons/Resize/index.ts new file mode 100644 index 000000000..2a86d249d --- /dev/null +++ b/src/icons/Resize/index.ts @@ -0,0 +1 @@ +export { default as ResizeIcon } from './ResizeIcon'; diff --git a/src/icons/index.ts b/src/icons/index.ts index 284941302..3592c4363 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -99,6 +99,7 @@ export * from './Rectangle'; export * from './Redo'; export * from './Remove'; export * from './Reset'; +export * from './Resize'; export * from './RightArrow'; export * from './Ring'; export * from './Save';