Merge pull request #2816 from weseek/imprv/gw3399-form-adjustment

Imprv/gw3399 form adjustment

resource/locales/en_US/admin/admin.json

@@ -107,8 +107,21 @@
       "tab_switch_desc2": "By invalidating, you can make page transition as the only object for forward/back command of the browser.",
       "attach_title_header": "Add h1 section when create new page automatically",
       "attach_title_header_desc": "Add page path to the first line as h1 section when create new page",
-      "list_num_desc_in_user_page": "Number of user page displayed",
-      "all_list_num_desc_in_user_page": "Number of Bookmarks, recently created pages and drafts displayed on user page",
+
+      "list_num_s": "Number of list displayed on modals",
+      "list_num_desc_s": "Set number of list per page such as 'Pagelist', 'Timeline', 'Page History' and 'Share Link' pages",
+
+      "list_num_m": "Number of list displayed on article pages included other contents",
+      "list_num_desc_m": "Set number of list per page such as 'Bookmarks', 'Recently created' and 'Drafts'",
+
+      "list_num_l": "Number of list displayed on 'Search' and 'Draft' pages",
+      "list_num_desc_l": "Set number of list per page such as 'Search' and 'Draft' pages",
+
+      "list_num_xl": "Number of list displayed on article pages",
+      "list_num_desc_xl": "Set number of list per page such as 'Not found' and 'Trash' pages",
+
+
+
       "stale_notification": "Display notification on stale pages",
       "stale_notification_desc": "Displays the notification to pages more than 1 year since the last update.",
       "show_all_reply_comments": "Show all reply comments",

resource/locales/ja_JP/admin/admin.json

@@ -107,8 +107,19 @@
       "tab_switch_desc2": "無効化することで、ページ遷移のみを戻る/進む操作の対象にすることができます。",
       "attach_title_header": "新規ページ作成時の h1 セクション自動挿入",
       "attach_title_header_desc": "新規作成したページの1行目に、ページのパスを h1 セクションとして挿入します。",
-      "list_num_desc_in_user_page": "ユーザーページに表示されるリスト数",
-      "all_list_num_desc_in_user_page": "ユーザーページにおける <Bookmarks> <Recently Created> <My Drafts> での、1ページの表示数を設定します。",
+
+      "list_num_s": "モーダルに表示されるリスト数",
+      "list_num_desc_s": "モーダルにおける <Pagelist> <Timeline> <Page History> <Share Link>での、1ページあたりの表示数を設定します。",
+
+      "list_num_m": "ユーザーページに表示されるリスト数",
+      "list_num_desc_m": "ユーザーページにおける <Bookmarks> <Recently Created>での、1ページあたりの表示数を設定します。",
+
+      "list_num_l": "検索ページやDraftページに表示されるリスト数",
+      "list_num_desc_l": "<Search> <My Drafts> での、1ページあたりの表示数を設定します。",
+
+      "list_num_xl": "Not FoundページやTrashページに表示されるリスト数",
+      "list_num_desc_xl": "記事エリアにおける<Not Found> <Trash>での、1ページあたりの表示数を設定します。",
+
       "stale_notification": "古いページに通知を表示する",
       "stale_notification_desc": "最後の更新から1年を超えるページへの通知を表示します。",
       "show_all_reply_comments": "返信コメントを全て表示する",

resource/locales/zh_CN/admin/admin.json

@@ -119,8 +119,19 @@
 			"tab_switch_desc2": "通过失效，您可以将页面转换作为浏览器的前向/后向命令的唯一对象。",
 			"attach_title_header": "自动创建新页面时添加h1节",
       "attach_title_header_desc": "创建新页面时，将页面路径作为h1节添加到第一行",
-	  	"list_num_desc_in_user_page": "Number of user page displayed",
-      "all_list_num_desc_in_user_page": "Number of Bookmarks, recently created pages and drafts displayed on user page",
+
+      "list_num_s": "Number of list displayed on modals",
+      "list_num_desc_s": "Set number of list per page such as 'Pagelist', 'Timeline', 'Page History' and 'Share Link' pages",
+
+      "list_num_m": "Number of list displayed on article pages included other contents",
+      "list_num_desc_m": "Set number of list per page such as 'Bookmarks', 'Recently created' and 'Drafts'",
+
+      "list_num_l": "Number of list displayed on 'Search' and 'Draft' pages",
+      "list_num_desc_l": "Set number of list per page such as 'Search' and 'Draft' pages",
+
+      "list_num_xl": "Number of list displayed on article pages",
+      "list_num_desc_xl": "Set number of list per page such as 'Not found' and 'Trash' pages",
+
 			"stale_notification": "在过期页上显示通知",
 			"stale_notification_desc": "显示自上次更新以来超过1年的页面通知。",
 			"show_all_reply_comments": "显示所有回复评论",

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

