From c7ded6ab7b2e1bff5a6869bb0f26dcb5521f92d0 Mon Sep 17 00:00:00 2001 From: cyril lopez Date: Fri, 18 Aug 2017 11:17:26 +0200 Subject: [PATCH] Created Empty attributes view --- .../images/background-empty-attributes.svg | 54 +++++++++++++++++++ .../src/components/ContentHeader/index.js | 29 +++++++++- .../src/components/ContentHeader/styles.scss | 24 ++++++++- .../components/EmptyAttributesView/index.js | 42 +++++++++++++++ .../EmptyAttributesView/styles.scss | 33 ++++++++++++ .../EmptyAttributesView/tests/index.test.js | 11 ++++ .../admin/src/components/List/index.js | 20 +++++++ .../admin/src/components/List/styles.scss | 3 ++ .../src/components/List/tests/index.test.js | 11 ++++ .../src/components/TableList/styles.scss | 1 + .../admin/src/containers/App/actions.js | 4 +- .../admin/src/containers/ModelPage/index.js | 26 +++++++++ .../admin/src/containers/ModelPage/reducer.js | 2 +- .../src/containers/ModelPage/styles.scss | 7 ++- .../admin/src/translations/en.json | 5 ++ .../admin/src/translations/fr.json | 4 ++ 16 files changed, 271 insertions(+), 5 deletions(-) create mode 100644 packages/strapi-plugin-content-type-builder/admin/src/assets/images/background-empty-attributes.svg create mode 100644 packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/index.js create mode 100644 packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/styles.scss create mode 100644 packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/tests/index.test.js create mode 100644 packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js create mode 100644 packages/strapi-plugin-content-type-builder/admin/src/components/List/styles.scss create mode 100644 packages/strapi-plugin-content-type-builder/admin/src/components/List/tests/index.test.js diff --git a/packages/strapi-plugin-content-type-builder/admin/src/assets/images/background-empty-attributes.svg b/packages/strapi-plugin-content-type-builder/admin/src/assets/images/background-empty-attributes.svg new file mode 100644 index 0000000000..a1a577d605 --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/assets/images/background-empty-attributes.svg @@ -0,0 +1,54 @@ + + + + Group + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/index.js index b89d4ba644..6c9ff2362c 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/index.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/index.js @@ -1,16 +1,41 @@ import React from 'react'; +import { isEmpty, startCase } from 'lodash'; import { FormattedMessage } from 'react-intl'; import styles from './styles.scss'; +/* eslint-disable jsx-a11y/no-static-element-interactions */ class ContentHeader extends React.Component { // eslint-disable-line react/prefer-stateless-function + edit = () => { + console.log('edit'); + } + + renderContentHeader = () => { + const containerClass = this.props.noMargin ? styles.contentHeaderNoMargin : styles.contentHeader; + const editIcon = this.props.editIcon ? + + : ''; + return ( +
+
+ {startCase(this.props.name)} + {editIcon} +
+
{this.props.description}
+
+ ); + } + render() { const containerClass = this.props.noMargin ? styles.contentHeaderNoMargin : styles.contentHeader; + const description = isEmpty(this.props.description) ? '' : ; + + if (this.props.noI18n) return this.renderContentHeader(); return (
-
+
{description}
); } @@ -18,7 +43,9 @@ class ContentHeader extends React.Component { // eslint-disable-line react/prefe ContentHeader.propTypes = { description: React.PropTypes.string, + editIcon: React.PropTypes.bool, name: React.PropTypes.string, + noI18n: React.PropTypes.bool, noMargin: React.PropTypes.bool, }; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/styles.scss b/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/styles.scss index 110873b840..486010ec7e 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/styles.scss +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/ContentHeader/styles.scss @@ -1,6 +1,6 @@ .contentHeader { /* stylelint-disable */ position: relative; - margin: 2.4rem 4rem 3.3rem 4rem; + margin: 2.4rem 0rem 3.3rem 0rem; font-family: Lato; } @@ -16,6 +16,13 @@ font-size: 2.4rem; line-height: 2.9rem; font-weight: 600; + > i { + margin-top: 1.2rem; + margin-left: 1rem; + font-size: 1.2rem; + color: rgba(16,22,34,0.35); + cursor: pointer; + } } .subTitle { @@ -24,3 +31,18 @@ font-size: 1.3rem; line-height: 1.5rem; } + +.flex { + display: flex; + flex-direction: row; +} + +.icoContainer { + // padding-top: .3rem; + font-size: 1.2rem; + color: rgba(16,22,34,0.35);; + > i { + margin-left: 1rem; + } + // color: #101622; +} diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/index.js new file mode 100644 index 0000000000..0b59f7fc76 --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/index.js @@ -0,0 +1,42 @@ +/** +* +* EmptyAttributesView +* +*/ + +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import Button from 'components/Button'; +import styles from './styles.scss'; + +class EmptyAttributesView extends React.Component { // eslint-disable-line react/prefer-stateless-function + render() { + return ( +
+
+ + {(title) =>
{title}
} + + + {(description) =>
{description}
} + +
+
+
+
+ ); + } +} + +EmptyAttributesView.propTypes = { + handleClick: React.PropTypes.func, +}; + +export default EmptyAttributesView; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/styles.scss b/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/styles.scss new file mode 100644 index 0000000000..32d3172217 --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/styles.scss @@ -0,0 +1,33 @@ +.emptyAttributesView { /* stylelint-disable */ + height: 22.1rem; + margin-top: -.1rem; + padding-top: 5.8rem; + background: #FFFFFF; + background-image: url('../../assets/images/background-empty-attributes.svg'); + text-align: center; + font-size: 1.4rem; + font-family: Lato; +} + +.title { + margin-bottom: 1.8rem; + font-size: 1.8rem; + line-height: 1.8rem; + font-weight: bold; +} + +.description { + color: #333740; +} + +.buttonContainer { + margin-top: 4.6rem; + > button { + padding-left: 1rem; + padding-right: 1.5rem; + font-size: 1.3rem; + > i { + margin-right: 1rem!important; + } + } +} diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/tests/index.test.js b/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/tests/index.test.js new file mode 100644 index 0000000000..7f390b5ffa --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/EmptyAttributesView/tests/index.test.js @@ -0,0 +1,11 @@ +// import EmptyAttributesView 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-content-type-builder/admin/src/components/List/index.js b/packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js new file mode 100644 index 0000000000..ca385d0182 --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/List/index.js @@ -0,0 +1,20 @@ +/** +* +* List +* +*/ + +import React from 'react'; + +import styles from './styles.scss'; + +class List extends React.Component { // eslint-disable-line react/prefer-stateless-function + render() { + return ( +
+
+ ); + } +} + +export default List; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/List/styles.scss b/packages/strapi-plugin-content-type-builder/admin/src/components/List/styles.scss new file mode 100644 index 0000000000..576bdb6699 --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/List/styles.scss @@ -0,0 +1,3 @@ +.list { /* stylelint-disable */ + +} diff --git a/packages/strapi-plugin-content-type-builder/admin/src/components/List/tests/index.test.js b/packages/strapi-plugin-content-type-builder/admin/src/components/List/tests/index.test.js new file mode 100644 index 0000000000..19b23af6fd --- /dev/null +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/List/tests/index.test.js @@ -0,0 +1,11 @@ +// import List 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-content-type-builder/admin/src/components/TableList/styles.scss b/packages/strapi-plugin-content-type-builder/admin/src/components/TableList/styles.scss index 7863ac404c..ccc31f96b2 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/components/TableList/styles.scss +++ b/packages/strapi-plugin-content-type-builder/admin/src/components/TableList/styles.scss @@ -33,6 +33,7 @@ background-color: #F3F3F4; } > li:not(:first-child) { + margin-top: 0!important; position: relative; height: 5.4rem; line-height: 5.4rem; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js index 9a608e3630..0b33f35314 100755 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/App/actions.js @@ -17,7 +17,9 @@ export function modelsFetchSucceeded(data) { const sections = []; forEach(data.models, (model) => { - sections.push({icon: model.icon, name: model.name}); + // TODO uncomment if we use icon from the API + // sections.push({icon: model.icon, name: model.name}); + sections.push({icon: 'fa-caret-square-o-right', name: model.name}); }); sections.push({ icon: 'fa-plus', name: 'button.contentType.add' }) 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 5fbd229c06..4e00db3acb 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 @@ -12,6 +12,8 @@ import { bindActionCreators } from 'redux'; // Global selectors import { makeSelectMenu } from 'containers/App/selectors'; +import ContentHeader from 'components/ContentHeader'; +import EmptyAttributesView from 'components/EmptyAttributesView'; import PluginLeftMenu from 'components/PluginLeftMenu'; import { modelFetch } from './actions'; @@ -24,6 +26,16 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr this.props.modelFetch(this.props.params.modelName); } + componentDidUpdate(prevProps) { + if (prevProps.params.modelName !== this.props.params.modelName) { + this.props.modelFetch(this.props.params.modelName); + } + } + + handleClick = () => { + console.log('click'); + } + render() { return (
@@ -32,6 +44,19 @@ export class ModelPage extends React.Component { // eslint-disable-line react/pr +
+
+ + +
+
@@ -56,6 +81,7 @@ function mapDispatchToProps(dispatch) { ModelPage.propTypes = { menu: React.PropTypes.array, modelFetch: React.PropTypes.func, + modelPage: React.PropTypes.object, params: React.PropTypes.object, }; diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js index efca078de4..9056248fae 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/reducer.js @@ -18,7 +18,7 @@ function modelPageReducer(state = initialState, action) { switch (action.type) { case MODEL_FETCH_SUCCEEDED: return state - .set('model', Map(action.model)); + .set('model', Map(action.model.model)); default: return state; } diff --git a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/styles.scss b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/styles.scss index 202d16841d..6508df5ab4 100644 --- a/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/styles.scss +++ b/packages/strapi-plugin-content-type-builder/admin/src/containers/ModelPage/styles.scss @@ -1,3 +1,8 @@ .modelPage { /* stylelint-disable */ - + min-height: calc(100vh - 6rem); + background: rgba(14,22,34,0.02); +} + +.componentsContainer { + padding: 0 1.5rem 0 1.5rem; } diff --git a/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json b/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json index 25322db26a..2f531d8f89 100755 --- a/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json +++ b/packages/strapi-plugin-content-type-builder/admin/src/translations/en.json @@ -4,8 +4,13 @@ "home.emptyContentType.title": "There is no Content Type Available", "home.emptyContentType.description": "Create your first Content Type to be able to retrieve data from your API.", + "home.emptyAttributes.title": "There is no fields yet", + "home.emptyAttributes.description": "Add your first field to your new Content Type", + "button.contentType.create": "Create Content Type", "button.contentType.add": "Add Content Type", + "button.attributes.add": "Add New Field", + "menu.section.contentTypeBuilder.name.plural": "Content Types", "menu.section.contentTypeBuilder.name.singular": "Content Type", "menu.section.documentation.name": "Documentation", diff --git a/packages/strapi-plugin-content-type-builder/admin/src/translations/fr.json b/packages/strapi-plugin-content-type-builder/admin/src/translations/fr.json index 57781b473b..488b0d28f5 100755 --- a/packages/strapi-plugin-content-type-builder/admin/src/translations/fr.json +++ b/packages/strapi-plugin-content-type-builder/admin/src/translations/fr.json @@ -4,8 +4,12 @@ "home.emptyContentType.title": "Il n'y a pas de model disponible", "home.emptyContentType.description": "Créez votre premier modèle...", + "home.emptyAttributes.title": "Il n'y a pas encore de champs", + "home.emptyAttributes.description": "Ajoutez votre premier champ a votre modèle", + "button.contentType.create": "Créer un modèle", "button.contentType.add": "Ajouter un modèle", + "button.attributes.add": "Ajouter un champs", "menu.section.contentTypeBuilder.name.plural": "Modèles", "menu.section.contentTypeBuilder.name.singular": "Modèle",