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

Fix design EditableCell 'Hover', 'Focus' and 'Edit Mode' #1663 (#1740)

Browse Source 
* fixed styling  EditableCell

* adding same solution

* removing shadow to cover top and bottom

* fixing with outline

* fixing width

---------

Co-authored-by: kramer <david.kramer@gmail.com>
This commit is contained in:
David Kramer
2023-09-29 10:02:54 +02:00
committed by GitHub
parent 629bdbbf50
commit ed86cec1e8
3 changed files with 3 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/src/modules/ui/table/editable-cell/components/TableCellContainer.tsx
View File

@ -24,7 +24,6 @@ const StyledCellBaseContainer = styled.div`
height: 32px; height: 32px;
position: relative; position: relative;
user-select: none; user-select: none;
width: 100%;
`; `;
export type EditableCellProps = { export type EditableCellProps = {

6
front/src/modules/ui/table/editable-cell/components/TableCellDisplayContainer.tsx
View File

@ -15,16 +15,14 @@ const StyledEditableCellDisplayModeOuterContainer = styled.div<
display: flex; display: flex;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
padding-left: ${({ theme }) => theme.spacing(2)}; padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(1)}; padding-right: ${({ theme }) => theme.spacing(1)};
width: 100%; width: 100%;
${(props) => ${(props) =>
props.softFocus || props.isHovered props.softFocus || props.isHovered
? `background: ${props.theme.background.transparent.secondary}; ? `background: ${props.theme.background.transparent.secondary};
border-radius: ${props.theme.border.radius.sm}; border-radius: ${props.theme.border.radius.sm};
box-shadow: inset 0 0 0 1px ${props.theme.font.color.extraLight};` outline: 1px solid ${props.theme.font.color.extraLight};`
: ''} : ''}
`; `;

5
front/src/modules/ui/table/editable-cell/components/TableCellEditMode.tsx
View File

@ -12,14 +12,11 @@ const StyledEditableCellEditModeContainer = styled.div<EditableCellEditModeProps
display: flex; display: flex;
left: ${(props) => left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'}; props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
margin-left: -1px; margin: -1px;
margin-top: -1px;
max-width: ${({ maxContentWidth }) => max-width: ${({ maxContentWidth }) =>
maxContentWidth ? `${maxContentWidth}px` : 'none'}; maxContentWidth ? `${maxContentWidth}px` : 'none'};
min-height: 100%; min-height: 100%;
min-width: ${({ maxContentWidth }) => (maxContentWidth ? `none` : '100%')}; min-width: ${({ maxContentWidth }) => (maxContentWidth ? `none` : '100%')};
position: absolute; position: absolute;
right: ${(props) => right: ${(props) =>
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'}; props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};