diff --git a/public/app/app.js b/public/app/app.js index 20477d72dc..6cb399a119 100644 --- a/public/app/app.js +++ b/public/app/app.js @@ -53,9 +53,8 @@ const rootRoute = { // import SettingsManagerApp from 'containers/App/index'; // const render = () => ( -// {/**/} -// {/**/} -// {/*}*/} +// {/*{ +
+
+ +
+
+ {this.props.children} +
+
+ + ); + } +} + +Container.propTypes = { + children: React.PropTypes.object, +}; + +export default Container; diff --git a/public/app/components/Container/styles.css b/public/app/components/Container/styles.css new file mode 100644 index 0000000000..0926b13b97 --- /dev/null +++ b/public/app/components/Container/styles.css @@ -0,0 +1,21 @@ +.container { /* stylelint-disable */ + +} + +.containerContent { + position: relative; + border: 1px solid #D7D8D9; + border-radius: 0.4rem; + overflow: hidden; + display: flex; +} + +.containerLeftContent { + padding-left: 0; + padding-right: 0; +} + +.containerRightContent { + background-color: #FFF; + padding: 2.4rem 3rem 50rem; +} \ No newline at end of file diff --git a/public/app/components/Container/tests/index.test.js b/public/app/components/Container/tests/index.test.js new file mode 100644 index 0000000000..8a72c5df33 --- /dev/null +++ b/public/app/components/Container/tests/index.test.js @@ -0,0 +1,11 @@ +// import Container 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(true); + }); +}); diff --git a/public/app/components/LeftMenu/index.js b/public/app/components/LeftMenu/index.js index cd1d4012dd..e83ded71b8 100644 --- a/public/app/components/LeftMenu/index.js +++ b/public/app/components/LeftMenu/index.js @@ -14,24 +14,30 @@ class LeftMenu extends React.Component { // eslint-disable-line react/prefer-sta const links = [{ label: 'General', value: 'general', + to: '', }, { label: 'Languages', value: 'languages', + to: 'languages', }, { label: 'Databases', value: 'databases', + to: 'databases', }, { label: 'Security', value: 'security', + to: 'security', }, { label: 'Server', value: 'server', + to: 'server', }, { label: 'Advanced', value: 'advanced', + to: 'advanced', }]; - const linksElems = links.map((link, i) => ()); + const linksElems = links.map((link, i) => ()); return (
diff --git a/public/app/components/LeftMenuLink/index.js b/public/app/components/LeftMenuLink/index.js index b48b44fc3d..8c7a9de634 100644 --- a/public/app/components/LeftMenuLink/index.js +++ b/public/app/components/LeftMenuLink/index.js @@ -5,13 +5,18 @@ */ import React from 'react'; +import { Link } from 'react-router'; import styles from './styles.css'; class LeftMenuLink extends React.Component { // eslint-disable-line react/prefer-stateless-function render() { return ( -
  • {this.props.label}
  • +
  • + {this.props.link.label} + + +
  • ); } } @@ -19,6 +24,5 @@ class LeftMenuLink extends React.Component { // eslint-disable-line react/prefer export default LeftMenuLink; LeftMenuLink.propTypes = { - label: React.PropTypes.string, - value: React.PropTypes.string, + link: React.PropTypes.object, }; diff --git a/public/app/components/LeftMenuLink/styles.css b/public/app/components/LeftMenuLink/styles.css index cf42db4c6f..af2e973052 100644 --- a/public/app/components/LeftMenuLink/styles.css +++ b/public/app/components/LeftMenuLink/styles.css @@ -4,15 +4,38 @@ .leftMenuLinkDestination { display: block; + position: relative; color: #3B3F49; padding-left: 2rem; + padding-right: 2rem; line-height: 3.6rem; font-size: 1.4rem; border-radius: 2rem; +} - &:hover { - color: white; - text-decoration: none; - background-color: #1C5DE7; - } +.leftMenuLinkDestination:hover { + color: white; + text-decoration: none; + background-color: #1C5DE7; +} + +.leftMenuLinkDestinationActive { + color: white; + text-decoration: none; + background-color: #1C5DE7; +} + +.leftMenuLinkDestinationActive .leftMenuLinkIcon { + display: block; +} + +.leftMenuLinkIcon { + display: none; + float: right; + padding-top: 1.1rem; + z-index: 10; +} + +.leftMenuLinkDestination:hover .leftMenuLinkIcon { + display: block; } \ No newline at end of file diff --git a/public/app/components/RightContentSectionTitle/index.js b/public/app/components/RightContentSectionTitle/index.js new file mode 100644 index 0000000000..e5834d2798 --- /dev/null +++ b/public/app/components/RightContentSectionTitle/index.js @@ -0,0 +1,27 @@ +/** +* +* RightContentSectionTitle +* +*/ + +import React from 'react'; + +import styles from './styles.css'; + +class RightContentSectionTitle extends React.Component { // eslint-disable-line react/prefer-stateless-function + render() { + return ( +
    +

    {this.props.title}

    +

    {this.props.description}

    +
    + ); + } +} + +RightContentSectionTitle.propTypes = { + title: React.PropTypes.string, + description: React.PropTypes.string, +}; + +export default RightContentSectionTitle; diff --git a/public/app/components/RightContentSectionTitle/styles.css b/public/app/components/RightContentSectionTitle/styles.css new file mode 100644 index 0000000000..3d8a94d7e4 --- /dev/null +++ b/public/app/components/RightContentSectionTitle/styles.css @@ -0,0 +1,11 @@ +.rightContentSectionTitle { /* stylelint-disable */ + text-transform: uppercase; + font-size: 1.4rem; + margin-top: 2.6rem; +} + +.rightContentSectionSubTitle { + color: #8B91A0; + font-size: 1.2rem; + margin-bottom: 1.2rem; +} \ No newline at end of file diff --git a/public/app/components/RightContentSectionTitle/tests/index.test.js b/public/app/components/RightContentSectionTitle/tests/index.test.js new file mode 100644 index 0000000000..0e688a2762 --- /dev/null +++ b/public/app/components/RightContentSectionTitle/tests/index.test.js @@ -0,0 +1,11 @@ +// import RightContentSectionTitle 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(true); + }); +}); diff --git a/public/app/components/RightContentTitle/index.js b/public/app/components/RightContentTitle/index.js index 9354fe9c90..f7f073d611 100644 --- a/public/app/components/RightContentTitle/index.js +++ b/public/app/components/RightContentTitle/index.js @@ -12,12 +12,17 @@ class RightContentTitle extends React.Component { // eslint-disable-line react/p render() { return (
    -

    General

    -

    Configure your general settings

    +

    {this.props.title}

    +

    {this.props.description}


    ); } } +RightContentTitle.propTypes = { + title: React.PropTypes.string, + description: React.PropTypes.string, +}; + export default RightContentTitle; diff --git a/public/app/containers/AdvancedPage/index.js b/public/app/containers/AdvancedPage/index.js new file mode 100644 index 0000000000..ce67d0510f --- /dev/null +++ b/public/app/containers/AdvancedPage/index.js @@ -0,0 +1,35 @@ +/* + * + * AdvancedPage + * + */ + +import React from 'react'; +import Helmet from 'react-helmet'; +import PluginHeader from 'components/PluginHeader'; +import Container from 'components/Container'; +import RightContentTitle from 'components/RightContentTitle'; +import RightContentSectionTitle from 'components/RightContentSectionTitle'; +import styles from './styles.css'; + +export default class AdvancedPage extends React.Component { // eslint-disable-line react/prefer-stateless-function + render() { + return ( +
    + +
    + + + + + +
    +
    + ); + } +} diff --git a/public/app/containers/AdvancedPage/styles.css b/public/app/containers/AdvancedPage/styles.css new file mode 100644 index 0000000000..20c985a600 --- /dev/null +++ b/public/app/containers/AdvancedPage/styles.css @@ -0,0 +1,3 @@ +.advancedPage { /* stylelint-disable */ + +} diff --git a/public/app/containers/AdvancedPage/tests/index.test.js b/public/app/containers/AdvancedPage/tests/index.test.js new file mode 100644 index 0000000000..e5e855cf3d --- /dev/null +++ b/public/app/containers/AdvancedPage/tests/index.test.js @@ -0,0 +1,11 @@ +// import AdvancedPage 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(true); + }); +}); diff --git a/public/app/containers/DatabasesPage/index.js b/public/app/containers/DatabasesPage/index.js index 8b1b0642b0..bd1ff5bf09 100644 --- a/public/app/containers/DatabasesPage/index.js +++ b/public/app/containers/DatabasesPage/index.js @@ -10,17 +10,31 @@ */ import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import messages from './messages'; +import Helmet from 'react-helmet'; +import PluginHeader from 'components/PluginHeader'; +import Container from 'components/Container'; +import RightContentTitle from 'components/RightContentTitle'; +import RightContentSectionTitle from 'components/RightContentSectionTitle'; +import styles from './styles.css'; export default class DatabasesPage extends React.Component { // eslint-disable-line react/prefer-stateless-function render() { return ( -
    -

    - -

    +
    + +
    + + + + + +
    ); } diff --git a/public/app/containers/DatabasesPage/styles.css b/public/app/containers/DatabasesPage/styles.css new file mode 100644 index 0000000000..828f414de3 --- /dev/null +++ b/public/app/containers/DatabasesPage/styles.css @@ -0,0 +1,3 @@ +.databasesPage { /* stylelint-disable */ + +} diff --git a/public/app/containers/HomePage/index.js b/public/app/containers/HomePage/index.js index a6e8eb2356..db72ecbd51 100644 --- a/public/app/containers/HomePage/index.js +++ b/public/app/containers/HomePage/index.js @@ -11,7 +11,8 @@ import React from 'react'; import PluginHeader from 'components/PluginHeader'; -import LeftMenu from 'components/LeftMenu'; +import RightContentSectionTitle from 'components/RightContentSectionTitle'; +import Container from 'components/Container'; import RightContentTitle from 'components/RightContentTitle'; import styles from './styles.css'; @@ -22,34 +23,28 @@ export default class HomePage extends React.Component { // eslint-disable-line r
    -
    -
    - -
    -
    - -

    Application

    -

    The general settings of your Strapi application.

    -
    - -
    - -
    -
    -
    - -
    - -
    -
    -
    - -
    - -
    + + + +
    + +
    +
    -
    +
    + +
    + +
    +
    +
    + +
    + +
    +
    +
    ); diff --git a/public/app/containers/HomePage/styles.css b/public/app/containers/HomePage/styles.css index b09b180a39..6f8179ed85 100644 --- a/public/app/containers/HomePage/styles.css +++ b/public/app/containers/HomePage/styles.css @@ -4,38 +4,8 @@ * Home container styles */ -.homePage { - display: block; -} +.homePage { /* stylelint-disable */ -.homePageContent { - position: relative; - border: 1px solid #D7D8D9; - border-radius: 0.4rem; - overflow: hidden; - display: flex; -} - -.homePageLeftContent { - padding-left: 0; - padding-right: 0; -} - -.homePageRightContent { - background-color: #FFF; - padding: 2.4rem 3rem 50rem; -} - -.homePageRightContentTitle { - text-transform: uppercase; - font-size: 1.4rem; - margin-top: 2.6rem; -} - -.homePageRightContentSubTitle { - color: #8B91A0; - font-size: 1.2rem; - margin-bottom: 1.2rem; } .homePageRightContentFormGroup { diff --git a/public/app/containers/LanguagesPage/index.js b/public/app/containers/LanguagesPage/index.js new file mode 100644 index 0000000000..f4c12263bd --- /dev/null +++ b/public/app/containers/LanguagesPage/index.js @@ -0,0 +1,35 @@ +/* + * + * LanguagesPage + * + */ + +import React from 'react'; +import Helmet from 'react-helmet'; +import PluginHeader from 'components/PluginHeader'; +import Container from 'components/Container'; +import RightContentTitle from 'components/RightContentTitle'; +import RightContentSectionTitle from 'components/RightContentSectionTitle'; +import styles from './styles.css'; + +export default class LanguagesPage extends React.Component { // eslint-disable-line react/prefer-stateless-function + render() { + return ( +
    + +
    + + + + + +
    +
    + ); + } +} diff --git a/public/app/containers/LanguagesPage/styles.css b/public/app/containers/LanguagesPage/styles.css new file mode 100644 index 0000000000..a4488801f9 --- /dev/null +++ b/public/app/containers/LanguagesPage/styles.css @@ -0,0 +1,3 @@ +.languagesPage { /* stylelint-disable */ + +} diff --git a/public/app/containers/LanguagesPage/tests/index.test.js b/public/app/containers/LanguagesPage/tests/index.test.js new file mode 100644 index 0000000000..6aab659e1e --- /dev/null +++ b/public/app/containers/LanguagesPage/tests/index.test.js @@ -0,0 +1,11 @@ +// import LanguagesPage 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(true); + }); +}); diff --git a/public/app/containers/SecurityPage/index.js b/public/app/containers/SecurityPage/index.js new file mode 100644 index 0000000000..0a3dfdbd47 --- /dev/null +++ b/public/app/containers/SecurityPage/index.js @@ -0,0 +1,35 @@ +/* + * + * SecurityPage + * + */ + +import React from 'react'; +import Helmet from 'react-helmet'; +import PluginHeader from 'components/PluginHeader'; +import Container from 'components/Container'; +import RightContentTitle from 'components/RightContentTitle'; +import RightContentSectionTitle from 'components/RightContentSectionTitle'; +import styles from './styles.css'; + +export default class SecurityPage extends React.Component { // eslint-disable-line react/prefer-stateless-function + render() { + return ( +
    + +
    + + + + + +
    +
    + ); + } +} diff --git a/public/app/containers/SecurityPage/styles.css b/public/app/containers/SecurityPage/styles.css new file mode 100644 index 0000000000..3ffd54fb88 --- /dev/null +++ b/public/app/containers/SecurityPage/styles.css @@ -0,0 +1,3 @@ +.securityPage { /* stylelint-disable */ + +} diff --git a/public/app/containers/SecurityPage/tests/index.test.js b/public/app/containers/SecurityPage/tests/index.test.js new file mode 100644 index 0000000000..6768e94a33 --- /dev/null +++ b/public/app/containers/SecurityPage/tests/index.test.js @@ -0,0 +1,11 @@ +// import SecurityPage 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(true); + }); +}); diff --git a/public/app/containers/ServerPage/index.js b/public/app/containers/ServerPage/index.js new file mode 100644 index 0000000000..3bfcedc912 --- /dev/null +++ b/public/app/containers/ServerPage/index.js @@ -0,0 +1,35 @@ +/* + * + * ServerPage + * + */ + +import React from 'react'; +import Helmet from 'react-helmet'; +import PluginHeader from 'components/PluginHeader'; +import Container from 'components/Container'; +import RightContentTitle from 'components/RightContentTitle'; +import RightContentSectionTitle from 'components/RightContentSectionTitle'; +import styles from './styles.css'; + +export default class ServerPage extends React.Component { // eslint-disable-line react/prefer-stateless-function + render() { + return ( +
    + +
    + + + + + +
    +
    + ); + } +} diff --git a/public/app/containers/ServerPage/styles.css b/public/app/containers/ServerPage/styles.css new file mode 100644 index 0000000000..51ed82e53d --- /dev/null +++ b/public/app/containers/ServerPage/styles.css @@ -0,0 +1,3 @@ +.serverPage { /* stylelint-disable */ + +} diff --git a/public/app/containers/ServerPage/tests/index.test.js b/public/app/containers/ServerPage/tests/index.test.js new file mode 100644 index 0000000000..e53b64cfe0 --- /dev/null +++ b/public/app/containers/ServerPage/tests/index.test.js @@ -0,0 +1,11 @@ +// import ServerPage 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(true); + }); +}); diff --git a/public/app/routes.js b/public/app/routes.js index 56b38b47b7..d153c654df 100644 --- a/public/app/routes.js +++ b/public/app/routes.js @@ -34,6 +34,22 @@ export default function createRoutes(store) { importModules.catch(errorLoading); }, }, { + path: '/languages', + name: 'languages', + getComponent(nextState, cb) { + const importModules = Promise.all([ + System.import('containers/LanguagesPage'), + ]); + + const renderRoute = loadModule(cb); + + importModules.then(([component]) => { + renderRoute(component); + }); + + importModules.catch(errorLoading); + }, + }, { path: '/databases', name: 'databases', getComponent(nextState, cb) { @@ -50,6 +66,54 @@ export default function createRoutes(store) { importModules.catch(errorLoading); }, }, { + path: '/security', + name: 'security', + getComponent(nextState, cb) { + const importModules = Promise.all([ + System.import('containers/SecurityPage'), + ]); + + const renderRoute = loadModule(cb); + + importModules.then(([component]) => { + renderRoute(component); + }); + + importModules.catch(errorLoading); + }, + }, { + path: '/server', + name: 'server', + getComponent(nextState, cb) { + const importModules = Promise.all([ + System.import('containers/ServerPage'), + ]); + + const renderRoute = loadModule(cb); + + importModules.then(([component]) => { + renderRoute(component); + }); + + importModules.catch(errorLoading); + }, + }, { + path: '/advanced', + name: 'advanced', + getComponent(nextState, cb) { + const importModules = Promise.all([ + System.import('containers/AdvancedPage'), + ]); + + const renderRoute = loadModule(cb); + + importModules.then(([component]) => { + renderRoute(component); + }); + + importModules.catch(errorLoading); + }, + }, { path: '*', name: 'notfound', getComponent(nextState, cb) {