From 60ecbd331af1d116e763f25a335aeae0b8ad7df4 Mon Sep 17 00:00:00 2001 From: Mateusz Tylka Date: Wed, 7 Jun 2023 12:14:38 +0200 Subject: [PATCH] NewTable styles --- src/assets/delete_ico.svg | 3 + src/pages/NewTable/NewTable.js | 128 +++++++++--------- src/pages/NewTable/NewTablePageTest.js | 2 + src/pages/NewTable/styles/NewTableStyle.js | 65 +++++++++ .../NewTable/styles/RowsBackgroundStyle.js | 14 ++ .../styles/SortButtonContainerStyle.js | 16 +++ src/utils/colors.js | 1 + 7 files changed, 162 insertions(+), 67 deletions(-) create mode 100644 src/assets/delete_ico.svg create mode 100644 src/pages/NewTable/styles/NewTableStyle.js create mode 100644 src/pages/NewTable/styles/RowsBackgroundStyle.js create mode 100644 src/pages/NewTable/styles/SortButtonContainerStyle.js diff --git a/src/assets/delete_ico.svg b/src/assets/delete_ico.svg new file mode 100644 index 0000000..c3ec67d --- /dev/null +++ b/src/assets/delete_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/NewTable/NewTable.js b/src/pages/NewTable/NewTable.js index b3144ed..cca00ae 100644 --- a/src/pages/NewTable/NewTable.js +++ b/src/pages/NewTable/NewTable.js @@ -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 ( - - - {orderedKeys.map((key) => { - return ; + + + {orderedKeys.map((keyValue, i) => { + return ( + + ); })} - - + + {items.map((item, i) => { return ( - - {orderedKeys.map((key) => { - return ; + + {orderedKeys.map((keyValue, j) => { + return ( + + ); })} - - tagi tagi tagi tagi - edytuj usuń + + + {item.tags.map((tag, j) => { + return ( + + {tag} + + ); + })} + + + + + - - + + ); })} -
{key}
+ {keyValue} + + + +
{item[key]}
+ {item[keyValue]} +
+ ); }; diff --git a/src/pages/NewTable/NewTablePageTest.js b/src/pages/NewTable/NewTablePageTest.js index 68a154a..2ca2e8f 100644 --- a/src/pages/NewTable/NewTablePageTest.js +++ b/src/pages/NewTable/NewTablePageTest.js @@ -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'], }, ]; diff --git a/src/pages/NewTable/styles/NewTableStyle.js b/src/pages/NewTable/styles/NewTableStyle.js new file mode 100644 index 0000000..76802e6 --- /dev/null +++ b/src/pages/NewTable/styles/NewTableStyle.js @@ -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; diff --git a/src/pages/NewTable/styles/RowsBackgroundStyle.js b/src/pages/NewTable/styles/RowsBackgroundStyle.js new file mode 100644 index 0000000..d44690a --- /dev/null +++ b/src/pages/NewTable/styles/RowsBackgroundStyle.js @@ -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; diff --git a/src/pages/NewTable/styles/SortButtonContainerStyle.js b/src/pages/NewTable/styles/SortButtonContainerStyle.js new file mode 100644 index 0000000..91940bb --- /dev/null +++ b/src/pages/NewTable/styles/SortButtonContainerStyle.js @@ -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; diff --git a/src/utils/colors.js b/src/utils/colors.js index 841cb3f..a98a3aa 100644 --- a/src/utils/colors.js +++ b/src/utils/colors.js @@ -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)',