Some UI fixes

This commit is contained in:
Virginie Ky 2019-08-26 13:44:04 +02:00
parent 3330cdf463
commit 56b93581d8
18 changed files with 93 additions and 95 deletions

View File

@ -7,7 +7,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { get, snakeCase, isEmpty, map, sortBy, startsWith } from 'lodash';
import { get, snakeCase, isEmpty, map, sortBy } from 'lodash';
import LeftMenuLink from '../LeftMenuLink';
@ -67,13 +67,11 @@ function LeftMenuLinkContainer({ plugins, ...rest }) {
const pluginsLinks = !isEmpty(plugins) ? (
map(sortBy(plugins, 'name'), plugin => {
if (plugin.id !== 'email' && plugin.id !== 'settings-manager') {
const pluginSuffixUrl = startsWith(plugin.suffixUrl, '/')
? plugin.suffixUrl
: `/${plugin.suffixUrl}`;
const pluginSuffixUrl = plugin.suffixUrl
? plugin.suffixUrl(plugins)
: '';
const destination = plugin.suffixUrl
? `/plugins/${get(plugin, 'id')}${pluginSuffixUrl}`
: `/plugins/${get(plugin, 'id')}`;
const destination = `/plugins/${get(plugin, 'id')}${pluginSuffixUrl}`;
return (
<LeftMenuLink

View File

@ -70,7 +70,9 @@ const HomePage = ({ global: { plugins }, history: { push } }) => {
const handleClick = e => {
e.preventDefault();
push('/plugins/content-type-builder/models');
push(
'/plugins/content-type-builder/models/user&source=users-permissions?modalType=model&settingType=base&actionType=create'
);
};
const hasAlreadyCreatedContentTypes =
get(

View File

@ -5,10 +5,12 @@ const Button = styled.div`
height: 37px;
margin-bottom: 27px;
text-align: center;
border: 1px solid #e3e9f3;
border: 1px solid rgba(227, 233, 243, 0.75);
border-top: 1px solid
${({ doesPreviousFieldContainErrorsAndIsClosed }) =>
doesPreviousFieldContainErrorsAndIsClosed ? '#FFA784' : '#e3e9f3'};
doesPreviousFieldContainErrorsAndIsClosed
? '#FFA784'
: 'rgba(227, 233, 243, 0.75)'};
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
@ -44,15 +46,16 @@ const FormWrapper = styled.div`
} else if (isOpen) {
return '#AED4FB';
} else {
return '#e3e9f3';
return 'rgba(227, 233, 243, 0.75)';
}
}};
`;
const EmptyGroup = styled.div`
height: 72px;
border: 1px solid #e3e9f3;
border-radius: 2px;
border: 1px solid rgba(227, 233, 243, 0.75);
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom: 0;
line-height: 73px;
text-align: center;
@ -65,7 +68,7 @@ const P = styled.p`
`;
const NonRepeatableWrapper = styled.div`
margin: 0 10px !important;
margin: 0 15px !important;
padding: 0 20px !important;
${({ isEmpty }) => {
@ -130,7 +133,7 @@ const NonRepeatableWrapper = styled.div`
const ResetGroup = styled.div`
position: absolute;
top: 0;
right: 10px;
right: 15px;
display: flex;
cursor: pointer;

View File

@ -130,7 +130,7 @@ function Group({
) : (
<div
style={{
margin: '0 10px',
margin: '0 15px',
}}
>
{groupValue.length === 0 && (
@ -221,7 +221,7 @@ function Group({
`${pluginId}.components.Group.notification.info.maximum-requirement`
);
}}
withBorderRadius={groupValue.length === 0}
withBorderRadius={false}
>
<i className="fa fa-plus" />
<FormattedMessage

View File

@ -39,15 +39,16 @@ const Wrapper = styled(Flex)`
height: 36px;
padding: 0 10px 0 15px;
justify-content: space-between;
border: 1px solid ${({ hasErrors, isOpen }) => {
if (hasErrors) {
return '#FFA784';
} else if (isOpen) {
return '#AED4FB';
} else {
return '#e3e9f3';
}
}}
border: 1px solid
${({ hasErrors, isOpen }) => {
if (hasErrors) {
return '#FFA784';
} else if (isOpen) {
return '#AED4FB';
} else {
return 'rgba(227, 233, 243, 0.75)';
}
}};
${({ doesPreviousFieldContainErrorsAndIsOpen }) => {
if (doesPreviousFieldContainErrorsAndIsOpen) {
@ -57,8 +58,6 @@ const Wrapper = styled(Flex)`
}
}}
${({ isFirst }) => {
if (isFirst) {
return css`
@ -74,36 +73,31 @@ const Wrapper = styled(Flex)`
cursor: pointer;
background-color: ${({ hasErrors, isOpen }) => {
if (hasErrors && isOpen) {
return '#FFE9E0';
} else if (isOpen) {
return '#E6F0FB';
} else {
return '#ffffff';
}
}}
if (hasErrors && isOpen) {
return '#FFE9E0';
} else if (isOpen) {
return '#E6F0FB';
} else {
return '#ffffff';
}
}}
${({ hasErrors, isOpen }) => {
if (hasErrors) {
return css`
color: #f64d0a;
font-weight: 600;
`;
}
${({ hasErrors, isOpen }) => {
if (hasErrors) {
return css`
color: #f64d0a;
font-weight: 600;
`;
}
if (isOpen) {
return css`
color: #007eff;
font-weight: 600;
`;
}
}}
button,
i,
img {
if (isOpen) {
return css`
color: #007eff;
font-weight: 600;
`;
}
}}
button,
i, img {
&:active,
&:focus {
outline: 0;

View File

@ -28,7 +28,7 @@ const plugin = {
mainComponent: Comp,
name: pluginPkg.strapi.name,
preventComponentRendering: false,
suffixUrl: '/ctm-configurations/models',
suffixUrl: () => '/ctm-configurations/models',
trads,
};

View File

@ -3,7 +3,7 @@
}
.modal {
background-color: white;
background-color: transparent;
max-width: 92rem !important;
margin-left: auto !important;
margin-right: auto !important;
@ -13,6 +13,8 @@
padding-right: 0;
border: none;
border-radius: 2px;
background-color: white;
overflow: hidden;
}
}

View File

@ -302,7 +302,6 @@ class AttributeForm extends React.Component {
attributeToEditName,
attributeType,
featureName,
featureType,
isOpen,
} = this.props;
const { showForm } = this.state;
@ -353,7 +352,7 @@ class AttributeForm extends React.Component {
<FooterModal>
<section>
<ButtonModalPrimary
message={`${pluginId}.form.button.add.${featureType}`}
message={`${pluginId}.form.button.add.field`}
type="submit"
add
/>

View File

@ -475,13 +475,10 @@ export class GroupPage extends React.Component {
const buttonProps = {
kind: 'secondaryHotlineAdd',
label: `${pluginId}.button.attributes.add`,
label: `${pluginId}.button.attributes.add.another`,
onClick: () => this.openAttributesModal(),
style: {
// position: 'absolute',
// top: '1.8rem',
right: '10px',
// outline: 0,
},
};

View File

@ -576,7 +576,7 @@ export class ModelPage extends React.Component {
const buttonProps = {
kind: 'secondaryHotlineAdd',
label: `${pluginId}.button.attributes.add`,
label: `${pluginId}.button.attributes.add.another`,
onClick: () => this.handleClickOpenModalChooseAttributes(),
};

View File

@ -331,7 +331,7 @@ class RelationForm extends React.Component {
<FooterModal>
<section>
<ButtonModalPrimary
message={`${pluginId}.form.button.add`}
message={`${pluginId}.form.button.add.field`}
type="submit"
add
/>

View File

@ -341,7 +341,7 @@ class RelationFormGroup extends React.Component {
<FooterModal>
<section>
<ButtonModalPrimary
message={`${pluginId}.form.button.add`}
message={`${pluginId}.form.button.add.field`}
type="submit"
add
/>

View File

@ -1,4 +1,5 @@
import React from 'react';
import { get } from 'lodash';
import pluginPkg from '../../package.json';
import App from './containers/App';
import Initializer from './containers/Initializer';
@ -41,7 +42,18 @@ const plugin = {
mainComponent: Comp,
name: pluginPkg.strapi.name,
preventComponentRendering: false,
suffixUrl: '/models',
suffixUrl: plugins => {
const { uid, source } = get(
plugins,
['content-manager', 'leftMenuSections', '0', 'links', '0'],
{ uid: '', source: '' }
);
return source !== 'content-manager'
? `/models/${uid}&source=${source}`
: `/models/${uid}`;
},
trads,
};

View File

@ -19,6 +19,7 @@
"attribute.string": "String",
"attribute.text": "Text",
"button.attributes.add": "Add New Field",
"button.attributes.add.another": "Add Another Field",
"button.contentType.add": "Add a Content Type",
"button.group.add": "Add a Group",
"button.models.create": "Create a Content Type",
@ -80,9 +81,7 @@
"form.attribute.item.uniqueField.description": "You won't be able to create an entry if there is an existing entry with identical content",
"form.attribute.settings.default": "Default value",
"form.attribute.settings.default.checkboxLabel": "Set to true",
"form.button.add": "Add Field To Content Type",
"form.button.add.model": "Add Field To Content Type",
"form.button.add.group": "Add Field To Group",
"form.button.add.field": "Add Another Field",
"form.button.cancel": "Cancel",
"form.button.continue": "Continue",
"form.button.done": "Done",

View File

@ -18,6 +18,7 @@
"attribute.string": "Chaîne de caractères",
"attribute.text": "Texte",
"button.attributes.add": "Ajouter un champ",
"button.attributes.add.another": "Ajouter un autre champ",
"button.contentType.add": "Ajouter un Type de Contenu",
"button.group.add": "Ajouter un Groupe",
"button.models.create": "Créer un Type de Contenu",
@ -76,9 +77,7 @@
"form.attribute.item.uniqueField.description": "Vous ne pourrez pas créer une entrée s'il existe un champ similaire",
"form.attribute.settings.default": "Valeur par défault",
"form.attribute.settings.default.checkboxLabel": "Définir à true",
"form.button.add": "Ajouter un nouveau champ",
"form.button.add.model": "Ajouter un nouveau champ à un type de contenu",
"form.button.add.group": "Ajouter un nouveau champ à un group",
"form.button.add.field": "Ajouter un nouveau champ",
"form.button.cancel": "Annuler",
"form.button.continue": "Continuer",
"form.button.save": "Sauvegarder",

View File

@ -17,12 +17,6 @@ import HomePage from '../HomePage';
import NotFoundPage from '../NotFoundPage';
class App extends React.Component {
componentDidMount() {
if (!this.props.location.pathname.split('/')[3]) {
this.props.history.push('/plugins/users-permissions/roles');
}
}
componentDidUpdate() {
if (!this.props.location.pathname.split('/')[3]) {
this.props.history.push('/plugins/users-permissions/roles');

View File

@ -14,14 +14,14 @@ const renderComponent = properties =>
mount(
React.createElement(
props => (
<IntlProvider locale='en' defaultLocale='en' messages={messages}>
<IntlProvider locale="en" defaultLocale="en" messages={messages}>
<Router>
<App {...props} />
</Router>
</IntlProvider>
),
properties,
),
properties
)
);
describe('<App />', () => {
@ -42,14 +42,6 @@ describe('<App />', () => {
shallow(<App {...props} />);
});
it('should redirect the user on mount if the url has two params', () => {
const renderedComponent = renderComponent(props);
expect(props.history.push).toHaveBeenCalledWith('/plugins/users-permissions/roles');
renderedComponent.unmount();
});
it('should not redirect the user on mount if the url more than two params', () => {
const otherProps = Object.assign(props, {
location: { pathname: '/plugins/users-permissions/roles' },
@ -67,9 +59,13 @@ describe('<App />', () => {
});
const renderedComponent = renderComponent(otherProps);
renderedComponent.setProps({ location: { pathname: '/plugins/users-permissions' } });
renderedComponent.setProps({
location: { pathname: '/plugins/users-permissions' },
});
expect(props.history.push).toHaveBeenCalledWith('/plugins/users-permissions/roles');
expect(props.history.push).toHaveBeenCalledWith(
'/plugins/users-permissions/roles'
);
renderedComponent.unmount();
});
@ -80,7 +76,9 @@ describe('<App />', () => {
});
const renderedComponent = renderComponent(otherProps);
renderedComponent.setProps({ location: { pathname: '/plugins/users-permissions/auth/login' } });
renderedComponent.setProps({
location: { pathname: '/plugins/users-permissions/auth/login' },
});
expect(props.history.push).not.toHaveBeenCalled();
renderedComponent.unmount();

View File

@ -28,6 +28,7 @@ const plugin = {
mainComponent: Comp,
name: pluginPkg.strapi.name,
preventComponentRendering: false,
suffixUrl: () => '/roles',
trads,
};