admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix layout behavior with Right panel open (#160)

Browse Source
This commit is contained in:
Charles Bochet
2023-05-31 09:52:17 +02:00
committed by GitHub
parent cb259d5cf1
commit 910d49f559
5 changed files with 13 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/layout/AppLayout.tsx
View File

@ -10,14 +10,15 @@ const StyledLayout = styled.div`
width: 100vw;
height: 100vh;
background: ${(props) => props.theme.noisyBackground};
overflow: hidden;
position: relative;
`;
const NAVBAR_WIDTH = '236px';
const MainContainer = styled.div`
display: flex;
flex-direction: row;
overflow: hidden;
widht: calc(100% - 220px);
width: calc(100% - ${NAVBAR_WIDTH});
`;
type OwnProps = {

12
front/src/layout/containers/MainContainer.tsx
View File

@ -1,12 +0,0 @@
import styled from '@emotion/styled';
import React from 'react';
const StyledMainContainer = styled.div`
display: flex;
flex-direction: row;
overflow: hidden;
`;
export function MainContainer({ children }: { children: React.ReactNode }) {
return <StyledMainContainer>{children}</StyledMainContainer>;
}

14
front/src/layout/containers/WithTopBarContainer.tsx
View File

@ -19,15 +19,16 @@ const StyledContainer = styled.div`
width: 100%;
`;
const TOPBAR_HEIGHT = '48px';
const MainContainer = styled.div`
display: flex;
flex-direction: row;
height: 100%;
width: calc(100% - 16px);
margin-right: 8px;
margin-bottom: 8px;
gap: 8px;
padding: 4px;
width: calc(100% - ${(props) => props.theme.spacing(3)});
height: calc(100% - ${TOPBAR_HEIGHT} - ${(props) => props.theme.spacing(3)});
background: ${(props) => props.theme.noisyBackground};
padding-right: ${(props) => props.theme.spacing(3)};
padding-bottom: ${(props) => props.theme.spacing(3)};
`;
const RIGHT_DRAWER_WIDTH = '300px';
@ -41,6 +42,7 @@ const LeftContainer = styled.div<LeftContainerProps>`
width: calc(
100% - ${(props) => (props.isRightDrawerOpen ? RIGHT_DRAWER_WIDTH : '0px')}
);
position: relative;
`;
function FullWidthContainer({

1
front/src/layout/right-drawer/RightDrawer.tsx
View File

@ -10,6 +10,7 @@ const StyledRightDrawer = styled.div`
display: flex;
flex-direction: row;
width: 300px;
margin-left: ${(props) => props.theme.spacing(2)};
`;
export function RightDrawer() {

2
front/src/pages/companies/table/TableActionBarButtonDeleteCompanies.tsx
View File

@ -4,11 +4,9 @@ import { useDeleteCompaniesMutation } from '../../../generated/graphql';
import { selectedRowIdsState } from '../../../modules/ui/tables/states/selectedRowIdsState';
import { useRecoilValue } from 'recoil';
import { useResetTableRowSelection } from '../../../modules/ui/tables/hooks/useResetTableRowSelection';
import { useTheme } from '@emotion/react';
export function TableActionBarButtonDeleteCompanies() {
const selectedRowIds = useRecoilValue(selectedRowIdsState);
const theme = useTheme();
const resetRowSelection = useResetTableRowSelection();