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; width: 100vw;
height: 100vh; height: 100vh;
background: ${(props) => props.theme.noisyBackground}; background: ${(props) => props.theme.noisyBackground};
overflow: hidden; position: relative;
`; `;
const NAVBAR_WIDTH = '236px';
const MainContainer = styled.div` const MainContainer = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
overflow: hidden; width: calc(100% - ${NAVBAR_WIDTH});
widht: calc(100% - 220px);
`; `;
type OwnProps = { 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%; width: 100%;
`; `;
const TOPBAR_HEIGHT = '48px';
const MainContainer = styled.div` const MainContainer = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 100%; width: calc(100% - ${(props) => props.theme.spacing(3)});
width: calc(100% - 16px); height: calc(100% - ${TOPBAR_HEIGHT} - ${(props) => props.theme.spacing(3)});
margin-right: 8px; background: ${(props) => props.theme.noisyBackground};
margin-bottom: 8px; padding-right: ${(props) => props.theme.spacing(3)};
gap: 8px; padding-bottom: ${(props) => props.theme.spacing(3)};
padding: 4px;
`; `;
const RIGHT_DRAWER_WIDTH = '300px'; const RIGHT_DRAWER_WIDTH = '300px';
@ -41,6 +42,7 @@ const LeftContainer = styled.div<LeftContainerProps>`
width: calc( width: calc(
100% - ${(props) => (props.isRightDrawerOpen ? RIGHT_DRAWER_WIDTH : '0px')} 100% - ${(props) => (props.isRightDrawerOpen ? RIGHT_DRAWER_WIDTH : '0px')}
); );
position: relative;
`; `;
function FullWidthContainer({ function FullWidthContainer({

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

@ -10,6 +10,7 @@ const StyledRightDrawer = styled.div`
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: 300px; width: 300px;
margin-left: ${(props) => props.theme.spacing(2)};
`; `;
export function RightDrawer() { 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 { selectedRowIdsState } from '../../../modules/ui/tables/states/selectedRowIdsState';
import { useRecoilValue } from 'recoil'; import { useRecoilValue } from 'recoil';
import { useResetTableRowSelection } from '../../../modules/ui/tables/hooks/useResetTableRowSelection'; import { useResetTableRowSelection } from '../../../modules/ui/tables/hooks/useResetTableRowSelection';
import { useTheme } from '@emotion/react';
export function TableActionBarButtonDeleteCompanies() { export function TableActionBarButtonDeleteCompanies() {
const selectedRowIds = useRecoilValue(selectedRowIdsState); const selectedRowIds = useRecoilValue(selectedRowIdsState);
const theme = useTheme();
const resetRowSelection = useResetTableRowSelection(); const resetRowSelection = useResetTableRowSelection();