From 01e9545a59f280d6062832d789e86ead9bee356c Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Tue, 17 Oct 2023 20:59:56 +0200 Subject: [PATCH] Move shadow style from TableCell and InlineCell to FieldInputs (#2078) * Move shadow style from TableCell and InlineCell to FieldInputs * Move overlay to inputs * Complete work --- .../data-table/components/DataTableHeader.tsx | 2 +- .../data/data-table/constants/countries.json | 52 ------------------- .../components/TableCellContainer.tsx | 4 -- .../components/TableCellEditMode.tsx | 23 +------- .../input/components/ChipFieldInput.tsx | 25 +++++---- .../components/DoubleTextChipFieldInput.tsx | 27 +++++----- .../input/components/DoubleTextFieldInput.tsx | 27 +++++----- .../input/components/EmailFieldInput.tsx | 25 +++++---- .../input/components/MoneyFieldInput.tsx | 26 ++++++---- .../input/components/NumberFieldInput.tsx | 26 ++++++---- .../input/components/PhoneFieldInput.tsx | 25 +++++---- .../input/components/RelationFieldInput.tsx | 4 +- .../input/components/TextFieldInput.tsx | 25 +++++---- .../input/components/URLFieldInput.tsx | 25 +++++---- .../components/internal/FieldInputOverlay.tsx | 14 +++++ .../input/components/internal/PhoneInput.tsx | 5 ++ .../input/components/internal/TextInput.tsx | 2 +- .../components/InlineCellEditMode.tsx | 7 +-- .../CountryPickerDropdownButton.tsx | 1 - .../CountryPickerDropdownSelect.tsx | 9 ++-- .../components/SingleEntitySelect.tsx | 2 +- .../components/StyledDropdownMenu.tsx | 2 +- 22 files changed, 164 insertions(+), 194 deletions(-) delete mode 100644 front/src/modules/ui/data/data-table/constants/countries.json create mode 100644 front/src/modules/ui/data/field/meta-types/input/components/internal/FieldInputOverlay.tsx diff --git a/front/src/modules/ui/data/data-table/components/DataTableHeader.tsx b/front/src/modules/ui/data/data-table/components/DataTableHeader.tsx index 6eb944b12..00d1815a0 100644 --- a/front/src/modules/ui/data/data-table/components/DataTableHeader.tsx +++ b/front/src/modules/ui/data/data-table/components/DataTableHeader.tsx @@ -19,7 +19,7 @@ import { ColumnHeadWithDropdown } from './ColumnHeadWithDropdown'; import { DataTableHeaderPlusButton } from './DataTableHeaderPlusButton'; import { SelectAllCheckbox } from './SelectAllCheckbox'; -const COLUMN_MIN_WIDTH = 75; +const COLUMN_MIN_WIDTH = 104; const StyledColumnHeaderCell = styled.th<{ columnWidth: number; diff --git a/front/src/modules/ui/data/data-table/constants/countries.json b/front/src/modules/ui/data/data-table/constants/countries.json deleted file mode 100644 index 6fc987f3f..000000000 --- a/front/src/modules/ui/data/data-table/constants/countries.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "ch": "Switzerland", - "de": "Germany", - "ca": "Canada", - "us": "US", - "se": "Sweden", - "jp": "Japan", - "au": "Australia", - "gb": "UK", - "fr": "France", - "dk": "Denmark", - "nz": "New Zealand", - "nl": "Netherlands", - "no": "Norway", - "it": "Italy", - "fi": "Finland", - "es": "Spain", - "cn": "China", - "be": "Belgium", - "sg": "Singapore", - "kr": "South Korea", - "ae": "UAE", - "at": "Austria", - "ie": "Ireland", - "lu": "Luxembourg", - "gr": "Greece", - "pt": "Portugal", - "br": "Brazil", - "th": "Thailand", - "qa": "Qatar", - "tr": "Turkey", - "in": "India", - "pl": "Poland", - "mx": "Mexico", - "sa": "Saudi Arabia", - "eg": "Egypt", - "ru": "Russia", - "il": "Israel", - "ar": "Argentina", - "my": "Malaysia", - "cr": "Costa Rica", - "id": "Indonesia", - "za": "South Africa", - "ma": "Morocco", - "cz": "Czechia", - "hr": "Croatia", - "ph": "Philippines", - "vn": "Vietnam", - "hu": "Hungary", - "cl": "Chile", - "pe": "Peru" -} diff --git a/front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx b/front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx index ee5f460bc..dbe9380e3 100644 --- a/front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx +++ b/front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx @@ -54,8 +54,6 @@ export const TableCellContainer = ({ editModeContent, nonEditModeContent, editHotkeyScope, - transparent = false, - maxContentWidth, buttonIcon, }: TableCellContainerProps) => { const { isCurrentTableCellInEditMode } = useCurrentTableCellEditMode(); @@ -114,8 +112,6 @@ export const TableCellContainer = ({ > {isCurrentTableCellInEditMode ? ( diff --git a/front/src/modules/ui/data/data-table/table-cell/components/TableCellEditMode.tsx b/front/src/modules/ui/data/data-table/table-cell/components/TableCellEditMode.tsx index 5abaae3cd..4be828b4f 100644 --- a/front/src/modules/ui/data/data-table/table-cell/components/TableCellEditMode.tsx +++ b/front/src/modules/ui/data/data-table/table-cell/components/TableCellEditMode.tsx @@ -1,27 +1,12 @@ import { ReactElement } from 'react'; import styled from '@emotion/styled'; -import { overlayBackground } from '@/ui/theme/constants/effects'; - const StyledEditableCellEditModeContainer = styled.div` align-items: center; - 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'}; margin: -1px; - max-width: ${({ maxContentWidth }) => - maxContentWidth ? `${maxContentWidth}px` : 'none'}; - min-height: 100%; - min-width: ${({ maxContentWidth }) => (maxContentWidth ? `none` : '100%')}; - position: absolute; - right: ${(props) => - props.editModeHorizontalAlign === 'right' ? '0' : 'auto'}; - top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')}; - ${({ transparent }) => (transparent ? '' : overlayBackground)}; + min-width: 200px; + width: calc(100% + 2px); z-index: 1; `; @@ -38,12 +23,8 @@ export const TableCellEditMode = ({ editModeHorizontalAlign, editModeVerticalPosition, children, - transparent = false, - maxContentWidth, }: TableCellEditModeProps) => ( + + + ); }; diff --git a/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextChipFieldInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextChipFieldInput.tsx index fa5551645..db50e99f4 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextChipFieldInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextChipFieldInput.tsx @@ -4,6 +4,7 @@ import { FieldDoubleText } from '@/ui/data/field/types/FieldDoubleText'; import { usePersistField } from '../../../hooks/usePersistField'; import { useDoubleTextChipField } from '../../hooks/useDoubleTextChipField'; +import { FieldInputOverlay } from './internal/FieldInputOverlay'; import { FieldInputEvent } from './DateFieldInput'; export type DoubleTextChipFieldInputProps = { @@ -50,17 +51,19 @@ export const DoubleTextChipFieldInput = ({ }; return ( - + + + ); }; diff --git a/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextFieldInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextFieldInput.tsx index 08b29c634..7bc7c9778 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextFieldInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/DoubleTextFieldInput.tsx @@ -4,6 +4,7 @@ import { FieldDoubleText } from '@/ui/data/field/types/FieldDoubleText'; import { usePersistField } from '../../../hooks/usePersistField'; import { useDoubleTextField } from '../../hooks/useDoubleTextField'; +import { FieldInputOverlay } from './internal/FieldInputOverlay'; import { FieldInputEvent } from './DateFieldInput'; export type DoubleTextFieldInputProps = { @@ -50,17 +51,19 @@ export const DoubleTextFieldInput = ({ }; return ( - + + + ); }; diff --git a/front/src/modules/ui/data/field/meta-types/input/components/EmailFieldInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/EmailFieldInput.tsx index 4c1042db0..fe6624bf8 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/EmailFieldInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/EmailFieldInput.tsx @@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/ import { usePersistField } from '../../../hooks/usePersistField'; import { useEmailField } from '../../hooks/useEmailField'; +import { FieldInputOverlay } from './internal/FieldInputOverlay'; import { FieldInputEvent } from './DateFieldInput'; export type EmailFieldInputProps = { @@ -48,16 +49,18 @@ export const EmailFieldInput = ({ }; return ( - + + + ); }; diff --git a/front/src/modules/ui/data/field/meta-types/input/components/MoneyFieldInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/MoneyFieldInput.tsx index 18265dd6f..3bae673a1 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/MoneyFieldInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/MoneyFieldInput.tsx @@ -2,6 +2,8 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/ import { useMoneyField } from '../../hooks/useMoneyField'; +import { FieldInputOverlay } from './internal/FieldInputOverlay'; + export type FieldInputEvent = (persist: () => void) => void; export type MoneyFieldInputProps = { @@ -46,16 +48,18 @@ export const MoneyFieldInput = ({ }; return ( - + + + ); }; diff --git a/front/src/modules/ui/data/field/meta-types/input/components/NumberFieldInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/NumberFieldInput.tsx index 81e566021..c7aa86319 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/NumberFieldInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/NumberFieldInput.tsx @@ -2,6 +2,8 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/ import { useNumberField } from '../../hooks/useNumberField'; +import { FieldInputOverlay } from './internal/FieldInputOverlay'; + export type FieldInputEvent = (persist: () => void) => void; export type NumberFieldInputProps = { @@ -46,16 +48,18 @@ export const NumberFieldInput = ({ }; return ( - + + + ); }; diff --git a/front/src/modules/ui/data/field/meta-types/input/components/PhoneFieldInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/PhoneFieldInput.tsx index 2b4b9cd8c..1d3173d37 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/PhoneFieldInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/PhoneFieldInput.tsx @@ -2,6 +2,7 @@ import { PhoneInput } from '@/ui/data/field/meta-types/input/components/internal import { usePhoneField } from '../../hooks/usePhoneField'; +import { FieldInputOverlay } from './internal/FieldInputOverlay'; import { FieldInputEvent } from './DateFieldInput'; export type PhoneFieldInputProps = { @@ -46,16 +47,18 @@ export const PhoneFieldInput = ({ }; return ( - + + + ); }; diff --git a/front/src/modules/ui/data/field/meta-types/input/components/RelationFieldInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/RelationFieldInput.tsx index 59b6d43a7..11e5ba5ea 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/RelationFieldInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/RelationFieldInput.tsx @@ -12,9 +12,9 @@ import { useRelationField } from '../../hooks/useRelationField'; import { FieldInputEvent } from './DateFieldInput'; const StyledRelationPickerContainer = styled.div` - left: 0px; + left: -1px; position: absolute; - top: -8px; + top: -1px; `; export type RelationFieldInputProps = { diff --git a/front/src/modules/ui/data/field/meta-types/input/components/TextFieldInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/TextFieldInput.tsx index 922746dc8..3b69605dc 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/TextFieldInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/TextFieldInput.tsx @@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/ import { usePersistField } from '../../../hooks/usePersistField'; import { useTextField } from '../../hooks/useTextField'; +import { FieldInputOverlay } from './internal/FieldInputOverlay'; import { FieldInputEvent } from './DateFieldInput'; export type TextFieldInputProps = { @@ -48,16 +49,18 @@ export const TextFieldInput = ({ }; return ( - + + + ); }; diff --git a/front/src/modules/ui/data/field/meta-types/input/components/URLFieldInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/URLFieldInput.tsx index 50f4c5d3a..8fe57d4d0 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/URLFieldInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/URLFieldInput.tsx @@ -2,6 +2,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/ import { useURLField } from '../../hooks/useURLField'; +import { FieldInputOverlay } from './internal/FieldInputOverlay'; import { FieldInputEvent } from './DateFieldInput'; export type URLFieldInputProps = { @@ -46,16 +47,18 @@ export const URLFieldInput = ({ }; return ( - + + + ); }; diff --git a/front/src/modules/ui/data/field/meta-types/input/components/internal/FieldInputOverlay.tsx b/front/src/modules/ui/data/field/meta-types/input/components/internal/FieldInputOverlay.tsx new file mode 100644 index 000000000..c8c1097d0 --- /dev/null +++ b/front/src/modules/ui/data/field/meta-types/input/components/internal/FieldInputOverlay.tsx @@ -0,0 +1,14 @@ +import styled from '@emotion/styled'; + +import { overlayBackground } from '@/ui/theme/constants/effects'; + +const StyledFieldInputOverlay = styled.div` + border: ${({ theme }) => `1px solid ${theme.border.color.light}`}; + border-radius: ${({ theme }) => theme.border.radius.sm}; + ${overlayBackground} + display: flex; + height: 32px; + width: 100%; +`; + +export const FieldInputOverlay = StyledFieldInputOverlay; diff --git a/front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx index 80f88aabd..de70d53fd 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx @@ -38,6 +38,11 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)` outline: none; } } + + & svg { + border-radius: ${({ theme }) => theme.border.radius.xs}; + height: 12px; + } `; export type PhoneInputProps = { diff --git a/front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx b/front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx index 3581760e9..8dc1189a7 100644 --- a/front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx +++ b/front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx @@ -7,8 +7,8 @@ import { useRegisterInputEvents } from '../../hooks/useRegisterInputEvents'; export const StyledInput = styled.input` margin: 0; - width: 100%; ${textInputStyle} + width: 100%; `; type TextInputProps = { diff --git a/front/src/modules/ui/data/inline-cell/components/InlineCellEditMode.tsx b/front/src/modules/ui/data/inline-cell/components/InlineCellEditMode.tsx index 909000541..ff7b7f2c1 100644 --- a/front/src/modules/ui/data/inline-cell/components/InlineCellEditMode.tsx +++ b/front/src/modules/ui/data/inline-cell/components/InlineCellEditMode.tsx @@ -13,14 +13,11 @@ const StyledInlineCellEditModeContainer = styled.div` const StyledInlineCellInput = styled.div` align-items: center; - background: ${({ theme }) => theme.background.transparent.secondary}; - border: 1px solid ${({ theme }) => theme.border.color.medium}; - border-radius: ${({ theme }) => theme.border.radius.sm}; - box-shadow: ${({ theme }) => theme.boxShadow.strong}; display: flex; - margin-left: -1px; + min-height: 32px; + min-width: 200px; width: inherit; z-index: 10; diff --git a/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx b/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx index dc310a939..639cd08d8 100644 --- a/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx +++ b/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx @@ -29,7 +29,6 @@ export const StyledDropdownButtonContainer = styled.div color ?? 'none'}; cursor: pointer; display: flex; - filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')}; height: 32px; diff --git a/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownSelect.tsx b/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownSelect.tsx index be639df4b..9ad78ddc7 100644 --- a/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownSelect.tsx +++ b/front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownSelect.tsx @@ -20,17 +20,18 @@ const StyledIconContainer = styled.div` svg { align-items: center; + border-radius: ${({ theme }) => theme.border.radius.xs}; display: flex; - height: 16px; + height: 12px; justify-content: center; } `; const StyledDropdownMenuContainer = styled.ul` - left: 0; + left: 6px; padding: 0; position: absolute; - top: 24px; + top: 26px; `; export const CountryPickerDropdownSelect = ({ @@ -57,7 +58,7 @@ export const CountryPickerDropdownSelect = ({ return ( <> - + setSearchFilter(event.currentTarget.value)} diff --git a/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx b/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx index 2e5c5dd99..12f62e9ac 100644 --- a/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx +++ b/front/src/modules/ui/input/relation-picker/components/SingleEntitySelect.tsx @@ -43,7 +43,7 @@ export const SingleEntitySelect = < onCreate, onEntitySelected, selectedEntity, - width, + width = 200, }: SingleEntitySelectProps) => { const containerRef = useRef(null); diff --git a/front/src/modules/ui/layout/dropdown/components/StyledDropdownMenu.tsx b/front/src/modules/ui/layout/dropdown/components/StyledDropdownMenu.tsx index 4a1e33bc6..d33ea3d99 100644 --- a/front/src/modules/ui/layout/dropdown/components/StyledDropdownMenu.tsx +++ b/front/src/modules/ui/layout/dropdown/components/StyledDropdownMenu.tsx @@ -7,7 +7,7 @@ export const StyledDropdownMenu = styled.div<{ backdrop-filter: ${({ disableBlur }) => disableBlur ? 'none' : 'blur(20px)'}; - background: ${({ theme }) => theme.background.transparent.secondary}; + background: ${({ theme }) => theme.background.secondary}; border: 1px solid ${({ theme }) => theme.border.color.medium}; border-radius: ${({ theme }) => theme.border.radius.md}; box-shadow: ${({ theme }) => theme.boxShadow.strong};