Merge pull request #1791 from weseek/support/bstr4-group-setting-page

Support/bstr4 group setting page

src/client/js/components/Admin/UserGroup/UserGroupCreateForm.jsx

@@ -70,7 +70,7 @@ class UserGroupCreateForm extends React.Component {
         <p>
           {this.props.isAclEnabled
             ? (
-              <button type="button" data-toggle="collapse" className="btn btn-default" href="#createGroupForm">
+              <button type="button" data-toggle="collapse" className="btn btn-light" href="#createGroupForm">
                 {t('admin:user_group_management.create_group')}
               </button>
             )

src/client/js/components/Admin/UserGroup/UserGroupDeleteModal.jsx

@@ -163,7 +163,7 @@ class UserGroupDeleteModal extends React.Component {
     const { t } = this.props;
 
     return (
-      <Modal isOpen={this.props.isShow} toggle={this.props.onHide}>
+      <Modal className="modal-md" isOpen={this.props.isShow} toggle={this.props.onHide}>
         <ModalHeader tag="h4" toggle={this.props.onHide} className="modal-header bg-danger">
           <i className="icon icon-fire"></i> {t('admin:user_group_management.delete_modal.header')}
         </ModalHeader>
@@ -176,12 +176,12 @@ class UserGroupDeleteModal extends React.Component {
           </div>
         </ModalBody>
         <ModalFooter>
-          <form className="d-flex justify-content-between" onSubmit={this.handleSubmit}>
-            <div className="d-flex">
+          <form className="d-flex justify-content-between w-100" onSubmit={this.handleSubmit}>
+            <div className="d-flex form-group mb-0">
               {this.renderPageActionSelector()}
               {this.renderGroupSelector()}
             </div>
-            <button type="submit" value="" className="btn btn-sm btn-danger" disabled={!this.validateForm()}>
+            <button type="submit" value="" className="btn btn-sm btn-danger text-nowrap" disabled={!this.validateForm()}>
               <i className="icon icon-fire"></i> {t('Delete')}
             </button>
           </form>

src/client/js/components/Admin/UserGroup/UserGroupTable.jsx

@@ -69,7 +69,7 @@ class UserGroupTable extends React.Component {
                   <td>
                     <ul className="list-inline">
                       {this.state.userGroupRelations[group._id].map((user) => {
-                        return <li key={user._id} className="list-inline-item badge badge-primary">{this.xss.process(user.username)}</li>;
+                        return <li key={user._id} className="list-inline-item badge badge-pill badge-primary">{this.xss.process(user.username)}</li>;
                       })}
                     </ul>
                   </td>
@@ -78,23 +78,22 @@ class UserGroupTable extends React.Component {
                     ? (
                       <td>
                         <div className="btn-group admin-group-menu">
-                          <button type="button" className="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
-                            <i className="icon-settings"></i> <span className="caret"></span>
+                          <button
+                            type="button"
+                            id={`admin-group-menu-button-${group._id}`}
+                            className="btn btn-light btn-sm dropdown-toggle"
+                            data-toggle="dropdown"
+                          >
+                            <i className="icon-settings"></i>
                           </button>
-                          <ul className="dropdown-menu" role="menu">
-                            <li>
-                              <a href={`/admin/user-group-detail/${group._id}`}>
-                                <i className="icon-fw icon-note"></i> {t('Edit')}
-                              </a>
-                            </li>
-
-                            <li>
-                              <a role="button" onClick={this.onDelete} data-user-group-id={group._id}>
-                                <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
-                              </a>
-                            </li>
-
-                          </ul>
+                          <div className="dropdown-menu" role="menu" aria-labelledby={`admin-group-menu-button-${group._id}`}>
+                            <a className="dropdown-item" href={`/admin/user-group-detail/${group._id}`}>
+                              <i className="icon-fw icon-note"></i> {t('Edit')}
+                            </a>
+                            <a className="dropdown-item" role="button" onClick={this.onDelete} data-user-group-id={group._id}>
+                              <i className="icon-fw icon-fire text-danger"></i> {t('Delete')}
+                            </a>
+                          </div>
                         </div>
                       </td>
                     )

src/client/js/components/Admin/UserGroupDetail/CheckBoxForSerchUserOption.jsx

@@ -8,15 +8,15 @@ class CheckBoxForSerchUserOption extends React.Component {
   render() {
     const { t, option } = this.props;
     return (
-      <div className="checkbox checkbox-info" key={`isAlso${option}Searched`}>
+      <div className="custom-control custom-checkbox custom-checkbox-info" key={`isAlso${option}Searched`}>
         <input
           type="checkbox"
           id={`isAlso${option}Searched`}
-          className="form-check-input"
+          className="custom-control-input"
           checked={this.props.checked}
           onChange={this.props.onChange}
         />
-        <label className="text-capitalize form-check-label ml-3" htmlFor={`isAlso${option}Searched`}>
+        <label className="text-capitalize custom-control-label ml-3" htmlFor={`isAlso${option}Searched`}>
           {t('admin:user_group_management.add_modal.enable_option', { option })}
         </label>
       </div>

src/client/js/components/Admin/UserGroupDetail/RadioButtonForSerchUserOption.jsx

@@ -8,15 +8,15 @@ class RadioButtonForSerchUserOption extends React.Component {
   render() {
     const { t, searchType } = this.props;
     return (
-      <div className="radio" key={`${searchType}Match`}>
+      <div className="custom-control custom-radio custom-control-inline" key={`${searchType}Match`}>
         <input
           type="radio"
           id={`${searchType}Match`}
-          className="form-check-radio"
+          className="custom-control-input"
           checked={this.props.checked}
           onChange={this.props.onChange}
         />
-        <label className="text-capitalize form-check-label ml-3" htmlFor={`${searchType}Match`}>
+        <label className="text-capitalize custom-control-label ml-3" htmlFor={`${searchType}Match`}>
           {t(`admin:user_group_management.add_modal.${searchType}_match`)}
         </label>
       </div>

src/client/js/components/Admin/UserGroupDetail/UserGroupDetailPage.jsx

@@ -16,17 +16,17 @@ class UserGroupDetailPage extends React.Component {
 
     return (
       <div>
-        <a href="/admin/user-groups" className="btn btn-default">
+        <a href="/admin/user-groups" className="btn btn-light">
           <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
           {t('admin:user_group_management.back_to_list')}
         </a>
-        <div className="m-t-20 form-box">
+        <div className="mt-4 form-box">
           <UserGroupEditForm />
         </div>
-        <h2 className="admin-setting-header m-t-20">{t('admin:user_group_management.user_list')}</h2>
+        <h2 className="admin-setting-header mt-4">{t('admin:user_group_management.user_list')}</h2>
         <UserGroupUserTable />
         <UserGroupUserModal />
-        <h2 className="admin-setting-header m-t-20">{t('Page')}</h2>
+        <h2 className="admin-setting-header mt-4">{t('Page')}</h2>
         <div className="page-list">
           <UserGroupPageList />
         </div>

src/client/js/components/Admin/UserGroupDetail/UserGroupEditForm.jsx

@@ -61,18 +61,20 @@ class UserGroupEditForm extends React.Component {
     const { t, adminUserGroupDetailContainer } = this.props;
 
     return (
-      <form className="form-horizontal" onSubmit={this.handleSubmit}>
+      <form onSubmit={this.handleSubmit}>
         <fieldset>
           <h2 className="admin-setting-header">{t('admin:user_group_management.basic_info')}</h2>
-          <div className="form-group">
-            <label htmlFor="name" className="col-sm-2 control-label">{t('Name')}</label>
-            <div className="col-sm-4">
+          <div className="form-group row">
+            <label htmlFor="name" className="col-md-2 col-form-label">
+              {t('Name')}
+            </label>
+            <div className="col-md-4">
               <input className="form-control" type="text" name="name" value={this.state.name} onChange={this.changeUserGroupName} />
             </div>
           </div>
-          <div className="form-group">
-            <label className="col-sm-2 control-label">{t('Created')}</label>
-            <div className="col-sm-4">
+          <div className="form-group row">
+            <label className="col-md-2 col-form-label">{t('Created')}</label>
+            <div className="col-md-4">
               <input
                 type="text"
                 className="form-control"
@@ -81,9 +83,11 @@ class UserGroupEditForm extends React.Component {
               />
             </div>
           </div>
-          <div className="form-group">
-            <div className="col-sm-offset-2 col-sm-10">
-              <button type="submit" className="btn btn-primary" disabled={!this.validateForm()}>{t('Update')}</button>
+          <div className="form-group row">
+            <div className="offset-md-2 col-md-10">
+              <button type="submit" className="btn btn-primary" disabled={!this.validateForm()}>
+                {t('Update')}
+              </button>
             </div>
           </div>
         </fieldset>

src/client/js/components/Admin/UserGroupDetail/UserGroupPageList.jsx

@@ -55,7 +55,7 @@ class UserGroupPageList extends React.Component {
 
     return (
       <Fragment>
-        <ul className="page-list-ul page-list-ul-flat">
+        <ul className="page-list-ul page-list-ul-flat mb-3">
           {this.state.currentPages.map((page) => { return <Page key={page._id} page={page} /> })}
         </ul>
         {adminUserGroupDetailContainer.state.relatedPages.length === 0 ? <p>{t('admin:user_group_management.no_pages')}</p> : null}

src/client/js/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -116,8 +116,8 @@ class UserGroupUserFormByInput extends React.Component {
     const inputProps = { autoComplete: 'off' };
 
     return (
-      <div className="row">
-        <div className="col-xs-8 pr-0">
+      <div className="form-group row">
+        <div className="col-8 pr-0">
           <AsyncTypeahead
             {...this.props}
             id="name-typeahead-asynctypeahead"
@@ -137,7 +137,7 @@ class UserGroupUserFormByInput extends React.Component {
             clearButton
           />
         </div>
-        <div className="col-xs-2 pl-0">
+        <div className="col-2 pl-0">
           <button
             type="button"
             className="btn btn-sm btn-success"

src/client/js/components/Admin/UserGroupDetail/UserGroupUserModal.jsx

@@ -28,7 +28,7 @@ class UserGroupUserModal extends React.Component {
           </div>
           <h2 className="border-bottom">{t('admin:user_group_management.add_modal.search_option')}</h2>
           <div className="row mt-4">
-            <div className="col-xs-6">
+            <div className="col-6">
               <div className="mb-5">
                 <CheckBoxForSerchUserOption
                   option="Mail"
@@ -44,7 +44,7 @@ class UserGroupUserModal extends React.Component {
                 />
               </div>
             </div>
-            <div className="col-xs-6">
+            <div className="col-6">
               <div className="mb-5">
                 <RadioButtonForSerchUserOption
                   searchType="forward"

src/client/js/components/Admin/UserGroupDetail/UserGroupUserTable.jsx

@@ -64,16 +64,24 @@ class UserGroupUserTable extends React.Component {
                 <td>{relatedUser.lastLoginAt ? dateFnsFormat(new Date(relatedUser.lastLoginAt), 'yyyy-MM-dd HH:mm:ss') : ''}</td>
                 <td>
                   <div className="btn-group admin-user-menu">
-                    <button type="button" className="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
-                      <i className="icon-settings"></i> <span className="caret"></span>
+                    <button
+                      type="button"
+                      id={`admin-group-menu-button-${relatedUser._id}`}
+                      className="btn btn-light btn-sm dropdown-toggle"
+                      data-toggle="dropdown"
+                    >
+                      <i className="icon-settings"></i>
                     </button>
-                    <ul className="dropdown-menu" role="menu">
-                      <li>
-                        <a onClick={() => { return this.removeUser(relatedUser.username) }}>
-                          <i className="icon-fw icon-user-unfollow"></i> {t('admin:user_group_management.remove_from_group')}
-                        </a>
-                      </li>
-                    </ul>
+                    <div className="dropdown-menu" role="menu" aria-labelledby={`admin-group-menu-button-${relatedUser._id}`}>
+                      <a
+                        className="dropdown-item"
+                        onClick={() => {
+                          return this.removeUser(relatedUser.username);
+                        }}
+                      >
+                        <i className="icon-fw icon-user-unfollow"></i> {t('admin:user_group_management.remove_from_group')}
+                      </a>
+                    </div>
                   </div>
                 </td>
               </tr>
@@ -83,7 +91,7 @@ class UserGroupUserTable extends React.Component {
           <tr>
             <td></td>
             <td className="text-center">
-              <button className="btn btn-default" type="button" onClick={adminUserGroupDetailContainer.openUserGroupUserModal}>
+              <button className="btn btn-light" type="button" onClick={adminUserGroupDetailContainer.openUserGroupUserModal}>
                 <i className="ti-plus"></i>
               </button>
             </td>

src/client/styles/scss/_create-page.scss

@@ -1,17 +1,4 @@
 .modal.create-page {
-  // more than tablet size
-  @include media-breakpoint-down(sm) {
-    .modal-dialog {
-      max-width: 100%;
-      margin: 10px;
-    }
-  }
-
-  .modal-dialog {
-    max-width: 750px;
-    box-sizing: border-box;
-  }
-
   .modal-body {
     //TODO remove legend
     legend {
@@ -33,7 +20,7 @@
         }
 
         // change layout by screen size
-        @include media-breakpoint-down(sm) {
+        @include media-breakpoint-down(md) {
           flex-direction: column;
           .create-page-button-container {
             margin-top: 10px;

src/client/styles/scss/_override-bootstrap.scss

@@ -161,15 +161,6 @@ fieldset[disabled] .btn {
   cursor: not-allowed;
 }
 
-// input form (disabled box-shadow added in bootstrap4)
-form.form-group input.form-control {
-  &:focus,
-  &.focus {
-    border-color: inherit;
-    box-shadow: none;
-  }
-}
-
 // progress bar
 .progress {
   margin-bottom: 18px;

src/server/views/modal/create_page.html

@@ -1,5 +1,5 @@
 <div class="modal create-page" id="create-page">
-  <div class="modal-dialog">
+  <div class="modal-dialog modal-lg">
     <div class="modal-content">
 
       <div class="modal-header bg-primary">
@@ -9,39 +9,43 @@
 
       <div class="modal-body">
 
-        <form class="row form-group" id="create-page-today" role="form">
-          <fieldset class="col-12 mb-4">
-            <h3 class="grw-modal-head pb-2">{{ t("Create today's") }}</h3>
-            <div class="d-flex create-page-input-container">
-              <div class="create-page-input-row d-flex align-items-center">
-                <span class="page-today-prefix">{{ userPageRoot(user) }}/</span>
-                <input type="text" data-prefix="{{ userPageRoot(user) }}/" class="page-today-input1 form-control text-center" value="{{ t('Memo') }}" id="" name="">
-                <span class="page-today-suffix">/{{ now|datetz('Y/m/d') }}/</span>
-                <input type="text" data-prefix="/{{ now|datetz('Y/m/d') }}/" class="page-today-input2 form-control" id="page-today-input2" name="" placeholder="{{ t('Input page name (optional)') }}">
-              </div>
-              <div class="create-page-button-container">
-                <button type="submit" class="fcbtn btn btn-outline-primary rounded-pill btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
+        <form  id="create-page-today" role="form">
+          <div class="row form-group">
+            <fieldset class="col-12 mb-4">
+              <h3 class="grw-modal-head pb-2">{{ t("Create today's") }}</h3>
+              <div class="d-flex create-page-input-container">
+                <div class="create-page-input-row d-flex align-items-center">
+                  <span class="page-today-prefix">{{ userPageRoot(user) }}/</span>
+                  <input type="text" data-prefix="{{ userPageRoot(user) }}/" class="page-today-input1 form-control text-center" value="{{ t('Memo') }}" id="" name="">
+                  <span class="page-today-suffix">/{{ now|datetz('Y/m/d') }}/</span>
+                  <input type="text" data-prefix="/{{ now|datetz('Y/m/d') }}/" class="page-today-input2 form-control" id="page-today-input2" name="" placeholder="{{ t('Input page name (optional)') }}">
+                </div>
+                <div class="create-page-button-container">
+                  <button type="submit" class="fcbtn btn btn-outline-primary rounded-pill btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
+                </div>
               </div>
-            </div>
-          </fieldset>
+            </fieldset>
+          </div>
         </form>
 
-        <form class="row form-group" id="create-page-under-tree" role="form">
-          <fieldset class="col-12 mb-4">
-            <h3 class="grw-modal-head pb-2">{{ t('Create under') }}</h3>
-            <div class="d-flex create-page-input-container">
-              <div class="create-page-input-row d-flex align-items-center">
-                {% if isSearchServiceConfigured() %}
-                <div id="create-page-name-input" class="page-name-input"></div>
-                {% else %}
-                <input type="text" value="{{ parentPath(path) }}" class="page-name-input form-control " placeholder="{{ t('Input page name') }}" required />
-                {% endif %}
-              </div>
-              <div class="create-page-button-container">
-                <button type="submit" class="fcbtn btn btn-outline-primary rounded-pill btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
+        <form id="create-page-under-tree" role="form">
+          <div class="row form-group">
+            <fieldset class="col-12 mb-4">
+              <h3 class="grw-modal-head pb-2">{{ t('Create under') }}</h3>
+              <div class="d-flex create-page-input-container">
+                <div class="create-page-input-row d-flex align-items-center">
+                  {% if isSearchServiceConfigured() %}
+                  <div id="create-page-name-input" class="page-name-input"></div>
+                  {% else %}
+                  <input type="text" value="{{ parentPath(path) }}" class="page-name-input form-control " placeholder="{{ t('Input page name') }}" required />
+                  {% endif %}
+                </div>
+                <div class="create-page-button-container">
+                  <button type="submit" class="fcbtn btn btn-outline-primary rounded-pill btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
+                </div>
               </div>
-            </div>
-          </fieldset>
+            </fieldset>
+          </div>
         </form>
 
         {% set templateParentPath = parentPath(path | preventXss | escape) %}