mirror of
https://github.com/strapi/strapi.git
synced 2025-11-01 10:23:34 +00:00
Some UI fixes
This commit is contained in:
parent
3330cdf463
commit
56b93581d8
@ -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
|
||||
|
||||
@ -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(
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -28,7 +28,7 @@ const plugin = {
|
||||
mainComponent: Comp,
|
||||
name: pluginPkg.strapi.name,
|
||||
preventComponentRendering: false,
|
||||
suffixUrl: '/ctm-configurations/models',
|
||||
suffixUrl: () => '/ctm-configurations/models',
|
||||
trads,
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
/>
|
||||
|
||||
@ -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,
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -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(),
|
||||
};
|
||||
|
||||
|
||||
@ -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
|
||||
/>
|
||||
|
||||
@ -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
|
||||
/>
|
||||
|
||||
@ -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,
|
||||
};
|
||||
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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');
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -28,6 +28,7 @@ const plugin = {
|
||||
mainComponent: Comp,
|
||||
name: pluginPkg.strapi.name,
|
||||
preventComponentRendering: false,
|
||||
suffixUrl: () => '/roles',
|
||||
trads,
|
||||
};
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user