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

1
front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts
View File

@ -29,6 +29,7 @@ export function useOpenCreateCommentThreadDrawerForSelectedRowIds() {
viewableCommentThreadIdState,
);
const setHotkeyScope = useSetHotkeyScope();
setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false });
const [, setCommentableEntityArray] = useRecoilState(
commentableEntityArrayState,

1
front/src/modules/companies/components/CompanyAccountOwnerCell.tsx
View File

@ -27,6 +27,7 @@ export function CompanyAccountOwnerCell({ company }: OwnProps) {
return (
<EditableCell
transparent
editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
editModeContent={
<CompanyAccountOwnerPicker

22
front/src/modules/companies/components/CompanyEditableNameCell.tsx
View File

@ -1,10 +1,7 @@
import { useEffect, useState } from 'react';
import { useOpenTimelineRightDrawer } from '@/activities/hooks/useOpenTimelineRightDrawer';
import { CellCommentChip } from '@/activities/table/components/CellCommentChip';
import { EditableCellChip } from '@/ui/table/editable-cell/types/EditableChip';
import {
CommentableType,
GetCompaniesQuery,
useUpdateCompanyMutation,
} from '~/generated/graphql';
@ -20,23 +17,10 @@ type OwnProps = {
};
export function CompanyEditableNameChipCell({ company }: OwnProps) {
const openCommentRightDrawer = useOpenTimelineRightDrawer();
const [updateCompany] = useUpdateCompanyMutation();
const [internalValue, setInternalValue] = useState(company.name ?? '');
function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
event.preventDefault();
event.stopPropagation();
openCommentRightDrawer([
{
type: CommentableType.Company,
id: company.id,
},
]);
}
useEffect(() => {
setInternalValue(company.name ?? '');
}, [company.name]);
@ -49,12 +33,6 @@ export function CompanyEditableNameChipCell({ company }: OwnProps) {
id={company.id}
changeHandler={setInternalValue}
ChipComponent={CompanyChip}
rightEndContents={[
<CellCommentChip
count={company._commentThreadCount ?? 0}
onClick={handleCommentClick}
/>,
]}
onSubmit={() =>
updateCompany({
variables: {

32
front/src/modules/people/components/EditablePeopleFullName.tsx
View File

@ -1,9 +1,7 @@
import styled from '@emotion/styled';
import { useOpenTimelineRightDrawer } from '@/activities/hooks/useOpenTimelineRightDrawer';
import { CellCommentChip } from '@/activities/table/components/CellCommentChip';
import { EditableCellDoubleText } from '@/ui/table/editable-cell/types/EditableCellDoubleText';
import { CommentableType, Person } from '~/generated/graphql';
import { Person } from '~/generated/graphql';
import { PersonChip } from './PersonChip';
@ -26,18 +24,12 @@ const NoEditModeContainer = styled.div`
width: 100%;
`;
const RightContainer = styled.div`
margin-left: ${(props) => props.theme.spacing(1)};
`;
export function EditablePeopleFullName({
person,
onChange,
onSubmit,
onCancel,
}: OwnProps) {
const openCommentRightDrawer = useOpenTimelineRightDrawer();
function handleDoubleTextChange(
firstValue: string,
secondValue: string,
@ -45,22 +37,6 @@ export function EditablePeopleFullName({
onChange(firstValue, secondValue);
}
function handleCommentClick(event: React.MouseEvent<HTMLDivElement>) {
event.preventDefault();
event.stopPropagation();
if (!person) {
return;
}
openCommentRightDrawer([
{
type: CommentableType.Person,
id: person.id ?? '',
},
]);
}
return (
<EditableCellDoubleText
firstValue={person?.firstName ?? ''}
@ -76,12 +52,6 @@ export function EditablePeopleFullName({
name={person?.firstName + ' ' + person?.lastName}
id={person?.id ?? ''}
/>
<RightContainer>
<CellCommentChip
count={person?._commentThreadCount ?? 0}
onClick={handleCommentClick}
/>
</RightContainer>
</NoEditModeContainer>
}
/>

1
front/src/modules/people/components/PeopleCompanyCell.tsx
View File

@ -24,6 +24,7 @@ export function PeopleCompanyCell({ people }: OwnProps) {
return (
<EditableCell
transparent
editHotkeyScope={{ scope: RelationPickerHotkeyScope.RelationPicker }}
editModeContent={
isCreating ? (

4
front/src/modules/people/table/components/EditablePeopleCityCell.tsx
View File

@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { peopleCityFamilyState } from '@/people/states/peopleCityFamilyState';
import { EditableCellPhone } from '@/ui/table/editable-cell/types/EditableCellPhone';
import { EditableCellText } from '@/ui/table/editable-cell/types/EditableCellText';
import { useCurrentRowEntityId } from '@/ui/table/hooks/useCurrentEntityId';
import { useUpdatePeopleMutation } from '~/generated/graphql';
@ -20,7 +20,7 @@ export function EditablePeopleCityCell() {
}, [city]);
return (
<EditableCellPhone
<EditableCellText
value={internalValue}
onChange={setInternalValue}
onSubmit={() =>

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

@ -18,7 +18,7 @@ type StyledContainerProps = {
const StyledContainer = styled.div<StyledContainerProps>`
align-items: center;
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
box-shadow: ${({ theme }) => theme.boxShadow.strong};

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>,

89
front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx
View File

@ -2,10 +2,10 @@ import { ReactNode, useRef } from 'react';
import styled from '@emotion/styled';
import { Key } from 'ts-key-enum';
import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
import { useOutsideAlerter } from '@/ui/hooks/useOutsideAlerter';
import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
import { IconChevronDown } from '@/ui/icon/index';
import { overlayBackground, textInputStyle } from '@/ui/themes/effects';
import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
@ -50,69 +50,22 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
}
`;
const StyledDropdown = styled.ul`
--outer-border-radius: calc(var(--wraper-border-radius) - 2px);
--wraper-border: 1px;
--wraper-border-radius: ${({ theme }) => theme.border.radius.md};
border: var(--wraper-border) solid ${({ theme }) => theme.border.color.light};
border-radius: var(--wraper-border-radius);
display: flex;
flex-direction: column;
min-width: 160px;
padding: 0px;
const StyledDropdownMenuContainer = styled.ul`
position: absolute;
right: 0;
top: 14px;
${overlayBackground}
li {
&:first-of-type {
border-top-left-radius: var(--outer-border-radius);
border-top-right-radius: var(--outer-border-radius);
}
&:last-of-type {
border-bottom: 0;
border-bottom-left-radius: var(--outer-border-radius);
border-bottom-right-radius: var(--outer-border-radius);
}
}
`;
const StyledDropdownItem = styled.li`
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.xs};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
display: flex;
margin: 2px;
padding: ${({ theme }) => theme.spacing(2)}
calc(${({ theme }) => theme.spacing(2)} - 2px);
user-select: none;
width: calc(160px - ${({ theme }) => theme.spacing(4)});
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
}
`;
const StyledDropdownItemClipped = styled.span`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledDropdownTopOption = styled.li`
align-items: center;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${({ theme }) => theme.font.color.primary};
cursor: pointer;
display: flex;
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.medium};
justify-content: space-between;
padding: calc(${({ theme }) => theme.spacing(2)})
calc(${({ theme }) => theme.spacing(2)});
&:hover {
background: ${({ theme }) => theme.background.transparent.light};
}
@ -126,35 +79,6 @@ const StyledIcon = styled.div`
min-width: ${({ theme }) => theme.spacing(4)};
`;
const StyledSearchField = styled.li`
align-items: center;
border-bottom: var(--wraper-border) solid
${({ theme }) => theme.border.color.light};
color: ${({ theme }) => theme.font.color.secondary};
cursor: pointer;
display: flex;
font-weight: ${({ theme }) => theme.font.weight.medium};
justify-content: space-between;
overflow: hidden;
user-select: none;
input {
border-radius: ${({ theme }) => theme.border.radius.md};
box-sizing: border-box;
font-family: ${({ theme }) => theme.font.family};
height: 36px;
padding: 8px;
width: 100%;
${textInputStyle}
&:focus {
outline: 0 none;
}
}
`;
function DropdownButton({
label,
isActive,
@ -194,7 +118,9 @@ function DropdownButton({
{label}
</StyledDropdownButton>
{isUnfolded && (
<StyledDropdown ref={dropdownRef}>{children}</StyledDropdown>
<StyledDropdownMenuContainer>
<DropdownMenu ref={dropdownRef}>{children}</DropdownMenu>
</StyledDropdownMenuContainer>
)}
</StyledDropdownButtonContainer>
);
@ -215,9 +141,6 @@ function DropdownTopOptionAngleDown() {
</StyleAngleDownContainer>
);
}
DropdownButton.StyledDropdownItem = StyledDropdownItem;
DropdownButton.StyledDropdownItemClipped = StyledDropdownItemClipped;
DropdownButton.StyledSearchField = StyledSearchField;
DropdownButton.StyledDropdownTopOption = StyledDropdownTopOption;
DropdownButton.StyledDropdownTopOptionAngleDown = DropdownTopOptionAngleDown;
DropdownButton.StyledIcon = StyledIcon;

28
front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx
View File

@ -1,6 +1,7 @@
import { Context, useCallback, useState } from 'react';
import { Key } from 'ts-key-enum';
import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
import { filtersScopedState } from '@/ui/filter-n-sort/states/filtersScopedState';
@ -107,20 +108,19 @@ export function FilterDropdownButton({
selectedOperandInDropdown && (
<>
<FilterDropdownOperandButton context={context} />
<DropdownButton.StyledSearchField autoFocus key={'search-filter'}>
{filterDefinitionUsedInDropdown.type === 'text' && (
<FilterDropdownTextSearchInput context={context} />
)}
{filterDefinitionUsedInDropdown.type === 'number' && (
<FilterDropdownNumberSearchInput context={context} />
)}
{filterDefinitionUsedInDropdown.type === 'date' && (
<FilterDropdownDateSearchInput context={context} />
)}
{filterDefinitionUsedInDropdown.type === 'entity' && (
<FilterDropdownEntitySearchInput context={context} />
)}
</DropdownButton.StyledSearchField>
<DropdownMenuSeparator />
{filterDefinitionUsedInDropdown.type === 'text' && (
<FilterDropdownTextSearchInput context={context} />
)}
{filterDefinitionUsedInDropdown.type === 'number' && (
<FilterDropdownNumberSearchInput context={context} />
)}
{filterDefinitionUsedInDropdown.type === 'date' && (
<FilterDropdownDateSearchInput context={context} />
)}
{filterDefinitionUsedInDropdown.type === 'entity' && (
<FilterDropdownEntitySearchInput context={context} />
)}
{filterDefinitionUsedInDropdown.type === 'entity' && (
<FilterDropdownEntitySelect context={context} />
)}

3
front/src/modules/ui/filter-n-sort/components/FilterDropdownEntitySearchInput.tsx
View File

@ -1,5 +1,6 @@
import { ChangeEvent, Context } from 'react';
import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
import { filterDefinitionUsedInDropdownScopedState } from '@/ui/filter-n-sort/states/filterDefinitionUsedInDropdownScopedState';
import { filterDropdownSearchInputScopedState } from '@/ui/filter-n-sort/states/filterDropdownSearchInputScopedState';
import { selectedOperandInDropdownScopedState } from '@/ui/filter-n-sort/states/selectedOperandInDropdownScopedState';
@ -26,7 +27,7 @@ export function FilterDropdownEntitySearchInput({
return (
filterDefinitionUsedInDropdown &&
selectedOperandInDropdown && (
<input
<DropdownMenuSearch
type="text"
value={filterDropdownSearchInput}
placeholder={filterDefinitionUsedInDropdown.label}

6
front/src/modules/ui/filter-n-sort/components/FilterDropdownFilterSelect.tsx
View File

@ -1,6 +1,6 @@
import { Context } from 'react';
import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
import { useSetHotkeyScope } from '@/ui/hotkey/hooks/useSetHotkeyScope';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
@ -43,7 +43,7 @@ export function FilterDropdownFilterSelect({
const setHotkeyScope = useSetHotkeyScope();
return (
<DropdownMenuItemContainer style={{ maxHeight: '300px' }}>
<DropdownMenuItemsContainer>
{availableFilters.map((availableFilter, index) => (
<DropdownMenuSelectableItem
key={`select-filter-${index}`}
@ -67,6 +67,6 @@ export function FilterDropdownFilterSelect({
{availableFilter.label}
</DropdownMenuSelectableItem>
))}
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
);
}

3
front/src/modules/ui/filter-n-sort/components/FilterDropdownNumberSearchInput.tsx
View File

@ -1,5 +1,6 @@
import { ChangeEvent, Context } from 'react';
import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { useRemoveFilter } from '../hooks/useRemoveFilter';
@ -28,7 +29,7 @@ export function FilterDropdownNumberSearchInput({
return (
filterDefinitionUsedInDropdown &&
selectedOperandInDropdown && (
<input
<DropdownMenuSearch
type="number"
placeholder={filterDefinitionUsedInDropdown.label}
onChange={(event: ChangeEvent<HTMLInputElement>) => {

13
front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandSelect.tsx
View File

@ -1,6 +1,7 @@
import { Context } from 'react';
import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { useFilterCurrentlyEdited } from '../hooks/useFilterCurrentlyEdited';
@ -12,8 +13,6 @@ import { FilterOperand } from '../types/FilterOperand';
import { getOperandLabel } from '../utils/getOperandLabel';
import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
import DropdownButton from './DropdownButton';
export function FilterDropdownOperandSelect({
context,
}: {
@ -63,17 +62,17 @@ export function FilterDropdownOperandSelect({
}
return (
<DropdownMenuItemContainer>
<DropdownMenuItemsContainer>
{operandsForFilterType.map((filterOperand, index) => (
<DropdownButton.StyledDropdownItem
<DropdownMenuItem
key={`select-filter-operand-${index}`}
onClick={() => {
handleOperangeChange(filterOperand);
}}
>
{getOperandLabel(filterOperand)}
</DropdownButton.StyledDropdownItem>
</DropdownMenuItem>
))}
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
);
}

3
front/src/modules/ui/filter-n-sort/components/FilterDropdownTextSearchInput.tsx
View File

@ -1,5 +1,6 @@
import { ChangeEvent, Context } from 'react';
import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
import { useRecoilScopedState } from '@/ui/recoil-scope/hooks/useRecoilScopedState';
import { useFilterCurrentlyEdited } from '../hooks/useFilterCurrentlyEdited';
@ -35,7 +36,7 @@ export function FilterDropdownTextSearchInput({
return (
filterDefinitionUsedInDropdown &&
selectedOperandInDropdown && (
<input
<DropdownMenuSearch
type="text"
placeholder={filterDefinitionUsedInDropdown.label}
value={filterCurrentlyEdited?.value ?? filterDropdownSearchInput}

47
front/src/modules/ui/filter-n-sort/components/SortDropdownButton.tsx
View File

@ -1,5 +1,9 @@
import { useCallback, useState } from 'react';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
import { FiltersHotkeyScope } from '../types/FiltersHotkeyScope';
import { SelectedSortType, SortType } from '../types/interface';
@ -56,9 +60,10 @@ export function SortDropdownButton<SortField>({
onIsUnfoldedChange={handleIsUnfoldedChange}
HotkeyScope={HotkeyScope}
>
{isOptionUnfolded
? options.map((option, index) => (
<DropdownButton.StyledDropdownItem
{isOptionUnfolded ? (
<DropdownMenuItemsContainer>
{options.map((option, index) => (
<DropdownMenuSelectableItem
key={index}
onClick={() => {
setSelectedSortDirection(option);
@ -66,19 +71,23 @@ export function SortDropdownButton<SortField>({
}}
>
{option === 'asc' ? 'Ascending' : 'Descending'}
</DropdownButton.StyledDropdownItem>
))
: [
<DropdownButton.StyledDropdownTopOption
key={0}
onClick={() => setIsOptionUnfolded(true)}
>
{selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'}
</DropdownMenuSelectableItem>
))}
</DropdownMenuItemsContainer>
) : (
[
<DropdownButton.StyledDropdownTopOption
key={0}
onClick={() => setIsOptionUnfolded(true)}
>
{selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'}
<DropdownButton.StyledDropdownTopOptionAngleDown />
</DropdownButton.StyledDropdownTopOption>,
...availableSorts.map((sort, index) => (
<DropdownButton.StyledDropdownItem
<DropdownButton.StyledDropdownTopOptionAngleDown />
</DropdownButton.StyledDropdownTopOption>,
<DropdownMenuSeparator />,
<DropdownMenuItemsContainer>
{availableSorts.map((sort, index) => (
<DropdownMenuSelectableItem
key={index + 1}
onClick={() => {
setIsUnfolded(false);
@ -89,9 +98,11 @@ export function SortDropdownButton<SortField>({
{sort.icon}
</DropdownButton.StyledIcon>
{sort.label}
</DropdownButton.StyledDropdownItem>
)),
]}
</DropdownMenuSelectableItem>
))}
</DropdownMenuItemsContainer>,
]
)}
</DropdownButton>
);
}

2
front/src/modules/ui/filter-n-sort/utils/getOperandLabel.ts
View File

@ -5,7 +5,7 @@ export function getOperandLabel(operand: FilterOperand | null | undefined) {
case 'contains':
return 'Contains';
case 'does-not-contain':
return "Does'nt contain";
return "Doesn't contain";
case 'greater-than':
return 'Greater than';
case 'less-than':

3
front/src/modules/ui/input/components/ImageInput.tsx
View File

@ -28,7 +28,8 @@ const Picture = styled.button<{ withPicture: boolean }>`
width: 66px;
img {
object-fit: cover;
height: 100%;
object-fit: fill;
width: 100%;
}

2
front/src/modules/ui/layout/components/Panel.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
const StyledPanel = styled.div`
background: ${({ theme }) => theme.background.primary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
display: flex;
flex-direction: row;

2
front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
View File

@ -3,7 +3,7 @@ import styled from '@emotion/styled';
export const ShowPageLeftContainer = styled.div`
background: ${({ theme }) => theme.background.secondary};
border-bottom-left-radius: 8px;
border-right: 1px solid ${({ theme }) => theme.border.color.light};
border-right: 1px solid ${({ theme }) => theme.border.color.medium};
border-top-left-radius: 8px;
display: flex;
flex-direction: column;

2
front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx
View File

@ -47,7 +47,7 @@ export function NavbarAnimatedContainer({ children, layout }: NavbarProps) {
opacity: isMenuOpened ? 1 : 0,
}}
transition={{
duration: theme.animation.duration.visible,
duration: theme.animation.duration.normal,
}}
>
{children}

6
front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx
View File

@ -3,7 +3,7 @@ import debounce from 'lodash.debounce';
import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
import { DropdownMenuCheckableItem } from '@/ui/dropdown/components/DropdownMenuCheckableItem';
import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
import { Avatar } from '@/users/components/Avatar';
@ -57,7 +57,7 @@ export function MultipleEntitySelect<
autoFocus
/>
<DropdownMenuSeparator />
<DropdownMenuItemContainer>
<DropdownMenuItemsContainer hasMaxHeight>
{entitiesInDropdown?.map((entity) => (
<DropdownMenuCheckableItem
key={entity.id}
@ -83,7 +83,7 @@ export function MultipleEntitySelect<
{entitiesInDropdown?.length === 0 && (
<DropdownMenuItem>No result</DropdownMenuItem>
)}
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
</DropdownMenu>
);
}

12
front/src/modules/ui/relation-picker/components/SingleEntitySelect.tsx
View File

@ -2,8 +2,8 @@ import { useRef } from 'react';
import { useTheme } from '@emotion/react';
import { DropdownMenu } from '@/ui/dropdown/components/DropdownMenu';
import { DropdownMenuButton } from '@/ui/dropdown/components/DropdownMenuButton';
import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearch } from '@/ui/dropdown/components/DropdownMenuSearch';
import { DropdownMenuSeparator } from '@/ui/dropdown/components/DropdownMenuSeparator';
import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef';
@ -60,12 +60,12 @@ export function SingleEntitySelect<
<DropdownMenuSeparator />
{showCreateButton && (
<>
<DropdownMenuItemContainer style={{ maxHeight: 180 }}>
<DropdownMenuButton onClick={onCreate}>
<DropdownMenuItemsContainer hasMaxHeight>
<DropdownMenuItem onClick={onCreate}>
<IconPlus size={theme.icon.size.md} />
Create new
</DropdownMenuButton>
</DropdownMenuItemContainer>
</DropdownMenuItem>
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
</>
)}

16
front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx
View File

@ -1,8 +1,9 @@
import { useRef } from 'react';
import Skeleton from 'react-loading-skeleton';
import { Key } from 'ts-key-enum';
import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
import { DropdownMenuItemContainer } from '@/ui/dropdown/components/DropdownMenuItemContainer';
import { DropdownMenuItemsContainer } from '@/ui/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSelectableItem } from '@/ui/dropdown/components/DropdownMenuSelectableItem';
import { useScopedHotkeys } from '@/ui/hotkey/hooks/useScopedHotkeys';
import { Avatar } from '@/users/components/Avatar';
@ -12,8 +13,7 @@ import { useEntitySelectScroll } from '../hooks/useEntitySelectScroll';
import { EntityForSelect } from '../types/EntityForSelect';
import { RelationPickerHotkeyScope } from '../types/RelationPickerHotkeyScope';
import { CompanyPickerSkeleton } from './skeletons/CompanyPickerSkeleton';
import { DropdownMenuItemContainerSkeleton } from './skeletons/DropdownMenuItemContainerSkeleton';
import { DropdownMenuItemsContainerSkeleton } from './skeletons/DropdownMenuItemsContainerSkeleton';
export type EntitiesForSingleEntitySelect<
CustomEntityForSelect extends EntityForSelect,
@ -64,11 +64,11 @@ export function SingleEntitySelectBase<
);
return (
<DropdownMenuItemContainer ref={containerRef}>
<DropdownMenuItemsContainer ref={containerRef} hasMaxHeight>
{entities.loading ? (
<DropdownMenuItemContainerSkeleton>
<CompanyPickerSkeleton count={10} />
</DropdownMenuItemContainerSkeleton>
<DropdownMenuItemsContainerSkeleton>
<Skeleton height={24} />
</DropdownMenuItemsContainerSkeleton>
) : entitiesInDropdown.length === 0 ? (
<DropdownMenuItem>No result</DropdownMenuItem>
) : (
@ -90,6 +90,6 @@ export function SingleEntitySelectBase<
</DropdownMenuSelectableItem>
))
)}
</DropdownMenuItemContainer>
</DropdownMenuItemsContainer>
);
}

35
front/src/modules/ui/relation-picker/components/skeletons/CompanyPickerSkeleton.tsx
View File

@ -1,35 +0,0 @@
import Skeleton from 'react-loading-skeleton';
import styled from '@emotion/styled';
type OwnProps = {
count: number;
};
export const SkeletonContainer = styled.div`
align-items: center;
display: inline-flex;
margin-bottom: ${({ theme }) => theme.spacing(1)};
position: relative;
width: 100%;
`;
export const SkeletonEntityName = styled.div`
margin-left: ${({ theme }) => theme.spacing(2)};
width: 100%;
`;
export function CompanyPickerSkeleton({ count }: OwnProps) {
const loadSkeletons = Array(count).fill(1);
return (
<>
{loadSkeletons.map((_, i) => (
<SkeletonContainer key={i}>
<Skeleton width={15} height={15} />
<SkeletonEntityName>
<Skeleton height={8} />
</SkeletonEntityName>
</SkeletonContainer>
))}
</>
);
}

20
front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemContainerSkeleton.tsx
View File

@ -1,20 +0,0 @@
import styled from '@emotion/styled';
export const DropdownMenuItemContainerSkeleton = styled.div`
--horizontal-padding: ${({ theme }) => theme.spacing(1.5)};
--vertical-padding: ${({ theme }) => theme.spacing(2)};
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: ${({ theme }) => theme.font.color.secondary};
font-size: ${({ theme }) => theme.font.size.sm};
gap: ${({ theme }) => theme.spacing(2)};
height: calc(100% - 2 * var(--vertical-padding));
padding: var(--vertical-padding) var(--horizontal-padding);
width: calc(100% - 2 * var(--horizontal-padding));
`;

16
front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemsContainerSkeleton.tsx Normal file
View File

@ -0,0 +1,16 @@
import styled from '@emotion/styled';
export const DropdownMenuItemsContainerSkeleton = styled.div`
--horizontal-padding: ${({ theme }) => theme.spacing(1)};
--vertical-padding: ${({ theme }) => theme.spacing(1)};
align-items: center;
border-radius: ${({ theme }) => theme.border.radius.sm};
color: blue;
height: calc(100% - 2 * var(--vertical-padding));
padding: var(--vertical-padding) var(--horizontal-padding);
width: calc(100% - 2 * var(--horizontal-padding));
`;

6
front/src/modules/ui/right-drawer/components/RightDrawer.tsx
View File

@ -51,17 +51,19 @@ export function RightDrawer() {
return <></>;
}
console.log(isRightDrawerOpen);
return (
<StyledContainer
animate={{
width: isRightDrawerOpen ? theme.rightDrawerWidth : '0',
}}
transition={{
duration: theme.animation.duration.visible,
duration: theme.animation.duration.normal,
}}
>
<StyledRightDrawer ref={rightDrawerRef}>
<RightDrawerRouter />
{isRightDrawerOpen && <RightDrawerRouter />}
</StyledRightDrawer>
</StyledContainer>
);

3
front/src/modules/ui/table/editable-cell/components/EditableCell.tsx
View File

@ -27,6 +27,7 @@ type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
editHotkeyScope?: HotkeyScope;
transparent?: boolean;
onSubmit?: () => void;
onCancel?: () => void;
};
@ -37,6 +38,7 @@ export function EditableCell({
editModeContent,
nonEditModeContent,
editHotkeyScope,
transparent = false,
onSubmit,
onCancel,
}: OwnProps) {
@ -48,6 +50,7 @@ export function EditableCell({
<CellBaseContainer>
{isCurrentCellInEditMode ? (
<EditableCellEditMode
transparent={transparent}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
onSubmit={onSubmit}

2
front/src/modules/ui/table/editable-cell/components/EditableCellDisplayMode.tsx
View File

@ -19,7 +19,7 @@ export const EditableCellNormalModeOuterContainer = styled.div<Props>`
${(props) =>
props.softFocus
? `background: ${props.theme.background.transparent.secondary};
border-radius: ${props.theme.border.radius.md};
border-radius: ${props.theme.border.radius.sm};
box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};`
: ''}
`;

15
front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx
View File

@ -7,8 +7,10 @@ import { useRegisterCloseCellHandlers } from '../hooks/useRegisterCloseCellHandl
export const EditableCellEditModeContainer = styled.div<OwnProps>`
align-items: center;
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.sm};
border: ${({ transparent, theme }) =>
transparent ? 'none' : `1px solid ${theme.border.color.light}`};
border-radius: ${({ transparent, theme }) =>
transparent ? 'none' : theme.border.radius.sm};
display: flex;
left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
@ -16,18 +18,19 @@ export const EditableCellEditModeContainer = styled.div<OwnProps>`
margin-top: -1px;
min-height: 100%;
min-width: 100%;
position: absolute;
right: ${(props) =>
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
width: 100%;
z-index: 1;
${overlayBackground}
${({ transparent }) => (transparent ? '' : overlayBackground)};
`;
type OwnProps = {
children: ReactElement;
transparent?: boolean;
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
onOutsideClick?: () => void;
@ -41,6 +44,7 @@ export function EditableCellEditMode({
children,
onCancel,
onSubmit,
transparent = false,
}: OwnProps) {
const wrapperRef = useRef(null);
@ -48,6 +52,7 @@ export function EditableCellEditMode({
return (
<EditableCellEditModeContainer
transparent={transparent}
data-testid="editable-cell-edit-mode-container"
ref={wrapperRef}
editModeHorizontalAlign={editModeHorizontalAlign}

2
front/src/modules/ui/table/editable-cell/types/EditableCellDateEditMode.tsx
View File

@ -9,7 +9,7 @@ import { useEditableCell } from '../hooks/useEditableCell';
const EditableCellDateEditModeContainer = styled.div`
margin-top: -1px;
width: inherit;
width: 100%;
`;
export type EditableDateProps = {

5
front/src/modules/ui/themes/animation.ts
View File

@ -1,6 +1,7 @@
export const animation = {
duration: {
instant: 0.1,
visible: 0.3,
instant: 0.075,
fast: 0.15,
normal: 0.3,
},
};

2
front/src/pages/companies/__stories__/Companies.sortBy.stories.tsx
View File

@ -24,7 +24,7 @@ export const SortByName: Story = {
const sortButton = await canvas.findByText('Sort');
await userEvent.click(sortButton);
const nameSortButton = canvas.getByText('Name', { selector: 'li' });
const nameSortButton = canvas.getByText('Name', { selector: 'li > div' });
await userEvent.click(nameSortButton);
expect(await canvas.getByTestId('remove-icon-name')).toBeInTheDocument();

4
front/src/pages/people/__stories__/People.sortBy.stories.tsx
View File

@ -25,7 +25,7 @@ export const Email: Story = {
const sortButton = await canvas.findByText('Sort');
await userEvent.click(sortButton);
const emailSortButton = canvas.getByText('Email', { selector: 'li' });
const emailSortButton = canvas.getByText('Email', { selector: 'li > div' });
await userEvent.click(emailSortButton);
expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();
@ -45,7 +45,7 @@ export const Cancel: Story = {
const sortButton = await canvas.findByText('Sort');
await userEvent.click(sortButton);
const emailSortButton = canvas.getByText('Email', { selector: 'li' });
const emailSortButton = canvas.getByText('Email', { selector: 'li > div' });
await userEvent.click(emailSortButton);
expect(await canvas.getByTestId('remove-icon-email')).toBeInTheDocument();