diff --git a/packages/strapi-helper-plugin/lib/src/components/LeftMenuLink/index.js b/packages/strapi-helper-plugin/lib/src/components/LeftMenuLink/index.js index e47ae14c78..f340430f77 100644 --- a/packages/strapi-helper-plugin/lib/src/components/LeftMenuLink/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/LeftMenuLink/index.js @@ -3,7 +3,11 @@ import PropTypes from 'prop-types'; import { NavLink } from 'react-router-dom'; function LeftMenuLink({ children, to }) { - return {children}; + return ( + +

{children}

+ + ); } LeftMenuLink.defaultProps = { diff --git a/packages/strapi-helper-plugin/lib/src/components/LeftMenuList/Wrapper.js b/packages/strapi-helper-plugin/lib/src/components/LeftMenuList/Wrapper.js index 15383e7738..9e013cff34 100644 --- a/packages/strapi-helper-plugin/lib/src/components/LeftMenuList/Wrapper.js +++ b/packages/strapi-helper-plugin/lib/src/components/LeftMenuList/Wrapper.js @@ -3,7 +3,7 @@ import styled from 'styled-components'; import colors from '../../assets/styles/colors'; const Wrapper = styled.div` - margin-bottom: 25px; + margin-bottom: 24px; button { outline: 0; } diff --git a/packages/strapi-helper-plugin/lib/src/components/ViewContainer/index.js b/packages/strapi-helper-plugin/lib/src/components/ViewContainer/index.js index 2244550462..2f298db673 100644 --- a/packages/strapi-helper-plugin/lib/src/components/ViewContainer/index.js +++ b/packages/strapi-helper-plugin/lib/src/components/ViewContainer/index.js @@ -1,6 +1,6 @@ /** * - * StyledViewContainer + * ViewContainer * */ @@ -8,9 +8,9 @@ import styled from 'styled-components'; import sizes from '../../assets/styles/sizes'; -const StyledViewContainer = styled.div` +const ViewContainer = styled.div` min-height: calc(100vh - ${sizes.header.height}); - .components-container { + .content { padding: 1.8rem 1.5rem; > div:not(:first-of-type):not(:last-of-type) { > div:first-of-type { @@ -44,4 +44,4 @@ const StyledViewContainer = styled.div` } `; -export default StyledViewContainer; +export default ViewContainer; diff --git a/packages/strapi-helper-plugin/lib/src/index.js b/packages/strapi-helper-plugin/lib/src/index.js index aa69cdb91f..c785222500 100644 --- a/packages/strapi-helper-plugin/lib/src/index.js +++ b/packages/strapi-helper-plugin/lib/src/index.js @@ -101,7 +101,6 @@ export { default as PluginHeader } from './components/PluginHeader'; export { default as PopUpWarning } from './components/PopUpWarning'; export { default as SelectNav } from './components/SelectNav'; export { default as SelectWrapper } from './components/SelectWrapper'; -// export { default as StyledLeftMenu } from './components/StyledLeftMenu'; export { default as TrashButton } from './components/TrashButton'; export { default as ViewContainer } from './components/ViewContainer'; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/CustomLink/StyledCustomLink.js b/packages/strapi-plugin-content-type-builder/admin/src/components/CustomLink/StyledCustomLink.js index a3c7a7128d..5cfbc000cc 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/CustomLink/StyledCustomLink.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/CustomLink/StyledCustomLink.js @@ -10,12 +10,14 @@ import { colors } from 'strapi-helper-plugin'; const StyledCustomLink = styled.div` padding-left: 15px; - padding-top: 10px; + padding-top: 9px; line-height: 0; p { color: ${colors.blue}; font-size: 13px; font-weight: 500; + line-height: 18px; + text-align: left; i { margin-right: 5px; } diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ListButton/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ListButton/index.js new file mode 100644 index 0000000000..f81ee3c7cd --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ListButton/index.js @@ -0,0 +1,27 @@ +import styled from 'styled-components'; +import { Button } from '@buffetjs/core'; + +const ListHeaderButton = styled(Button)` + padding-left: 15px; + padding-right: 15px; +`; + +const ListButton = styled(Button)` + background-color: #e6f0fb; + width: 100%; + height: 54px; + border-top: 1px solid #aed4fb; + color: #007eff; + font-weight: 600; + border-radius: 0; + text-transform: uppercase; + letter-spacing: 0.5px; + &:hover { + box-shadow: none; + } + &:focus { + outline: 0; + } +`; + +export { ListButton, ListHeaderButton }; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/Title.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/Title.js new file mode 100644 index 0000000000..45a9b0b562 --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/Title.js @@ -0,0 +1,19 @@ +/** + * + * Title + * + */ + +import styled from 'styled-components'; +import { colors } from 'strapi-helper-plugin'; + +const Title = styled.p` + margin-bottom: 0; + color: ${colors.blueTxt}; + font-family: 'Lato'; + font-size: 1.8rem; + font-weight: bold; + line-height: 2.2rem; +`; + +export default Title; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/Wrapper.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/Wrapper.js new file mode 100644 index 0000000000..22c8d4129d --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/Wrapper.js @@ -0,0 +1,21 @@ +/** + * + * Wrapper + * + */ + +import styled from 'styled-components'; + +const Wrapper = styled.div` + position: relative; + padding: 1.9rem 3rem 1.8rem 3rem; + background-color: white; + button { + position: absolute; + top: 1.7rem; + right: 3rem; + outline: 0; + } +`; + +export default Wrapper; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/index.js new file mode 100644 index 0000000000..544d9b85ed --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ListHeader/index.js @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { ListHeaderButton } from '../ListButton'; +import Wrapper from './Wrapper'; +import Title from './Title'; + +function ListHeader({ actions, title }) { + return ( + + {actions.map(action => { + const { disabled, label, onClick } = action; + + return ( + + {label} + + ); + })} +
+ {title.map(item => { + return {item} ; + })} +
+ + ); +} + +ListHeader.defaultProps = { + actions: [], + title: [], +}; + +ListHeader.propTypes = { + actions: PropTypes.arrayOf( + PropTypes.shape({ + disabled: PropTypes.bool, + onClick: PropTypes.func, + title: PropTypes.string, + }) + ), + title: PropTypes.arrayOf(PropTypes.string), +}; + +export default ListHeader; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js index 7ede721f6c..7eb6d4ac75 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/FormModal/index.js @@ -356,7 +356,6 @@ const FormModal = () => { ? { paddingTop: '0.5rem', paddingBottom: '3rem' } : {}; - console.log({ formModal: modifiedData }); return ( {data.map(list => { - return ; + return ; })} ); diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ListPage/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ListPage/index.js index fccf1ba302..87ced5a0d6 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ListPage/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ListPage/index.js @@ -1,8 +1,19 @@ import React from 'react'; import { useHistory } from 'react-router-dom'; -import { get, has } from 'lodash'; -import { ViewContainer } from 'strapi-helper-plugin'; +import { get, has, isEqual } from 'lodash'; +import { Header } from '@buffetjs/custom'; +import { + List, + ListWrapper, + ViewContainer, + useGlobalContext, +} from 'strapi-helper-plugin'; + +import ListHeader from '../../components/ListHeader'; +import { ListButton } from '../../components/ListButton'; import useDataManager from '../../hooks/useDataManager'; +import pluginId from '../../pluginId'; + import LeftMenu from '../LeftMenu'; const ListPage = () => { @@ -21,6 +32,7 @@ const ListPage = () => { isInContentTypeView, removeAttribute, } = useDataManager(); + const { formatMessage } = useGlobalContext(); const { push } = useHistory(); const firstMainDataPath = isInContentTypeView ? 'contentType' : 'component'; const mainDataTypeAttributesPath = [ @@ -30,6 +42,8 @@ const ListPage = () => { ]; const attributes = get(modifiedData, mainDataTypeAttributesPath, {}); + const attributesLength = Object.keys(attributes).length; + const currentDataName = get( initialData, [firstMainDataPath, 'schema', 'name'], @@ -114,15 +128,98 @@ const ListPage = () => { }); }; + const getDescription = () => { + const description = get( + modifiedData, + [firstMainDataPath, 'schema', 'description'], + null + ); + + return description + ? description + : formatMessage({ + id: `${pluginId}.modelPage.contentHeader.emptyDescription.description`, + }); + }; + + const getActions = () => { + // const handleSubmit = () => + // this.isUpdatingTempFeature() + // ? submitTempGroup(newGroup, this.context) + // : submitGroup( + // featureName, + // get(modifiedDataGroup, featureName), + // Object.assign(this.context, { + // history: this.props.history, + // }), + // this.getSource() + // ); + + // const handleCancel = resetEditExistingGroup(this.getFeatureName()); + + return [ + { + color: 'cancel', + onClick: () => {}, + title: formatMessage({ + id: `${pluginId}.form.button.cancel`, + }), + type: 'button', + disabled: isEqual(modifiedData, initialData) ? true : false, + }, + { + color: 'success', + onClick: () => {}, + title: formatMessage({ + id: `${pluginId}.form.button.save`, + }), + type: 'submit', + disabled: isEqual(modifiedData, initialData) ? true : false, + }, + ]; + }; + + const headerProps = { + actions: getActions(), + title: { + label: get(modifiedData, [firstMainDataPath, 'schema', 'name']), + }, + content: getDescription(), + }; + + const listTitle = [ + formatMessage( + { + id: `${pluginId}.table.attributes.title.${ + attributesLength > 1 ? 'plural' : 'singular' + }`, + }, + { number: attributesLength } + ), + ]; + + const addButtonProps = { + icon: true, + color: 'primary', + label: formatMessage({ id: `${pluginId}.button.attributes.add.another` }), + onClick: () => handleClickAddAttributeMainData(), + }; + + const listActions = [{ ...addButtonProps }]; + return (
-
- +
+
+ + + + + + {/* REALLY TEMPORARY SINCE IT DOESN T SUPPORT ANY NESTING COMPONENT*/}