From 4cb856a180394f42527c1b7df0f5a05ccc4cdd5b Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Sun, 16 Jul 2023 17:36:40 -0700 Subject: [PATCH] Design fixes (#696) * Design fixes * Fix design * unused code * Fix tests --- ...penCreateCommentDrawerForSelectedRowIds.ts | 1 + .../components/CompanyAccountOwnerCell.tsx | 1 + .../components/CompanyEditableNameCell.tsx | 22 ----- .../components/EditablePeopleFullName.tsx | 32 +------ .../people/components/PeopleCompanyCell.tsx | 1 + .../components/EditablePeopleCityCell.tsx | 4 +- .../ui/action-bar/components/ActionBar.tsx | 2 +- .../ui/dropdown/components/DropdownMenu.tsx | 8 +- .../components/DropdownMenuButton.tsx | 30 ------- .../components/DropdownMenuCheckableItem.tsx | 4 +- .../dropdown/components/DropdownMenuItem.tsx | 12 ++- ...ner.tsx => DropdownMenuItemsContainer.tsx} | 8 +- .../components/DropdownMenuSearch.tsx | 1 - .../components/DropdownMenuSelectableItem.tsx | 4 +- .../__stories__/DropdownMenu.stories.tsx | 39 ++++---- .../components/DropdownButton.tsx | 89 ++----------------- .../components/FilterDropdownButton.tsx | 28 +++--- .../FilterDropdownEntitySearchInput.tsx | 3 +- .../components/FilterDropdownFilterSelect.tsx | 6 +- .../FilterDropdownNumberSearchInput.tsx | 3 +- .../FilterDropdownOperandSelect.tsx | 13 ++- .../FilterDropdownTextSearchInput.tsx | 3 +- .../components/SortDropdownButton.tsx | 47 ++++++---- .../ui/filter-n-sort/utils/getOperandLabel.ts | 2 +- .../ui/input/components/ImageInput.tsx | 3 +- .../modules/ui/layout/components/Panel.tsx | 2 +- .../components/ShowPageLeftContainer.tsx | 2 +- .../components/NavbarAnimatedContainer.tsx | 2 +- .../components/MultipleEntitySelect.tsx | 6 +- .../components/SingleEntitySelect.tsx | 12 +-- .../components/SingleEntitySelectBase.tsx | 16 ++-- .../skeletons/CompanyPickerSkeleton.tsx | 35 -------- .../DropdownMenuItemContainerSkeleton.tsx | 20 ----- .../DropdownMenuItemsContainerSkeleton.tsx | 16 ++++ .../right-drawer/components/RightDrawer.tsx | 6 +- .../editable-cell/components/EditableCell.tsx | 3 + .../components/EditableCellDisplayMode.tsx | 2 +- .../components/EditableCellEditMode.tsx | 15 ++-- .../types/EditableCellDateEditMode.tsx | 2 +- front/src/modules/ui/themes/animation.ts | 5 +- .../__stories__/Companies.sortBy.stories.tsx | 2 +- .../__stories__/People.sortBy.stories.tsx | 4 +- 42 files changed, 177 insertions(+), 339 deletions(-) delete mode 100644 front/src/modules/ui/dropdown/components/DropdownMenuButton.tsx rename front/src/modules/ui/dropdown/components/{DropdownMenuItemContainer.tsx => DropdownMenuItemsContainer.tsx} (52%) delete mode 100644 front/src/modules/ui/relation-picker/components/skeletons/CompanyPickerSkeleton.tsx delete mode 100644 front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemContainerSkeleton.tsx create mode 100644 front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemsContainerSkeleton.tsx diff --git a/front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts b/front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts index 3fc1e2b62..feeb72df8 100644 --- a/front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts +++ b/front/src/modules/activities/hooks/useOpenCreateCommentDrawerForSelectedRowIds.ts @@ -29,6 +29,7 @@ export function useOpenCreateCommentThreadDrawerForSelectedRowIds() { viewableCommentThreadIdState, ); const setHotkeyScope = useSetHotkeyScope(); + setHotkeyScope(RightDrawerHotkeyScope.RightDrawer, { goto: false }); const [, setCommentableEntityArray] = useRecoilState( commentableEntityArrayState, diff --git a/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx b/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx index e53eb508b..76972cd1e 100644 --- a/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx +++ b/front/src/modules/companies/components/CompanyAccountOwnerCell.tsx @@ -27,6 +27,7 @@ export function CompanyAccountOwnerCell({ company }: OwnProps) { return ( ) { - 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={[ - , - ]} onSubmit={() => updateCompany({ variables: { diff --git a/front/src/modules/people/components/EditablePeopleFullName.tsx b/front/src/modules/people/components/EditablePeopleFullName.tsx index 7b8401120..d5d7a3b54 100644 --- a/front/src/modules/people/components/EditablePeopleFullName.tsx +++ b/front/src/modules/people/components/EditablePeopleFullName.tsx @@ -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) { - event.preventDefault(); - event.stopPropagation(); - - if (!person) { - return; - } - - openCommentRightDrawer([ - { - type: CommentableType.Person, - id: person.id ?? '', - }, - ]); - } - return ( - - - } /> diff --git a/front/src/modules/people/components/PeopleCompanyCell.tsx b/front/src/modules/people/components/PeopleCompanyCell.tsx index 9f54ea4be..534ab4b63 100644 --- a/front/src/modules/people/components/PeopleCompanyCell.tsx +++ b/front/src/modules/people/components/PeopleCompanyCell.tsx @@ -24,6 +24,7 @@ export function PeopleCompanyCell({ people }: OwnProps) { return ( diff --git a/front/src/modules/ui/action-bar/components/ActionBar.tsx b/front/src/modules/ui/action-bar/components/ActionBar.tsx index 468af3f1e..ff36ab093 100644 --- a/front/src/modules/ui/action-bar/components/ActionBar.tsx +++ b/front/src/modules/ui/action-bar/components/ActionBar.tsx @@ -18,7 +18,7 @@ type StyledContainerProps = { const StyledContainer = styled.div` 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}; diff --git a/front/src/modules/ui/dropdown/components/DropdownMenu.tsx b/front/src/modules/ui/dropdown/components/DropdownMenu.tsx index 7e80cdda4..0326dda12 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenu.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenu.tsx @@ -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; `; diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuButton.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuButton.tsx deleted file mode 100644 index 3da1a16e3..000000000 --- a/front/src/modules/ui/dropdown/components/DropdownMenuButton.tsx +++ /dev/null @@ -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)); -`; diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx index 651a682c6..3bd49b7f5 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx @@ -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; diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx index 5ac1dbf56..f625513ef 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenuItem.tsx @@ -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)); `; diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuItemContainer.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx similarity index 52% rename from front/src/modules/ui/dropdown/components/DropdownMenuItemContainer.tsx rename to front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx index d3644127c..ceeecddeb 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuItemContainer.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx @@ -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); diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx index 31c46801f..3f5f5be52 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenuSearch.tsx @@ -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; diff --git a/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx b/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx index 2d23e349a..b9e54a8c5 100644 --- a/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx +++ b/front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx @@ -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)` +const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)` ${hoverBackground}; align-items: center; diff --git a/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx b/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx index 32afd2813..f81080b72 100644 --- a/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx +++ b/front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx @@ -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( - + - + , ), }; @@ -143,9 +142,9 @@ export const Search: Story = { - + - + , @@ -176,16 +175,16 @@ export const Button: Story = { - - + +
Create new
- - + + - + - + , @@ -198,9 +197,9 @@ export const SelectableMenuItem: Story = { - + - + , @@ -237,9 +236,9 @@ export const SelectableMenuItemWithAvatar: Story = { - + - + , @@ -277,9 +276,9 @@ export const CheckableMenuItem: Story = { - + - + , @@ -323,9 +322,9 @@ export const CheckableMenuItemWithAvatar: Story = { - + - + , diff --git a/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx index a36d1e44e..7a106a9b7 100644 --- a/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx +++ b/front/src/modules/ui/filter-n-sort/components/DropdownButton.tsx @@ -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` } `; -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} {isUnfolded && ( - {children} + + {children} + )} ); @@ -215,9 +141,6 @@ function DropdownTopOptionAngleDown() { ); } -DropdownButton.StyledDropdownItem = StyledDropdownItem; -DropdownButton.StyledDropdownItemClipped = StyledDropdownItemClipped; -DropdownButton.StyledSearchField = StyledSearchField; DropdownButton.StyledDropdownTopOption = StyledDropdownTopOption; DropdownButton.StyledDropdownTopOptionAngleDown = DropdownTopOptionAngleDown; DropdownButton.StyledIcon = StyledIcon; diff --git a/front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx b/front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx index 96255ca0a..9b83367c7 100644 --- a/front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx +++ b/front/src/modules/ui/filter-n-sort/components/FilterDropdownButton.tsx @@ -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 && ( <> - - {filterDefinitionUsedInDropdown.type === 'text' && ( - - )} - {filterDefinitionUsedInDropdown.type === 'number' && ( - - )} - {filterDefinitionUsedInDropdown.type === 'date' && ( - - )} - {filterDefinitionUsedInDropdown.type === 'entity' && ( - - )} - + + {filterDefinitionUsedInDropdown.type === 'text' && ( + + )} + {filterDefinitionUsedInDropdown.type === 'number' && ( + + )} + {filterDefinitionUsedInDropdown.type === 'date' && ( + + )} + {filterDefinitionUsedInDropdown.type === 'entity' && ( + + )} {filterDefinitionUsedInDropdown.type === 'entity' && ( )} diff --git a/front/src/modules/ui/filter-n-sort/components/FilterDropdownEntitySearchInput.tsx b/front/src/modules/ui/filter-n-sort/components/FilterDropdownEntitySearchInput.tsx index bde76a577..8e791ca07 100644 --- a/front/src/modules/ui/filter-n-sort/components/FilterDropdownEntitySearchInput.tsx +++ b/front/src/modules/ui/filter-n-sort/components/FilterDropdownEntitySearchInput.tsx @@ -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 && ( - + {availableFilters.map((availableFilter, index) => ( ))} - + ); } diff --git a/front/src/modules/ui/filter-n-sort/components/FilterDropdownNumberSearchInput.tsx b/front/src/modules/ui/filter-n-sort/components/FilterDropdownNumberSearchInput.tsx index ef12e0865..c4c2199ef 100644 --- a/front/src/modules/ui/filter-n-sort/components/FilterDropdownNumberSearchInput.tsx +++ b/front/src/modules/ui/filter-n-sort/components/FilterDropdownNumberSearchInput.tsx @@ -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 && ( - ) => { diff --git a/front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandSelect.tsx b/front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandSelect.tsx index d6e81675c..444944cab 100644 --- a/front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandSelect.tsx +++ b/front/src/modules/ui/filter-n-sort/components/FilterDropdownOperandSelect.tsx @@ -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 ( - + {operandsForFilterType.map((filterOperand, index) => ( - { handleOperangeChange(filterOperand); }} > {getOperandLabel(filterOperand)} - + ))} - + ); } diff --git a/front/src/modules/ui/filter-n-sort/components/FilterDropdownTextSearchInput.tsx b/front/src/modules/ui/filter-n-sort/components/FilterDropdownTextSearchInput.tsx index 34d724581..55f770d62 100644 --- a/front/src/modules/ui/filter-n-sort/components/FilterDropdownTextSearchInput.tsx +++ b/front/src/modules/ui/filter-n-sort/components/FilterDropdownTextSearchInput.tsx @@ -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 && ( - ({ onIsUnfoldedChange={handleIsUnfoldedChange} HotkeyScope={HotkeyScope} > - {isOptionUnfolded - ? options.map((option, index) => ( - + {options.map((option, index) => ( + { setSelectedSortDirection(option); @@ -66,19 +71,23 @@ export function SortDropdownButton({ }} > {option === 'asc' ? 'Ascending' : 'Descending'} - - )) - : [ - setIsOptionUnfolded(true)} - > - {selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'} + + ))} + + ) : ( + [ + setIsOptionUnfolded(true)} + > + {selectedSortDirection === 'asc' ? 'Ascending' : 'Descending'} - - , - ...availableSorts.map((sort, index) => ( - + , + , + + {availableSorts.map((sort, index) => ( + { setIsUnfolded(false); @@ -89,9 +98,11 @@ export function SortDropdownButton({ {sort.icon} {sort.label} - - )), - ]} + + ))} + , + ] + )} ); } diff --git a/front/src/modules/ui/filter-n-sort/utils/getOperandLabel.ts b/front/src/modules/ui/filter-n-sort/utils/getOperandLabel.ts index 205a9ff0e..cd1ec542a 100644 --- a/front/src/modules/ui/filter-n-sort/utils/getOperandLabel.ts +++ b/front/src/modules/ui/filter-n-sort/utils/getOperandLabel.ts @@ -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': diff --git a/front/src/modules/ui/input/components/ImageInput.tsx b/front/src/modules/ui/input/components/ImageInput.tsx index 1f16a92a1..33e7c0f16 100644 --- a/front/src/modules/ui/input/components/ImageInput.tsx +++ b/front/src/modules/ui/input/components/ImageInput.tsx @@ -28,7 +28,8 @@ const Picture = styled.button<{ withPicture: boolean }>` width: 66px; img { - object-fit: cover; + height: 100%; + object-fit: fill; width: 100%; } diff --git a/front/src/modules/ui/layout/components/Panel.tsx b/front/src/modules/ui/layout/components/Panel.tsx index b970f58dc..e07145567 100644 --- a/front/src/modules/ui/layout/components/Panel.tsx +++ b/front/src/modules/ui/layout/components/Panel.tsx @@ -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; diff --git a/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx b/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx index 47df6395b..4d4e73025 100644 --- a/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx +++ b/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx @@ -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; diff --git a/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx b/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx index 09974f6ec..dfe22abe0 100644 --- a/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx +++ b/front/src/modules/ui/navbar/components/NavbarAnimatedContainer.tsx @@ -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} diff --git a/front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx b/front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx index a75c8af8c..6f473033c 100644 --- a/front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx +++ b/front/src/modules/ui/relation-picker/components/MultipleEntitySelect.tsx @@ -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 /> - + {entitiesInDropdown?.map((entity) => ( No result )} - + ); } diff --git a/front/src/modules/ui/relation-picker/components/SingleEntitySelect.tsx b/front/src/modules/ui/relation-picker/components/SingleEntitySelect.tsx index 44638c5c8..385a47697 100644 --- a/front/src/modules/ui/relation-picker/components/SingleEntitySelect.tsx +++ b/front/src/modules/ui/relation-picker/components/SingleEntitySelect.tsx @@ -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< {showCreateButton && ( <> - - + + Create new - - + + )} diff --git a/front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx b/front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx index db0d531a8..ffac377c4 100644 --- a/front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx +++ b/front/src/modules/ui/relation-picker/components/SingleEntitySelectBase.tsx @@ -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 ( - + {entities.loading ? ( - - - + + + ) : entitiesInDropdown.length === 0 ? ( No result ) : ( @@ -90,6 +90,6 @@ export function SingleEntitySelectBase< )) )} - + ); } diff --git a/front/src/modules/ui/relation-picker/components/skeletons/CompanyPickerSkeleton.tsx b/front/src/modules/ui/relation-picker/components/skeletons/CompanyPickerSkeleton.tsx deleted file mode 100644 index 2c4d37eab..000000000 --- a/front/src/modules/ui/relation-picker/components/skeletons/CompanyPickerSkeleton.tsx +++ /dev/null @@ -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) => ( - - - - - - - ))} - - ); -} diff --git a/front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemContainerSkeleton.tsx b/front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemContainerSkeleton.tsx deleted file mode 100644 index f84ce98b0..000000000 --- a/front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemContainerSkeleton.tsx +++ /dev/null @@ -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)); -`; diff --git a/front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemsContainerSkeleton.tsx b/front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemsContainerSkeleton.tsx new file mode 100644 index 000000000..099f71df2 --- /dev/null +++ b/front/src/modules/ui/relation-picker/components/skeletons/DropdownMenuItemsContainerSkeleton.tsx @@ -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)); +`; diff --git a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx index a63d890ff..5e1ed457c 100644 --- a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx +++ b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx @@ -51,17 +51,19 @@ export function RightDrawer() { return <>; } + console.log(isRightDrawerOpen); + return ( - + {isRightDrawerOpen && } ); diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx index c0152b92c..33f3d8b2a 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx +++ b/front/src/modules/ui/table/editable-cell/components/EditableCell.tsx @@ -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({ {isCurrentCellInEditMode ? ( ` ${(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};` : ''} `; diff --git a/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx b/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx index 0d8eba3e8..e44193db8 100644 --- a/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx +++ b/front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx @@ -7,8 +7,10 @@ import { useRegisterCloseCellHandlers } from '../hooks/useRegisterCloseCellHandl export const EditableCellEditModeContainer = styled.div` 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` 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 ( div' }); await userEvent.click(nameSortButton); expect(await canvas.getByTestId('remove-icon-name')).toBeInTheDocument(); diff --git a/front/src/pages/people/__stories__/People.sortBy.stories.tsx b/front/src/pages/people/__stories__/People.sortBy.stories.tsx index 476c54953..4e2943d15 100644 --- a/front/src/pages/people/__stories__/People.sortBy.stories.tsx +++ b/front/src/pages/people/__stories__/People.sortBy.stories.tsx @@ -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();