NewTable styles

This commit is contained in:
Mateusz Tylka 2023-06-07 12:14:38 +02:00
parent 916796ef8e
commit 60ecbd331a
7 changed files with 162 additions and 67 deletions

View File

@ -0,0 +1,3 @@
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M31.3571 2.24695C31.9857 2.24695 32.5 2.69695 32.5 3.24695V5.24695C32.5 5.79695 31.9857 6.24695 31.3571 6.24695H1.64286C1.01429 6.24695 0.5 5.79695 0.5 5.24695V3.24695C0.5 2.69695 1.01429 2.24695 1.64286 2.24695H10.2143L10.8857 1.0782C11.1429 0.621948 11.8214 0.246948 12.4071 0.246948H12.4143H20.5786C21.1643 0.246948 21.85 0.621948 22.1143 1.0782L22.7857 2.24695H31.3571ZM4.3 29.4344L2.78571 8.24695H30.2143L28.7 29.4344C28.5857 30.9844 27.0571 32.2469 25.2786 32.2469H7.72143C5.94286 32.2469 4.41429 30.9844 4.3 29.4344Z" fill="#343434"/>
</svg>

After

Width:  |  Height:  |  Size: 654 B

View File

@ -1,82 +1,76 @@
import React from 'react';
import styled from 'styled-components';
import { FlexRow } from '../../utils/containers';
import { FlexRow, Svg } from '../../utils/containers';
import theme from '../../utils/theme';
// lista json elementów (headery to keys)
// lista keys w celu zachowania kolejności
const Table = styled.table`
border-collapse: separate;
width: 100%;
`;
const TrHeader = styled.tr`
height: 48px;
position: relative;
`;
const Tr = styled.tr`
position: relative;
height: 72px;
/* background-color: ${({ theme, backgroundColor }) =>
backgroundColor ? backgroundColor : theme.colors.white}; */
`;
const Td = styled.td`
padding: 0 0 32px 0;
/* background-color: ${({ theme, backgroundColor }) =>
backgroundColor ? backgroundColor : theme.colors.white}; */
`;
const TableLine = styled(FlexRow)`
position: absolute;
top: ${({ top }) => (top ? top : 'auto')};
bottom: ${({ bottom }) => (bottom ? bottom : 'auto')};
left: 0;
width: 100%;
background-color: ${({ theme }) => theme.colors.dark04};
height: ${({ height }) => (height ? height : '1px')};
`;
import ColumnFilterIcon from '../../components/generic/ColumnFilterIcon';
import pensilIco from '../../assets/pencil_ico.svg';
import deleteIco from '../../assets/delete_ico.svg';
import NewTableStyle from './styles/NewTableStyle';
import RowsBackgroundStyle from './styles/RowsBackgroundStyle';
import SortButtonContainerStyle from './styles/SortButtonContainerStyle';
const NewTable = ({ items, orderedKeys }) => {
return (
<Table>
<TrHeader>
{orderedKeys.map((key) => {
return <th>{key}</th>;
})}
<TableLine height="2px" top="94%" as="td" shadow={theme.shadow} />
</TrHeader>
{items.map((item, i) => {
<NewTableStyle>
<tr className="NewTableStyle__tr-header">
{orderedKeys.map((keyValue, i) => {
return (
<Tr>
{orderedKeys.map((key) => {
return <Td>{item[key]}</Td>;
})}
<FlexRow
width="100%"
alignmentX="space-between"
position="absolute"
top="55%"
left="0"
>
<FlexRow>tagi tagi tagi tagi</FlexRow>
<FlexRow>edytuj usuń</FlexRow>
</FlexRow>
<FlexRow
width="100%"
position="absolute"
top="0"
left="0"
height="100%"
backgroundColor={
i % 2 === 0 ? theme.colors.dark01 : 'transparent'
}
/>
</Tr>
<th key={`table-header-${i}`} className="NewTableStyle__th">
{keyValue}
<SortButtonContainerStyle as="span" column={keyValue}>
<ColumnFilterIcon index={1} active={2} rotateIcon={false} />
</SortButtonContainerStyle>
</th>
);
})}
</Table>
<FlexRow className="NewTableStyle__line" as="td" />
</tr>
{items.map((item, i) => {
return (
<tr className="NewTableStyle__tr">
{orderedKeys.map((keyValue, j) => {
return (
<td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
{item[keyValue]}
</td>
);
})}
<FlexRow className="NewTableStyle__row-footer">
<FlexRow className="NewTableStyle__tags-container">
{item.tags.map((tag, j) => {
return (
<FlexRow
className="NewTableStyle__tag"
key={`submissionTag-${i}-${j}`}
>
{tag}
</FlexRow>
);
})}
</FlexRow>
<FlexRow gap="12px">
<Svg
src={pensilIco}
backgroundColor={theme.colors.dark}
cursor="pointer"
size="cover"
width="16px"
height="16px"
/>
<Svg
src={deleteIco}
backgroundColor={theme.colors.dark}
cursor="pointer"
size="cover"
width="16px"
height="16px"
/>
</FlexRow>
</FlexRow>
<RowsBackgroundStyle i={i} />
</tr>
);
})}
</NewTableStyle>
);
};

View File

@ -29,6 +29,7 @@ const tableItems = [
'Accuracy-test-A': '0.65503',
'Likelihood-test-A': '0.00000',
when: '2023-01-05 21:47',
tags: ['tag1', 'siema siema', 'dluuuuuggiiiiiiiiiiiiiii tag', 'eloelo'],
},
{
id: '7371',
@ -40,6 +41,7 @@ const tableItems = [
'Accuracy-test-A': '0.67034',
'Likelihood-test-A': '0.00000',
when: '2023-01-05 21:47',
tags: ['tag2', 'siema2 siem2', 'looooooooooonggggg tag_tag', 'eloelo3'],
},
];

View File

@ -0,0 +1,65 @@
import styled from 'styled-components';
const NewTableStyle = styled.table`
border-collapse: separate;
width: 100%;
.NewTableStyle__th {
position: relative;
cursor: pointer;
* {
cursor: pointer;
}
}
.NewTableStyle__tr-header {
height: 48px;
position: relative;
}
.NewTableStyle__tr {
position: relative;
height: 72px;
}
.NewTableStyle__td {
padding: 0 0 32px 0;
margin: 0 0 0 2px;
}
.NewTableStyle__line {
position: absolute;
top: 94%;
bottom: ${({ bottom }) => (bottom ? bottom : 'auto')};
left: -6px;
width: calc(100% + 12px);
background-color: ${({ theme }) => theme.colors.dark04};
height: 3px;
box-shadow: ${({ theme }) => theme.shadow};
}
.NewTableStyle__tag {
color: ${({ theme }) => theme.colors.white};
background-color: ${({ theme }) => theme.colors.green08};
padding: 4px;
border-radius: 2px;
font-size: 12px;
font-weight: 600;
}
.NewTableStyle__row-footer {
width: 100%;
justify-content: space-between;
position: absolute;
top: 55%;
left: 0;
z-index: 2;
}
.NewTableStyle__tags-container {
gap: 4px;
padding: 0 2px;
}
`;
export default NewTableStyle;

View File

@ -0,0 +1,14 @@
import styled from 'styled-components';
import { FlexRow } from '../../../utils/containers';
const RowsBackgroundStyle = styled(FlexRow)`
width: calc(100% + 12px);
position: absolute;
top: 0;
left: -6px;
height: 100%;
background-color: ${({ theme, i }) =>
i % 2 === 0 ? theme.colors.dark01 : 'transparent'};
`;
export default RowsBackgroundStyle;

View File

@ -0,0 +1,16 @@
import styled from 'styled-components';
import { FlexRow } from '../../../utils/containers';
const getRightAttribute = (column) => {
const staticColumns = ['id', 'when', 'submitter'];
if (staticColumns.includes(column)) return '32%';
return '16%';
};
const SortButtonContainerStyle = styled(FlexRow)`
position: absolute;
top: 15px;
right: ${({ column }) => getRightAttribute(column)};
`;
export default SortButtonContainerStyle;

View File

@ -4,6 +4,7 @@ const colors = {
blue: '#4B8FF0',
green03: 'rgba(27, 153, 139, 0.3)',
green05: 'rgba(27, 153, 139, 0.5)',
green08: 'rgba(27, 153, 139, 0.8)',
dark: '#343434',
dark01: 'rgba(52, 52, 52, 0.1)',
dark03: 'rgba(52, 52, 52, 0.3)',