mirror of
https://github.com/datahub-project/datahub.git
synced 2025-12-27 09:58:14 +00:00
fix(ui): fix side panel resize css (#4892)
This commit is contained in:
Gabe Lyons
GitHub
parent
b94dc088ec
commit
94ff969319
@ -74,7 +74,6 @@
|
||||
"react-router": "^5.2.0",
|
||||
"react-router-dom": "^5.1.6",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-split-pane": "^0.1.92",
|
||||
"react-syntax-highlighter": "^15.4.4",
|
||||
"react-timezone-select": "^1.1.15",
|
||||
"react-visibility-sensor": "^5.1.1",
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
import React, { useCallback } from 'react';
|
||||
import React, { useCallback, useState } from 'react';
|
||||
import { Alert, Divider } from 'antd';
|
||||
import SplitPane from 'react-split-pane';
|
||||
import { MutationHookOptions, MutationTuple, QueryHookOptions, QueryResult } from '@apollo/client/react/types/types';
|
||||
import styled from 'styled-components';
|
||||
import { useHistory } from 'react-router';
|
||||
@ -20,6 +19,7 @@ import LineageExplorer from '../../../../lineage/LineageExplorer';
|
||||
import CompactContext from '../../../../shared/CompactContext';
|
||||
import DynamicTab from '../../tabs/Entity/weaklyTypedAspects/DynamicTab';
|
||||
import analytics, { EventType } from '../../../../analytics';
|
||||
import { ProfileSidebarResizer } from './sidebar/ProfileSidebarResizer';
|
||||
|
||||
type Props<T, U> = {
|
||||
urn: string;
|
||||
@ -50,12 +50,11 @@ const ContentContainer = styled.div`
|
||||
display: flex;
|
||||
height: auto;
|
||||
min-height: 100%;
|
||||
align-items: stretch;
|
||||
flex: 1;
|
||||
`;
|
||||
|
||||
const HeaderAndTabs = styled.div`
|
||||
flex-basis: 70%;
|
||||
flex-grow: 1;
|
||||
min-width: 640px;
|
||||
height: 100%;
|
||||
`;
|
||||
@ -81,10 +80,10 @@ const HeaderAndTabsFlex = styled.div`
|
||||
-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
|
||||
}
|
||||
`;
|
||||
const Sidebar = styled.div`
|
||||
const Sidebar = styled.div<{ $width: number }>`
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
flex-basis: 30%;
|
||||
flex-basis: ${(props) => props.$width}px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
`;
|
||||
@ -102,14 +101,6 @@ const TabContent = styled.div`
|
||||
overflow: auto;
|
||||
`;
|
||||
|
||||
const resizerStyles = {
|
||||
borderLeft: `1px solid #E9E9E9`,
|
||||
width: '2px',
|
||||
cursor: 'col-resize',
|
||||
margin: '0 5px',
|
||||
height: '100%',
|
||||
};
|
||||
|
||||
const defaultTabDisplayConfig = {
|
||||
visible: (_, _1) => true,
|
||||
enabled: (_, _1) => true,
|
||||
@ -119,6 +110,10 @@ const defaultSidebarSection = {
|
||||
visible: (_, _1) => true,
|
||||
};
|
||||
|
||||
const INITIAL_SIDEBAR_WIDTH = 400;
|
||||
const MAX_SIDEBAR_WIDTH = 800;
|
||||
const MIN_SIDEBAR_WIDTH = 200;
|
||||
|
||||
/**
|
||||
* Container for display of the Entity Page
|
||||
*/
|
||||
@ -142,6 +137,8 @@ export const EntityProfile = <T, U>({
|
||||
display: { ...defaultSidebarSection, ...sidebarSection.display },
|
||||
}));
|
||||
|
||||
const [sidebarWidth, setSidebarWidth] = useState(INITIAL_SIDEBAR_WIDTH);
|
||||
|
||||
const routeToTab = useCallback(
|
||||
({
|
||||
tabName,
|
||||
@ -262,18 +259,7 @@ export const EntityProfile = <T, U>({
|
||||
{isLineageMode ? (
|
||||
<LineageExplorer type={entityType} urn={urn} />
|
||||
) : (
|
||||
<SplitPane
|
||||
split="vertical"
|
||||
minSize={window.innerWidth - 400}
|
||||
maxSize={window.innerWidth - 250}
|
||||
defaultSize={window.innerWidth - 400}
|
||||
resizerStyle={resizerStyles}
|
||||
style={{
|
||||
position: 'inherit',
|
||||
height: 'auto',
|
||||
overflow: 'auto',
|
||||
}}
|
||||
>
|
||||
<>
|
||||
<HeaderAndTabs>
|
||||
<HeaderAndTabsFlex>
|
||||
<Header>
|
||||
@ -288,10 +274,16 @@ export const EntityProfile = <T, U>({
|
||||
</TabContent>
|
||||
</HeaderAndTabsFlex>
|
||||
</HeaderAndTabs>
|
||||
<Sidebar>
|
||||
<ProfileSidebarResizer
|
||||
setSidePanelWidth={(width) =>
|
||||
setSidebarWidth(Math.min(Math.max(width, MIN_SIDEBAR_WIDTH), MAX_SIDEBAR_WIDTH))
|
||||
}
|
||||
initialSize={sidebarWidth}
|
||||
/>
|
||||
<Sidebar $width={sidebarWidth}>
|
||||
<EntitySidebar sidebarSections={sideBarSectionsWithDefaults} />
|
||||
</Sidebar>
|
||||
</SplitPane>
|
||||
</>
|
||||
)}
|
||||
</ContentContainer>
|
||||
</>
|
||||
|
||||
@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { ANTD_GRAY } from '../../../constants';
|
||||
|
||||
type Props = {
|
||||
setSidePanelWidth: (width: number) => void;
|
||||
initialSize: number;
|
||||
};
|
||||
|
||||
const ResizerBar = styled.div`
|
||||
min-height: 100%;
|
||||
border: 1px solid ${ANTD_GRAY[4]};
|
||||
cursor: col-resize;
|
||||
`;
|
||||
export const ProfileSidebarResizer = ({ setSidePanelWidth, initialSize }: Props) => {
|
||||
let dragState: { initialX: number; initialSize: number } | undefined;
|
||||
|
||||
const dragContinue = (event: MouseEvent) => {
|
||||
if (!dragState) {
|
||||
return;
|
||||
}
|
||||
|
||||
const xDifference = event.clientX - (dragState.initialX || 0);
|
||||
setSidePanelWidth(dragState.initialSize - xDifference);
|
||||
};
|
||||
|
||||
const stopDragging = () => {
|
||||
window.removeEventListener('mousemove', dragContinue, false);
|
||||
window.removeEventListener('mouseup', stopDragging, false);
|
||||
};
|
||||
|
||||
const onDrag = (event: React.MouseEvent) => {
|
||||
const { clientX } = event;
|
||||
dragState = { initialX: clientX, initialSize };
|
||||
|
||||
window.addEventListener('mousemove', dragContinue, false);
|
||||
window.addEventListener('mouseup', stopDragging, false);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
return (
|
||||
<ResizerBar
|
||||
onMouseDown={(event) => {
|
||||
onDrag(event);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
@ -13321,15 +13321,6 @@ prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.0, prop-types@^15.6.1,
|
||||
object-assign "^4.1.1"
|
||||
react-is "^16.8.1"
|
||||
|
||||
prop-types@^15.5.4:
|
||||
version "15.8.1"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
|
||||
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
|
||||
dependencies:
|
||||
loose-envify "^1.4.0"
|
||||
object-assign "^4.1.1"
|
||||
react-is "^16.13.1"
|
||||
|
||||
property-information@^5.0.0, property-information@^5.3.0:
|
||||
version "5.6.0"
|
||||
resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
|
||||
@ -13955,7 +13946,7 @@ react-icons@4.3.1:
|
||||
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
|
||||
integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==
|
||||
|
||||
react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
|
||||
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
@ -13965,11 +13956,6 @@ react-is@^17.0.0, react-is@^17.0.1:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
|
||||
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
|
||||
|
||||
react-lifecycles-compat@^3.0.4:
|
||||
version "3.0.4"
|
||||
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
|
||||
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
|
||||
|
||||
react-markdown@6.0.2:
|
||||
version "6.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-6.0.2.tgz#d89be45c278b1e5f0196f851fffb11e30c69f027"
|
||||
@ -14102,22 +14088,6 @@ react-select@^5.1.0:
|
||||
prop-types "^15.6.0"
|
||||
react-transition-group "^4.3.0"
|
||||
|
||||
react-split-pane@^0.1.92:
|
||||
version "0.1.92"
|
||||
resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.92.tgz#68242f72138aed95dd5910eeb9d99822c4fc3a41"
|
||||
integrity sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
react-lifecycles-compat "^3.0.4"
|
||||
react-style-proptype "^3.2.2"
|
||||
|
||||
react-style-proptype@^3.2.2:
|
||||
version "3.2.2"
|
||||
resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0"
|
||||
integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==
|
||||
dependencies:
|
||||
prop-types "^15.5.4"
|
||||
|
||||
react-syntax-highlighter@^15.4.4:
|
||||
version "15.4.4"
|
||||
resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.4.4.tgz#dc9043f19e7bd063ff3ea78986d22a6eaa943b2a"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user