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

Add rule to order css in styled components alphabetically (#284)

Browse Source 
* Add plugin

* Run plugin
This commit is contained in:
Félix Malfait
2023-06-14 07:59:16 +02:00
committed by GitHub
parent 830b76cd9a
commit eb8fc50ff1
72 changed files with 568 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
front/src/modules/ui/components/board/BoardColumn.tsx
View File

@ -3,20 +3,20 @@ import styled from '@emotion/styled';
import { DroppableProvided } from '@hello-pangea/dnd';
export const StyledColumn = styled.div`
background-color: ${({ theme }) => theme.primaryBackground};
display: flex;
flex-direction: column;
width: 300px;
background-color: ${({ theme }) => theme.primaryBackground};
padding: ${({ theme }) => theme.spacing(2)};
width: 300px;
`;
export const StyledColumnTitle = styled.h3`
color: ${({ color }) => color};
font-family: 'Inter';
font-size: ${({ theme }) => theme.fontSizeMedium};
font-style: normal;
font-weight: ${({ theme }) => theme.fontWeightMedium};
font-size: ${({ theme }) => theme.fontSizeMedium};
line-height: ${({ theme }) => theme.lineHeight};
color: ${({ color }) => color};
margin: 0;
margin-bottom: ${({ theme }) => theme.spacing(2)};
`;

4
front/src/modules/ui/components/board/BoardItem.tsx
View File

@ -5,9 +5,9 @@ const StyledCard = styled.div`
background-color: ${({ theme }) => theme.secondaryBackground};
border: 1px solid ${({ theme }) => theme.quaternaryBackground};
border-radius: ${({ theme }) => theme.borderRadius};
padding: ${({ theme }) => theme.spacing(2)};
margin-bottom: ${({ theme }) => theme.spacing(2)};
box-shadow: ${({ theme }) => theme.boxShadow};
margin-bottom: ${({ theme }) => theme.spacing(2)};
padding: ${({ theme }) => theme.spacing(2)};
`;
type BoardCardProps = {

10
front/src/modules/ui/components/board/BoardNewButton.tsx
View File

@ -3,17 +3,17 @@ import styled from '@emotion/styled';
import { IconPlus } from '@/ui/icons/index';
const StyledButton = styled.button`
display: flex;
align-items: center;
justify-content: center;
align-self: baseline;
background-color: ${({ theme }) => theme.primaryBackground};
color: ${({ theme }) => theme.text40};
border: none;
border-radius: ${({ theme }) => theme.borderRadius};
color: ${({ theme }) => theme.text40};
cursor: pointer;
transition: background-color 0.2s ease-in-out;
align-self: baseline;
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
justify-content: center;
transition: background-color 0.2s ease-in-out;
&:hover {
background-color: ${({ theme }) => theme.secondaryBackground};

20
front/src/modules/ui/components/buttons/IconButton.tsx
View File

@ -1,22 +1,22 @@
import styled from '@emotion/styled';
const StyledIconButton = styled.button`
display: flex;
align-items: center;
justify-content: center;
background: ${(props) => props.theme.blue};
border: none;
width: 20px;
border-radius: 50%;
color: ${(props) => props.theme.text0};
cursor: pointer;
display: flex;
height: 20px;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
transition: color 0.1s ease-in-out, background 0.1s ease-in-out;
background: ${(props) => props.theme.blue};
color: ${(props) => props.theme.text0};
cursor: pointer;
width: 20px;
&:disabled {
background: ${(props) => props.theme.quaternaryBackground};

10
front/src/modules/ui/components/editable-cell/EditableCell.tsx
View File

@ -8,14 +8,14 @@ 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%;
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 32px;
position: relative;
user-select: none;
width: 100%;
`;
type OwnProps = {

18
front/src/modules/ui/components/editable-cell/EditableCellDisplayMode.tsx
View File

@ -2,32 +2,32 @@ import { ReactElement } from 'react';
import styled from '@emotion/styled';
export const EditableCellNormalModeOuterContainer = styled.div`
display: flex;
align-items: center;
width: 100%;
display: flex;
height: 100%;
overflow: hidden;
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(1)};
width: 100%;
&:hover {
background: ${(props) => props.theme.secondaryBackgroundTransparent};
-moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
-webkit-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
-moz-box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
background: ${(props) => props.theme.secondaryBackgroundTransparent};
border-radius: ${(props) => props.theme.borderRadius};
box-shadow: inset 0 0 0 1px ${(props) => props.theme.text20};
}
`;
export const EditableCellNormalModeInnerContainer = styled.div`
display: flex;
align-items: center;
width: 100%;
display: flex;
height: 100%;
overflow: hidden;
width: 100%;
`;
type OwnProps = {

16
front/src/modules/ui/components/editable-cell/EditableCellEditMode.tsx
View File

@ -10,21 +10,21 @@ import { overlayBackground } from '../../layout/styles/themes';
import { isSomeInputInEditModeState } from '../../tables/states/isSomeInputInEditModeState';
export const EditableCellEditModeContainer = styled.div<OwnProps>`
display: flex;
align-items: center;
min-width: calc(100% + 20px);
min-height: 100%;
margin-left: -2px;
position: absolute;
border: 1px solid ${(props) => props.theme.primaryBorder};
border-radius: 4px;
display: flex;
left: ${(props) =>
props.editModeHorizontalAlign === 'right' ? 'auto' : '0'};
margin-left: -2px;
min-height: 100%;
min-width: calc(100% + 20px);
position: absolute;
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}
`;

16
front/src/modules/ui/components/editable-cell/HoverableMenuItem.tsx
View File

@ -1,17 +1,17 @@
import styled from '@emotion/styled';
export const HoverableMenuItem = styled.div`
position: relative;
box-sizing: border-box;
height: 100%;
width: 100%;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
border-radius: 4px;
background: rgba(0, 0, 0, 0);
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
display: flex;
height: 100%;
position: relative;
transition: background 0.1s ease;
user-select: none;
width: 100%;
&:hover {
background: rgba(0, 0, 0, 0.04);

2
front/src/modules/ui/components/editable-cell/types/EditableChip.tsx
View File

@ -19,9 +19,9 @@ export type EditableChipProps = {
// TODO: refactor
const StyledInplaceInput = styled.input`
width: 100%;
padding-left: ${(props) => props.theme.spacing(1)};
padding-right: ${(props) => props.theme.spacing(1)};
width: 100%;
${textInputStyle}
`;

8
front/src/modules/ui/components/editable-cell/types/EditableDate.tsx
View File

@ -13,8 +13,8 @@ export type EditableDateProps = {
};
const StyledContainer = styled.div`
display: flex;
align-items: center;
display: flex;
margin: 0px ${(props) => props.theme.spacing(2)};
`;
@ -23,14 +23,14 @@ export type StyledCalendarContainerProps = {
};
const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
position: absolute;
background: ${(props) => props.theme.secondaryBackground};
border: 1px solid ${(props) => props.theme.primaryBorder};
border-radius: 8px;
box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
z-index: 1;
left: -10px;
position: absolute;
top: 10px;
background: ${(props) => props.theme.secondaryBackground};
z-index: 1;
`;
export function EditableDate({
value,

6
front/src/modules/ui/components/editable-cell/types/EditableDoubleText.tsx
View File

@ -15,20 +15,20 @@ type OwnProps = {
};
const StyledContainer = styled.div`
align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
& > input:last-child {
padding-left: ${(props) => props.theme.spacing(2)};
border-left: 1px solid ${(props) => props.theme.primaryBorder};
padding-left: ${(props) => props.theme.spacing(2)};
}
`;
const StyledEditInplaceInput = styled.input`
width: 45%;
height: 18px;
margin: 0px ${(props) => props.theme.spacing(2)};
width: 45%;
${textInputStyle}
`;

2
front/src/modules/ui/components/editable-cell/types/EditablePhone.tsx
View File

@ -19,8 +19,8 @@ type StyledEditModeProps = {
// TODO: refactor
const StyledEditInplaceInput = styled.input<StyledEditModeProps>`
width: 100%;
margin: 0px ${(props) => props.theme.spacing(2)};
width: 100%;
${textInputStyle}
`;

20
front/src/modules/ui/components/editable-cell/types/EditableRelation.tsx
View File

@ -22,29 +22,29 @@ const StyledEditModeContainer = styled.div`
`;
const StyledEditModeSelectedContainer = styled.div`
height: 31px;
display: flex;
align-items: center;
display: flex;
height: 31px;
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(1)};
`;
const StyledEditModeSearchContainer = styled.div`
height: 32px;
display: flex;
align-items: center;
border-top: 1px solid ${(props) => props.theme.primaryBorder};
display: flex;
height: 32px;
padding-left: ${(props) => props.theme.spacing(1)};
padding-right: ${(props) => props.theme.spacing(1)};
`;
const StyledEditModeCreateButtonContainer = styled.div`
height: 36px;
display: flex;
align-items: center;
border-top: 1px solid ${(props) => props.theme.primaryBorder};
padding: ${(props) => props.theme.spacing(1)};
color: ${(props) => props.theme.text60};
display: flex;
height: 36px;
padding: ${(props) => props.theme.spacing(1)};
`;
const StyledEditModeSearchInput = styled.input`
@ -64,10 +64,10 @@ type StyledEditModeResultItemProps = {
};
const StyledEditModeResultItem = styled.div<StyledEditModeResultItemProps>`
height: 32px;
display: flex;
align-items: center;
cursor: pointer;
display: flex;
height: 32px;
user-select: none;
${(props) =>
props.isSelected &&
@ -77,8 +77,8 @@ const StyledEditModeResultItem = styled.div<StyledEditModeResultItemProps>`
`;
const StyledCreateButtonIcon = styled.div`
color: ${(props) => props.theme.text100};
align-self: center;
color: ${(props) => props.theme.text100};
padding-top: 4px;
`;

18
front/src/modules/ui/components/editable-cell/types/EditableRelationCreateButton.tsx
View File

@ -1,19 +1,19 @@
import styled from '@emotion/styled';
export const EditableRelationCreateButton = styled.button`
display: flex;
align-items: center;
background: none;
border: none;
font-size: ${(props) => props.theme.fontSizeMedium};
border-radius: 4px;
cursor: pointer;
user-select: none;
padding-top: ${(props) => props.theme.spacing(1)};
display: flex;
font-family: 'Inter';
font-size: ${(props) => props.theme.fontSizeMedium};
gap: ${(props) => props.theme.spacing(2)};
height: 31px;
padding-bottom: ${(props) => props.theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(1)};
font-family: 'Inter';
border-radius: 4px;
padding-top: ${(props) => props.theme.spacing(1)};
user-select: none;
width: 100%;
height: 31px;
background: none;
gap: ${(props) => props.theme.spacing(2)};
`;

2
front/src/modules/ui/components/editable-cell/types/EditableText.tsx
View File

@ -18,8 +18,8 @@ type StyledEditModeProps = {
// TODO: refactor
const StyledInplaceInput = styled.input<StyledEditModeProps>`
width: 100%;
margin: 0px ${(props) => props.theme.spacing(2)};
width: 100%;
${textInputStyle}
`;

14
front/src/modules/ui/components/form/Checkbox.tsx
View File

@ -10,26 +10,26 @@ type OwnProps = {
};
const StyledContainer = styled.div`
align-items: center;
display: flex;
justify-content: center;
align-items: center;
input[type='checkbox'] {
accent-color: ${(props) => props.theme.blue};
margin: 2px;
height: 14px;
width: 14px;
cursor: pointer;
height: 14px;
margin: 2px;
user-select: none;
width: 14px;
}
input[type='checkbox']::before {
content: '';
border: 1px solid ${(props) => props.theme.text40};
width: 12px;
height: 12px;
border-radius: 2px;
content: '';
display: block;
height: 12px;
width: 12px;
}
input[type='checkbox']:hover::before {

24
front/src/modules/ui/components/inputs/AutosizeTextInput.tsx
View File

@ -22,22 +22,22 @@ const StyledContainer = styled.div`
`;
const StyledTextArea = styled(TextareaAutosize)`
width: 100%;
padding: 8px;
font-size: 13px;
font-family: inherit;
font-weight: 400;
line-height: 16px;
background: ${(props) => props.theme.tertiaryBackground};
border: none;
border-radius: 5px;
background: ${(props) => props.theme.tertiaryBackground};
color: ${(props) => props.theme.text80};
font-family: inherit;
font-size: 13px;
font-weight: 400;
line-height: 16px;
overflow: auto;
padding: 8px;
resize: none;
width: 100%;
&:focus {
outline: none;
border: none;
outline: none;
}
&::placeholder {
@ -48,11 +48,11 @@ const StyledTextArea = styled(TextareaAutosize)`
// TODO: this messes with the layout, fix it
const StyledBottomRightIconButton = styled.div`
width: 0px;
position: relative;
top: calc(100% - 26.5px);
right: 26px;
height: 0;
position: relative;
right: 26px;
top: calc(100% - 26.5px);
width: 0px;
`;
export function AutosizeTextInput({

6
front/src/modules/ui/components/inputs/DoubleTextInput.tsx
View File

@ -12,19 +12,19 @@ type OwnProps = {
};
const StyledContainer = styled.div`
align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
& > input:last-child {
padding-left: ${(props) => props.theme.spacing(2)};
border-left: 1px solid ${(props) => props.theme.primaryBorder};
padding-left: ${(props) => props.theme.spacing(2)};
}
`;
const StyledEditInplaceInput = styled.input`
width: 45%;
height: 18px;
width: 45%;
${textInputStyle}
`;

16
front/src/modules/ui/components/menu/DropdownMenu.tsx
View File

@ -1,20 +1,20 @@
import styled from '@emotion/styled';
export const DropdownMenu = styled.div`
width: 200px;
height: fit-content;
display: flex;
flex-direction: column;
align-items: center;
backdrop-filter: blur(20px);
background: ${(props) => props.theme.secondaryBackgroundTransparent};
border: 1px solid ${(props) => props.theme.lightBorder};
border-radius: calc(${(props) => props.theme.borderRadius} * 2);
box-shadow: ${(props) => props.theme.modalBoxShadow};
backdrop-filter: blur(20px);
display: flex;
flex-direction: column;
height: fit-content;
width: 200px;
`;

20
front/src/modules/ui/components/menu/DropdownMenuButton.tsx
View File

@ -6,25 +6,25 @@ export const DropdownMenuButton = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1.5)};
--vertical-padding: ${(props) => props.theme.spacing(2)};
padding: var(--vertical-padding) var(--horizontal-padding);
align-items: center;
width: calc(100% - 2 * var(--horizontal-padding));
height: calc(32px - 2 * var(--vertical-padding));
border-radius: ${(props) => props.theme.borderRadius};
color: ${(props) => props.theme.text60};
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
font-size: ${(props) => props.theme.fontSizeSmall};
gap: ${(props) => props.theme.spacing(2)};
border-radius: ${(props) => props.theme.borderRadius};
height: calc(32px - 2 * var(--vertical-padding));
cursor: pointer;
user-select: none;
padding: var(--vertical-padding) var(--horizontal-padding);
${hoverBackground};
color: ${(props) => props.theme.text60};
font-size: ${(props) => props.theme.fontSizeSmall};
user-select: none;
width: calc(100% - 2 * var(--horizontal-padding));
`;

8
front/src/modules/ui/components/menu/DropdownMenuCheckableItem.tsx
View File

@ -12,23 +12,23 @@ type Props = {
};
const DropdownMenuCheckableItemContainer = styled(DropdownMenuButton)`
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
`;
const StyledLeftContainer = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${(props) => props.theme.spacing(2)};
`;
const StyledChildrenContainer = styled.div`
font-size: ${(props) => props.theme.fontSizeSmall};
align-items: center;
display: flex;
align-items: center;
font-size: ${(props) => props.theme.fontSizeSmall};
gap: ${(props) => props.theme.spacing(2)};
`;

14
front/src/modules/ui/components/menu/DropdownMenuItem.tsx
View File

@ -4,19 +4,19 @@ export const DropdownMenuItem = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(1.5)};
--vertical-padding: ${(props) => props.theme.spacing(2)};
padding: var(--vertical-padding) var(--horizontal-padding);
align-items: center;
width: calc(100% - 2 * var(--horizontal-padding));
height: calc(32px - 2 * var(--vertical-padding));
border-radius: ${(props) => props.theme.borderRadius};
color: ${(props) => props.theme.text60};
display: flex;
flex-direction: row;
align-items: center;
font-size: ${(props) => props.theme.fontSizeSmall};
gap: ${(props) => props.theme.spacing(2)};
border-radius: ${(props) => props.theme.borderRadius};
height: calc(32px - 2 * var(--vertical-padding));
color: ${(props) => props.theme.text60};
font-size: ${(props) => props.theme.fontSizeSmall};
padding: var(--vertical-padding) var(--horizontal-padding);
width: calc(100% - 2 * var(--horizontal-padding));
`;

12
front/src/modules/ui/components/menu/DropdownMenuItemContainer.tsx
View File

@ -3,12 +3,12 @@ import styled from '@emotion/styled';
export const DropdownMenuItemContainer = styled.div`
--padding: ${(props) => props.theme.spacing(1 / 2)};
width: calc(100% - 2 * var(--padding));
height: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding);
display: flex;
flex-direction: column;
gap: 2px;
height: 100%;
padding: var(--padding);
width: calc(100% - 2 * var(--padding));
`;

12
front/src/modules/ui/components/menu/DropdownMenuSearch.tsx
View File

@ -7,23 +7,23 @@ export const DropdownMenuSearchContainer = styled.div`
--horizontal-padding: ${(props) => props.theme.spacing(2)};
--vertical-padding: ${(props) => props.theme.spacing(1)};
width: calc(100% - 2 * var(--horizontal-padding));
height: calc(36px - 2 * var(--vertical-padding));
align-items: center;
border-bottom: 1px solid ${(props) => props.theme.lightBorder};
display: flex;
flex-direction: row;
align-items: center;
height: calc(36px - 2 * var(--vertical-padding));
padding: var(--vertical-padding) var(--horizontal-padding);
border-bottom: 1px solid ${(props) => props.theme.lightBorder};
width: calc(100% - 2 * var(--horizontal-padding));
`;
const StyledEditModeSearchInput = styled.input`
width: 100%;
font-size: ${(props) => props.theme.fontSizeSmall};
${textInputStyle}
font-size: ${(props) => props.theme.fontSizeSmall};
width: 100%;
`;
export function DropdownMenuSearch(

4
front/src/modules/ui/components/menu/DropdownMenuSelectableItem.tsx
View File

@ -14,14 +14,14 @@ type Props = {
const DropdownMenuSelectableItemContainer = styled(DropdownMenuButton)<Props>`
${hoverBackground};
display: flex;
align-items: center;
display: flex;
justify-content: space-between;
`;
const StyledLeftContainer = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${(props) => props.theme.spacing(2)};
`;

4
front/src/modules/ui/components/menu/DropdownMenuSeparator.tsx
View File

@ -1,8 +1,8 @@
import styled from '@emotion/styled';
export const DropdownMenuSeparator = styled.div`
width: 100%;
background-color: ${(props) => props.theme.mediumBorder};
height: 1px;
background-color: ${(props) => props.theme.mediumBorder};
width: 100%;
`;

10
front/src/modules/ui/components/menu/stories/DropdownMenu.stories.tsx
View File

@ -34,22 +34,22 @@ const avatarUrl =
'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4';
const FakeMenuContent = styled.div`
width: 100%;
height: 400px;
width: 100%;
`;
const FakeBelowContainer = styled.div`
width: 300px;
height: 600px;
position: relative;
width: 300px;
`;
const MenuAbsolutePositionWrapper = styled.div`
width: fit-content;
height: fit-content;
position: absolute;
width: fit-content;
`;
const FakeMenuItemList = () => (

8
front/src/modules/ui/components/table/CheckboxCell.tsx
View File

@ -15,13 +15,13 @@ type OwnProps = {
};
const StyledContainer = styled.div`
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
display: flex;
height: 32px;
justify-content: center;
`;
export function CheckboxCell({

4
front/src/modules/ui/components/table/ColumnHead.tsx
View File

@ -7,11 +7,11 @@ type OwnProps = {
};
const StyledTitle = styled.div`
align-items: center;
display: flex;
flex-direction: row;
align-items: center;
height: ${(props) => props.theme.spacing(8)};
font-weight: 500;
height: ${(props) => props.theme.spacing(8)};
padding-left: ${(props) => props.theme.spacing(2)};
`;

18
front/src/modules/ui/components/table/EntityTable.tsx
View File

@ -39,20 +39,20 @@ type OwnProps<
};
const StyledTable = styled.table`
width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
border-collapse: collapse;
border-radius: 4px;
border-spacing: 0;
border-collapse: collapse;
margin-left: ${(props) => props.theme.table.horizontalCellMargin};
margin-right: ${(props) => props.theme.table.horizontalCellMargin};
table-layout: fixed;
width: calc(100% - ${(props) => props.theme.table.horizontalCellMargin} * 2);
th {
border: 1px solid ${(props) => props.theme.tertiaryBackground};
border-collapse: collapse;
color: ${(props) => props.theme.text40};
padding: 0;
border: 1px solid ${(props) => props.theme.tertiaryBackground};
text-align: left;
:last-child {
@ -63,16 +63,16 @@ const StyledTable = styled.table`
border-right-color: transparent;
}
:last-of-type {
width: 100%;
min-width: 0;
width: 100%;
}
}
td {
border: 1px solid ${(props) => props.theme.tertiaryBackground};
border-collapse: collapse;
color: ${(props) => props.theme.text80};
padding: 0;
border: 1px solid ${(props) => props.theme.tertiaryBackground};
text-align: left;
@ -84,23 +84,23 @@ const StyledTable = styled.table`
border-right-color: transparent;
}
:last-of-type {
width: 100%;
min-width: 0;
width: 100%;
}
}
`;
const StyledTableWithHeader = styled.div`
display: flex;
flex-direction: column;
flex: 1;
flex-direction: column;
width: 100%;
`;
const StyledTableScrollableContainer = styled.div`
overflow: auto;
height: 100%;
flex: 1;
height: 100%;
overflow: auto;
`;
const StyledRow = styled.tr<{ selected: boolean }>`

24
front/src/modules/ui/components/table/action-bar/EntityTableActionBar.tsx
View File

@ -15,22 +15,22 @@ type StyledContainerProps = {
};
const StyledContainer = styled.div<StyledContainerProps>`
display: flex;
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
z-index: 1;
height: 48px;
bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
background: ${(props) => props.theme.secondaryBackground};
align-items: center;
background: ${(props) => props.theme.secondaryBackground};
border: 1px solid ${(props) => props.theme.primaryBorder};
border-radius: 8px;
bottom: ${(props) => (props.position.x ? 'auto' : '38px')};
display: flex;
height: 48px;
left: ${(props) => (props.position.x ? `${props.position.x}px` : '50%')};
padding-left: ${(props) => props.theme.spacing(2)};
padding-right: ${(props) => props.theme.spacing(2)};
transform: translateX(-50%);
position: ${(props) => (props.position.x ? 'fixed' : 'absolute')};
top: ${(props) => (props.position.y ? `${props.position.y}px` : 'auto')};
border-radius: 8px;
border: 1px solid ${(props) => props.theme.primaryBorder};
transform: translateX(-50%);
z-index: 1;
`;
export function EntityTableActionBar({ children }: OwnProps) {

10
front/src/modules/ui/components/table/action-bar/EntityTableActionBarButton.tsx
View File

@ -13,16 +13,16 @@ type StyledButtonProps = {
};
const StyledButton = styled.div<StyledButtonProps>`
display: flex;
cursor: pointer;
user-select: none;
border-radius: 4px;
color: ${(props) =>
props.type === 'warning' ? props.theme.red : props.theme.text60};
cursor: pointer;
display: flex;
justify-content: center;
padding: ${(props) => props.theme.spacing(2)};
border-radius: 4px;
transition: background 0.1s ease;
user-select: none;
&:hover {
background: ${(props) => props.theme.tertiaryBackground};
@ -30,8 +30,8 @@ const StyledButton = styled.div<StyledButtonProps>`
`;
const StyledButtonLabel = styled.div`
margin-left: ${(props) => props.theme.spacing(2)};
font-weight: 500;
margin-left: ${(props) => props.theme.spacing(2)};
`;
export function EntityTableActionBarButton({

80
front/src/modules/ui/components/table/table-header/DropdownButton.tsx
View File

@ -31,18 +31,18 @@ type StyledDropdownButtonProps = {
};
const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
display: flex;
cursor: pointer;
user-select: none;
background: ${(props) => props.theme.primaryBackground};
border-radius: 4px;
color: ${(props) => (props.isActive ? props.theme.blue : 'none')};
padding: ${(props) => props.theme.spacing(1)};
cursor: pointer;
display: flex;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
padding-right: ${(props) => props.theme.spacing(2)};
padding: ${(props) => props.theme.spacing(1)};
padding-left: ${(props) => props.theme.spacing(2)};
border-radius: 4px;
filter: ${(props) => (props.isUnfolded ? 'brightness(0.95)' : 'none')};
padding-right: ${(props) => props.theme.spacing(2)};
user-select: none;
&:hover {
filter: brightness(0.95);
@ -50,19 +50,19 @@ const StyledDropdownButton = styled.div<StyledDropdownButtonProps>`
`;
const StyledDropdown = styled.ul`
--outer-border-radius: calc(var(--wraper-border-radius) - 2px);
--wraper-border: 1px;
--wraper-border-radius: 8px;
--outer-border-radius: calc(var(--wraper-border-radius) - 2px);
display: flex;
flex-direction: column;
position: absolute;
top: 14px;
right: 0;
border: var(--wraper-border) solid ${(props) => props.theme.primaryBorder};
border-radius: var(--wraper-border-radius);
padding: 0px;
display: flex;
flex-direction: column;
min-width: 160px;
padding: 0px;
position: absolute;
right: 0;
top: 14px;
${overlayBackground}
li {
&:first-of-type {
@ -70,24 +70,24 @@ const StyledDropdown = styled.ul`
border-top-right-radius: var(--outer-border-radius);
}
&:last-of-type {
border-bottom: 0;
border-bottom-left-radius: var(--outer-border-radius);
border-bottom-right-radius: var(--outer-border-radius);
border-bottom: 0;
}
}
`;
const StyledDropdownItem = styled.li`
display: flex;
align-items: center;
width: calc(160px - ${(props) => props.theme.spacing(4)});
border-radius: 2px;
color: ${(props) => props.theme.text60};
cursor: pointer;
display: flex;
margin: 2px;
padding: ${(props) => props.theme.spacing(2)}
calc(${(props) => props.theme.spacing(2)} - 2px);
margin: 2px;
cursor: pointer;
user-select: none;
color: ${(props) => props.theme.text60};
border-radius: 2px;
width: calc(160px - ${(props) => props.theme.spacing(4)});
&:hover {
background: rgba(0, 0, 0, 0.04);
@ -96,54 +96,54 @@ const StyledDropdownItem = styled.li`
const StyledDropdownItemClipped = styled.span`
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledDropdownTopOption = styled.li`
display: flex;
align-items: center;
border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
color: ${(props) => props.theme.text80};
cursor: pointer;
display: flex;
font-weight: ${(props) => props.theme.fontWeightMedium};
justify-content: space-between;
padding: calc(${(props) => props.theme.spacing(2)} + 2px)
calc(${(props) => props.theme.spacing(2)});
cursor: pointer;
user-select: none;
color: ${(props) => props.theme.text80};
font-weight: ${(props) => props.theme.fontWeightMedium};
&:hover {
background: rgba(0, 0, 0, 0.04);
}
border-bottom: 1px solid ${(props) => props.theme.primaryBorder};
user-select: none;
`;
const StyledIcon = styled.div`
display: flex;
justify-content: center;
margin-right: ${(props) => props.theme.spacing(1)};
min-width: ${(props) => props.theme.spacing(4)};
justify-content: center;
`;
const StyledSearchField = styled.li`
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
user-select: none;
color: ${(props) => props.theme.text60};
font-weight: ${(props) => props.theme.fontWeightMedium};
border-bottom: var(--wraper-border) solid
${(props) => props.theme.primaryBorder};
color: ${(props) => props.theme.text60};
cursor: pointer;
display: flex;
font-weight: ${(props) => props.theme.fontWeightMedium};
justify-content: space-between;
overflow: hidden;
user-select: none;
input {
height: 36px;
width: 100%;
padding: 8px;
border-radius: 8px;
box-sizing: border-box;
font-family: ${(props) => props.theme.fontFamily};
border-radius: 8px;
height: 36px;
padding: 8px;
width: 100%;
${textInputStyle}

30
front/src/modules/ui/components/table/table-header/SortAndFilterBar.tsx
View File

@ -18,43 +18,43 @@ type OwnProps<SortField, TData extends FilterableFieldsType> = {
};
const StyledBar = styled.div`
align-items: center;
border-top: 1px solid ${(props) => props.theme.primaryBorder};
display: flex;
flex-direction: row;
border-top: 1px solid ${(props) => props.theme.primaryBorder};
align-items: center;
justify-content: space-between;
height: 40px;
justify-content: space-between;
`;
const StyledChipcontainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 40px;
overflow-x: auto;
margin-left: ${(props) => props.theme.spacing(2)};
gap: ${(props) => props.theme.spacing(1)};
height: 40px;
justify-content: space-between;
margin-left: ${(props) => props.theme.spacing(2)};
overflow-x: auto;
`;
const StyledCancelButton = styled.button`
margin-left: auto;
border: none;
background-color: inherit;
border: none;
color: ${(props) => props.theme.text60};
cursor: pointer;
font-weight: 500;
margin-left: auto;
margin-right: ${(props) => props.theme.spacing(2)};
padding: ${(props) => {
const horiz = props.theme.spacing(2);
const vert = props.theme.spacing(1);
return `${vert} ${horiz} ${vert} ${horiz}`;
}};
color: ${(props) => props.theme.text60};
font-weight: 500;
margin-right: ${(props) => props.theme.spacing(2)};
cursor: pointer;
user-select: none;
&:hover {
border-radius: ${(props) => props.theme.spacing(1)};
background-color: ${(props) => props.theme.tertiaryBackground};
border-radius: ${(props) => props.theme.spacing(1)};
}
`;

24
front/src/modules/ui/components/table/table-header/SortOrFilterChip.tsx
View File

@ -12,31 +12,31 @@ type OwnProps = {
};
const StyledChip = styled.div`
border-radius: 50px;
display: flex;
flex-direction: row;
align-items: center;
background-color: ${(props) => props.theme.blueHighTransparency};
border: 1px solid ${(props) => props.theme.blueLowTransparency};
border-radius: 50px;
color: ${(props) => props.theme.blue};
padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)};
font-size: ${(props) => props.theme.fontSizeSmall};
align-items: center;
display: flex;
flex-direction: row;
flex-shrink: 0;
font-size: ${(props) => props.theme.fontSizeSmall};
padding: ${(props) => props.theme.spacing(1) + ' ' + props.theme.spacing(2)};
`;
const StyledIcon = styled.div`
margin-right: ${(props) => props.theme.spacing(1)};
display: flex;
align-items: center;
display: flex;
margin-right: ${(props) => props.theme.spacing(1)};
`;
const StyledDelete = styled.div`
margin-left: ${(props) => props.theme.spacing(2)};
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
cursor: pointer;
display: flex;
font-size: ${(props) => props.theme.fontSizeSmall};
margin-left: ${(props) => props.theme.spacing(2)};
margin-top: 1px;
user-select: none;
`;
const StyledLabelKey = styled.div`

8
front/src/modules/ui/components/table/table-header/TableHeader.tsx
View File

@ -30,13 +30,13 @@ const StyledContainer = styled.div`
`;
const StyledTableHeader = styled.div`
align-items: center;
color: ${(props) => props.theme.text60};
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 40px;
color: ${(props) => props.theme.text60};
font-weight: 500;
height: 40px;
justify-content: space-between;
padding-left: ${(props) => props.theme.spacing(3)};
padding-right: ${(props) => props.theme.spacing(2)};
`;