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

Design fixes (#696)

Browse Source 
* Design fixes

* Fix design

* unused code

* Fix tests
This commit is contained in:
Charles Bochet
2023-07-16 17:36:40 -07:00
committed by GitHub
parent 6ced8434bd
commit 4cb856a180
42 changed files with 177 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/modules/ui/dropdown/components/DropdownMenu.tsx
View File

@ -1,19 +1,19 @@
import styled from '@emotion/styled';
export const DropdownMenu = styled.div<{ disableBlur?: boolean }>`
align-items: center;
backdrop-filter: ${({ disableBlur }) =>
disableBlur ? 'none' : 'blur(20px)'};
background: ${({ theme }) => theme.background.transparent.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
box-shadow: ${({ theme }) => theme.boxShadow.strong};
display: flex;
flex-direction: column;
width: 200px;
min-width: 160px;
overflow: hidden;
`;

30
front/src/modules/ui/dropdown/components/DropdownMenuButton.tsx
View File

@ -1,30 +0,0 @@
import styled from '@emotion/styled';
import { hoverBackground } from '@/ui/themes/effects';
export const DropdownMenuButton = styled.div`
--horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
--vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.md};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
display: flex;
flex-direction: row;
font-size: ${({ theme }) => theme.font.size.sm};
gap: ${({ theme }) => theme.spacing(2)};
height: calc(32px - 2 * var(--vertical-padding));
padding: var(--vertical-padding) var(--horizontal-padding);
${hoverBackground};
user-select: none;
width: calc(100% - 2 * var(--horizontal-padding));
`;

4
front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
import { Checkbox } from '@/ui/input/components/Checkbox';
import { DropdownMenuButton } from './DropdownMenuButton';
import { DropdownMenuItem } from './DropdownMenuItem';
type Props = {
checked: boolean;
@ -11,7 +11,7 @@ type Props = {
id?: string;
};
const DropdownMenuCheckableItemContainer = styled(DropdownMenuButton)`
const DropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
align-items: center;
display: flex;
justify-content: space-between;

12
front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx
View File

@ -1,7 +1,9 @@
import styled from '@emotion/styled';
export const DropdownMenuItem = styled.div`
--horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
import { hoverBackground } from '@/ui/themes/effects';
export const DropdownMenuItem = styled.li`
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
--vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center;
@ -9,8 +11,10 @@ export const DropdownMenuItem = styled.div`
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
display: flex;
flex-direction: row;
font-size: ${({ theme }) => theme.font.size.sm};
gap: ${({ theme }) => theme.spacing(2)};
@ -18,5 +22,9 @@ export const DropdownMenuItem = styled.div`
height: calc(32px - 2 * var(--vertical-padding));
padding: var(--vertical-padding) var(--horizontal-padding);
${hoverBackground};
user-select: none;
width: calc(100% - 2 * var(--horizontal-padding));
`;

8
front/src/modules/ui/dropdown/components/DropdownMenuItemContainer.tsx → front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx
View File

@ -1,7 +1,9 @@
import styled from '@emotion/styled';
export const DropdownMenuItemContainer = styled.div`
--padding: ${({ theme }) => theme.spacing(1 / 2)};
export const DropdownMenuItemsContainer = styled.div<{
hasMaxHeight?: boolean;
}>`
--padding: ${({ theme }) => theme.spacing(1)};
align-items: flex-start;
display: flex;
@ -9,7 +11,7 @@ export const DropdownMenuItemContainer = styled.div`
flex-direction: column;
gap: 2px;
height: 100%;
max-height: 180px;
max-height: ${({ hasMaxHeight }) => (hasMaxHeight ? '180px' : 'none')};
overflow-y: auto;
padding: var(--padding);

1
front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx
View File

@ -7,7 +7,6 @@ export const DropdownMenuSearchContainer = styled.div`
--vertical-padding: ${({ theme }) => theme.spacing(1)};
align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
display: flex;
flex-direction: row;

4
front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx
View File

@ -5,7 +5,7 @@ import styled from '@emotion/styled';
import { IconCheck } from '@/ui/icon/index';
import { hoverBackground } from '@/ui/themes/effects';
import { DropdownMenuButton } from './DropdownMenuButton';
import { DropdownMenuItem } from './DropdownMenuItem';
type Props = {
selected?: boolean;
@ -13,7 +13,7 @@ type Props = {
hovered?: boolean;
};
const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)<Props>`
const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<Props>`
${hoverBackground};
align-items: center;

39
front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx
View File

@ -7,10 +7,9 @@ import { Avatar } from '@/users/components/Avatar';
import { getRenderWrapperForComponent } from '~/testing/renderWrappers';
import { DropdownMenu } from '../DropdownMenu';
import { DropdownMenuButton } from '../DropdownMenuButton';
import { DropdownMenuCheckableItem } from '../DropdownMenuCheckableItem';
import { DropdownMenuItem } from '../DropdownMenuItem';
import { DropdownMenuItemContainer } from '../DropdownMenuItemContainer';
import { DropdownMenuItemsContainer } from '../DropdownMenuItemsContainer';
import { DropdownMenuSearch } from '../DropdownMenuSearch';
import { DropdownMenuSelectableItem } from '../DropdownMenuSelectableItem';
import { DropdownMenuSeparator } from '../DropdownMenuSeparator';
@ -128,9 +127,9 @@ export const EmptyWithContentBelow: Story = {
export const SimpleMenuItem: Story = {
render: getRenderWrapperForComponent(
<DropdownMenuStoryWrapper>
<DropdownMenuItemContainer>
<DropdownMenuItemsContainer hasMaxHeight>
<FakeMenuItemList />
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
</DropdownMenuStoryWrapper>,
),
};
@ -143,9 +142,9 @@ export const Search: Story = {
<DropdownMenu>
<DropdownMenuSearch />
<DropdownMenuSeparator />
<DropdownMenuItemContainer>
<DropdownMenuItemsContainer hasMaxHeight>
<FakeMenuItemList />
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
</MenuAbsolutePositionWrapper>
</FakeBelowContainer>,
@ -176,16 +175,16 @@ export const Button: Story = {
<FakeContentBelow />
<MenuAbsolutePositionWrapper>
<DropdownMenu>
<DropdownMenuItemContainer>
<DropdownMenuButton>
<DropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuItem>
<IconPlus size={16} />
<div>Create new</div>
</DropdownMenuButton>
</DropdownMenuItemContainer>
</DropdownMenuItem>
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
<DropdownMenuItemContainer>
<DropdownMenuItemsContainer hasMaxHeight>
<FakeSelectableMenuItemList />
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
</MenuAbsolutePositionWrapper>
</FakeBelowContainer>,
@ -198,9 +197,9 @@ export const SelectableMenuItem: Story = {
<FakeContentBelow />
<MenuAbsolutePositionWrapper>
<DropdownMenu>
<DropdownMenuItemContainer>
<DropdownMenuItemsContainer hasMaxHeight>
<FakeSelectableMenuItemList />
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
</MenuAbsolutePositionWrapper>
</FakeBelowContainer>,
@ -237,9 +236,9 @@ export const SelectableMenuItemWithAvatar: Story = {
<FakeContentBelow />
<MenuAbsolutePositionWrapper>
<DropdownMenu>
<DropdownMenuItemContainer>
<DropdownMenuItemsContainer hasMaxHeight>
<FakeSelectableMenuItemWithAvatarList />
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
</MenuAbsolutePositionWrapper>
</FakeBelowContainer>,
@ -277,9 +276,9 @@ export const CheckableMenuItem: Story = {
<FakeContentBelow />
<MenuAbsolutePositionWrapper>
<DropdownMenu>
<DropdownMenuItemContainer>
<DropdownMenuItemsContainer hasMaxHeight>
<FakeCheckableMenuItemList />
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
</MenuAbsolutePositionWrapper>
</FakeBelowContainer>,
@ -323,9 +322,9 @@ export const CheckableMenuItemWithAvatar: Story = {
<FakeContentBelow />
<MenuAbsolutePositionWrapper>
<DropdownMenu>
<DropdownMenuItemContainer>
<DropdownMenuItemsContainer hasMaxHeight>
<FakeCheckableMenuItemWithAvatarList />
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
</MenuAbsolutePositionWrapper>
</FakeBelowContainer>,