Merge branch 'reactify-admin/create-theme-setting-frontside' into create-apiV3-update-layout

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

@@ -38,23 +38,25 @@ class CustomizeLayoutSetting extends React.Component {
   }
 
   renderDevAlert() {
-    return (
-      <div className="alert alert-warning">
-        <strong>DEBUG MESSAGE:</strong> development build では、リアルタイムプレビューが無効になります
-      </div>
-    );
+    if (process.env.NODE_ENV === 'development') {
+      return (
+        <div className="alert alert-warning">
+          <strong>DEBUG MESSAGE:</strong> development build では、リアルタイムプレビューが無効になります
+        </div>
+      );
+    }
   }
 
+
   render() {
     const { t } = this.props;
-    const { NODE_ENV } = this.props.appContainer.config.env;
 
     return (
       <React.Fragment>
         <h2>{t('customize_page.Layout')}</h2>
         <CustomizeLayoutOptions />
         <h2>{ t('customize_page.Theme') }</h2>
-        {NODE_ENV === 'development' && (this.renderDevAlert())}
+        {this.renderDevAlert()}
         <CustomizeThemeOptions />
         <div className="form-group my-3">
           <div className="col-xs-offset-4 col-xs-5">

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 
@@ -8,28 +7,71 @@ import AppContainer from '../../../services/AppContainer';
 import ThemeColorBox from './ThemeColorBox';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
 
-
 class CustomizeThemeOptions extends React.Component {
 
   render() {
+    const { adminCustomizeContainer } = this.props;
+    const { currentLayout, currentTheme } = adminCustomizeContainer.state;
+
+    const lightTheme = [{
+      name: 'default', bg: '#ffffff', topbar: '#334455', theme: '#112744',
+    }, {
+      name: 'nature', bg: '#f9fff3', topbar: '#118050', theme: '#460039',
+    }, {
+      name: 'mono-blue', bg: '#F7FBFD', topbar: '#00587A', theme: '#00587A',
+    }, {
+      name: 'wood', bg: '#fffefb', topbar: '#aaa45f', theme: '#dddebf',
+    }, {
+      name: 'island', bg: '#8ecac0', topbar: '#0c2a44', theme: '#cef2ef',
+    }, {
+      name: 'christmas', bg: '#fffefb', topbar: '#b3000c', theme: '#017e20',
+    }, {
+      name: 'antarctic', bg: '#ffffff', topbar: '#000080', theme: '#99cccc',
+    }];
+
+    const darkTheme = [{
+      name: 'default-dark', bg: '#212731', topbar: '#151515', theme: '#f75b36',
+    }, {
+      name: 'future', bg: '#16282D', topbar: '#011414', theme: '#04B4AE',
+    }, {
+      name: 'blue-night', bg: '#061F2F', topbar: '#27343B', theme: '#0090C8',
+    }, {
+      name: 'halloween', bg: '#030003', topbar: '#cc5d1f', theme: '#e9af2b',
+    }];
+
     return (
-      <div id="themeOptions" className={`${this.props.adminCustomizeContainer.state.currentLayout === 'kibela' && 'disabled'}`}>
+      <div id="themeOptions" className={`${currentLayout === 'kibela' && 'disabled'}`}>
         {/* Light Themes  */}
         <div className="d-flex">
-          <ThemeColorBox name="default" bg="#ffffff" topbar="#334455" theme="#112744" />
-          <ThemeColorBox name="nature" bg="#f9fff3" topbar="#118050" theme="#460039" />
-          <ThemeColorBox name="mono-blue" bg="#F7FBFD" topbar="#00587A" theme="#00587A" />
-          <ThemeColorBox name="wood" bg="#fffefb" topbar="#aaa45f" theme="#dddebf" />
-          <ThemeColorBox name="island" bg="#8ecac0" topbar="#0c2a44" theme="#cef2ef" />
-          <ThemeColorBox name="christmas" bg="#fffefb" topbar="#b3000c" theme="#017e20" />
-          <ThemeColorBox name="antarctic" bg="#ffffff" topbar="#000080" theme="#99cccc" />
+          {lightTheme.map((theme) => {
+            return (
+              <ThemeColorBox
+                key={theme.name}
+                isSelected={currentTheme === theme.name}
+                onSelected={() => adminCustomizeContainer.switchThemeType(theme.name)}
+                name={theme.name}
+                bg={theme.bg}
+                topbar={theme.topbar}
+                theme={theme.theme}
+              />
+            );
+          })}
         </div>
         {/* Dark Themes  */}
         <div className="d-flex mt-3">
-          <ThemeColorBox name="default-dark" bg="#212731" topbar="#151515" theme="#f75b36" />
-          <ThemeColorBox name="future" bg="#16282D" topbar="#011414" theme="#04B4AE" />
-          <ThemeColorBox name="blue-night" bg="#061F2F" topbar="#27343B" theme="#0090C8" />
-          <ThemeColorBox name="halloween" bg="#030003" topbar="#cc5d1f" theme="#e9af2b" />
+          {darkTheme.map((theme) => {
+            return (
+              <ThemeColorBox
+                key={theme.name}
+                isSelected={currentTheme === theme.name}
+                onSelected={() => adminCustomizeContainer.switchThemeType(theme.name)}
+                name={theme.name}
+                bg={theme.bg}
+                topbar={theme.topbar}
+                theme={theme.theme}
+              />
+            );
+          })}
         </div>
       </div>
     );
@@ -42,9 +84,8 @@ const CustomizeThemeOptionsWrapper = (props) => {
 };
 
 CustomizeThemeOptions.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
 };
 
-export default withTranslation()(CustomizeThemeOptionsWrapper);
+export default CustomizeThemeOptionsWrapper;

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

@@ -1,18 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
 
-import { createSubscribedElement } from '../../UnstatedUtils';
 
-import AppContainer from '../../../services/AppContainer';
-import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
-
-
-class ThemeColorBox extends React.Component {
-
-  isThemeSelected(name) {
-    return (this.props.adminCustomizeContainer.state.currentTheme === name);
-  }
+class ThemeColorBox extends React.PureComponent {
 
   render() {
     const { name } = this.props;
@@ -20,8 +10,8 @@ class ThemeColorBox extends React.Component {
     return (
       <div
         id={`theme-option-${name}`}
-        className={`theme-option-container d-flex flex-column align-items-center ${this.isThemeSelected(name) && 'active'}`}
-        onClick={() => this.props.adminCustomizeContainer.switchThemeType(name)}
+        className={`theme-option-container d-flex flex-column align-items-center ${this.props.isSelected && 'active'}`}
+        onClick={this.props.onSelected}
       >
         <a
           className={`m-0 ${name} theme-button`}
@@ -42,19 +32,14 @@ class ThemeColorBox extends React.Component {
 
 }
 
-const ThemeColorBoxWrapper = (props) => {
-  return createSubscribedElement(ThemeColorBox, props, [AppContainer, AdminCustomizeContainer]);
-};
 
 ThemeColorBox.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
-
+  isSelected: PropTypes.bool.isRequired,
+  onSelected: PropTypes.func.isRequired,
   name: PropTypes.string.isRequired,
   bg: PropTypes.string.isRequired,
   topbar: PropTypes.string.isRequired,
   theme: PropTypes.string.isRequired,
 };
 
-export default withTranslation()(ThemeColorBoxWrapper);
+export default ThemeColorBox;

src/server/models/config.js

@@ -185,7 +185,6 @@ module.exports = function(crowi) {
       isSavedStatesOfTabChanges: crowi.configManager.getConfig('crowi', 'customize:isSavedStatesOfTabChanges'),
       hasSlackConfig: crowi.slackNotificationService.hasSlackConfig(),
       env: {
-        NODE_ENV: env.NODE_ENV || 'default',
         PLANTUML_URI: env.PLANTUML_URI || null,
         BLOCKDIAG_URI: env.BLOCKDIAG_URI || null,
         HACKMD_URI: env.HACKMD_URI || null,