mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix command menu keyboard input & refactor group (#1706)

Browse Source 
* - fix command menu keyboard shortcuts
- refactor command groups

* - refactor the MenuItemCommand to use cmdk

* - fixed matching commands multiple displays

* - fixed array count problems react with boolean
This commit is contained in:
brendanlaschke
2023-09-22 11:44:42 +02:00
committed by GitHub
parent 8d8c81c02c
commit 20267f081a
5 changed files with 130 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
front/src/modules/command-menu/components/CommandMenuStyles.tsx
View File

@ -37,48 +37,6 @@ export const StyledInput = styled(Command.Input)`
}
`;
export const StyledMenuItem = styled(Command.Item)`
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.primary};
cursor: pointer;
display: flex;
font-size: ${({ theme }) => theme.font.size.md};
gap: ${({ theme }) => theme.spacing(3)};
height: 40px;
justify-content: space-between;
padding: 0 ${({ theme }) => theme.spacing(1)};
position: relative;
transition: all 150ms ease;
transition-property: none;
user-select: none;
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
}
&[data-selected='true'] {
background: ${({ theme }) => theme.background.tertiary};
/* Could be nice to add a caret like this for better accessibility in the future
But it needs to be consistend with other picker dropdown (e.g. company)
&:after {
background: ${({ theme }) => theme.background.quaternary};
content: '';
height: 100%;
left: 0;
position: absolute;
width: 3px;
z-index: ${({ theme }) => theme.lastLayerZIndex};
} */
}
&[data-disabled='true'] {
color: ${({ theme }) => theme.font.color.light};
cursor: not-allowed;
}
svg {
height: 16px;
width: 16px;
}
`;
export const StyledList = styled(Command.List)`
background: ${({ theme }) => theme.background.secondary};
height: min(300px, var(--cmdk-list-height));
@ -89,22 +47,6 @@ export const StyledList = styled(Command.List)`
transition-property: height;
`;
export const StyledGroup = styled(Command.Group)`
[cmdk-group-heading] {
align-items: center;
color: ${({ theme }) => theme.font.color.light};
display: flex;
font-size: ${({ theme }) => theme.font.size.xs};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
padding-bottom: ${({ theme }) => theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(1)};
padding-top: ${({ theme }) => theme.spacing(2)};
text-transform: uppercase;
user-select: none;
}
`;
export const StyledEmpty = styled(Command.Empty)`
align-items: center;
color: ${({ theme }) => theme.font.color.light};
@ -114,34 +56,3 @@ export const StyledEmpty = styled(Command.Empty)`
justify-content: center;
white-space: pre-wrap;
`;
export const StyledSeparator = styled(Command.Separator)``;
export const StyledIconAndLabelContainer = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
`;
export const StyledIconContainer = styled.div`
align-items: center;
background: ${({ theme }) => theme.background.transparent.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.secondary};
display: flex;
padding: ${({ theme }) => theme.spacing(1)};
`;
export const StyledShortCut = styled.div`
background-color: ${({ theme }) => theme.background.transparent.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.light};
margin-left: ${({ theme }) => theme.spacing(1)};
margin-right: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(1)};
`;
export const StyledShortcutsContainer = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.light};
display: flex;
font-size: ${({ theme }) => theme.font.size.sm};
`;