yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-18 14:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI : Adding support for 3 column layout. (#1476)

Browse Source 
* UI : Adding support for 3 column layout.

* Addressing review comment.

* Minor fix

* Css styling fix.
This commit is contained in:
Sachin Chaurasiya 2021-11-30 17:21:50 +05:30 committed by GitHub
parent 0e300a1be8
commit e32d14ea0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 95 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
openmetadata-ui/src/main/resources/ui/src/components/containers/PageContainerV1.tsx Normal file
View File

@ -0,0 +1,24 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { ReactNode } from 'react';
const PageContainerV1 = ({ children }: { children: ReactNode }) => {
return <div className="page-container-v1 tw-bg-body-main">{children}</div>;
};
export default PageContainerV1;

56
openmetadata-ui/src/main/resources/ui/src/components/containers/PageLayout.tsx Normal file
View File

@ -0,0 +1,56 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { FC, ReactNode } from 'react';
interface PageLayoutProp {
leftPanel?: ReactNode;
rightPanel?: ReactNode;
children: ReactNode;
}
const PageLayout: FC<PageLayoutProp> = ({
leftPanel,
children,
rightPanel,
}: PageLayoutProp) => {
return (
<div className="tw-grid tw-grid-flow-col tw-gap-x-3 tw-px-4 tw-overflow-y-auto">
{leftPanel && (
<div
className="tw-col-span-1 tw-w-64 tw-overflow-y-auto tw-px-2 tw-py-1"
id="left-panel">
{leftPanel}
</div>
)}
<div
className="tw-col-span-3 tw-overflow-y-auto tw-px-2 tw-py-1"
id="center">
{children}
</div>
{rightPanel && (
<div
className="tw-col-span-1 tw-w-64 tw-overflow-y-auto tw-px-2 tw-py-1"
id="right-panel">
{rightPanel}
</div>
)}
</div>
);
};
export default PageLayout;

12
openmetadata-ui/src/main/resources/ui/src/styles/x-master.css
View File

@ -734,3 +734,15 @@ body .profiler-graph .recharts-active-dot circle {
.version-data {
width: calc(100% - 330px);
}
/* page-container v1 */
.page-container-v1 {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-start;
position: relative;
height: calc(100% - 61px);
overflow-y: hidden;
}

6
openmetadata-ui/src/main/resources/ui/tailwind.config.js
View File

@ -41,15 +41,15 @@ const statusRunning = '#276EF1';
const statusQueued = '#777777';
// Background colors
const bodyBG = '#FCFBFE';
const bodyBG = '#F8F9FA';
const bodyHoverBG = '#F9F8FD';
const tagBG = '#EEEAF8';
const primaryBG = '#7147E840'; // 'rgba(113, 71, 232, 0.25)';
const backdropBG = '#302E36';
// Borders and Separators
const mainBorder = '#E2DCE4';
const mainSeparator = '#D9CEEE';
const mainBorder = '#DCE3EC';
const mainSeparator = '#DCE3EC';
// Text color - Gray variants
const textBody = '#37352f';