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

Apply various frontend fixes (#179)

Browse Source
This commit is contained in:
Charles Bochet
2023-06-01 19:22:26 +02:00
committed by GitHub
parent 05c8fac6d6
commit 9ffd347655
12 changed files with 98 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
front/src/components/editable-cell/CellEditModeContainer.tsx
View File

@ -1,5 +1,7 @@
import styled from '@emotion/styled';
import { overlayBackground } from '../../layout/styles/themes';
type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
@ -12,6 +14,7 @@ export const CellEditModeContainer = styled.div<OwnProps>`
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'};
@ -19,10 +22,8 @@ export const CellEditModeContainer = styled.div<OwnProps>`
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
background: ${(props) => props.theme.primaryBackground};
border: 1px solid ${(props) => props.theme.primaryBorder};
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
z-index: 1;
border-radius: 4px;
backdrop-filter: blur(20px);
${overlayBackground}
`;

7
front/src/components/editable-cell/EditableCellMenuEditModeContainer.tsx
View File

@ -1,4 +1,5 @@
import styled from '@emotion/styled';
import { overlayBackground } from '../../layout/styles/themes';
type OwnProps = {
editModeHorizontalAlign?: 'left' | 'right';
@ -13,15 +14,13 @@ export const EditableCellMenuEditModeContainer = styled.div<OwnProps>`
min-height: 100%;
position: absolute;
left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
props.editModeHorizontalAlign === 'right' ? 'auto' : '-1px'};
right: ${(props) =>
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
background: ${(props) => props.theme.primaryBackground};
border: 1px solid ${(props) => props.theme.primaryBorder};
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.16);
z-index: 1;
border-radius: 4px;
backdrop-filter: blur(20px);
${overlayBackground}
`;

8
front/src/components/editable-cell/EditableChip.tsx
View File

@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import { ChangeEvent, ComponentType, useRef, useState } from 'react';
import { EditableCell } from './EditableCell';
import { textInputStyle } from '../../layout/styles/themes';
export type EditableChipProps = {
placeholder?: string;
@ -14,15 +15,10 @@ export type EditableChipProps = {
// TODO: refactor
const StyledInplaceInput = styled.input`
width: 100%;
border: none;
outline: none;
padding-left: ${(props) => props.theme.spacing(1)};
padding-right: ${(props) => props.theme.spacing(1)};
&::placeholder {
font-weight: 'bold';
color: props.theme.text20;
}
${textInputStyle}
`;
const StyledInplaceShow = styled.div`

3
front/src/components/editable-cell/EditableDate.tsx
View File

