+
);
}
diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeader/styles.scss b/packages/strapi-helper-plugin/lib/src/components/PluginHeader/styles.scss
deleted file mode 100644
index a1259bd571..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/PluginHeader/styles.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.pluginHeader {
- margin-bottom: 30px;
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/StyledPluginHeaderActions.js b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/StyledPluginHeaderActions.js
new file mode 100644
index 0000000000..f91d8f0756
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/StyledPluginHeaderActions.js
@@ -0,0 +1,26 @@
+/**
+ *
+ * StyledPluginHeaderActions
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledPluginHeaderActions = styled.div`
+ display: flex;
+ justify-content: flex-end;
+ width: fit-content;
+ max-width: 100%;
+ padding-top: 0.9rem;
+ button {
+ margin-right: 0;
+ margin-left: 1.8rem;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: center;
+ }
+`;
+
+export default StyledPluginHeaderActions;
diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js
index 544638b577..e494c65509 100644
--- a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/index.js
@@ -10,26 +10,20 @@ import { isArray, isFunction } from 'lodash';
import Button from '../Button';
-import styles from './styles.scss';
+import StyledPluginHeaderActions from './StyledPluginHeaderActions';
function PluginHeaderActions({ actions, overrideRendering }) {
let content = '';
if (isArray(actions)) {
- content = actions.map(action => (
-
);
}
if (isFunction(overrideRendering)) {
content = overrideRendering();
}
- return (
-
;
}
PluginHeaderActions.defaultProps = {
@@ -38,14 +32,8 @@ PluginHeaderActions.defaultProps = {
};
PluginHeaderActions.propTypes = {
- actions: PropTypes.oneOfType([
- PropTypes.array,
- PropTypes.bool,
- ]),
- overrideRendering: PropTypes.oneOfType([
- PropTypes.bool,
- PropTypes.func,
- ]),
+ actions: PropTypes.oneOfType([PropTypes.array, PropTypes.bool]),
+ overrideRendering: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
};
export default PluginHeaderActions;
diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/styles.scss b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/styles.scss
deleted file mode 100644
index ccd5d3b6c0..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderActions/styles.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.pluginHeaderActions {
- display: flex;
- justify-content: flex-end;
- margin-top: 9px;
- margin-right: -18px;
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/StyledPluginHeaderTitle.js b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/StyledPluginHeaderTitle.js
new file mode 100644
index 0000000000..8e20aca17e
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/StyledPluginHeaderTitle.js
@@ -0,0 +1,48 @@
+/**
+ *
+ * StyledPluginHeaderTitle
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledPluginHeaderTitle = styled.div`
+ .header-title {
+ position: relative;
+ h1 {
+ position: relative;
+ width: fit-content;
+ max-width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 2.4rem;
+ font-weight: 600;
+ margin-top: 0.7rem;
+ margin-bottom: 1px;
+ text-transform: capitalize;
+ padding-right: 18px;
+ }
+ i {
+ position: absolute;
+ right: 0;
+ top: 0;
+ margin-top: 9px;
+ font-size: 14px;
+ color: rgba(16, 22, 34, 0.35);
+ cursor: pointer;
+ }
+ }
+ .header-subtitle {
+ width: 100%;
+ margin: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-size: 1.3rem;
+ font-weight: 400;
+ color: #787e8f;
+ }
+`;
+
+export default StyledPluginHeaderTitle;
diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/index.js b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/index.js
index 3a1fd1be79..9296dfaf3c 100644
--- a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/index.js
@@ -11,7 +11,7 @@ import { isEmpty, isFunction, isObject } from 'lodash';
import LoadingBar from '../LoadingBar';
-import styles from './styles.scss';
+import StyledPluginHeaderTitle from './StyledPluginHeaderTitle';
function PluginHeaderTitle({
description,
@@ -25,28 +25,26 @@ function PluginHeaderTitle({
const contentDescription = formatData(description);
return (
-
-
-
- {contentTitle}
+
+
+
+ {contentTitle}
+ {icon && (
+
+ )}
- {icon && (
-
- )}
{withDescriptionAnim ? (
) : (
-
- {contentDescription}
-
+ {contentDescription}
)}
-
+
);
}
diff --git a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/styles.scss b/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/styles.scss
deleted file mode 100644
index 204ef8c4ac..0000000000
--- a/packages/strapi-helper-plugin/lib/src/components/PluginHeaderTitle/styles.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.pluginHeaderTitleName {
- font-size: 2.4rem;
- font-weight: 600;
- margin-top: 0.7rem;
- margin-bottom: 1px;
- text-transform: capitalize;
-}
-
-.pluginHeaderTitleDescription {
- font-size: 1.3rem;
- font-weight: 400;
- color: #787E8F;
- margin: 0;
-}
-
-.icon {
- margin-top: 16px;
- margin-left: 3px;
- color: rgba(16,22,34,.35);
- &:hover {
- cursor: pointer;
- }
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/TrashButton/index.js b/packages/strapi-helper-plugin/lib/src/components/TrashButton/index.js
index f01f6243df..feb96a520a 100644
--- a/packages/strapi-helper-plugin/lib/src/components/TrashButton/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/TrashButton/index.js
@@ -43,4 +43,5 @@ const TrashButton = styled.div`
}
}
`;
+
export default TrashButton;
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js
index 7fee0ce634..3d9f0f83bb 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/CustomTable/styledComponents.js
@@ -106,11 +106,7 @@ const Icon = styled.i`
}}
`;
-const Truncate = styled.div`
- // display: table;
- // table-layout: fixed;
- // width: 100%;
-`;
+const Truncate = styled.div``;
const Truncated = styled.p`
overflow-x: hidden;
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/GroupBanner/components.js b/packages/strapi-plugin-content-manager/admin/src/components/GroupBanner/components.js
index 02664b84b7..fc66cf9a32 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/GroupBanner/components.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/GroupBanner/components.js
@@ -73,36 +73,48 @@ const Wrapper = styled(Flex)`
cursor: pointer;
background-color: ${({ hasErrors, isOpen }) => {
- if (hasErrors && isOpen) {
- return '#FFE9E0';
- } else if (isOpen) {
- return '#E6F0FB';
- } else {
- return '#ffffff';
- }
- }}
- ${({ hasErrors, isOpen }) => {
- if (hasErrors) {
- return css`
- color: #f64d0a;
- font-weight: 600;
- `;
- }
-
- if (isOpen) {
- return css`
- color: #007eff;
- font-weight: 600;
- `;
- }
- }}
- button,
- i, img {
- &:active,
- &:focus {
- outline: 0;
+ if (hasErrors && isOpen) {
+ return '#FFE9E0';
+ } else if (isOpen) {
+ return '#E6F0FB';
+ } else {
+ return '#ffffff';
}
+ }};
+
+
+ ${({ hasErrors, isOpen }) => {
+ if (hasErrors) {
+ return css`
+ color: #f64d0a;
+ font-weight: 600;
+ `;
+ }
+ if (isOpen) {
+ return css`
+ color: #007eff;
+ font-weight: 600;
+ `;
+ }
+ }}
+
+ button,
+ i, img {
+ &:active,
+ &:focus {
+ outline: 0;
}
+
+ ${({ isOpen }) => {
+ if (isOpen) {
+ return css`
+ &.trash-icon i {
+ color: #007eff;
+ }
+ `;
+ }
+ }}
+
webkit-font-smoothing: antialiased;
`;
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js
index fe91d9379b..1cc182d63d 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/components.js
@@ -5,7 +5,7 @@ const ListWrapper = styled.div`
max-height: 116px;
> ul {
- margin: 4px -20px 0;
+ margin: 0 -20px 0;
padding: 0 20px !important;
list-style: none !important;
overflow: auto;
@@ -37,14 +37,13 @@ const Li = styled.li`
flex-wrap: nowrap;
align-content: center;
justify-content: space-between;
- height: 27px;
- background-color: transparent !important;
- margin-bottom: 9px;
-
+ height: 18px;
+ margin-top: 9px;
+ &:last-of-type {
+ margin-bottom: 0px;
+ }
&:active {
.dragHandle {
- // cursor: pointer;
-
> span {
background: #aed4fb;
}
@@ -132,7 +131,7 @@ const Li = styled.li`
display: inline-block;
height: 100%;
padding-right: 0px;
- line-height: 27px;
+ line-height: 18px;
text-align: right;
white-space: nowrap;
overflow: hidden;
diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js
index a381f082ad..065aab4f35 100644
--- a/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js
+++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectWrapper/components.js
@@ -5,6 +5,10 @@ const Wrapper = styled.div`
margin-bottom: 27px;
label {
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
font-size: 1.3rem;
font-weight: 500;
}
@@ -94,11 +98,6 @@ const Wrapper = styled.div`
}
}
}
- & + div {
- ul {
- margin-bottom: -4px;
- }
- }
}
`;
diff --git a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
index d9ce3e9543..a8ae120c02 100644
--- a/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
+++ b/packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js
@@ -380,9 +380,7 @@ function EditView({
label: `${pluginId}.containers.Edit.submit`,
type: 'submit',
loader: isSubmitting,
- style: isSubmitting
- ? { marginRight: '18px', flexGrow: 2 }
- : { flexGrow: 2 },
+ style: isSubmitting ? { marginRight: '18px' } : {},
disabled: isSubmitting, // TODO STATE WHEN SUBMITING
},
]}
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BackButton/StyledBackButton.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BackButton/StyledBackButton.js
new file mode 100644
index 0000000000..0ddb863dd9
--- /dev/null
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BackButton/StyledBackButton.js
@@ -0,0 +1,32 @@
+/**
+ *
+ * StyledBackButton
+ *
+ */
+
+import styled from 'styled-components';
+
+const StyledBackButton = styled.div`
+ position: fixed;
+ top: 0;
+ height: 6rem;
+ width: 6.5rem;
+ line-height: 6rem;
+ z-index: 1050;
+ text-align: center;
+ background-color: #ffffff;
+ color: #81848a;
+ border-top: 1px solid #f3f4f4;
+ border-right: 1px solid #f3f4f4;
+ border-left: 1px solid #f3f4f4;
+ cursor: pointer;
+ i {
+ font-size: 1.8rem;
+ font-weight: bolder;
+ }
+ &:hover {
+ background-color: #f3f4f4;
+ }
+`;
+
+export default StyledBackButton;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/BackButton/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/BackButton/index.js
new file mode 100644
index 0000000000..821ba94d15
--- /dev/null
+++ b/packages/strapi-plugin-content-type-builder/admin/src/components/BackButton/index.js
@@ -0,0 +1,24 @@
+/**
+ *
+ * BackButton
+ *
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import StyledBackButton from './StyledBackButton';
+
+function BackButton({ onClick }) {
+ return (
+
+
+
+ );
+}
+
+BackButton.propTypes = {
+ onClick: PropTypes.func.isRequired,
+};
+
+export default BackButton;
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/index.js
index 703893e5ce..3aba6ce7a4 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/index.js
@@ -23,6 +23,8 @@ import GroupPage from '../GroupPage';
import Loader from './Loader';
+import BackButton from '../../components/BackButton';
+
import {
addAttributeRelation,
cancelNewContentType,
@@ -77,6 +79,11 @@ const ROUTES = [
export class App extends React.Component {
// eslint-disable-line react/prefer-stateless-function
+ state = {
+ routerHistory: [],
+ historyCount: 1,
+ };
+
componentDidMount() {
this.props.getData();
}
@@ -86,6 +93,13 @@ export class App extends React.Component {
if (prevProps.shouldRefetchData !== this.props.shouldRefetchData) {
this.props.getData();
}
+ if (prevProps.location !== this.props.location) {
+ if (prevProps.location.pathname !== this.getPathname()) {
+ this.addRouterHistory(prevProps.location.pathname);
+ } else {
+ this.increaseHistoryCount();
+ }
+ }
}
componentWillUnmount() {
@@ -101,8 +115,51 @@ export class App extends React.Component {
);
};
+ addRouterHistory = pathname => {
+ if (this.getLastPathname() !== this.getPathname()) {
+ this.setState(prevState => {
+ return {
+ routerHistory: [...prevState.routerHistory, pathname],
+ historyCount: prevState.historyCount + 1,
+ };
+ });
+ }
+ };
+
+ increaseHistoryCount = () => {
+ this.setState(prevState => {
+ return {
+ routerHistory: [...prevState.routerHistory],
+ historyCount: prevState.historyCount + 1,
+ };
+ });
+ };
+
+ removeRouterHistory = () => {
+ const array = [...this.state.routerHistory];
+ const index = array.length - 1;
+
+ if (index !== -1) {
+ array.splice(index, 1);
+ this.setState(prevState => {
+ return {
+ routerHistory: array,
+ historyCount: prevState.historyCount + 1,
+ };
+ });
+ }
+ };
+
getSearch = () => this.props.location.search;
+ getPathname = () => this.props.location.pathname;
+
+ getLastPathname = () => {
+ const { routerHistory } = this.state;
+
+ return routerHistory[routerHistory.length - 1];
+ };
+
getActionType = () => {
return getQueryParameters(this.getSearch(), 'actionType');
};
@@ -140,6 +197,24 @@ export class App extends React.Component {
getFeatureNameFromSearch = () =>
getQueryParameters(this.getSearch(), `${this.getFeatureType()}Name`);
+ handleGoBack = async () => {
+ const { history } = this.props;
+ const { routerHistory, historyCount } = this.state;
+
+ await this.wait();
+
+ if (routerHistory.length > 0) {
+ history.push(this.getLastPathname());
+ this.removeRouterHistory();
+ } else {
+ history.go(-historyCount);
+ }
+ };
+
+ wait = async () => {
+ return new Promise(resolve => setTimeout(resolve, 200));
+ };
+
isUpdatingTemporaryModel = (modelName = this.getFeatureNameFromSearch()) => {
const { models } = this.props;
@@ -194,7 +269,7 @@ export class App extends React.Component {
createTempGroup,
groups,
history: { push },
- location: { pathname, search },
+ location: { search },
isLoading,
models,
onChangeExistingContentTypeMainInfos,
@@ -227,7 +302,7 @@ export class App extends React.Component {
modifiedData: this.getFormDataForModel(),
onChangeExistingFeatureMainInfos: onChangeExistingContentTypeMainInfos,
onChangeNewFeatureMainInfos: onChangeNewContentTypeMainInfos,
- pathname,
+ pathname: this.getPathname(),
push,
resetExistingFeatureMainInfos: resetExistingContentTypeMainInfos,
resetNewFeatureMainInfos: resetNewContentTypeMainInfos,
@@ -246,7 +321,7 @@ export class App extends React.Component {
modifiedData: this.getFormDataForGroup(),
onChangeExistingFeatureMainInfos: onChangeExistingGroupMainInfos,
onChangeNewFeatureMainInfos: onChangeNewGroupMainInfos,
- pathname,
+ pathname: this.getPathname(),
push,
resetExistingFeatureMainInfos: resetExistingGroupMainInfos,
resetNewFeatureMainInfos: () => {},
@@ -264,6 +339,7 @@ export class App extends React.Component {
}}
>
+
{ROUTES.map(this.renderRoute)}
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/index.js
index 0df284e65d..7b59872774 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/GroupPage/index.js
@@ -17,7 +17,6 @@ import ViewContainer from '../ViewContainer';
import RelationFormGroup from '../RelationFormGroup';
import {
- BackHeader,
Button,
EmptyAttributesBlock,
getQueryParameters,
@@ -316,10 +315,6 @@ export class GroupPage extends React.Component {
this.setState({ attrToDelete: null, showDeleteAttrWarning: false });
};
- handleGoBack = () => {
- this.props.history.goBack();
- };
-
handleSubmit = (shouldContinue = false) => {
const {
addAttributeRelationGroup,
@@ -523,7 +518,6 @@ export class GroupPage extends React.Component {
return (
<>
-
{msg => (
', () => {
});
});
- describe('HandleGoBack', () => {
- it('should go to previous page', () => {
- const { handleGoBack } = shallow().instance();
- handleGoBack();
-
- expect(props.history.goBack).toHaveBeenCalled();
- });
- });
-
describe('toggleDeleteAttrModalWarning', () => {
const wrapper = shallow();
expect(wrapper.state()).toEqual({
diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js
index 2da02a9822..1cd43347f9 100644
--- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js
+++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/index.js
@@ -14,7 +14,6 @@ import { get, isEqual, pickBy } from 'lodash';
import { Prompt } from 'react-router';
import {
- BackHeader,
Button,
EmptyAttributesBlock,
List,
@@ -381,17 +380,16 @@ export class ModelPage extends React.Component {
this.setState({ attrToDelete: null, showDeleteAttrWarning: false });
};
- handleGoBack = () => {
- this.props.history.goBack();
- };
-
handleRedirectToGroup = group => {
+ const {
+ history: { push },
+ } = this.props;
const { source, uid } = group;
const base = `/plugins/${pluginId}/groups/${uid}`;
const to = source ? `${base}&source=${source}` : base;
- this.props.history.push(to);
+ push(to);
};
handleSubmit = (shouldContinue = false) => {
@@ -599,7 +597,6 @@ export class ModelPage extends React.Component {
return (
-
{msg => (
div:not(:first-of-type):not(:last-of-type) {
> div:first-of-type {
padding-bottom: 1rem;
@@ -35,9 +30,16 @@ const StyledViewContainer = styled.div`
.trash-btn-wrapper {
position: relative;
width: 100%;
- padding-top: 3.4rem;
+ padding-top: 3.1rem;
display: flex;
justify-content: flex-end;
+ > div {
+ height: 30px;
+ line-height: 30px;
+ > div {
+ padding: 0 15px;
+ }
+ }
}
}
`;