From 76f57614bbbe9bd957fb2fea9402f13a6f00d67c Mon Sep 17 00:00:00 2001 From: soupette Date: Mon, 4 Nov 2019 10:10:38 +0100 Subject: [PATCH] Refacto code --- .../DynamicComponentCard/Wrapper.js | 1 + .../src/components/DynamicZone/Button.js | 15 ++++++++++- .../DynamicZone/ComponentsPicker.js | 7 +++++ .../src/components/DynamicZone/Wrapper.js | 16 +++++++++++ .../admin/src/components/DynamicZone/index.js | 27 ++++++++++++++++--- .../admin/src/translations/en.json | 1 + .../admin/src/translations/fr.json | 1 + 7 files changed, 64 insertions(+), 4 deletions(-) create mode 100644 packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentsPicker.js diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DynamicComponentCard/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/DynamicComponentCard/Wrapper.js index f8db12b733..134f85211b 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicComponentCard/Wrapper.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicComponentCard/Wrapper.js @@ -13,6 +13,7 @@ const Wrapper = styled.div` color: #919bae; text-align: center; border-radius: 2px; + cursor: pointer; .component-uid { width: 119px; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Button.js b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Button.js index fc4e9e8fe9..db7ca81178 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Button.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Button.js @@ -3,8 +3,21 @@ import styled from 'styled-components'; const Button = styled.button` height: 36px; width: 36px; - background-color: ${({ isOpen }) => (isOpen ? '#aed4fb' : '#f3f4f4')}; + background-color: #f3f4f4; border-radius: 50%; + transform: rotate(-45deg); + transition: background-color 0.2s linear; + transition: transform 0.5s ease-in-out; + text-align: center; + + ${({ isOpen }) => { + if (isOpen) { + return ` + transform: rotate(-90deg); + background-color: #aed4fb; + `; + } + }} `; export default Button; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentsPicker.js b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentsPicker.js new file mode 100644 index 0000000000..e2c0b6826a --- /dev/null +++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/ComponentsPicker.js @@ -0,0 +1,7 @@ +import styled from 'styled-components'; + +const ComponentsPicker = styled.div` + display: ${({ isOpen }) => (isOpen ? 'flex' : 'none')}; +`; + +export default ComponentsPicker; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Wrapper.js b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Wrapper.js index d42aa1417b..fef6067b96 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Wrapper.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/Wrapper.js @@ -1,7 +1,23 @@ import styled from 'styled-components'; const Wrapper = styled.div` + position: relative; + margin: 18px 0; text-align: center; + + .info { + position: absolute; + display: ${({ show }) => (show ? 'block' : 'none')}; + top: 25%; + left: calc(50% + 46px); + > span { + letter-spacing: 0.5px; + text-transform: uppercase; + color: #007eff; + font-size: 11px; + font-weight: 700; + } + } `; export default Wrapper; diff --git a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js index 383426a875..153d0a4cff 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/DynamicZone/index.js @@ -1,31 +1,52 @@ import React, { memo, useState } from 'react'; import { get } from 'lodash'; import PropTypes from 'prop-types'; +import { Remove } from '@buffetjs/icons'; // TODO use css instead +import { FormattedMessage } from 'react-intl'; +import pluginId from '../../pluginId'; import useDataManager from '../../hooks/useDataManager'; +import DynamicComponentCard from '../DynamicComponentCard'; import Button from './Button'; +import ComponentsPicker from './ComponentsPicker'; import Wrapper from './Wrapper'; const DynamicZone = ({ name }) => { const [isOpen, setIsOpen] = useState(false); + const [isOver, setIsOver] = useState(false); const { allLayoutData, layout } = useDataManager(); const dynamicZoneAvailableComponents = get( layout, ['schema', 'attributes', name, 'components'], [] ); + const handleMouseEvent = () => setIsOver(prev => !prev); + const displayInfo = isOver && !isOpen; console.log({ allLayoutData, dynamicZoneAvailableComponents }); return ( <> - Dynamic components data here - + + +
+ +
+ + {dynamicZoneAvailableComponents.map(name => { + return ; + })} + ); diff --git a/packages/strapi-plugin-content-manager/admin/src/translations/en.json b/packages/strapi-plugin-content-manager/admin/src/translations/en.json index 8875412c12..169d870cf9 100644 --- a/packages/strapi-plugin-content-manager/admin/src/translations/en.json +++ b/packages/strapi-plugin-content-manager/admin/src/translations/en.json @@ -7,6 +7,7 @@ "components.AddFilterCTA.add": "Filters", "components.AddFilterCTA.hide": "Filters", "components.DraggableAttr.edit": "Click to edit", + "components.DynamicZone.add-compo": "Add a component to {componentName}", "components.EmptyAttributesBlock.button": "Go to settings page", "components.EmptyAttributesBlock.description": "You can change your settings", "components.FieldItem.linkToComponentLayout": "Set the component's layout", diff --git a/packages/strapi-plugin-content-manager/admin/src/translations/fr.json b/packages/strapi-plugin-content-manager/admin/src/translations/fr.json index f46ad4459b..73799193ce 100644 --- a/packages/strapi-plugin-content-manager/admin/src/translations/fr.json +++ b/packages/strapi-plugin-content-manager/admin/src/translations/fr.json @@ -7,6 +7,7 @@ "components.AddFilterCTA.add": "Filtres", "components.AddFilterCTA.hide": "Filtres", "components.DraggableAttr.edit": "Cliquez pour modifier", + "components.DynamicZone.add-compo": "Ajouter un composant à {componentName}", "components.EmptyAttributesBlock.button": "Voir la page des configurations", "components.EmptyAttributesBlock.description": "Vous pouvez modifiez vos paramètres", "components.FieldItem.linkToComponentLayout": "Modifier le layout du composant",