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

Move shadow style from TableCell and InlineCell to FieldInputs (#2078)

Browse Source 
* Move shadow style from TableCell and InlineCell to FieldInputs

* Move overlay to inputs

* Complete work
This commit is contained in:
Charles Bochet
2023-10-17 20:59:56 +02:00
committed by GitHub
parent a40516df83
commit 01e9545a59
22 changed files with 164 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/ui/data/data-table/components/DataTableHeader.tsx
View File

@ -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;

52
front/src/modules/ui/data/data-table/constants/countries.json
View File

@ -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"
}

4
front/src/modules/ui/data/data-table/table-cell/components/TableCellContainer.tsx
View File

@ -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 ? (
<TableCellEditMode
maxContentWidth={maxContentWidth}
transparent={transparent}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}
>

23
front/src/modules/ui/data/data-table/table-cell/components/TableCellEditMode.tsx
View File

@ -1,27 +1,12 @@
import { ReactElement } from 'react';
import styled from '@emotion/styled';
import { overlayBackground } from '@/ui/theme/constants/effects';
const StyledEditableCellEditModeContainer = styled.div<TableCellEditModeProps>`
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) => (
<StyledEditableCellEditModeContainer
maxContentWidth={maxContentWidth}
transparent={transparent}
data-testid="editable-cell-edit-mode-container"
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}

25
front/src/modules/ui/data/field/meta-types/input/components/ChipFieldInput.tsx
View File

@ -3,6 +3,7 @@ import { TextInput } from '@/ui/data/field/meta-types/input/components/internal/
import { usePersistField } from '../../../hooks/usePersistField';
import { useChipField } from '../../hooks/useChipField';
import { FieldInputOverlay } from './internal/FieldInputOverlay';
import { FieldInputEvent } from './DateFieldInput';
export type ChipFieldInputProps = {
@ -48,16 +49,18 @@ export const ChipFieldInput = ({
};
return (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={contentFieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={contentFieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

27
front/src/modules/ui/data/field/meta-types/input/components/DoubleTextChipFieldInput.tsx
View File

@ -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 (
<DoubleTextInput
firstValue={firstValue ?? ''}
secondValue={secondValue ?? ''}
firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<DoubleTextInput
firstValue={firstValue ?? ''}
secondValue={secondValue ?? ''}
firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

27
front/src/modules/ui/data/field/meta-types/input/components/DoubleTextFieldInput.tsx
View File

@ -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 (
<DoubleTextInput
firstValue={firstValue ?? ''}
secondValue={secondValue ?? ''}
firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<DoubleTextInput
firstValue={firstValue ?? ''}
secondValue={secondValue ?? ''}
firstValuePlaceholder={fieldDefinition.metadata.firstValuePlaceholder}
secondValuePlaceholder={fieldDefinition.metadata.secondValuePlaceholder}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

25
front/src/modules/ui/data/field/meta-types/input/components/EmailFieldInput.tsx
View File

@ -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 (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

26
front/src/modules/ui/data/field/meta-types/input/components/MoneyFieldInput.tsx
View File

@ -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 (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue?.toLocaleString() ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue?.toLocaleString() ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

26
front/src/modules/ui/data/field/meta-types/input/components/NumberFieldInput.tsx
View File

@ -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 (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue?.toString() ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue?.toString() ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

25
front/src/modules/ui/data/field/meta-types/input/components/PhoneFieldInput.tsx
View File

@ -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 (
<PhoneInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<PhoneInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

4
front/src/modules/ui/data/field/meta-types/input/components/RelationFieldInput.tsx
View File

@ -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 = {

25
front/src/modules/ui/data/field/meta-types/input/components/TextFieldInput.tsx
View File

@ -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 (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

25
front/src/modules/ui/data/field/meta-types/input/components/URLFieldInput.tsx
View File

@ -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 (
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
<FieldInputOverlay>
<TextInput
placeholder={fieldDefinition.metadata.placeHolder}
autoFocus
value={fieldValue ?? ''}
onClickOutside={handleClickOutside}
onEnter={handleEnter}
onEscape={handleEscape}
onShiftTab={handleShiftTab}
onTab={handleTab}
hotkeyScope={hotkeyScope}
/>
</FieldInputOverlay>
);
};

14
front/src/modules/ui/data/field/meta-types/input/components/internal/FieldInputOverlay.tsx Normal file
View File

@ -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;

5
front/src/modules/ui/data/field/meta-types/input/components/internal/PhoneInput.tsx
View File

@ -38,6 +38,11 @@ const StyledCustomPhoneInput = styled(ReactPhoneNumberInput)`
outline: none;
}
}
& svg {
border-radius: ${({ theme }) => theme.border.radius.xs};
height: 12px;
}
`;
export type PhoneInputProps = {

2
front/src/modules/ui/data/field/meta-types/input/components/internal/TextInput.tsx
View File

@ -7,8 +7,8 @@ import { useRegisterInputEvents } from '../../hooks/useRegisterInputEvents';
export const StyledInput = styled.input`
margin: 0;
width: 100%;
${textInputStyle}
width: 100%;
`;
type TextInputProps = {

7
front/src/modules/ui/data/inline-cell/components/InlineCellEditMode.tsx
View File

@ -13,14 +13,11 @@ const StyledInlineCellEditModeContainer = styled.div<InlineCellEditModeProps>`
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;

1
front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownButton.tsx
View File

@ -29,7 +29,6 @@ export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProp
color: ${({ color }) => color ?? 'none'};
cursor: pointer;
display: flex;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
height: 32px;

9
front/src/modules/ui/input/components/internal/phone/components/CountryPickerDropdownSelect.tsx
View File

@ -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 (
<>
<StyledDropdownMenuContainer data-select-disable>
<StyledDropdownMenu width={'240px'}>
<StyledDropdownMenu width="240px" disableBlur>
<DropdownMenuSearchInput
value={searchFilter}
onChange={(event) => setSearchFilter(event.currentTarget.value)}

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

@ -43,7 +43,7 @@ export const SingleEntitySelect = <
onCreate,
onEntitySelected,
selectedEntity,
width,
width = 200,
}: SingleEntitySelectProps<CustomEntityForSelect>) => {
const containerRef = useRef<HTMLDivElement>(null);

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

@ -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};