-
-
- {this.props.listTitle}
-
-
- {button}
-
-
+
+
+
+ {this.props.listTitle}
-
-
-
-
- {map(this.props.listItems, (value, key) => {
- // handle custom row displaying
- if (this.props.renderRow) {
- return this.props.renderRow(value, key, styles);
- }
- return (
-
- {key} |
- {value.name} |
-
- );
- })}
-
-
-
+
+ {button}
+
+
+ {map(this.props.listItems, (listItem, key) => {
+ if (this.props.renderRow) {
+ return this.props.renderRow(listItem, key, styles);
+ }
+ return (
+ -
+
+ {map(listItem, (item, index) => (
+
{item}
+ ))}
+
+
+ );
+ })}
+
+
-
-
-
+
+
-
+
-
+
{/* TODO change tthis.toggle => this.props.addLanguage */}
{' '}
-
);
}
@@ -123,6 +116,6 @@ List.propTypes = {
React.PropTypes.bool,
React.PropTypes.func,
]),
-};
+}
export default List;
diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss b/packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss
index 3c8176470f..6295d74ee4 100644
--- a/packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss
+++ b/packages/strapi-plugin-settings-manager/admin/src/components/List/styles.scss
@@ -1,13 +1,14 @@
-.listComponent { /* stylelint-disable */
- margin: 0 3.3rem;
- padding: 2rem 2.8rem 5.8rem 2.8rem;
- border-radius: 0.2rem;
- background-color: #FFFFFF;
- box-shadow: 0 0.2rem 0.4rem 0 #E3E9F3;
+.listContainer { /* stylelint-disable */
+ margin-right: 15px;
}
-.listContainer {
- margin-right: 15px;
+.listSubContainer {
+ margin: 0 3.3rem;
+ padding: 1rem 3rem 5.8rem 3rem;
+ border-radius: 0.2rem;
+ background-color: #FFFFFF;
+ // background-color: red;
+ box-shadow: 0 0.2rem 0.4rem 0 #E3E9F3;
}
.flex {
@@ -23,24 +24,61 @@
font-size: 1.8rem;
font-weight: bold;
line-height: 2.2rem;
+ align-items: flex-start;
}
-.listNoBorder {
- > tbody {
- tr {
- height: 5.4rem;
- font-size: 1.3rem;
- line-height: 1.6rem;
- font-family: Lato;
- &:first-of-type {
- > td, th {
- border-top: none !important;
- }
- }
+.ulContainer {
+ padding-top: .5rem;
+ > ul {
+ list-style: none;
+ padding: 0 2.7rem 0 1rem;
+ > li {
+ margin-bottom: 3.3rem;
}
}
}
+.flexLi {
+ display: flex;
+ justify-content: space-between;
+}
+
+.flexLeft {
+ display: flex;
+ align-items: flex-start;
+}
+
+.marged {
+ margin-left: 1rem;
+}
+
+.flexed {
+ display: flex;
+}
+
+.label {
+ width: 20rem;
+ margin-left: 5.2rem;
+ color: #333740;
+ font-weight: 600;
+ text-transform: capitalize;
+}
+
+.centered {
+ width: 25rem;
+ text-align: right;
+}
+
+.italicText {
+ color: #49515A;
+ font-style: italic;
+}
+
+.normal {
+ color: #1C5DE7;
+ padding-top: 0rem;
+}
+
.primary {
background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
color: white;
@@ -74,7 +112,7 @@
.normal {
color: #1C5DE7;
- padding-top: 0rem;
+ padding-top: 0rem;
}
.lighter {
@@ -86,3 +124,39 @@
font-weight: 600;
text-transform: capitalize;
}
+
+
+.modalPosition {
+ margin-top: 48rem ;
+ margin-left: 31rem;
+ width: 50%!important;
+ max-width: none;
+}
+
+.modalBody {
+ padding: 0;
+ padding-top: .5rem;
+}
+
+.modalFooter {
+ margin-top: 4.5rem;
+ margin-bottom: 3.5rem;
+ padding-left: 3.1rem !important;
+ > input {
+ margin-top: 1.3rem!important;
+ }
+}
+
+.padded {
+ padding-left: 3.1rem;
+ padding-right: 1.5rem;
+}
+
+.mHeader {
+ > h4 {
+ font-family: Lato;
+ font-weight: bold!important;
+ font-size: 1.8rem!important;
+
+ }
+}
diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/OldList/index.js b/packages/strapi-plugin-settings-manager/admin/src/components/OldList/index.js
new file mode 100644
index 0000000000..d6b1fbdc57
--- /dev/null
+++ b/packages/strapi-plugin-settings-manager/admin/src/components/OldList/index.js
@@ -0,0 +1,128 @@
+/**
+*
+* OldList
+* params:
+* -handlei18n: bool
+* used for the buttonComponent to render label with FormattedMessage
+* - listButtonLabel: string
+* - listTitle: string
+* - noListButtonPopUp: bool
+* prevent from displaying the OldList button
+* - renderRow: function
+* overrides the default rendering of the OldList tr (we can pass customs components there)
+* - listItems: array the elements to display
+* - handleListPopButtonSave: func
+*
+*/
+
+import React from 'react';
+import { map } from 'lodash';
+import { FormattedMessage } from 'react-intl';
+import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import ButtonPrimaryHotline from 'components/Button';
+import PopUpForm from 'components/PopUpForm';
+import styles from './styles.scss';
+
+class OldList extends React.Component { // eslint-disable-line react/prefer-stateless-function
+ constructor(props) {
+ super(props);
+ this.state = {
+ modal: false,
+ };
+ }
+
+ toggle = () => {
+ this.setState({ modal: !this.state.modal });
+ }
+
+ handleSubmit = () => {
+ this.setState({ modal: !this.state.modal });
+ this.props.handleListPopUpSubmit();
+ }
+
+ render() {
+ const button = this.props.noListButtonPopUp ? '' :
+
;
+
+ return (
+
+
+
+
+
+
+ {this.props.listTitle}
+
+
+ {button}
+
+
+
+
+
+
+
+ {map(this.props.listItems, (value, key) => {
+ // handle custom row displaying
+ if (this.props.renderRow) {
+ return this.props.renderRow(value, key, styles);
+ }
+ return (
+
+ {key} |
+ {value.name} |
+
+ );
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* TODO change tthis.toggle => this.props.addLanguage */}
+ {' '}
+
+
+
+
+
+
+ );
+ }
+}
+
+OldList.propTypes = {
+ handlei18n: React.PropTypes.bool,
+ handleListPopUpSubmit: React.PropTypes.func,
+ listButtonLabel: React.PropTypes.string,
+ listItems: React.PropTypes.array,
+ listTitle: React.PropTypes.oneOfType([
+ React.PropTypes.string,
+ React.PropTypes.object,
+ ]),
+ noListButtonPopUp: React.PropTypes.bool,
+ renderRow: React.PropTypes.oneOfType([
+ React.PropTypes.bool,
+ React.PropTypes.func,
+ ]),
+};
+
+export default OldList;
diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/OldList/styles.scss b/packages/strapi-plugin-settings-manager/admin/src/components/OldList/styles.scss
new file mode 100644
index 0000000000..3c8176470f
--- /dev/null
+++ b/packages/strapi-plugin-settings-manager/admin/src/components/OldList/styles.scss
@@ -0,0 +1,88 @@
+.listComponent { /* stylelint-disable */
+ margin: 0 3.3rem;
+ padding: 2rem 2.8rem 5.8rem 2.8rem;
+ border-radius: 0.2rem;
+ background-color: #FFFFFF;
+ box-shadow: 0 0.2rem 0.4rem 0 #E3E9F3;
+}
+
+.listContainer {
+ margin-right: 15px;
+}
+
+.flex {
+ display: flex;
+ justify-content: space-between;
+ margin-top: 0.8rem;
+ margin-bottom: 2.5rem;
+}
+
+.titleContainer {
+ color: #333740;
+ font-family: Lato;
+ font-size: 1.8rem;
+ font-weight: bold;
+ line-height: 2.2rem;
+}
+
+.listNoBorder {
+ > tbody {
+ tr {
+ height: 5.4rem;
+ font-size: 1.3rem;
+ line-height: 1.6rem;
+ font-family: Lato;
+ &:first-of-type {
+ > td, th {
+ border-top: none !important;
+ }
+ }
+ }
+ }
+}
+
+.primary {
+ background: linear-gradient(315deg, #0097F6 0%, #005EEA 100%);
+ color: white;
+ width: 15rem;
+}
+
+.secondary {
+ color: #F64D0A;
+ border: 0.1rem solid #F64D0A;
+ margin-left: 1.9rem!important;
+}
+
+.bordered {
+ margin-left: 3rem;
+ margin-right: 3rem;
+ border: 1px solid #F6F6F6;
+}
+
+.noBorder {
+ border: none!important;
+}
+
+.flexStart {
+ justify-content: flex-start!important;
+}
+
+.italicText {
+ color: #49515A;
+ font-style: italic;
+}
+
+.normal {
+ color: #1C5DE7;
+ padding-top: 0rem;
+}
+
+.lighter {
+ color: #333740;
+}
+
+.label {
+ color: #333740;
+ font-weight: 600;
+ text-transform: capitalize;
+}
diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/OldList/tests/index.test.js b/packages/strapi-plugin-settings-manager/admin/src/components/OldList/tests/index.test.js
new file mode 100644
index 0000000000..778b1e13c0
--- /dev/null
+++ b/packages/strapi-plugin-settings-manager/admin/src/components/OldList/tests/index.test.js
@@ -0,0 +1,11 @@
+// import OldList from '../index';
+
+import expect from 'expect';
+// import { shallow } from 'enzyme';
+// import React from 'react';
+
+describe('
', () => {
+ it('Expect to have unit tests specified', () => {
+ expect(true).toEqual(false);
+ });
+});
diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/PluginLeftMenuLink/styles.scss b/packages/strapi-plugin-settings-manager/admin/src/components/PluginLeftMenuLink/styles.scss
index 1b719fb893..610c369f3e 100644
--- a/packages/strapi-plugin-settings-manager/admin/src/components/PluginLeftMenuLink/styles.scss
+++ b/packages/strapi-plugin-settings-manager/admin/src/components/PluginLeftMenuLink/styles.scss
@@ -12,7 +12,7 @@ li:not(:first-child) {
margin-left: 2rem;
margin-right: 2rem;
padding-top: 1rem;
- padding-left: 1rem;
+ padding-left: .6rem;
min-height: 3.4rem;
border-left: 0.4rem solid transparent;
color: #2C3138 !important;
@@ -25,6 +25,7 @@ li:not(:first-child) {
}
.linkActive {
+ height: 3.4rem;
border-radius: 0.2rem;
background-color: #E9EAEB;;
font-weight: bold;
diff --git a/packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/index.js b/packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/index.js
index 016b59df13..725adb5c7f 100644
--- a/packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/index.js
+++ b/packages/strapi-plugin-settings-manager/admin/src/components/WithFormSection/index.js
@@ -18,6 +18,7 @@ import styles from './styles.scss';
const WithFormSection = (InnerComponent) => class extends React.Component {
static propTypes = {
+ checkForNestedForm: React.PropTypes.bool,
handleChange: React.PropTypes.func.isRequired,
section: React.PropTypes.object,
values: React.PropTypes.object,
@@ -46,22 +47,24 @@ const WithFormSection = (InnerComponent) => class extends React.Component {
componentDidMount() {
// check if there is inside a section an input that requires nested input to display it on the entire line
- forEach(this.props.section.items, (items) => {
- forEach(items, (item) => {
- forEach(item, (input) => {
+ if (this.props.checkForNestedForm) {
+ forEach(this.props.section.items, (items) => {
+ forEach(items, (item) => {
+ forEach(item, (input) => {
- if (has(input, 'items')) {
- // store the name of the input that has a nested form
- this.setState({ hasNestedInput: true, inputWithNestedForm: input.name });
+ if (has(input, 'items')) {
+ // store the name of the input that has a nested form
+ this.setState({ hasNestedInput: true, inputWithNestedForm: input.name });
- // showNestedForm if the selected input has a nested form
- if (items.value === input.value) {
- this.setState({ showNestedForm: true });
+ // showNestedForm if the selected input has a nested form
+ if (items.value === input.value) {
+ this.setState({ showNestedForm: true });
+ }
}
- }
+ });
});
});
- });
+ }
}
renderInput = (props, key) => {
@@ -86,7 +89,6 @@ const WithFormSection = (InnerComponent) => class extends React.Component {
// custom handle change props for nested input form
const handleChange = this.state.hasNestedInput ? this.handleChange : this.props.handleChange;
-
return (
label {
text-transform: capitalize;
}
@@ -9,12 +9,13 @@
color: #ABAFBB;
}
> input {
- margin-bottom: 1.3rem;
+ margin-top: 2px;
+ margin-bottom: 1.4rem;
}
}
.inputText { /* stylelint-disable */
- margin-top: 1.8rem;
+ margin-top: 1.5rem;
> label {
text-transform: capitalize;
}
@@ -24,6 +25,7 @@
color: #ABAFBB;
}
> input {
- margin-bottom: 1.3rem;
+ margin-top: 2px;
+ margin-bottom: 1.4rem;
}
}
diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/App/styles.scss b/packages/strapi-plugin-settings-manager/admin/src/containers/App/styles.scss
index 592779c9b7..a03c8f6c79 100644
--- a/packages/strapi-plugin-settings-manager/admin/src/containers/App/styles.scss
+++ b/packages/strapi-plugin-settings-manager/admin/src/containers/App/styles.scss
@@ -10,7 +10,7 @@
position: absolute;
top:0; left:0;
width: 100%;
-
+
min-height: calc(100vh - 6rem); // TODO should be variable
background: url('../../assets/images/baseline-18.png');
pointer-events: none;
diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/Home/config.json b/packages/strapi-plugin-settings-manager/admin/src/containers/Home/config.json
index 1277413b15..a508970df9 100644
--- a/packages/strapi-plugin-settings-manager/admin/src/containers/Home/config.json
+++ b/packages/strapi-plugin-settings-manager/admin/src/containers/Home/config.json
@@ -1,6 +1,6 @@
{
"customComponents": {
- "editForm": ["general"],
+ "editForm": ["general", "advanced"],
"list": ["languages"]
}
}
diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/Home/index.js b/packages/strapi-plugin-settings-manager/admin/src/containers/Home/index.js
index 5aeec380e0..44fb95ebe3 100644
--- a/packages/strapi-plugin-settings-manager/admin/src/containers/Home/index.js
+++ b/packages/strapi-plugin-settings-manager/admin/src/containers/Home/index.js
@@ -164,7 +164,7 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
}
// custom Row rendering for the component List with params slug === languages
- renderRowLanguage = (props, key, rowStyles) => {
+ renderRowLanguage = (props, key, liStyles) => {
// assign the target id the language name to prepare for delete
const deleteIcon = props.active ? '' :
; // eslint-disable-line jsx-a11y/no-static-element-interactions
// retrieve language name from i18n translation
@@ -173,27 +173,31 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
const languageDisplay = isObject(languageObject) ?
: '';
const languageLabel = props.active ?
-
+
:
// set the span's id with the language name to retrieve it
{(message) => (
- ;
return (
-
- {key} |
- {languageDisplay} |
- {props.name} |
- {languageLabel} |
- {deleteIcon} |
-
- );
+
+
+
+
{key}
+
{languageDisplay}
+
+
{props.name}
+
{languageLabel}
+
{deleteIcon}
+
+
+ )
}
renderListTitle = () => {
@@ -232,6 +236,9 @@ export class Home extends React.Component { // eslint-disable-line react/prefer-
// custom rendering for PopUpForm
const renderPopUpForm = this.props.params.slug === 'languages' ? this.renderPopUpFormLanguage : false;
+ // TODO remove temporary condition to handle nestedForm rendering
+ const checkForNestedForm = this.props.params.slug !== 'languages'
+
return (
);
}
diff --git a/packages/strapi-plugin-settings-manager/admin/src/containers/Home/styles.scss b/packages/strapi-plugin-settings-manager/admin/src/containers/Home/styles.scss
index 797b07ec2c..b9427e291c 100644
--- a/packages/strapi-plugin-settings-manager/admin/src/containers/Home/styles.scss
+++ b/packages/strapi-plugin-settings-manager/admin/src/containers/Home/styles.scss
@@ -4,7 +4,7 @@
padding: 0;
}
.baseline {
- // display: none;
+ display: none;
z-index: 100001;
opacity: .2;
position: absolute;