From fbd22b8c33b37b97855d230e90a7b935dd15a87f Mon Sep 17 00:00:00 2001 From: bulby97 Date: Wed, 8 Sep 2021 15:28:42 +0200 Subject: [PATCH] WIP Desgin rows --- .../src/components/AttributeIcon/index.js | 76 ++++++++++ .../admin/src/components/List/BoxWrapper.js | 48 +++++++ .../admin/src/components/List/List.js | 131 ------------------ .../admin/src/components/List/index.js | 27 +++- .../src/components/ListRow/BoxWrapper.js | 12 ++ .../admin/src/components/ListRow/Wrapper.js | 76 ---------- .../admin/src/components/ListRow/index.js | 16 ++- .../admin/src/pages/ListView/index.js | 43 ++---- 8 files changed, 179 insertions(+), 250 deletions(-) create mode 100644 packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js create mode 100644 packages/core/content-type-builder/admin/src/components/List/BoxWrapper.js delete mode 100644 packages/core/content-type-builder/admin/src/components/List/List.js create mode 100644 packages/core/content-type-builder/admin/src/components/ListRow/BoxWrapper.js delete mode 100644 packages/core/content-type-builder/admin/src/components/ListRow/Wrapper.js diff --git a/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js b/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js new file mode 100644 index 0000000000..9a7d0a03b1 --- /dev/null +++ b/packages/core/content-type-builder/admin/src/components/AttributeIcon/index.js @@ -0,0 +1,76 @@ +import React from 'react'; +import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import { Box } from '@strapi/parts'; +import { + Component, + CT, + Date, + Bool, + DynamicZone, + Email, + Enumeration, + Json, + LongDescription, + Media, + Numbers, + Password, + Relation, + St, + Text, + Uid, +} from '@strapi/icons'; +import { pxToRem } from '@strapi/helper-plugin'; + +const types = { + biginteger: Numbers, + boolean: Bool, + component: Component, + contentType: CT, + date: Date, + datetime: Date, + decimal: Numbers, + dynamiczone: DynamicZone, + email: Email, + enum: Enumeration, + enumeration: Enumeration, + file: Media, + files: Media, + float: Numbers, + integer: Numbers, + json: Json, + JSON: Json, + media: Media, + number: Numbers, + password: Password, + relation: Relation, + richtext: LongDescription, + singleType: St, + string: Text, + text: Text, + time: Date, + timestamp: Date, + uid: Uid, +}; + +const StyledCompo = styled(Box)` + width: ${pxToRem(32)}; + height: ${pxToRem(24)}; + box-sizing: content-box; +`; + +const AttributeIcon = ({ type, ...rest }) => { + const Compo = types[type]; + + if (!types[type]) { + return null; + } + + return ; +}; + +AttributeIcon.propTypes = { + type: PropTypes.string.isRequired, +}; + +export default AttributeIcon; diff --git a/packages/core/content-type-builder/admin/src/components/List/BoxWrapper.js b/packages/core/content-type-builder/admin/src/components/List/BoxWrapper.js new file mode 100644 index 0000000000..c2045094fc --- /dev/null +++ b/packages/core/content-type-builder/admin/src/components/List/BoxWrapper.js @@ -0,0 +1,48 @@ +/** + * + * Wrapper + * + */ +import { Box } from '@strapi/parts'; +import styled from 'styled-components'; + +const BoxWrapper = styled(Box)` + overflow-x: auto; + + table { + width: 100%; + white-space: nowrap; + } + + thead { + border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150}; + } + + tr { + border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150}; + + & td, + & th { + padding: ${({ theme }) => theme.spaces[4]}; + } + + & td:first-of-type, + & th:first-of-type { + padding: 0 ${({ theme }) => theme.spaces[1]}; + } + } + + th, + td { + vertical-align: middle; + text-align: left; + color: ${({ theme }) => theme.colors.neutral600}; + outline-offset: -4px; + } +`; + +BoxWrapper.defaultProps = { + isFromDynamicZone: false, +}; + +export default BoxWrapper; diff --git a/packages/core/content-type-builder/admin/src/components/List/List.js b/packages/core/content-type-builder/admin/src/components/List/List.js deleted file mode 100644 index 659232078c..0000000000 --- a/packages/core/content-type-builder/admin/src/components/List/List.js +++ /dev/null @@ -1,131 +0,0 @@ -/** - * - * Wrapper - * - */ - -import styled from 'styled-components'; -import { List } from '@buffetjs/styles'; - -const Wrapper = styled(List)` - table-layout: fixed; - - tbody { - td:first-of-type:not(:last-of-type) { - width: 73px; - padding-left: 30px; - > svg { - width: auto; - height: 16px; - position: absolute; - left: -4px; - top: 16px; - display: none; - } - } - td[colspan='12'] { - position: relative; - padding: 0 0 0 50px; - > div { - box-shadow: none; - } - } - tr.component-row { - &:not(:first-of-type) { - &::before { - background-color: transparent; - } - } - table tr td:first-of-type:not(:last-of-type) { - width: 79px; - padding-left: 36px; - svg { - display: block; - } - } - } - table + div button { - position: relative; - background-color: transparent; - text-transform: initial; - color: #9ea7b8; - text-align: left; - padding-left: 35px; - border-color: transparent; - svg { - position: absolute; - top: 0; - left: 0; - } - } - tr.dynamiczone-row { - &:not(:first-of-type) { - &::before { - background-color: transparent; - } - } - > td[colspan='12'] { - padding-left: 0; - padding-right: 0; - } - - .tabs-wrapper { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 2; - padding-top: 18px; - padding-left: 86px; - padding-right: 30px; - .nav-tabs { - border-bottom: 0; - } - ul.nav { - width: 100%; - display: flex; - flex-wrap: nowrap; - overflow-x: auto; - overflow-y: hidden; - li { - margin-right: 9px; - } - } - & + .tab-content { - padding-top: 126px; - position: relative; - z-index: 1; - } - } - } - } - & + .plus-icon { - width: 27px; - height: 27px; - border-radius: 18px; - position: absolute; - bottom: 14px; - left: 34px; - background-color: ${({ isFromDynamicZone }) => (isFromDynamicZone ? '#AED4FB' : '#f3f4f4')}; - - color: transparent; - text-align: center; - line-height: 27px; - display: flex; - cursor: pointer; - svg { - margin: auto; - width: 11px; - height: 11px; - } - } -`; - -Wrapper.defaultProps = { - isFromDynamicZone: false, -}; - -export default Wrapper; diff --git a/packages/core/content-type-builder/admin/src/components/List/index.js b/packages/core/content-type-builder/admin/src/components/List/index.js index 60784f0aaa..22beeb5700 100644 --- a/packages/core/content-type-builder/admin/src/components/List/index.js +++ b/packages/core/content-type-builder/admin/src/components/List/index.js @@ -9,6 +9,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import { get } from 'lodash'; import { ListButton, useTracking } from '@strapi/helper-plugin'; +import { TableLabel } from '@strapi/parts'; import { Button } from '@buffetjs/core'; import { Plus } from '@buffetjs/icons'; import { useIntl } from 'react-intl'; @@ -17,13 +18,12 @@ import useListView from '../../hooks/useListView'; import useDataManager from '../../hooks/useDataManager'; import DynamicZoneList from '../DynamicZoneList'; import ComponentList from '../ComponentList'; -import Wrapper from './List'; +import BoxWrapper from './BoxWrapper'; /* eslint-disable jsx-a11y/click-events-have-key-events */ /* eslint-disable jsx-a11y/no-static-element-interactions */ function List({ - className, customRowComponent, items, addComponentToDZ, @@ -186,8 +186,25 @@ function List({ return ( <> - + + + + + + + {items.map(item => { const { type } = item; @@ -247,7 +264,7 @@ function List({ - + ); } diff --git a/packages/core/content-type-builder/admin/src/pages/ListView/index.js b/packages/core/content-type-builder/admin/src/pages/ListView/index.js index 5577ce44fc..24d014d639 100644 --- a/packages/core/content-type-builder/admin/src/pages/ListView/index.js +++ b/packages/core/content-type-builder/admin/src/pages/ListView/index.js @@ -1,9 +1,8 @@ -import React, { useEffect, useState } from 'react'; import { useTracking } from '@strapi/helper-plugin'; import { AddIcon, BackIcon, CheckIcon, EditIcon } from '@strapi/icons'; -import { Box, Button, ContentLayout, HeaderLayout, Link, Row, Stack } from '@strapi/parts'; +import { Button, ContentLayout, HeaderLayout, Link, Row, Stack } from '@strapi/parts'; import { get, has, isEqual, upperFirst } from 'lodash'; -import PropTypes from 'prop-types'; +import React, { useEffect, useState } from 'react'; import { useIntl } from 'react-intl'; import { Prompt, useHistory, useLocation } from 'react-router-dom'; import List from '../../components/List'; @@ -202,20 +201,6 @@ const ListView = () => { }); }; - const CustomRow = props => { - const { name } = props; - - return ; - }; - - CustomRow.defaultProps = { - name: null, - }; - - CustomRow.propTypes = { - name: PropTypes.string, - }; - return ( <> @@ -302,19 +287,17 @@ const ListView = () => { - - } - addComponentToDZ={handleClickAddComponentToDZ} - targetUid={targetUid} - dataType={forTarget} - dataTypeName={currentDataName} - mainTypeName={currentDataName} - editTarget={forTarget} - isMain - /> - + } + addComponentToDZ={handleClickAddComponentToDZ} + targetUid={targetUid} + dataType={forTarget} + dataTypeName={currentDataName} + mainTypeName={currentDataName} + editTarget={forTarget} + isMain + />
+ Name + + Type +
- - + + {/* */}

{name}

@@ -288,7 +290,7 @@ function ListRow({ )}