Dynamic zone UI fix and review apply

This commit is contained in:
Virginie Ky 2019-11-26 16:15:59 +01:00
parent ce3ada140d
commit 683dc4b199
22 changed files with 107 additions and 138 deletions

View File

@ -22,12 +22,11 @@
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.4.3",
"@buffetjs/core": "^1.0.6",
"@buffetjs/custom": "^1.0.6",
"@buffetjs/icons": "^1.0.6",
"@buffetjs/styles": "^1.0.5",
"@buffetjs/utils": "^1.0.5",
"@comparaonline/react-intl-hooks": "^0.0.1-alpha.6",
"@buffetjs/core": "^1.1.0",
"@buffetjs/custom": "^1.1.0",
"@buffetjs/icons": "^1.1.0",
"@buffetjs/styles": "^1.1.0",
"@buffetjs/utils": "^1.1.0",
"@fortawesome/fontawesome-svg-core": "^1.2.25",
"@fortawesome/free-brands-svg-icons": "^5.11.2",
"@fortawesome/free-solid-svg-icons": "^5.11.2",

View File

@ -1,25 +0,0 @@
import React from 'react';
import { library } from '@fortawesome/fontawesome-svg-core';
import { fas } from '@fortawesome/free-solid-svg-icons';
function ComponentIcons() {
library.add(fas);
let fasArray = Object.keys(library.definitions.fas);
return (
<ul>
{fasArray.map(fas => {
return (
<li key={fas}>
<i className={`fa fa-${fas}`} />
{fas}
</li>
);
})}
</ul>
);
}
export default ComponentIcons;

View File