@@ -21,17 +21,38 @@ class CustomizeFunctionSetting extends React.Component {
     super(props);
 
     this.state = {
-      isDropdownOpen: false,
+      isDropdownOpenS: false, // S
+      // [TODO: rename isDropdownOpen to isDropdownOpenM by gw3920]
+      isDropdownOpen: false, // M
+      isDropdownOpenL: false, // L
+      isDropdownOpenXL: false, // XL
     };
 
-    this.onToggleDropdown = this.onToggleDropdown.bind(this);
+    this.onToggleDropdownS = this.onToggleDropdownS.bind(this); // S
+    this.onToggleDropdown = this.onToggleDropdown.bind(this); // M
+    this.onToggleDropdownL = this.onToggleDropdownL.bind(this); // L
+    this.onToggleDropdownXL = this.onToggleDropdownXL.bind(this); // XL
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
+  onToggleDropdownS() {
+    this.setState({ isDropdownOpenS: !this.state.isDropdownOpenS });
+  }
+
+  // [TODO: rename onToggleDropdown to onToggleDropdownM by gw3920]
   onToggleDropdown() {
     this.setState({ isDropdownOpen: !this.state.isDropdownOpen });
   }
 
+  onToggleDropdownL() {
+    this.setState({ isDropdownOpenL: !this.state.isDropdownOpenL });
+  }
+
+  onToggleDropdownXL() {
+    this.setState({ isDropdownOpenXL: !this.state.isDropdownOpenXL });
+  }
+
+
   async onClickSubmit() {
     const { t, adminCustomizeContainer } = this.props;
 
@@ -74,7 +95,6 @@ class CustomizeFunctionSetting extends React.Component {
                 </CustomizeFunctionOption>
               </div>
             </div>
-
             <div className="form-group row">
               <div className="offset-md-3 col-md-6 text-left">
                 <CustomizeFunctionOption
@@ -90,34 +110,118 @@ class CustomizeFunctionSetting extends React.Component {
               </div>
             </div>
 
+            {/* S: Modal */}
+            <div className="form-group row">
+              <div className="offset-md-3 col-md-6 text-left">
+                <div className="my-0 w-100">
+                  <label>{t('admin:customize_setting.function_options.list_num_s')}</label>
+                </div>
+                <Dropdown isOpen={this.state.isDropdownOpenS} toggle={this.onToggleDropdownS}>
+                  <DropdownToggle className="text-right col-6" caret>
+                    <span className="float-left">{adminCustomizeContainer.state.pageLimitationS}</span>
+                  </DropdownToggle>
+                  <DropdownMenu className="dropdown-menu" role="menu">
+                    <DropdownItem key={10} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationS(10) }}>
+                      <a role="menuitem">10</a>
+                    </DropdownItem>
+                    <DropdownItem key={30} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationS(30) }}>
+                      <a role="menuitem">30</a>
+                    </DropdownItem>
+                    <DropdownItem key={50} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationS(50) }}>
+                      <a role="menuitem">50</a>
+                    </DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+                <p className="form-text text-muted">
+                  {t('admin:customize_setting.function_options.list_num_desc_s')}
+                </p>
+              </div>
+            </div>
+
+            {/* M: User Page */}
             <div className="form-group row">
               <div className="offset-md-3 col-md-6 text-left">
                 <div className="my-0 w-100">
-                  <label>{t('admin:customize_setting.function_options.list_num_desc_in_user_page')}</label>
+                  <label>{t('admin:customize_setting.function_options.list_num_m')}</label>
                 </div>
                 <Dropdown isOpen={this.state.isDropdownOpen} toggle={this.onToggleDropdown}>
                   <DropdownToggle className="text-right col-6" caret>
+                    {/* [TODO: rename pageListLimitForUserPage to pageLimitationM by gw3920] */}
                     <span className="float-left">{adminCustomizeContainer.state.pageListLimitForUserPage}</span>
                   </DropdownToggle>
                   <DropdownMenu className="dropdown-menu" role="menu">
-                    <DropdownItem key={10} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitForUserPage(10) }}>
+                    <DropdownItem key={10} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationM(10) }}>
                       <a role="menuitem">10</a>
                     </DropdownItem>
-                    <DropdownItem key={30} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitForUserPage(30) }}>
+                    <DropdownItem key={30} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationM(30) }}>
                       <a role="menuitem">30</a>
                     </DropdownItem>
-                    <DropdownItem key={50} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitForUserPage(50) }}>
+                    <DropdownItem key={50} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationM(50) }}>
                       <a role="menuitem">50</a>
                     </DropdownItem>
                   </DropdownMenu>
                 </Dropdown>
                 <p className="form-text text-muted">
