twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-18 17:12:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

- context menu vertical

Browse Source
This commit is contained in:
brendanlaschke 2023-08-10 17:02:47 +02:00
parent be9a2cefeb
commit f2e872ce3f
2 changed files with 42 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
front/src/modules/ui/action-bar/components/ActionBar.tsx
View File

@ -15,21 +15,46 @@ type StyledContainerProps = {
position: PositionType; position: PositionType;
}; };
const StyledContainer = styled.div<StyledContainerProps>` const StyledContainerContextMenu = styled.div<StyledContainerProps>`
align-items: center; align-items: center;
background: ${({ theme }) => theme.background.secondary}; background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium}; border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md}; border-radius: ${({ theme }) => theme.border.radius.md};
bottom: ${(props) => (props.position.x ? 'auto' : '38px')}; bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
box-shadow: ${({ theme }) => theme.boxShadow.strong}; box-shadow: ${({ theme }) => theme.boxShadow.strong};
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(1)};
padding-top: ${({ theme }) => theme.spacing(1)};
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
transform: translateX(-50%);
width: 160px;
z-index: 1;
div {
justify-content: left;
}
`;
const StyledContainerActionBar = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
bottom: 38px;
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex; display: flex;
height: 48px; height: 48px;
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')}; left: 50%;
padding-left: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)}; padding-right: ${({ theme }) => theme.spacing(2)};
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')}; position: absolute;
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')}; top: auto;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 1; z-index: 1;
@ -57,10 +82,16 @@ export function ActionBar({ children, selectedIds }: OwnProps) {
if (selectedIds.length === 0) { if (selectedIds.length === 0) {
return null; return null;
} }
if (position.x && position.y) {
return ( return (
<StyledContainer className="action-bar" position={position}> <StyledContainerContextMenu className="action-bar" position={position}>
{children} {children}
</StyledContainer> </StyledContainerContextMenu>
);
}
return (
<StyledContainerActionBar className="action-bar">
{children}
</StyledContainerActionBar>
); );
} }

5
front/src/modules/ui/table/action-bar/components/EntityTableActionBarButton.tsx
View File

@ -27,7 +27,10 @@ const StyledButton = styled.div<StyledButtonProps>`
user-select: none; user-select: none;
&:hover { &:hover {
background: ${({ theme }) => theme.background.tertiary}; background: ${({ theme, type }) =>
type === 'warning'
? theme.tag.background.red
: theme.background.tertiary};
} }
`; `;