@ -2,7 +2,6 @@ import styled from '@emotion/styled';
import { forwardRef, useState } from 'react';
import { EditableCell } from './EditableCell';
import DatePicker from '../form/DatePicker';
import { modalBackground } from '../../layout/styles/themes';
import { humanReadableDate } from '../../services/utils';
export type EditableDateProps = {
@ -28,7 +27,7 @@ const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
z-index: 1;
left: -10px;
top: 10px;
${modalBackground};
background: ${(props) => props.theme.secondaryBackground};
`;
function EditableDate({
value,

8
front/src/components/editable-cell/EditableDoubleText.tsx
View File

@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import { ChangeEvent, ReactElement, useRef, useState } from 'react';
import { EditableCell } from './EditableCell';
import { textInputStyle } from '../../layout/styles/themes';
type OwnProps = {
firstValue: string;
@ -24,14 +25,9 @@ const StyledContainer = styled.div`
const StyledEditInplaceInput = styled.input`
width: 45%;
border: none;
outline: none;
height: 18px;
&::placeholder {
font-weight: bold;
color: ${(props) => props.theme.text20};
}
${textInputStyle}
`;
export function EditableDoubleText({

10
front/src/components/editable-cell/EditableRelation.tsx
View File

@ -12,6 +12,7 @@ import { EditableCellMenu } from './EditableCellMenu';
import { CellNormalModeContainer } from './CellNormalModeContainer';
import { useRecoilState } from 'recoil';
import { isSomeInputInEditModeState } from '../../modules/ui/tables/states/isSomeInputInEditModeState';
import { textInputStyle } from '../../layout/styles/themes';
const StyledEditModeContainer = styled.div`
width: 200px;
@ -23,7 +24,7 @@ const StyledEditModeSelectedContainer = styled.div`
height: 31px;
display: flex;
align-items: center;
padding-left: ${(props) => props.theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(1)};
`;
@ -47,13 +48,8 @@ const StyledEditModeCreateButtonContainer = styled.div`
const StyledEditModeSearchInput = styled.input`
width: 100%;
border: none;
outline: none;
&::placeholder {
font-weight: 'bold';
color: ${(props) => props.theme.text20};
}
${textInputStyle}
`;
const StyledEditModeResults = styled.div`

10
front/src/components/editable-cell/EditableText.tsx
View File

@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import { ChangeEvent, useRef, useState } from 'react';
import { EditableCell } from './EditableCell';
import { textInputStyle } from '../../layout/styles/themes';
type OwnProps = {
placeholder?: string;
@ -16,14 +17,7 @@ type StyledEditModeProps = {
// TODO: refactor
const StyledInplaceInput = styled.input<StyledEditModeProps>`
width: 100%;
border: none;
outline: none;
&::placeholder {
font-weight: ${(props) => (props.isEditMode ? 'bold' : 'normal')};
color: ${(props) =>
props.isEditMode ? props.theme.text20 : 'transparent'};
}
${textInputStyle}
`;
const StyledNoEditText = styled.div`

63
front/src/components/form/DatePicker.tsx
View File

@ -3,6 +3,7 @@ import React, { ReactElement, forwardRef, useState } from 'react';
import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { overlayBackground } from '../../layout/styles/themes';
export type DatePickerProps = {
isOpen?: boolean;
@ -85,18 +86,23 @@ const StyledContainer = styled.div`
width: 50px;
}
& .react-datepicker__month-dropdown,
& .react-datepicker__year-dropdown {
border: ${(props) => props.theme.primaryBorder};
${overlayBackground}
overflow-y: scroll;
top: ${(props) => props.theme.spacing(2)};
}
& .react-datepicker__month-dropdown {
left: ${(props) => props.theme.spacing(2)};
top: ${(props) => props.theme.spacing(2)};
width: calc(80px + ${(props) => props.theme.spacing(6)});
border: ${(props) => props.theme.primaryBorder};
width: 160px;
height: 260px;
}
& .react-datepicker__year-dropdown {
left: calc(${(props) => props.theme.spacing(9)} + 80px);
top: ${(props) => props.theme.spacing(2)};
width: calc(50px + ${(props) => props.theme.spacing(6)});
border: ${(props) => props.theme.primaryBorder};
width: 100px;
height: 260px;
}
& .react-datepicker__navigation--years {
@ -110,15 +116,25 @@ const StyledContainer = styled.div`
& .react-datepicker__year-option,
& .react-datepicker__month-option {
line-height: 32px;
text-align: left;
padding-left: ${(props) => props.theme.spacing(2)};
width: calc(100% - ${(props) => props.theme.spacing(2)});
background-color: ${(props) => props.theme.tertiaryBackground};
padding: ${(props) => props.theme.spacing(2)}
calc(${(props) => props.theme.spacing(2)} - 2px);
width: calc(100% - ${(props) => props.theme.spacing(4)});
border-radius: 2px;
color: ${(props) => props.theme.text60};
cursor: pointer;
margin: 2px;
&:hover {
color: ${(props) => props.theme.text100};
font-weight: bold;
background: rgba(0, 0, 0, 0.04);
}
&:first-of-type {
display: none;
}
&:last-of-type {
display: none;
}
}
@ -153,15 +169,32 @@ const StyledContainer = styled.div`
background-color: ${(props) => props.theme.blue};
}
& .react-datepicker__navigation--previous,
& .react-datepicker__navigation--next {
height: 34px;
border-radius: 4px;
padding-top: 6px;
&:hover {
background: rgba(0, 0, 0, 0.04);
}
}
& .react-datepicker__navigation--previous {
right: 44px;
top: 12px;
right: 38px;
top: 8px;
left: auto;
& > span {
margin-left: -6px;
}
}
& .react-datepicker__navigation--next {
right: 6px;
top: 12px;
top: 8px;
& > span {
margin-left: 6px;
}
}
& .react-datepicker__navigation-icon::before {

8
front/src/components/inputs/DoubleTextInput.tsx
View File

@ -1,5 +1,6 @@
import styled from '@emotion/styled';
import { ChangeEvent, useRef } from 'react';
import { textInputStyle } from '../../layout/styles/themes';
type OwnProps = {
leftValue: string;
@ -22,14 +23,9 @@ const StyledContainer = styled.div`
const StyledEditInplaceInput = styled.input`
width: 45%;
border: none;
outline: none;
height: 18px;
&::placeholder {
font-weight: bold;
color: ${(props) => props.theme.text20};
}
${textInputStyle}
`;
export function DoubleTextInput({

19
front/src/components/table/table-header/DropdownButton.tsx
View File

@ -1,7 +1,10 @@
import styled from '@emotion/styled';
import { useRef, ReactNode } from 'react';
import { useOutsideAlerter } from '../../../hooks/useOutsideAlerter';
import { modalBackground } from '../../../layout/styles/themes';
import {
overlayBackground,
textInputStyle,
} from '../../../layout/styles/themes';
import { FaAngleDown } from 'react-icons/fa';
type OwnProps = {
@ -52,11 +55,10 @@ const StyledDropdown = styled.ul`
top: 14px;
right: 0;
border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder};
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
border-radius: var(--wraper-border-radius);
padding: 0px;
min-width: 160px;
${modalBackground}
${overlayBackground}
li {
&:first-of-type {
border-top-left-radius: var(--outer-border-radius);
@ -73,7 +75,7 @@ const StyledDropdown = styled.ul`
const StyledDropdownItem = styled.li`
display: flex;
align-items: center;
width: 160px;
width: calc(160px - ${(props) => props.theme.spacing(4)});
padding: ${(props) => props.theme.spacing(2)}
calc(${(props) => props.theme.spacing(2)} - 2px);
margin: 2px;
@ -133,22 +135,17 @@ const StyledSearchField = styled.li`
input {
height: 36px;
width: 100%;
border: none;
padding: 8px;
box-sizing: border-box;
font-family: ${(props) => props.theme.fontFamily};
border-radius: 8px;
${textInputStyle}
&:focus {
outline: 0 none;
}
}
input::placeholder,
input::-webkit-input-placeholder {
font-family: ${(props) => props.theme.fontFamily};
color: ${(props) => props.theme.text30};
font-weight: ${(props) => props.theme.fontWeightBold};
}
`;
function DropdownButton({

24
front/src/layout/styles/themes.ts
View File

@ -32,7 +32,7 @@ const lightThemeSpecific = {
purpleBackground: '#e0e0ff',
yellowBackground: '#fff2e7',
secondaryBackgroundSmallTransparency: 'rgba(252, 252, 252, 0.97)',
secondaryBackgroundTransparent: 'rgba(252, 252, 252, 0.8)',
primaryBorder: 'rgba(0, 0, 0, 0.08)',
lightBorder: '#f5f5f5',
@ -69,7 +69,7 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
purpleBackground: '#1111b7',
yellowBackground: '#cc660a',
secondaryBackgroundSmallTransparency: 'rgba(23, 23, 23, 0.97)',
secondaryBackgroundTransparent: 'rgba(23, 23, 23, 0.8)',
clickableElementBackgroundHover: 'rgba(0, 0, 0, 0.04)',
clickableElementBackgroundTransition: 'background 0.1s ease',
@ -96,9 +96,25 @@ const darkThemeSpecific: typeof lightThemeSpecific = {
blueLowTransparency: 'rgba(104, 149, 236, 0.32)',
};
export const modalBackground = (props: any) =>
export const overlayBackground = (props: any) =>
css`
background: ${props.theme.secondaryBackgroundSmallTransparency};
background: ${props.theme.secondaryBackgroundTransparent};
backdrop-filter: blur(8px);
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
`;
export const textInputStyle = (props: any) =>
css`
border: none;
outline: none;
background-color: transparent;
&::placeholder,
&::-webkit-input-placeholder {
font-family: ${props.theme.fontFamily};
color: ${props.theme.text30};
font-weight: ${props.theme.fontWeightBold};
}
`;
export const lightTheme = { ...commonTheme, ...lightThemeSpecific };

3
front/src/pages/companies/companies-columns.tsx
View File

@ -80,6 +80,7 @@ export const useCompaniesColumns = () => {
cell: (props) => (
<EditableText
content={props.row.original.domainName || ''}
placeholder="Domain name"
changeHandler={(value) => {
const company = props.row.original;
company.domainName = value;
@ -96,6 +97,7 @@ export const useCompaniesColumns = () => {
cell: (props) => (
<EditableText
content={props.row.original.employees?.toString() || ''}
placeholder="Employees"
changeHandler={(value) => {
const company = props.row.original;
@ -118,6 +120,7 @@ export const useCompaniesColumns = () => {
cell: (props) => (
<EditableText
content={props.row.original.address || ''}
placeholder="Address"
changeHandler={(value) => {
const company = props.row.original;
company.address = value;