-                  {t('admin:customize_setting.function_options.all_list_num_desc_in_user_page')}
+                  {t('admin:customize_setting.function_options.list_num_desc_m')}
                 </p>
               </div>
             </div>
 
-            {/* TODO Implemetn dropdown toggle for pageListLimitForModal (pageList pageTimelin pageHistory, pageAttachment, shareLink) */}
+            {/* L: Search / Draft Pages */}
+            <div className="form-group row">
+              <div className="offset-md-3 col-md-6 text-left">
+                <div className="my-0 w-100">
+                  <label>{t('admin:customize_setting.function_options.list_num_l')}</label>
+                </div>
+                <Dropdown isOpen={this.state.isDropdownOpenL} toggle={this.onToggleDropdownL}>
+                  <DropdownToggle className="text-right col-6" caret>
+                    <span className="float-left">{adminCustomizeContainer.state.pageLimitationL}</span>
+                  </DropdownToggle>
+                  <DropdownMenu className="dropdown-menu" role="menu">
+                    <DropdownItem key={10} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationL(10) }}>
+                      <a role="menuitem">10</a>
+                    </DropdownItem>
+                    <DropdownItem key={30} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationL(30) }}>
+                      <a role="menuitem">30</a>
+                    </DropdownItem>
+                    <DropdownItem key={50} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationL(50) }}>
+                      <a role="menuitem">50</a>
+                    </DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+                <p className="form-text text-muted">
+                  {t('admin:customize_setting.function_options.list_num_desc_l')}
+                </p>
+              </div>
+            </div>
+
+            {/* XL: NotFound / Trash Pages */}
+            <div className="form-group row">
+              <div className="offset-md-3 col-md-6 text-left">
+                <div className="my-0 w-100">
+                  <label>{t('admin:customize_setting.function_options.list_num_xl')}</label>
+                </div>
+                <Dropdown isOpen={this.state.isDropdownOpenXL} toggle={this.onToggleDropdownXL}>
+                  <DropdownToggle className="text-right col-6" caret>
+                    <span className="float-left">{adminCustomizeContainer.state.pageLimitationXL}</span>
+                  </DropdownToggle>
+                  <DropdownMenu className="dropdown-menu" role="menu">
+                    <DropdownItem key={10} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationXL(10) }}>
+                      <a role="menuitem">10</a>
+                    </DropdownItem>
+                    <DropdownItem key={30} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationXL(30) }}>
+                      <a role="menuitem">30</a>
+                    </DropdownItem>
+                    <DropdownItem key={50} role="presentation" onClick={() => { adminCustomizeContainer.switchPageListLimitationXL(50) }}>
+                      <a role="menuitem">50</a>
+                    </DropdownItem>
+                  </DropdownMenu>
+                </Dropdown>
+                <p className="form-text text-muted">
+                  {t('admin:customize_setting.function_options.list_num_desc_xl')}
+                </p>
+              </div>
+            </div>
 
             <div className="form-group row">
               <div className="offset-md-3 col-md-6 text-left">

src/client/js/services/AdminCustomizeContainer.js

@@ -27,8 +27,13 @@ export default class AdminCustomizeContainer extends Container {
       isEnabledTimeline: false,
       isSavedStatesOfTabChanges: false,
       isEnabledAttachTitleHeader: false,
+
+      pageLimitationS: 10,
+      // [TODO: rename pageListLimitForUserPage to pageLimitationM by gw3920]
       pageListLimitForUserPage: 10,
-      // TODO implement for pageListLimitForModal
+      pageLimitationL: 10,
+      pageLimitationXL: 10,
+
       isEnabledStaleNotification: false,
       isAllReplyShown: false,
       currentHighlightJsStyleId: '',
@@ -130,16 +135,35 @@ export default class AdminCustomizeContainer extends Container {
     this.setState({ isEnabledAttachTitleHeader:  !this.state.isEnabledAttachTitleHeader });
   }
 
+
+  /**
+   * S: Switch pageListLimitationS
+   */
+  switchPageListLimitationS(value) {
+    this.setState({ pageLimitationS: value });
+  }
+
   /**
-   * Switch pageListdLimitForUserPage
+   * M: Switch pageListLimitationM
    */
-  switchPageListLimitForUserPage(value) {
+  // [TODO: rename pageListLimitForUserPage to pageLimitationM by gw3920]
+  switchPageListLimitationM(value) {
     this.setState({ pageListLimitForUserPage: value });
   }
 
   /**
-   * Switch pageListdLimitForModal
+   * L: Switch pageListLimitationL
+   */
+  switchPageListLimitationL(value) {
+    this.setState({ pageLimitationL: value });
+  }
+
+  /**
+   * XL: Switch pageListLimitationXL
    */
+  switchPageListLimitationXL(value) {
+    this.setState({ pageLimitationXL: value });
+  }
 
   /**
    * Switch enabledStaleNotification