Merge branch 'reactify-admin/create-layout-setting-frontside' into reactify-admin/create-customize-container

# Conflicts:
#	src/client/js/components/Admin/Customize/CustomizeLayoutForm.jsx
#	src/client/js/components/Admin/Customize/CustomizeLayoutSetting.jsx

src/client/js/components/Admin/Customize/CustomizeLayoutOption.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+import CustomizeGrowiLayout from './layout/CustomizeGrowiLayout';
+import CustomizeKibelaLayout from './layout/CustomizeKibelaLayout';
+import CustomizeCrowiLayout from './layout/CustomizeCrowiLayout';
+
+class CustomizeLayoutOption extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      // TODO GW-477 save setting at customizeContainer
+      currentLayout: 'growi',
+    };
+
+    this.onChangeLayout = this.onChangeLayout.bind(this);
+  }
+
+  onChangeLayout(lauoutName) {
+    this.setState({ currentLayout: lauoutName });
+  }
+
+  render() {
+
+    return (
+      <React.Fragment>
+        <CustomizeGrowiLayout currentLayout={this.state.currentLayout} onChangeLayout={this.onChangeLayout} />
+        <CustomizeKibelaLayout currentLayout={this.state.currentLayout} onChangeLayout={this.onChangeLayout} />
+        <CustomizeCrowiLayout currentLayout={this.state.currentLayout} onChangeLayout={this.onChangeLayout} />
+      </React.Fragment>
+    );
+  }
+
+}
+
+CustomizeLayoutOption.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+};
+
+export default withTranslation()(CustomizeLayoutOption);

src/client/js/components/Admin/Customize/CustomizeLayoutSetting.jsx

@@ -10,7 +10,7 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 import AppContainer from '../../../services/AppContainer';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 
-import CustomizeLayoutForm from './CustomizeLayoutForm';
+import CustomizeLayoutOption from './CustomizeLayoutOption';
 
 const logger = loggerFactory('growi:importer');
 
@@ -34,15 +34,15 @@ class CustomizeLayoutSetting extends React.Component {
     const { t } = this.props;
 
     return (
-      <React.Fragment>
-        <CustomizeLayoutForm />
+      <form>
+        <CustomizeLayoutOption />
         {/* TODO GW-245 create themeForm Component */}
         <div className="form-group my-3">
           <div className="col-xs-offset-4 col-xs-5">
             <div className="btn btn-primary" onClick={this.onClickSubmit}>{ t('Update') }</div>
           </div>
         </div>
-      </React.Fragment>
+      </form>
     );
   }
 

src/client/js/components/Admin/Customize/layout/CustomizeCrowiLayout.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+class CustomizeCrowiLayout extends React.Component {
+
+  render() {
+    return (
+      <div className="col-sm-4">
+        <h4>
+          <div className="radio radio-primary">
+            <input type="radio" id="radioLayoutCrowi" checked={this.props.currentLayout === 'crowi'} onChange={() => this.props.onChangeLayout('crowi')} />
+            <label htmlFor="radioLayoutCrowi">
+                Crowi Classic Layout
+            </label>
+          </div>
+        </h4>
+        <a href="/images/admin/customize/layout-classic.gif" className="ss-container">
+          <img src="/images/admin/customize/layout-classic-thumb.gif" width="240px" />
+        </a>
+        <h4>Separated Functions</h4>
+        <ul>
+          {/* TODO i18n */}
+          <li>Collapsible Sidebar</li>
+          <li>Show and post comments in Sidebar</li>
+          <li>Collapsible Table-of-contents</li>
+        </ul>
+      </div>
+    );
+  }
+
+}
+
+CustomizeCrowiLayout.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  currentLayout: PropTypes.string.isRequired,
+  onChangeLayout: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(CustomizeCrowiLayout);

src/client/js/components/Admin/Customize/layout/CustomizeGrowiLayout.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+class CustomizeGrowiLayout extends React.Component {
+
+  render() {
+    return (
+      <div className="col-sm-4">
+        <h4>
+          <div className="radio radio-primary">
+            <input type="radio" id="radioLayoutGrowi" checked={this.props.currentLayout === 'growi'} onChange={() => this.props.onChangeLayout('growi')} />
+            <label htmlFor="radioLayoutGrowi">
+              GROWI Enhanced Layout <small className="text-success">(Recommended)</small>
+            </label>
+          </div>
+        </h4>
+        <a href="/images/admin/customize/layout-crowi-plus.gif" className="ss-container">
+          <img src="/images/admin/customize/layout-crowi-plus-thumb.gif" width="240px" />
+        </a>
+        <h4>Simple and Clear</h4>
+        <ul>
+          {/* TODO i18n */}
+          <li>Full screen layout and thin margins/paddings</li>
+          <li>Show and post comments at the bottom of the page</li>
+          <li>Affix Table-of-contents</li>
+        </ul>
+      </div>
+    );
+  }
+
+}
+
+CustomizeGrowiLayout.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  currentLayout: PropTypes.string.isRequired,
+  onChangeLayout: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(CustomizeGrowiLayout);

src/client/js/components/Admin/Customize/layout/CustomizeKibelaLayout.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+class CustomizeKibelaLayout extends React.Component {
+
+  render() {
+    return (
+      <div className="col-sm-4">
+        <h4>
+          <div className="radio radio-primary">
+            <input type="radio" id="radioLayoutKibela" checked={this.props.currentLayout === 'kibela'} onChange={() => this.props.onChangeLayout('kibela')} />
+            <label htmlFor="radioLayoutKibela">
+              Kibela Like Layout
+            </label>
+          </div>
+        </h4>
+        <a href="/images/admin/customize/layout-kibela.gif" className="ss-container">
+          <img src="/images/admin/customize/layout-kibela-thumb.gif" width="240px" />
+        </a>
+        <h4>Easy Viewing Structure</h4>
+        <ul>
+          {/* TODO i18n */}
+          <li>Center aligned contents</li>
+          <li>Show and post comments at the bottom of the page</li>
+          <li>Affix Table-of-contents</li>
+        </ul>
+      </div>
+    );
+  }
+
+}
+
+CustomizeKibelaLayout.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
+  currentLayout: PropTypes.string.isRequired,
+  onChangeLayout: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(CustomizeKibelaLayout);