From e4222a39e91535102a79f8f53c4e91000694c4f1 Mon Sep 17 00:00:00 2001 From: Ayush Date: Mon, 26 Jun 2023 20:00:08 +0530 Subject: [PATCH 1/2] feat: adding the reziable feature in cluster mode --- .../organisms/Dashboard/Dashboard.styled.tsx | 1 + .../Dashboard/Tableview/Drawer.styled.tsx | 41 +++++++++- .../organisms/Dashboard/Tableview/Drawer.tsx | 81 +++++++++++++++---- .../Dashboard/Tableview/Tableview.styled.tsx | 10 +++ .../Dashboard/Tableview/Tableview.tsx | 1 + 5 files changed, 116 insertions(+), 18 deletions(-) diff --git a/src/components/organisms/Dashboard/Dashboard.styled.tsx b/src/components/organisms/Dashboard/Dashboard.styled.tsx index 7ce7b968de..ba23cb2300 100644 --- a/src/components/organisms/Dashboard/Dashboard.styled.tsx +++ b/src/components/organisms/Dashboard/Dashboard.styled.tsx @@ -22,5 +22,6 @@ export const Header = styled(RawHeader)` `; export const Content = styled.div` + margin-top: -130px; grid-area: content; `; diff --git a/src/components/organisms/Dashboard/Tableview/Drawer.styled.tsx b/src/components/organisms/Dashboard/Tableview/Drawer.styled.tsx index 7dea17e2d6..3fbd2f72f7 100644 --- a/src/components/organisms/Dashboard/Tableview/Drawer.styled.tsx +++ b/src/components/organisms/Dashboard/Tableview/Drawer.styled.tsx @@ -9,8 +9,9 @@ import {Colors} from '@shared/styles/colors'; export const Drawer = styled(RawDrawer)` & .ant-drawer-content { background: ${Colors.grey1}; + height: 100% !important; } - z-index: 1000; + z-index: 2000 !important; & .ant-drawer-close { position: absolute; @@ -152,3 +153,41 @@ export const TitleContainer = styled.div` display: flex; align-items: center; `; + +export const ArrowIconContainer = styled.div` + display: flex; + align-items: center; + justify-content: center; + z-index: 2000; + width: 16px; + height: 16px; + + &:hover { + cursor: pointer; + } +`; + +export const ArrowAndTitleContainer = styled.div` + display: flex; + align-items: center; +`; + +export const DrawerSlider = styled.div` + position: absolute; + width: 5px; + padding: 4px 0 0; + top: 0; + left: 0; + bottom: 0; + z-index: 10001; + cursor: ew-resize; + transition: background-color 0.3s; + + &:hover { + background-color: ${Colors.blue7}; + } + + &:active { + background-color: ${Colors.blue7}; + } +`; diff --git a/src/components/organisms/Dashboard/Tableview/Drawer.tsx b/src/components/organisms/Dashboard/Tableview/Drawer.tsx index b1c01907fb..2100e1620f 100644 --- a/src/components/organisms/Dashboard/Tableview/Drawer.tsx +++ b/src/components/organisms/Dashboard/Tableview/Drawer.tsx @@ -1,6 +1,8 @@ -import {useLayoutEffect, useRef, useState} from 'react'; +import {useEffect, useLayoutEffect, useRef, useState} from 'react'; import {useClickAway} from 'react-use'; +import {LeftCircleFilled, RightCircleFilled} from '@ant-design/icons'; + import {v4 as uuidv4} from 'uuid'; import {setActiveTab, setDashboardSelectedResourceId} from '@redux/dashboard/slice'; @@ -26,6 +28,39 @@ export const Drawer = () => { const selectedResourceId = useAppSelector(state => state.dashboard.tableDrawer.selectedResourceId); const selectedResource = useResource(selectedResourceId ? {id: selectedResourceId, storage: 'cluster'} : undefined); const [isConfirmingUpdate, setIsConfirmingUpdate] = useState(false); + const [isHalfScreen, setIsHalfScreen] = useState(true); + const [isResizing, setIsResizing] = useState(false); + const [width, setWidth] = useState(736); + const [height, setHeight] = useState(900); + + const onMouseDown = (e: any) => { + setIsResizing(true); + }; + + const onMouseUp = (e: any) => { + setIsResizing(false); + }; + + const onMouseMove = (e: {clientX: number}) => { + if (isResizing) { + let offsetRight = document.body.offsetWidth - (e.clientX - document.body.offsetLeft); + const minWidth = 600; + const maxWidth = 3000; + if (offsetRight > minWidth && offsetRight < maxWidth) { + setWidth(offsetRight); + } + } + }; + + useEffect(() => { + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + + return () => { + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + }; + }); const [warnUnsavedCodeChanges, UnsavedCodeChangesModal] = useWarnUnsavedChanges(); @@ -42,30 +77,41 @@ export const Drawer = () => { } }, [selectedResourceId]); + const changeDrawerSize = () => { + setIsHalfScreen(!isHalfScreen); + }; + return ( - - {selectedResource.name} - - + + + {isHalfScreen && } + {!isHalfScreen && } + + + + {selectedResource.name} + + + ) : ( - ) @@ -74,6 +120,7 @@ export const Drawer = () => { dispatch(setDashboardSelectedResourceId()); }} > + + Date: Thu, 29 Jun 2023 03:21:35 +0530 Subject: [PATCH 2/2] style: resizing the Drawer to layoutHeight-header --- .../organisms/ActionsPane/ActionsPane.styled.tsx | 7 +++++++ src/components/organisms/ActionsPane/ActionsPane.tsx | 6 +++++- .../organisms/Dashboard/Tableview/Drawer.styled.tsx | 2 +- .../organisms/Dashboard/Tableview/Drawer.tsx | 12 ++++++++++-- .../Dashboard/Tableview/Tableview.styled.tsx | 2 -- .../organisms/Dashboard/Tableview/Tableview.tsx | 2 +- 6 files changed, 24 insertions(+), 7 deletions(-) diff --git a/src/components/organisms/ActionsPane/ActionsPane.styled.tsx b/src/components/organisms/ActionsPane/ActionsPane.styled.tsx index 84d10384eb..c2d05a7e4a 100644 --- a/src/components/organisms/ActionsPane/ActionsPane.styled.tsx +++ b/src/components/organisms/ActionsPane/ActionsPane.styled.tsx @@ -108,3 +108,10 @@ export const Tabs = styled(RawTabs)<{$height: number}>` background: transparent; } `; + +export const FullViewIconContainer = styled.div` + display: flex; + align-items: center; + margin-top: -30px; + margin-bottom: 30px; +`; diff --git a/src/components/organisms/ActionsPane/ActionsPane.tsx b/src/components/organisms/ActionsPane/ActionsPane.tsx index 23047e26fc..69dba2f87e 100644 --- a/src/components/organisms/ActionsPane/ActionsPane.tsx +++ b/src/components/organisms/ActionsPane/ActionsPane.tsx @@ -5,7 +5,7 @@ import {useMeasure} from 'react-use'; import {Tooltip} from 'antd'; -import {BookOutlined} from '@ant-design/icons'; +import {BookOutlined, LeftCircleFilled} from '@ant-design/icons'; import {DEFAULT_PANE_TITLE_HEIGHT, HELM_CHART_HELP_URL, KUSTOMIZE_HELP_URL, TOOLTIP_DELAY} from '@constants/constants'; import {makeApplyKustomizationText, makeApplyResourceText} from '@constants/makeApplyText'; @@ -408,6 +408,10 @@ const ActionsPane: React.FC = () => { selectedResourceMeta={selectedResource} /> + + + + {selection?.type === 'preview.configuration' ? ( ) : selection?.type === 'image' ? ( diff --git a/src/components/organisms/Dashboard/Tableview/Drawer.styled.tsx b/src/components/organisms/Dashboard/Tableview/Drawer.styled.tsx index 3fbd2f72f7..9ed4dea325 100644 --- a/src/components/organisms/Dashboard/Tableview/Drawer.styled.tsx +++ b/src/components/organisms/Dashboard/Tableview/Drawer.styled.tsx @@ -9,9 +9,9 @@ import {Colors} from '@shared/styles/colors'; export const Drawer = styled(RawDrawer)` & .ant-drawer-content { background: ${Colors.grey1}; - height: 100% !important; } z-index: 2000 !important; + margin-top: -65px; & .ant-drawer-close { position: absolute; diff --git a/src/components/organisms/Dashboard/Tableview/Drawer.tsx b/src/components/organisms/Dashboard/Tableview/Drawer.tsx index 2100e1620f..c0db0722a0 100644 --- a/src/components/organisms/Dashboard/Tableview/Drawer.tsx +++ b/src/components/organisms/Dashboard/Tableview/Drawer.tsx @@ -31,7 +31,10 @@ export const Drawer = () => { const [isHalfScreen, setIsHalfScreen] = useState(true); const [isResizing, setIsResizing] = useState(false); const [width, setWidth] = useState(736); - const [height, setHeight] = useState(900); + const layoutSize = useAppSelector(state => state.ui.layoutSize); + const leftPaneSize = useAppSelector(state => state.ui.paneConfiguration.leftPane); + const [height, setHeight] = useState(window.innerHeight - layoutSize.header); + const [maxWidth, setMaxWidth] = useState(window.innerWidth - leftPaneSize); const onMouseDown = (e: any) => { setIsResizing(true); @@ -41,11 +44,15 @@ export const Drawer = () => { setIsResizing(false); }; + useEffect(() => { + setHeight(window.innerHeight - layoutSize.header); + setMaxWidth(window.innerWidth - leftPaneSize); + }, [layoutSize, leftPaneSize]); + const onMouseMove = (e: {clientX: number}) => { if (isResizing) { let offsetRight = document.body.offsetWidth - (e.clientX - document.body.offsetLeft); const minWidth = 600; - const maxWidth = 3000; if (offsetRight > minWidth && offsetRight < maxWidth) { setWidth(offsetRight); } @@ -89,6 +96,7 @@ export const Drawer = () => { open={Boolean(selectedResourceId)} getContainer={false} width={width} + height={height} title={ selectedResource ? ( diff --git a/src/components/organisms/Dashboard/Tableview/Tableview.styled.tsx b/src/components/organisms/Dashboard/Tableview/Tableview.styled.tsx index 52dec45ef6..9658bfdc75 100644 --- a/src/components/organisms/Dashboard/Tableview/Tableview.styled.tsx +++ b/src/components/organisms/Dashboard/Tableview/Tableview.styled.tsx @@ -10,7 +10,6 @@ export const Container = styled.div` padding: 8px 16px 0px 16px; display: flex; flex-direction: column; - height: 100%; overflow: hidden; margin-top: 65px; `; @@ -35,7 +34,6 @@ export const Input = styled(RawInput)` export const TableContainer = styled.div` position: relative; - height: 100%; margin-top: -65px; z-index: 2000; `; diff --git a/src/components/organisms/Dashboard/Tableview/Tableview.tsx b/src/components/organisms/Dashboard/Tableview/Tableview.tsx index cecca3fa9f..3858cb6bea 100644 --- a/src/components/organisms/Dashboard/Tableview/Tableview.tsx +++ b/src/components/organisms/Dashboard/Tableview/Tableview.tsx @@ -47,7 +47,7 @@ export const Tableview = ({dataSource, columns}: {dataSource: ResourceMeta[]; co /> - + }} dataSource={filteredDataSource}