NewTable styles
This commit is contained in:
parent
916796ef8e
commit
60ecbd331a
3
src/assets/delete_ico.svg
Normal file
3
src/assets/delete_ico.svg
Normal 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 |
@ -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>;
|
||||
<NewTableStyle>
|
||||
<tr className="NewTableStyle__tr-header">
|
||||
{orderedKeys.map((keyValue, i) => {
|
||||
return (
|
||||
<th key={`table-header-${i}`} className="NewTableStyle__th">
|
||||
{keyValue}
|
||||
<SortButtonContainerStyle as="span" column={keyValue}>
|
||||
<ColumnFilterIcon index={1} active={2} rotateIcon={false} />
|
||||
</SortButtonContainerStyle>
|
||||
</th>
|
||||
);
|
||||
})}
|
||||
<TableLine height="2px" top="94%" as="td" shadow={theme.shadow} />
|
||||
</TrHeader>
|
||||
<FlexRow className="NewTableStyle__line" as="td" />
|
||||
</tr>
|
||||
{items.map((item, i) => {
|
||||
return (
|
||||
<Tr>
|
||||
{orderedKeys.map((key) => {
|
||||
return <Td>{item[key]}</Td>;
|
||||
<tr className="NewTableStyle__tr">
|
||||
{orderedKeys.map((keyValue, j) => {
|
||||
return (
|
||||
<td key={`table-item-${i}-${j}`} className="NewTableStyle__td">
|
||||
{item[keyValue]}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
<FlexRow
|
||||
width="100%"
|
||||
alignmentX="space-between"
|
||||
position="absolute"
|
||||
top="55%"
|
||||
left="0"
|
||||
>
|
||||
<FlexRow>tagi tagi tagi tagi</FlexRow>
|
||||
<FlexRow>edytuj usuń</FlexRow>
|
||||
<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>
|
||||
<FlexRow
|
||||
width="100%"
|
||||
position="absolute"
|
||||
top="0"
|
||||
left="0"
|
||||
height="100%"
|
||||
backgroundColor={
|
||||
i % 2 === 0 ? theme.colors.dark01 : 'transparent'
|
||||
}
|
||||
/>
|
||||
</Tr>
|
||||
<RowsBackgroundStyle i={i} />
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</Table>
|
||||
</NewTableStyle>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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'],
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
65
src/pages/NewTable/styles/NewTableStyle.js
Normal file
65
src/pages/NewTable/styles/NewTableStyle.js
Normal 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;
|
||||
14
src/pages/NewTable/styles/RowsBackgroundStyle.js
Normal file
14
src/pages/NewTable/styles/RowsBackgroundStyle.js
Normal 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;
|
||||
16
src/pages/NewTable/styles/SortButtonContainerStyle.js
Normal file
16
src/pages/NewTable/styles/SortButtonContainerStyle.js
Normal 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;
|
||||
@ -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)',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user