Merge branch 'reactify-admin/CustomizePage' into create-custom-css-frontside

# Conflicts:
#	resource/locales/en-US/translation.json
#	resource/locales/ja/translation.json

resource/locales/en-US/translation.json

@@ -649,6 +649,7 @@
   },
 
   "customize_page": {
+    "recommended":"Recommended",
     "Behavior": "Behavior",
     "Layout": "Layout",
     "Function": "Function",
@@ -680,7 +681,21 @@
     "update_layout_success": "Succeeded to update layout",
     "update_behavior_success": "Succeeded to update behavior",
     "update_function_success": "Succeeded to update function",
-    "update_customCss_success": "Succeeded to update customize css"
+    "update_customCss_success": "Succeeded to update customize css",
+    "layout_description":{
+      "growi_title":"Simple and Clear",
+      "growi_text1":"Full screen layout and thin margins/paddings",
+      "growi_text2":"Show and post comments at the bottom of the page",
+      "growi_text3":"Affix Table-of-contents",
+      "kibela_title":"Easy Viewing Structure",
+      "kibela_text1":"Center aligned contents",
+      "kibela_text2":"Show and post comments at the bottom of the page",
+      "kibela_text3":"Affix Table-of-contents",
+      "crowi_title":"Separated Functions",
+      "crowi_text1":"Collapsible Sidebar",
+      "crowi_text2":"Show and post comments in Sidebar",
+      "crowi_text3":"Collapsible Table-of-contents"
+    }
   },
 
   "user_management": {

resource/locales/ja/translation.json

@@ -633,7 +633,8 @@
   },
 
   "customize_page": {
-    "Behavior": "挙動",
+    "recommended":"おすすめ",
+    "Behavior": "動作",
     "Layout": "レイアウト",
     "Function": "機能",
     "function_choose": "機能の有効/無効を選択できます。",
@@ -664,7 +665,21 @@
     "update_layout_success": "レイアウトを更新しました",
     "update_behavior_success": "挙動を更新しました",
     "update_function_success": "機能を更新しました",
-    "update_customCss_success": "カスタムCSSを更新しました"
+    "update_customCss_success": "カスタムCSSを更新しました",
+    "layout_description":{
+      "growi_title":"シンプル・明瞭",
+      "growi_text1":"全画面レイアウトで、余白は少なくなります。",
+      "growi_text2":"コメントはページの下部に表示されます。",
+      "growi_text3":"ページ情報は下部に表示されます。",
+      "kibela_title":"閲覧重視の構造",
+      "kibela_text1":"コンテンツが中心に表示されます。",
+      "kibela_text2":"コメントはページの下部に表示されます。",
+      "kibela_text3":"ページ情報は下部に表示されます。",
+      "crowi_title":"ビュー・コントロールの分離",
+      "crowi_text1":"サイドバーを開くと情報が表示されます。",
+      "crowi_text2":"コメントはサイドバーに表示されます。",
+      "crowi_text3":"ページ情報はサイドバーに表示されます。"
+    }
   },
 
   "user_management": {

src/client/js/components/Admin/Common/AdminDropdownOption.jsx

@@ -7,19 +7,25 @@ class AdminDropdownOption extends React.PureComponent {
   render() {
 
     const menuItem = this.props.options.map((option) => {
-      return <button key={option} className="dropdown-item" type="button" onClick={() => this.props.onChangeValue(option)}>{option}</button>;
+      return (
+        <li key={option} role="presentation" type="button" onClick={() => this.props.onChangeValue(option)}>
+          <a role="menuitem" tabIndex="-1">{option}</a>
+        </li>
+      );
     });
 
     return (
-      <div className="my-0 form-group">
+      <div className="my-0 btn-group">
         <label>{this.props.label}</label>
         <div className="dropdown">
           <button className="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {this.props.selectedValue}
+            <span className="ml-2 caret"></span>
           </button>
-          <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
+          {/* TODO adjust dropdown after BS4 */}
+          <ul className="dropdown-menu" role="menu">
             {menuItem}
-          </div>
+          </ul>
         </div>
         {this.props.children}
       </div>

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

@@ -46,7 +46,7 @@ class CustomizeBehaviorSetting extends React.Component {
         <p className="well">{ t('customize_page.function_choose') }</p>
 
         <div className="form-group row">
-          <div className="col-xs-offset-2 col-xs-8 text-left">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
             <CustomizeFunctionOption
               optionId="isEnabledTimeline"
               label={t('customize_page.Timeline function')}
@@ -63,7 +63,7 @@ class CustomizeBehaviorSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-2 col-xs-8 text-left">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
             <CustomizeFunctionOption
               optionId="isSavedStatesOfTabChanges"
               label={t('customize_page.tab_switch')}
@@ -79,7 +79,7 @@ class CustomizeBehaviorSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-2 col-xs-8 text-left">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
             <CustomizeFunctionOption
               optionId="isEnabledAttachTitleHeader"
               label={t('customize_page.attach_title_header')}
@@ -94,7 +94,7 @@ class CustomizeBehaviorSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-2 col-xs-8 text-left">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
             <AdminDropdownOption
               label={t('customize_page.recent_created__n_draft_num_desc')}
               selectedValue={adminCustomizeContainer.state.currentRecentCreatedLimit}

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

@@ -11,7 +11,7 @@ import CustomizeLayoutOption from './CustomizeLayoutOption';
 class CustomizeLayoutOptions extends React.Component {
 
   render() {
-    const { adminCustomizeContainer } = this.props;
+    const { t, adminCustomizeContainer } = this.props;
 
     return (
       <div className="row">
@@ -20,14 +20,13 @@ class CustomizeLayoutOptions extends React.Component {
             layoutType="crowi-plus"
             isSelected={adminCustomizeContainer.state.currentLayout === 'growi'}
             onSelected={() => adminCustomizeContainer.switchLayoutType('growi')}
-            labelHtml={'GROWI Enhanced Layout <small class="text-success">(Recommended)</small>'}
+            labelHtml={`GROWI Enhanced Layout <small class="text-success">${t('customize_page.recommended')}</small>`}
           >
-            {/* TODO i18n */}
-            <h4>Simple and Clear</h4>
+            <h4>{t('customize_page.layout_description.growi_title')}</h4>
             <ul>
-              <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>
+              <li>{t('customize_page.layout_description.growi_text1')}</li>
+              <li>{t('customize_page.layout_description.growi_text2')}</li>
+              <li>{t('customize_page.layout_description.growi_text3')}</li>
             </ul>
           </CustomizeLayoutOption>
         </div>
@@ -39,12 +38,11 @@ class CustomizeLayoutOptions extends React.Component {
             onSelected={() => adminCustomizeContainer.switchLayoutType('kibela')}
             labelHtml="Kibela Like Layout"
           >
-            {/* TODO i18n */}
-            <h4>Easy Viewing Structure</h4>
+            <h4>{t('customize_page.layout_description.kibela_title')}</h4>
             <ul>
-              <li>Center aligned contents</li>
-              <li>Show and post comments at the bottom of the page</li>
-              <li>Affix Table-of-contents</li>
+              <li>{t('customize_page.layout_description.kibela_text1')}</li>
+              <li>{t('customize_page.layout_description.kibela_text2')}</li>
+              <li>{t('customize_page.layout_description.kibela_text3')}</li>
             </ul>
           </CustomizeLayoutOption>
         </div>
@@ -56,12 +54,11 @@ class CustomizeLayoutOptions extends React.Component {
             onSelected={() => adminCustomizeContainer.switchLayoutType('crowi')}
             labelHtml="Crowi Classic Layout"
           >
-            {/* TODO i18n */}
-            <h4>Separated Functions</h4>
+            <h4>{t('customize_page.layout_description.crowi_title')}</h4>
             <ul>
-              <li>Collapsible Sidebar</li>
-              <li>Show and post comments in Sidebar</li>
-              <li>Collapsible Table-of-contents</li>
+              <li>{t('customize_page.layout_description.crowi_text1')}</li>
+              <li>{t('customize_page.layout_description.crowi_text2')}</li>
+              <li>{t('customize_page.layout_description.crowi_text3')}</li>
             </ul>
           </CustomizeLayoutOption>
         </div>

src/server/routes/apiv3/customize-setting.js

@@ -25,6 +25,7 @@ module.exports = (crowi) => {
 
   const { ApiV3FormValidator } = crowi.middlewares;
 
+  // TODO GW-533 implement accurate validation
   const validator = {
     layoutTheme: [
       body('layoutType').isString(),