diff --git a/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx b/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx index 20f875a48..7ddf40bf2 100644 --- a/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx +++ b/front/src/modules/comments/components/comments/__stories__/CommentChip.stories.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/styled'; import type { Meta, StoryObj } from '@storybook/react'; -import { CellBaseContainer } from '@/ui/components/editable-cell/CellBaseContainer'; import { getRenderWrapperForComponent } from '~/testing/renderWrappers'; import { CellCommentChip } from '../CellCommentChip'; @@ -46,10 +45,8 @@ export const TooManyComments: Story = { export const InCellDefault: Story = { render: getRenderWrapperForComponent( - - Fake short text - - + Fake short text + , ), }; @@ -57,12 +54,10 @@ export const InCellDefault: Story = { export const InCellOverlappingBlur: Story = { render: getRenderWrapperForComponent( - - - Fake long text to demonstrate blur effect - - - + + Fake long text to demonstrate blur effect + + , ), }; diff --git a/front/src/modules/companies/components/CompanyEditableNameCell.tsx b/front/src/modules/companies/components/CompanyEditableNameCell.tsx index d1ca7984d..3a27faff9 100644 --- a/front/src/modules/companies/components/CompanyEditableNameCell.tsx +++ b/front/src/modules/companies/components/CompanyEditableNameCell.tsx @@ -1,5 +1,5 @@ import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer'; -import EditableChip from '@/ui/components/editable-cell/EditableChip'; +import EditableChip from '@/ui/components/editable-cell/types/EditableChip'; import { getLogoUrlFromDomainName } from '@/utils/utils'; import { Company } from '../interfaces/company.interface'; diff --git a/front/src/modules/people/components/EditablePeopleFullName.tsx b/front/src/modules/people/components/EditablePeopleFullName.tsx index 03273ef28..4c040f979 100644 --- a/front/src/modules/people/components/EditablePeopleFullName.tsx +++ b/front/src/modules/people/components/EditablePeopleFullName.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import styled from '@emotion/styled'; import { CellCommentChip } from '@/comments/components/comments/CellCommentChip'; -import { EditableDoubleText } from '@/ui/components/editable-cell/EditableDoubleText'; +import { EditableDoubleText } from '@/ui/components/editable-cell/types/EditableDoubleText'; import { PersonChip } from './PersonChip'; diff --git a/front/src/modules/people/components/PeopleCompanyCell.tsx b/front/src/modules/people/components/PeopleCompanyCell.tsx index adf812232..517af06ea 100644 --- a/front/src/modules/people/components/PeopleCompanyCell.tsx +++ b/front/src/modules/people/components/PeopleCompanyCell.tsx @@ -10,7 +10,7 @@ import { } from '@/companies/interfaces/company.interface'; import { SearchConfigType } from '@/search/interfaces/interface'; import { SEARCH_COMPANY_QUERY } from '@/search/services/search'; -import { EditableRelation } from '@/ui/components/editable-cell/EditableRelation'; +import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRelation'; import { getLogoUrlFromDomainName } from '@/utils/utils'; import { QueryMode, diff --git a/front/src/modules/people/components/PeopleCompanyCreateCell.tsx b/front/src/modules/people/components/PeopleCompanyCreateCell.tsx index c24791b66..3a8de76e5 100644 --- a/front/src/modules/people/components/PeopleCompanyCreateCell.tsx +++ b/front/src/modules/people/components/PeopleCompanyCreateCell.tsx @@ -1,8 +1,6 @@ import { useRef, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; -import { CellBaseContainer } from '@/ui/components/editable-cell/CellBaseContainer'; -import { CellEditModeContainer } from '@/ui/components/editable-cell/CellEditModeContainer'; import { DoubleTextInput } from '@/ui/components/inputs/DoubleTextInput'; import { useListenClickOutsideArrayOfRef } from '@/ui/hooks/useListenClickOutsideArrayOfRef'; @@ -43,16 +41,12 @@ export function PeopleCompanyCreateCell({ } return ( - - - - - + ); } diff --git a/front/src/modules/ui/components/editable-cell/CellBaseContainer.tsx b/front/src/modules/ui/components/editable-cell/CellBaseContainer.tsx deleted file mode 100644 index 07b84dbeb..000000000 --- a/front/src/modules/ui/components/editable-cell/CellBaseContainer.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styled from '@emotion/styled'; - -export const CellBaseContainer = styled.div` - position: relative; - box-sizing: border-box; - height: 32px; - display: flex; - align-items: center; - width: 100%; - cursor: pointer; - user-select: none; -`; diff --git a/front/src/modules/ui/components/editable-cell/CellEditModeContainer.tsx b/front/src/modules/ui/components/editable-cell/CellEditModeContainer.tsx deleted file mode 100644 index cc1a44f02..000000000 --- a/front/src/modules/ui/components/editable-cell/CellEditModeContainer.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import styled from '@emotion/styled'; - -import { overlayBackground } from '../../layout/styles/themes'; - -type OwnProps = { - editModeHorizontalAlign?: 'left' | 'right'; - editModeVerticalPosition?: 'over' | 'below'; -}; - -export const CellEditModeContainer = styled.div` - display: flex; - align-items: center; - min-width: 100%; - min-height: 100%; - padding-left: ${(props) => props.theme.spacing(2)}; - padding-right: ${(props) => props.theme.spacing(2)}; - margin-left: -2px; - position: absolute; - left: ${(props) => - props.editModeHorizontalAlign === 'right' ? 'auto' : '0'}; - right: ${(props) => - props.editModeHorizontalAlign === 'right' ? '0' : 'auto'}; - top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')}; - - border: 1px solid ${(props) => props.theme.primaryBorder}; - z-index: 1; - border-radius: 4px; - ${overlayBackground} -`; diff --git a/front/src/modules/ui/components/editable-cell/CellNormalModeContainer.tsx b/front/src/modules/ui/components/editable-cell/CellNormalModeContainer.tsx deleted file mode 100644 index a854f47bd..000000000 --- a/front/src/modules/ui/components/editable-cell/CellNormalModeContainer.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styled from '@emotion/styled'; - -export const CellNormalModeContainer = styled.div` - display: flex; - align-items: center; - width: 100%; - height: 100%; - overflow: hidden; - - padding-left: ${(props) => props.theme.spacing(2)}; - padding-right: ${(props) => props.theme.spacing(2)}; -`; diff --git a/front/src/modules/ui/components/editable-cell/EditableCell.tsx b/front/src/modules/ui/components/editable-cell/EditableCell.tsx index 28f20e3e7..5a2de48c8 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCell.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCell.tsx @@ -1,12 +1,23 @@ import { ReactElement } from 'react'; +import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState'; -import { CellBaseContainer } from './CellBaseContainer'; -import { CellNormalModeContainer } from './CellNormalModeContainer'; +import { EditableCellDisplayMode } from './EditableCellDisplayMode'; import { EditableCellEditMode } from './EditableCellEditMode'; +export const CellBaseContainer = styled.div` + position: relative; + box-sizing: border-box; + height: 32px; + display: flex; + align-items: center; + width: 100%; + cursor: pointer; + user-select: none; +`; + type OwnProps = { editModeContent: ReactElement; nonEditModeContent: ReactElement; @@ -42,16 +53,15 @@ export function EditableCell({ {isEditMode ? ( + > + {editModeContent} + ) : ( - - <>{nonEditModeContent} - + {nonEditModeContent} )} ); diff --git a/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx b/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx new file mode 100644 index 000000000..3f2efe1b3 --- /dev/null +++ b/front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx @@ -0,0 +1,35 @@ +import { ReactElement } from 'react'; +import styled from '@emotion/styled'; + +export const EditableCellNormalModeOuterContainer = styled.div` + display: flex; + align-items: center; + width: 100%; + height: 100%; + overflow: hidden; + + padding-left: ${(props) => props.theme.spacing(2)}; + padding-right: ${(props) => props.theme.spacing(2)}; +`; + +export const EditableCellNormalModeInnerContainer = styled.div` + display: flex; + align-items: center; + width: 100%; + height: 100%; + overflow: hidden; +`; + +type OwnProps = { + children: ReactElement; +}; + +export function EditableCellDisplayMode({ children }: OwnProps) { + return ( + + + {children} + + + ); +} diff --git a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx b/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx index 4b8e6d2b4..22872d72d 100644 --- a/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx +++ b/front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx @@ -1,16 +1,35 @@ import { ReactElement, useMemo, useRef } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; +import styled from '@emotion/styled'; import { useRecoilState } from 'recoil'; import { debounce } from '@/utils/debounce'; import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef'; +import { overlayBackground } from '../../layout/styles/themes'; import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState'; -import { CellEditModeContainer } from './CellEditModeContainer'; +export const EditableCellEditModeContainer = styled.div` + display: flex; + align-items: center; + min-width: calc(100% + 20px); + min-height: 100%; + margin-left: -2px; + position: absolute; + left: ${(props) => + props.editModeHorizontalAlign === 'right' ? 'auto' : '0'}; + right: ${(props) => + props.editModeHorizontalAlign === 'right' ? '0' : 'auto'}; + top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')}; + + border: 1px solid ${(props) => props.theme.primaryBorder}; + z-index: 1; + border-radius: 4px; + ${overlayBackground} +`; type OwnProps = { - editModeContent: ReactElement; + children: ReactElement; editModeHorizontalAlign?: 'left' | 'right'; editModeVerticalPosition?: 'over' | 'below'; isEditMode?: boolean; @@ -21,7 +40,7 @@ type OwnProps = { export function EditableCellEditMode({ editModeHorizontalAlign, editModeVerticalPosition, - editModeContent, + children, isEditMode, onOutsideClick, }: OwnProps) { @@ -77,13 +96,13 @@ export function EditableCellEditMode({ ); return ( - - {editModeContent} - + {children} + ); } diff --git a/front/src/modules/ui/components/editable-cell/EditableCellMenu.tsx b/front/src/modules/ui/components/editable-cell/EditableCellMenu.tsx deleted file mode 100644 index a03215276..000000000 --- a/front/src/modules/ui/components/editable-cell/EditableCellMenu.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { ReactElement } from 'react'; -import styled from '@emotion/styled'; -import { useRecoilState } from 'recoil'; - -import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState'; - -import { CellBaseContainer } from './CellBaseContainer'; -import { EditableCellMenuEditMode } from './EditableCellMenuEditMode'; - -const EditableCellMenuNormalModeContainer = styled.div` - display: flex; - align-items: center; - width: calc(100% - ${(props) => props.theme.spacing(5)}); - height: 100%; - overflow: hidden; -`; - -type OwnProps = { - editModeContent: ReactElement; - nonEditModeContent: ReactElement; - editModeHorizontalAlign?: 'left' | 'right'; - editModeVerticalPosition?: 'over' | 'below'; - isEditMode?: boolean; - isCreateMode?: boolean; - onOutsideClick?: () => void; - onInsideClick?: () => void; -}; - -// TODO: refactor -export function EditableCellMenu({ - editModeContent, - nonEditModeContent, - editModeHorizontalAlign = 'left', - editModeVerticalPosition = 'over', - isEditMode = false, - onOutsideClick, - onInsideClick, -}: OwnProps) { - const [isSomeInputInEditMode, setIsSomeInputInEditMode] = useRecoilState( - isSomeInputInEditModeState, - ); - - function handleOnClick() { - if (!isSomeInputInEditMode) { - onInsideClick?.(); - setIsSomeInputInEditMode(true); - } - } - - return ( - - - {nonEditModeContent} - - {isEditMode && ( - - )} - - ); -} diff --git a/front/src/modules/ui/components/editable-cell/EditableCellMenuEditMode.tsx b/front/src/modules/ui/components/editable-cell/EditableCellMenuEditMode.tsx deleted file mode 100644 index e90eaf6c7..000000000 --- a/front/src/modules/ui/components/editable-cell/EditableCellMenuEditMode.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import { ReactElement, useMemo, useRef } from 'react'; -import { useHotkeys } from 'react-hotkeys-hook'; -import { useRecoilState } from 'recoil'; - -import { debounce } from '@/utils/debounce'; - -import { useListenClickOutsideArrayOfRef } from '../../hooks/useListenClickOutsideArrayOfRef'; -import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState'; - -import { EditableCellMenuEditModeContainer } from './EditableCellMenuEditModeContainer'; - -type OwnProps = { - editModeContent: ReactElement; - editModeHorizontalAlign?: 'left' | 'right'; - editModeVerticalPosition?: 'over' | 'below'; - isEditMode?: boolean; - onOutsideClick?: () => void; - onInsideClick?: () => void; -}; - -export function EditableCellMenuEditMode({ - editModeHorizontalAlign, - editModeVerticalPosition, - editModeContent, - isEditMode, - onOutsideClick, -}: OwnProps) { - const wrapperRef = useRef(null); - - const [, setIsSomeInputInEditMode] = useRecoilState( - isSomeInputInEditModeState, - ); - - const debouncedSetIsSomeInputInEditMode = useMemo(() => { - return debounce(setIsSomeInputInEditMode, 20); - }, [setIsSomeInputInEditMode]); - - useListenClickOutsideArrayOfRef([wrapperRef], () => { - if (isEditMode) { - debouncedSetIsSomeInputInEditMode(false); - onOutsideClick?.(); - } - }); - - useHotkeys( - 'esc', - () => { - if (isEditMode) { - onOutsideClick?.(); - - debouncedSetIsSomeInputInEditMode(false); - } - }, - { - preventDefault: true, - enableOnContentEditable: true, - enableOnFormTags: true, - }, - [isEditMode, onOutsideClick, debouncedSetIsSomeInputInEditMode], - ); - - useHotkeys( - 'enter', - () => { - if (isEditMode) { - onOutsideClick?.(); - - debouncedSetIsSomeInputInEditMode(false); - } - }, - { - preventDefault: true, - enableOnContentEditable: true, - enableOnFormTags: true, - }, - [isEditMode, onOutsideClick, debouncedSetIsSomeInputInEditMode], - ); - - return ( - - {editModeContent} - - ); -} diff --git a/front/src/modules/ui/components/editable-cell/EditableCellMenuEditModeContainer.tsx b/front/src/modules/ui/components/editable-cell/EditableCellMenuEditModeContainer.tsx deleted file mode 100644 index 15538783d..000000000 --- a/front/src/modules/ui/components/editable-cell/EditableCellMenuEditModeContainer.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import styled from '@emotion/styled'; - -import { overlayBackground } from '../../layout/styles/themes'; - -type OwnProps = { - editModeHorizontalAlign?: 'left' | 'right'; - editModeVerticalPosition?: 'over' | 'below'; -}; - -// TODO: refactor -export const EditableCellMenuEditModeContainer = styled.div` - display: flex; - align-items: center; - min-width: 100%; - min-height: 100%; - position: absolute; - left: ${(props) => - props.editModeHorizontalAlign === 'right' ? 'auto' : '-1px'}; - right: ${(props) => - props.editModeHorizontalAlign === 'right' ? '0' : 'auto'}; - top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')}; - - border: 1px solid ${(props) => props.theme.primaryBorder}; - z-index: 1; - border-radius: 4px; - ${overlayBackground} -`; diff --git a/front/src/modules/ui/components/editable-cell/EditableChip.tsx b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx similarity index 92% rename from front/src/modules/ui/components/editable-cell/EditableChip.tsx rename to front/src/modules/ui/components/editable-cell/types/EditableChip.tsx index f4bbda42e..1007640e7 100644 --- a/front/src/modules/ui/components/editable-cell/EditableChip.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableChip.tsx @@ -2,10 +2,9 @@ import { ChangeEvent, ComponentType, useRef, useState } from 'react'; import styled from '@emotion/styled'; import { CellCommentChip } from '@/comments/components/comments/CellCommentChip'; +import { textInputStyle } from '@/ui/layout/styles/themes'; -import { textInputStyle } from '../../layout/styles/themes'; - -import { EditableCell } from './EditableCell'; +import { EditableCell } from '../EditableCell'; export type EditableChipProps = { placeholder?: string; @@ -30,11 +29,6 @@ const StyledInplaceInput = styled.input` const StyledInplaceShow = styled.div` display: flex; width: 100%; - - &::placeholder { - font-weight: 'bold'; - color: props.theme.text20; - } `; function EditableChip({ diff --git a/front/src/modules/ui/components/editable-cell/EditableDate.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx similarity index 91% rename from front/src/modules/ui/components/editable-cell/EditableDate.tsx rename to front/src/modules/ui/components/editable-cell/types/EditableDate.tsx index 29fbeecf7..8be8d04f6 100644 --- a/front/src/modules/ui/components/editable-cell/EditableDate.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableDate.tsx @@ -3,9 +3,8 @@ import styled from '@emotion/styled'; import { humanReadableDate } from '@/utils/utils'; -import DatePicker from '../form/DatePicker'; - -import { EditableCell } from './EditableCell'; +import DatePicker from '../../form/DatePicker'; +import { EditableCell } from '../EditableCell'; export type EditableDateProps = { value: Date; @@ -16,6 +15,7 @@ export type EditableDateProps = { const StyledContainer = styled.div` display: flex; align-items: center; + margin: 0px ${(props) => props.theme.spacing(2)}; `; export type StyledCalendarContainerProps = { @@ -78,9 +78,7 @@ export function EditableDate({ } nonEditModeContent={ - -
{inputValue && humanReadableDate(inputValue)}
- +
{inputValue && humanReadableDate(inputValue)}
} > ); diff --git a/front/src/modules/ui/components/editable-cell/EditableDoubleText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx similarity index 92% rename from front/src/modules/ui/components/editable-cell/EditableDoubleText.tsx rename to front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx index 003013c70..fbfcbf715 100644 --- a/front/src/modules/ui/components/editable-cell/EditableDoubleText.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx @@ -1,9 +1,9 @@ import { ChangeEvent, ReactElement, useRef, useState } from 'react'; import styled from '@emotion/styled'; -import { textInputStyle } from '../../layout/styles/themes'; +import { textInputStyle } from '@/ui/layout/styles/themes'; -import { EditableCell } from './EditableCell'; +import { EditableCell } from '../EditableCell'; type OwnProps = { firstValue: string; @@ -28,6 +28,7 @@ const StyledContainer = styled.div` const StyledEditInplaceInput = styled.input` width: 45%; height: 18px; + margin: 0px ${(props) => props.theme.spacing(2)}; ${textInputStyle} `; diff --git a/front/src/modules/ui/components/editable-cell/EditablePhone.tsx b/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx similarity index 89% rename from front/src/modules/ui/components/editable-cell/EditablePhone.tsx rename to front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx index c0f72bcca..d43e4fb92 100644 --- a/front/src/modules/ui/components/editable-cell/EditablePhone.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx @@ -2,9 +2,10 @@ import { ChangeEvent, MouseEvent, useRef, useState } from 'react'; import styled from '@emotion/styled'; import { isValidPhoneNumber, parsePhoneNumber } from 'libphonenumber-js'; -import Link from '../link/Link'; +import { textInputStyle } from '@/ui/layout/styles/themes'; -import { EditableCell } from './EditableCell'; +import Link from '../../link/Link'; +import { EditableCell } from '../EditableCell'; type OwnProps = { placeholder?: string; @@ -19,13 +20,8 @@ type StyledEditModeProps = { // TODO: refactor const StyledEditInplaceInput = styled.input` width: 100%; - border: none; - outline: none; - - &::placeholder { - font-weight: bold; - color: ${(props) => props.theme.text20}; - } + margin: 0px ${(props) => props.theme.spacing(2)}; + ${textInputStyle} `; export function EditablePhone({ value, placeholder, changeHandler }: OwnProps) { diff --git a/front/src/modules/ui/components/editable-cell/EditableRelation.tsx b/front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx similarity index 91% rename from front/src/modules/ui/components/editable-cell/EditableRelation.tsx rename to front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx index f775dff1c..3f023305e 100644 --- a/front/src/modules/ui/components/editable-cell/EditableRelation.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx @@ -5,22 +5,19 @@ import { useRecoilState } from 'recoil'; import { SearchConfigType } from '@/search/interfaces/interface'; import { useSearch } from '@/search/services/search'; +import { textInputStyle } from '@/ui/layout/styles/themes'; +import { isSomeInputInEditModeState } from '@/ui/tables/states/isSomeInputInEditModeState'; import { AnyEntity } from '@/utils/interfaces/generic.interface'; import { isDefined } from '@/utils/type-guards/isDefined'; import { isNonEmptyString } from '@/utils/type-guards/isNonEmptyString'; -import { textInputStyle } from '../../layout/styles/themes'; -import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState'; +import { EditableCell } from '../EditableCell'; +import { HoverableMenuItem } from '../HoverableMenuItem'; -import { CellNormalModeContainer } from './CellNormalModeContainer'; -import { EditableCellMenu } from './EditableCellMenu'; import { EditableRelationCreateButton } from './EditableRelationCreateButton'; -import { HoverableMenuItem } from './HoverableMenuItem'; const StyledEditModeContainer = styled.div` width: 200px; - // margin-left: calc(-1 * ${(props) => props.theme.spacing(2)}); - // margin-right: calc(-1 * ${(props) => props.theme.spacing(2)}); `; const StyledEditModeSelectedContainer = styled.div` @@ -144,7 +141,7 @@ export function EditableRelation< return ( <> - setIsEditMode(false)} @@ -207,13 +204,13 @@ export function EditableRelation< } nonEditModeContent={ - + <> {relation ? ( ) : ( <> )} - + } /> diff --git a/front/src/modules/ui/components/editable-cell/EditableRelationCreateButton.tsx b/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx similarity index 74% rename from front/src/modules/ui/components/editable-cell/EditableRelationCreateButton.tsx rename to front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx index d2b6a54ee..0bf46478a 100644 --- a/front/src/modules/ui/components/editable-cell/EditableRelationCreateButton.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx @@ -16,9 +16,4 @@ export const EditableRelationCreateButton = styled.button` height: 31px; background: none; gap: 8px; - // :hover { - // background: rgba(0, 0, 0, 0.04); - // color: ${(props) => props.theme.text100}; - // } - // margin-bottom: calc(${(props) => props.theme.spacing(1)} / 2); `; diff --git a/front/src/modules/ui/components/editable-cell/EditableText.tsx b/front/src/modules/ui/components/editable-cell/types/EditableText.tsx similarity index 90% rename from front/src/modules/ui/components/editable-cell/EditableText.tsx rename to front/src/modules/ui/components/editable-cell/types/EditableText.tsx index 32c23bc30..9646b2b84 100644 --- a/front/src/modules/ui/components/editable-cell/EditableText.tsx +++ b/front/src/modules/ui/components/editable-cell/types/EditableText.tsx @@ -1,9 +1,9 @@ import { ChangeEvent, useRef, useState } from 'react'; import styled from '@emotion/styled'; -import { textInputStyle } from '../../layout/styles/themes'; +import { textInputStyle } from '@/ui/layout/styles/themes'; -import { EditableCell } from './EditableCell'; +import { EditableCell } from '../EditableCell'; type OwnProps = { placeholder?: string; @@ -19,6 +19,7 @@ type StyledEditModeProps = { // TODO: refactor const StyledInplaceInput = styled.input` width: 100%; + margin: 0px ${(props) => props.theme.spacing(2)}; ${textInputStyle} `; diff --git a/front/src/pages/companies/companies-columns.tsx b/front/src/pages/companies/companies-columns.tsx index cccde5552..eab2ccd85 100644 --- a/front/src/pages/companies/companies-columns.tsx +++ b/front/src/pages/companies/companies-columns.tsx @@ -18,9 +18,9 @@ import { } from '@/people/components/PersonChip'; import { SearchConfigType } from '@/search/interfaces/interface'; import { SEARCH_USER_QUERY } from '@/search/services/search'; -import { EditableDate } from '@/ui/components/editable-cell/EditableDate'; -import { EditableRelation } from '@/ui/components/editable-cell/EditableRelation'; -import { EditableText } from '@/ui/components/editable-cell/EditableText'; +import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate'; +import { EditableRelation } from '@/ui/components/editable-cell/types/EditableRelation'; +import { EditableText } from '@/ui/components/editable-cell/types/EditableText'; import { CheckboxCell } from '@/ui/components/table/CheckboxCell'; import { ColumnHead } from '@/ui/components/table/ColumnHead'; import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox'; diff --git a/front/src/pages/people/people-columns.tsx b/front/src/pages/people/people-columns.tsx index 7db401362..a55d9debf 100644 --- a/front/src/pages/people/people-columns.tsx +++ b/front/src/pages/people/people-columns.tsx @@ -13,9 +13,9 @@ import { EditablePeopleFullName } from '@/people/components/EditablePeopleFullNa import { PeopleCompanyCell } from '@/people/components/PeopleCompanyCell'; import { Person } from '@/people/interfaces/person.interface'; import { updatePerson } from '@/people/services'; -import { EditableDate } from '@/ui/components/editable-cell/EditableDate'; -import { EditablePhone } from '@/ui/components/editable-cell/EditablePhone'; -import { EditableText } from '@/ui/components/editable-cell/EditableText'; +import { EditableDate } from '@/ui/components/editable-cell/types/EditableDate'; +import { EditablePhone } from '@/ui/components/editable-cell/types/EditablePhone'; +import { EditableText } from '@/ui/components/editable-cell/types/EditableText'; import { CheckboxCell } from '@/ui/components/table/CheckboxCell'; import { ColumnHead } from '@/ui/components/table/ColumnHead'; import { SelectAllCheckbox } from '@/ui/components/table/SelectAllCheckbox';