@ -12,7 +12,6 @@ const ComponentInitializer = ({ componentUid, name }) => {
return (
<NonRepeatableWrapper isEmpty>
{/* <div /> */}
<PlusButton
onClick={() => addNonRepeatableComponentToField(name, componentUid)}
type="button"

View File

@ -1,4 +1,4 @@
import styled from 'styled-components';
import styled, { css } from 'styled-components';
import getColor from './utils/getColor';
const GrabWrapper = styled.div`
@ -9,7 +9,6 @@ const GrabWrapper = styled.div`
top: 0px;
bottom: 0px;
left: 0;
// margin-right: 10px;
padding-left: 10px;
border-right: 1px solid
${({ isOverEditBlock, isOverRemove, isSelected }) =>
@ -17,23 +16,21 @@ const GrabWrapper = styled.div`
cursor: move;
z-index: 99;
${({ isOverEditBlock, isOverRemove, isSelected }) => {
if (isOverRemove) {
return `
g {
fill: #ffa784;
}
`;
}
${({ isOverRemove }) =>
isOverRemove &&
css`
g {
fill: #ffa784;
}
`}
if (isSelected || isOverEditBlock) {
return `
g {
fill: #007eff;
}
`;
}
}}
${({ isSelected, isOverEditBlock }) =>
(isSelected || isOverEditBlock) &&
css`
g {
fill: #007eff;
}
`}
`;
export default GrabWrapper;

View File

@ -1,4 +1,3 @@
/* eslint-disable react/display-name */
import React, { forwardRef, useState } from 'react';
import PropTypes from 'prop-types';
import { isEmpty } from 'lodash';
@ -110,7 +109,6 @@ const DraggedField = forwardRef(
<RemoveWrapper
className="remove"
isSelected={isSelected}
// isOverEditBlock={isOverEditBlock}
isOverEditBlock={showEditBlockOverState}
isOverRemove={isOverRemove}
onClick={onRemove}
@ -192,4 +190,6 @@ DraggedField.propTypes = {
withLongerHeight: PropTypes.bool,
};
DraggedField.displayName = 'DraggedField';
export default DraggedField;

View File

@ -13,7 +13,6 @@ const Carret = styled.div`
left: -1px;
`;
}}
// height: 30px;
height: 100%;
width: 2px;
margin-right: 3px;

View File

@ -8,7 +8,6 @@ import PreviewCarret from '../PreviewCarret';
import Wrapper from './Wrapper';
import DynamicComponent from './DynamicComponent';
// eslint-disable-next-line react/display-name
const DraggedFieldWithPreview = forwardRef(
(
{
@ -200,4 +199,6 @@ DraggedFieldWithPreview.propTypes = {
type: PropTypes.string,
};
DraggedFieldWithPreview.displayName = 'DraggedFieldWithPreview';
export default DraggedFieldWithPreview;

View File

@ -6,7 +6,7 @@ const ComponentWrapper = styled.div`
position: relative;
box-shadow: 0 2px 4px #e3e9f3;
&:not(:first-of-type) {
margin-top: 37px;
margin-top: 32px;
&:before {
content: '&';
position: absolute;
@ -20,6 +20,10 @@ const ComponentWrapper = styled.div`
}
> div:not(:first-of-type) {
padding-top: 6px;
padding-bottom: 5px;
}
> div:last-of-type {
margin-bottom: 18px;
}
}
`;

View File

@ -6,8 +6,8 @@ const ComponentsPicker = styled.div`
transition: max-height 0.2s ease-out;
> div {
margin-top: 23px;
padding: 23px 18px 18px 18px;
margin-top: 19px;
padding: 23px 18px 22px 18px;
background-color: #f2f3f4;
}

View File

@ -0,0 +1,9 @@
import styled from 'styled-components';
const DynamicZoneWrapper = styled.div`
position: relative;
padding-top: 10px;
margin-bottom: 18px;
`;
export default DynamicZoneWrapper;

View File

@ -1,15 +1,15 @@
import styled from 'styled-components';
const Label = styled.div`
padding: 18px 20px 17px 20px;
padding: 13px 20px;
font-size: 13px;
font-weight: 600;
position: relative;
min-height: 73px;
min-height: 68px;
&:after {
content: '• ';
position: absolute;
top: 15px;
top: 11px;
left: 18.5px;
color: #aed4fb;
font-size: 15px;
@ -17,7 +17,7 @@ const Label = styled.div`
&:before {
content: '&';
position: absolute;
top: 26px;
top: 22px;
left: 22px;
height: 100%;
width: 2px;

View File

@ -2,8 +2,7 @@ import styled from 'styled-components';
const Wrapper = styled.div`
position: relative;
margin: 24px 0 0 0;
padding-bottom: 23px;
padding-top: 5px;
text-align: center;
.info {
position: absolute;
@ -26,8 +25,8 @@ const Wrapper = styled.div`
.error-label {
color: #f64d0a;
font-size: 13px;
margin-top: 9px;
margin-bottom: -10px;
margin-top: 4px;
margin-bottom: -5px;
}
`;

View File

@ -11,6 +11,7 @@ import FieldComponent from '../FieldComponent';
import Button from './Button';
import ComponentsPicker from './ComponentsPicker';
import ComponentWrapper from './ComponentWrapper';
import DynamicZoneWrapper from './DynamicZoneWrapper';
import Label from './Label';
import RoundCTA from './RoundCTA';
import Wrapper from './Wrapper';
@ -72,7 +73,7 @@ const DynamicZone = ({ max, min, name }) => {
const hasRequiredError = hasError && !hasMinError;
return (
<>
<DynamicZoneWrapper>
{getDynamicDisplayedComponents().length > 0 && (
<Label>
<p>{metas.label}</p>
@ -143,10 +144,14 @@ const DynamicZone = ({ max, min, name }) => {
{hasRequiredError && !isOpen && (
<div className="error-label">Component is required</div>
)}
{hasMinError && (
{hasMinError && !isOpen && (
<div className="error-label">
{' '}
{missingComponentNumber} missing components
<FormattedMessage
id={`${pluginId}.components.DynamicZone.missing${
missingComponentNumber > 1 ? '.plural' : '.singular'
}`}
values={{ count: missingComponentNumber }}
/>
</div>
)}
<div className="info">
@ -185,7 +190,7 @@ const DynamicZone = ({ max, min, name }) => {
</div>
</ComponentsPicker>
</Wrapper>
</>
</DynamicZoneWrapper>
);
};

View File

@ -5,7 +5,7 @@ const FormWrapper = styled.div`
background: #ffffff;
border-radius: 2px;
box-shadow: 0 2px 4px #e3e9f3;
margin-bottom: 14px;
> div {
margin-right: 0;
margin-left: 0;

View File

@ -69,7 +69,6 @@ function Inputs({ autoFocus, keys, layout, name, onBlur }) {
]);
const type = useMemo(() => get(attribute, 'type', null), [attribute]);
// const inputStyle = type === 'text' ? { height: '196px' } : {};
const validations = omit(attribute, [
'type',
'model',
@ -93,13 +92,6 @@ function Inputs({ autoFocus, keys, layout, name, onBlur }) {
temporaryErrorIdUntilBuffetjsSupportsFormattedMessage
);
// TODO add the option placeholder to buffetjs
// check https://github.com/strapi/strapi/issues/2471
// const withOptionPlaceholder = get(attribute, 'type', '') === 'enumeration';
// TODO format error for the JSON, the WYSIWYG and also the file inputs
// TODO check if the height for the textarea is 196px (not mandatory)
if (type === 'relation') {
return (
<div className="col-6" key={keys}>
@ -139,14 +131,12 @@ function Inputs({ autoFocus, keys, layout, name, onBlur }) {
}
inputDescription={description}
description={description}
// inputStyle={inputStyle} used to set the height of the text area
customInputs={{
media: InputFileWithErrors,
json: InputJSONWithErrors,
wysiwyg: WysiwygWithErrors,
}}
multiple={get(attribute, 'multiple', false)}
// name={name}
name={keys}
onBlur={onBlur}
onChange={onChange}
@ -155,7 +145,6 @@ function Inputs({ autoFocus, keys, layout, name, onBlur }) {
validations={validations}
value={inputValue}
withDefaultValue={false}
// withOptionPlaceholder={withOptionPlaceholder}
/>
);
}}

View File

@ -12,8 +12,6 @@ const Wrapper = styled.div`
return css`
height: 34px;
padding: 0;
// border: 1px solid #e3e9f3;
// border-bottom: 0;
`;
}
}}

View File

@ -48,6 +48,10 @@ const Button = styled.button`
svg {
margin-right: 10px;
}
& + p {
margin-bottom: 17px;
margin-top: -18px;
}
`;
export default Button;

View File

@ -3,6 +3,7 @@ import { useDrop } from 'react-dnd';
import PropTypes from 'prop-types';
import { get } from 'lodash';
import { FormattedMessage } from 'react-intl';
import { ErrorMessage } from '@buffetjs/styles';
import pluginId from '../../pluginId';
import useDataManager from '../../hooks/useDataManager';
import ItemTypes from '../../utils/ItemTypes';
@ -119,8 +120,6 @@ const RepeatableComponent = ({
}
type="button"
onClick={() => {
// TODO min max validations
// TODO add componentUID
if (componentValueLength < max) {
const shouldCheckErrors = hasMinError;
addRepeatableComponentToField(
@ -131,7 +130,7 @@ const RepeatableComponent = ({
dispatch({
type: 'ADD_NEW_FIELD',
});
} else {
} else if (componentValueLength > max) {
strapi.notification.info(
`${pluginId}.components.components.notification.info.maximum-requirement`
);
@ -142,7 +141,14 @@ const RepeatableComponent = ({
<FormattedMessage id={`${pluginId}.containers.EditView.add.new`} />
</Button>
{hasMinError && (
<div>There is {missingComponentsValue} missing components</div>
<ErrorMessage>
<FormattedMessage
id={`${pluginId}.components.DynamicZone.missing${
missingComponentsValue > 1 ? '.plural' : '.singular'
}`}
values={{ count: missingComponentsValue }}
/>
</ErrorMessage>
)}
</div>
);

View File

@ -155,7 +155,7 @@ const EditView = ({
<Container className="container-fluid">
<Header />
<div className="row" style={{ paddingTop: 3 }}>
<div className="col-md-12 col-lg-9">
<div className="col-md-12 col-lg-9" style={{ marginBottom: 13 }}>
{formattedContentTypeLayout.map((block, blockIndex) => {
if (isDynamicZone(block)) {
const {

View File

@ -9,6 +9,8 @@
"components.DraggableAttr.edit": "Click to edit",
"components.DynamicZone.add-compo": "Add a component to {componentName}",
"components.DynamicZone.pick-compo": "Pick one component",
"components.DynamicZone.missing.singular": "There is {count} missing component",
"components.DynamicZone.missing.plural": "There is {count} missing components",
"components.EmptyAttributesBlock.button": "Go to settings page",
"components.EmptyAttributesBlock.description": "You can change your settings",
"components.FieldItem.linkToComponentLayout": "Set the component's layout",
@ -89,6 +91,8 @@
"containers.SettingPage.layout": "Layout",
"containers.SettingPage.view": "View",
"containers.EditView.add.new": "ADD NEW ENTRY",
"containers.EditView.components.missing.singular": "There is {count} missing component",
"containers.EditView.components.missing.plural": "There is {count} missing components",
"containers.SettingViewModel.pluginHeader.title": "Content Manager - {name}",
"containers.SettingsPage.Block.contentType.description": "Configure the specific settings",
"containers.SettingsPage.Block.contentType.title": "Content Types",

View File

@ -9,6 +9,8 @@
"components.DraggableAttr.edit": "Cliquez pour modifier",
"components.DynamicZone.add-compo": "Ajouter un composant à {componentName}",
"components.DynamicZone.pick-compo": "Choisir un composant",
"components.DynamicZone.missing.singular": "{count} composant manquant",
"components.DynamicZone.missing.plural": "{count} composants manquants",
"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",
@ -55,6 +57,8 @@
"containers.Edit.seeDetails": "Détails",
"containers.Edit.submit": "Valider",
"containers.EditView.add.new": "AJOUTER UNE ENTREE",
"containers.EditView.components.missing.singular": "{count} composants manquant",
"containers.EditView.components.missing.plural": "{count} composants manquants",
"containers.EditView.notification.errors": "Le formulaire contient des erreurs",
"containers.Edit.Link.Layout": "Paramétrer la vue",
"containers.Edit.Link.Fields": "Éditer le modèle",

View File

@ -752,14 +752,14 @@
lodash "^4.17.13"
to-fast-properties "^2.0.0"
"@buffetjs/core@1.0.6", "@buffetjs/core@^1.0.6":
version "1.0.6"
resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-1.0.6.tgz#0694649d7c68c1a0ce0e5c8acfad725ba4074802"
integrity sha512-zsQaoBHADF31KmCRoTgpSdt4n8cZyQoWlPeoifuaN9QH+lPlGkdDu/P+wwLtFlJBxDL3D6+R9DkVBgLVMDTa+A==
"@buffetjs/core@1.1.0", "@buffetjs/core@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@buffetjs/core/-/core-1.1.0.tgz#45de63b02bbe1e12973a18dbaa52199c86754435"
integrity sha512-K/6s+U45ypPPFkm8TVv9VOxe/YwGevMIJy7EUDbSprOx00LN4TQszKSVlcJw/dVGCLSiCNmTEbAT5HStE1I6SA==
dependencies:
"@buffetjs/icons" "1.0.6"
"@buffetjs/styles" "1.0.5"
"@buffetjs/utils" "1.0.5"
"@buffetjs/icons" "1.1.0"
"@buffetjs/styles" "1.1.0"
"@buffetjs/utils" "1.1.0"
"@fortawesome/fontawesome-svg-core" "^1.2.25"
"@fortawesome/free-regular-svg-icons" "^5.11.2"
"@fortawesome/free-solid-svg-icons" "^5.11.2"
@ -770,26 +770,26 @@
react-dates "^21.1.0"
react-moment-proptypes "^1.7.0"
"@buffetjs/custom@^1.0.6":
version "1.0.6"
resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-1.0.6.tgz#654e1b6155f486691c65d8025c6be362e3e9074b"
integrity sha512-Sped1k47KCS8o7R4d14N4ujut/umqbUi+jERHHA0cocjD5bpfSbCVakmmL36HGZhXo5kBaHUVfKxMx3uEjwZaA==
"@buffetjs/custom@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@buffetjs/custom/-/custom-1.1.0.tgz#45de81d90a7aa4d0d7d8cd3b4acabb7836f0b692"
integrity sha512-2WlyTRKUQHZeY/zxfXtF9HrHY7zca1ZvgcwcnfSdRJJqEAMd44GtvzgBZO2aHcrdrm8mRdtzc4/Nm7yCb+ediA==
dependencies:
"@buffetjs/core" "1.0.6"
"@buffetjs/styles" "1.0.5"
"@buffetjs/utils" "1.0.5"
"@buffetjs/core" "1.1.0"
"@buffetjs/styles" "1.1.0"
"@buffetjs/utils" "1.1.0"
moment "^2.24.0"
react-moment-proptypes "^1.7.0"
"@buffetjs/icons@1.0.6", "@buffetjs/icons@^1.0.6":
version "1.0.6"
resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-1.0.6.tgz#c12ab7516d5ed619046dcdf1d34fbc0feb1b5fef"
integrity sha512-Te31jtNuOXFvMkVnuPqAZmL20RXwJUu07rdM8kQ0ejnfWK3xX/lAzdBnZp9iLt4YKhmKUX1rvLqLEp1dQ1wl3w==
"@buffetjs/icons@1.1.0", "@buffetjs/icons@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@buffetjs/icons/-/icons-1.1.0.tgz#2934c10b512dd41c66759694ae18c53cdf7403b0"
integrity sha512-vsUz7p0xZYGrgcNtWw4970Y+mA0A818PN1/V1ihk+CdR0aEqNfj7uLlzmBQK/ptBCxhudDIoTM+16gzKRm6mpQ==
"@buffetjs/styles@1.0.5", "@buffetjs/styles@^1.0.5":
version "1.0.5"
resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-1.0.5.tgz#b641cfea65a82e80fec8852d2817eceb82b6f0d6"
integrity sha512-R2Kpdd9LbCWeA7O8hB7ziH4215Mai6uiAOK/dyuf+yTuLcCDppfi87nwO8JsDGOqlPEbdqCvDRcLPJkf9PA1yA==
"@buffetjs/styles@1.1.0", "@buffetjs/styles@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@buffetjs/styles/-/styles-1.1.0.tgz#e5bd3b1bdf2c72b6a6734d902a5723bc4cd0d734"
integrity sha512-zs9uWEOxJQmW/lPUuYRO96I/4oY3C8UHvcjiIkJUEa/C4fC+IhiNVnlljS2/rp+7MxbH6F+EX2xd6U0r3QJykg==
dependencies:
"@fortawesome/fontawesome-svg-core" "^1.2.22"
"@fortawesome/free-regular-svg-icons" "^5.10.2"
@ -797,10 +797,10 @@
"@fortawesome/react-fontawesome" "^0.1.4"
react-dates "^21.1.0"
"@buffetjs/utils@1.0.5", "@buffetjs/utils@^1.0.5":
version "1.0.5"
resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-1.0.5.tgz#49781ea85edd113613b9b83ffee0a0c975948ed8"
integrity sha512-fckg0UwjkmfJkY4hugOQXu7oNwz68SR+tPvKP58GkAMBG/zaxSf9mw9OYh88X3hKCSkYLu4Q+1CwHy8kdE9POQ==
"@buffetjs/utils@1.1.0", "@buffetjs/utils@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@buffetjs/utils/-/utils-1.1.0.tgz#04a7abb81256506ecd32e255c5ab0a199560bbbd"
integrity sha512-mm84s2DuaGGwNfxjR7UhLs3qAEY5dnmAFGl5FMoBcflPN7wRwthR//2rbZsOjyXhnW1J2foamYtxgzA3gqI3Ng==
dependencies:
yup "^0.27.0"
@ -812,16 +812,6 @@
exec-sh "^0.3.2"
minimist "^1.2.0"
"@comparaonline/react-intl-hooks@^0.0.1-alpha.6":
version "0.0.1-alpha.6"
resolved "https://registry.yarnpkg.com/@comparaonline/react-intl-hooks/-/react-intl-hooks-0.0.1-alpha.6.tgz#489ee8c60683f4ab3ccbbdd2ab82a24e1c60dbba"
integrity sha512-/5qUmN5fG9uIkHQcJl6YfbLIdGHseA0rAcfEnbN5OAU2H78aOs/+hpQQc19CY8aZwthxw87455nGMswrzWnQ3Q==
dependencies:
"@types/react" "^16.0.0"
"@types/react-intl" "^2.3.17"
prop-types "^15.7.2"
tslib "^1.9.0"
"@cypress/listr-verbose-renderer@0.4.1":
version "0.4.1"
resolved "https://registry.yarnpkg.com/@cypress/listr-verbose-renderer/-/listr-verbose-renderer-0.4.1.tgz#a77492f4b11dcc7c446a34b3e28721afd33c642a"
@ -2693,11 +2683,6 @@
dependencies:
"@types/react" "*"
"@types/react-intl@^2.3.17":
version "2.3.18"
resolved "https://registry.yarnpkg.com/@types/react-intl/-/react-intl-2.3.18.tgz#fd2d8b7f4d0a1dd05b5f1784ab0d7fe1786a690d"
integrity sha512-DVNJs49zUxKRZng8VuILE886Yihdsf3yLr5vHk9zJrmF8SyRSK3sxNSvikAKxNkv9hX55XBTJShz6CkJnbNjgg==
"@types/react-test-renderer@*":
version "16.9.0"
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.9.0.tgz#d60f530ecf4c906721511603cca711b4fa830d41"
@ -2713,14 +2698,6 @@
"@types/prop-types" "*"
csstype "^2.2.0"
"@types/react@^16.0.0":
version "16.9.11"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.11.tgz#70e0b7ad79058a7842f25ccf2999807076ada120"
integrity sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==
dependencies:
"@types/prop-types" "*"
csstype "^2.2.0"
"@types/request@^2.0.3", "@types/request@^2.48.1":
version "2.48.3"
resolved "https://registry.yarnpkg.com/@types/request/-/request-2.48.3.tgz#970b8ed2317568c390361d29c555a95e74bd6135"