Merge branch 'support/apply-bootstrap4' into bst4-admin-markdown2

src/client/js/components/Admin/AdminHome/AdminHome.jsx

@@ -40,14 +40,14 @@ class AdminHome extends React.Component {
         </p>
 
         <div className="row mb-5">
-          <div className="col-md-12">
+          <div className="col-lg-12">
             <h2 className="admin-setting-header">{t('admin:admin_top.system_information')}</h2>
             <SystemInfomationTable />
           </div>
         </div>
 
         <div className="row mb-5">
-          <div className="col-md-12">
+          <div className="col-lg-12">
             <h2 className="admin-setting-header">{t('admin:admin_top.list_of_installed_plugins')}</h2>
             <InstalledPluginTable />
           </div>

src/client/js/components/Admin/AdminHome/SystemInfomationTable.jsx

@@ -15,7 +15,7 @@ class SystemInformationTable extends React.Component {
       <table className="table table-bordered">
         <tbody>
           <tr>
-            <th className="col-sm-4">GROWI</th>
+            <th>GROWI</th>
             <td>{ adminHomeContainer.state.growiVersion }</td>
           </tr>
           <tr>

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

@@ -12,41 +12,44 @@ const AdminNavigation = (props) => {
   };
 
   return (
-    <ul className="nav nav-pills nav-stacked">
-      <li className={`${pathname === '/admin' && 'active'}`}>
-        <a href="/admin"><i className="icon-fw icon-home"></i> { t('Management Wiki Home') }</a>
-      </li>
-      <li className={`${isActiveMenu('/app') && 'active'}`}>
-        <a href="/admin/app"><i className="icon-fw icon-settings"></i> { t('App Settings') }</a>
-      </li>
-      <li className={`${isActiveMenu('/security') && 'active'}`}>
-        <a href="/admin/security"><i className="icon-fw icon-shield"></i> { t('security_settings') }</a>
-      </li>
-      <li className={`${isActiveMenu('/markdown') && 'active'}`}>
-        <a href="/admin/markdown"><i className="icon-fw icon-note"></i> { t('Markdown Settings') }</a>
-      </li>
-      <li className={`${isActiveMenu('/customize') && 'active'}`}>
-        <a href="/admin/customize"><i className="icon-fw icon-wrench"></i> { t('Customize') }</a>
-      </li>
-      <li className={`${isActiveMenu('/importer') && 'active'}`}>
-        <a href="/admin/importer"><i className="icon-fw icon-cloud-upload"></i> { t('Import Data') }</a>
-      </li>
-      <li className={`${isActiveMenu('/export') && 'active'}`}>
-        <a href="/admin/export"><i className="icon-fw icon-cloud-download"></i> { t('Export Archive Data') }</a>
-      </li>
-      <li className={`${(isActiveMenu('/notification') || isActiveMenu('/global-notification')) && 'active'}`}>
-        <a href="/admin/notification"><i className="icon-fw icon-bell"></i> { t('Notification Settings') }</a>
-      </li>
-      <li className={`${(isActiveMenu('/users')) && 'active'}`}>
-        <a href="/admin/users"><i className="icon-fw icon-user"></i> { t('User_Management') }</a>
-      </li>
-      <li className={`${isActiveMenu('/user-group') && 'active'}`}>
-        <a href="/admin/user-groups"><i className="icon-fw icon-people"></i> { t('UserGroup Management') }</a>
-      </li>
-      <li className={`${isActiveMenu('/search') && 'active'}`}>
-        <a href="/admin/search"><i className="icon-fw icon-magnifier"></i> { t('Full Text Search Management') }</a>
-      </li>
-    </ul>
+    <div className="list-group admin-navigation">
+      <a href="/admin" className={`list-group-item list-group-item-action border-0 ${pathname === '/admin' && 'active'}`}>
+        <i className="icon-fw icon-home"></i> {t('Management Wiki Home')}
+      </a>
+      <a href="/admin/app" className={`list-group-item list-group-item-action border-0 ${isActiveMenu('/app') && 'active'}`}>
+        <i className="icon-fw icon-settings"></i> {t('App Settings')}
+      </a>
+      <a href="/admin/security" className={`list-group-item list-group-item-action border-0  ${isActiveMenu('/security') && 'active'}`}>
+        <i className="icon-fw icon-shield"></i> {t('security_settings')}
+      </a>
+      <a href="/admin/markdown" className={`list-group-item list-group-item-action border-0 ${isActiveMenu('/markdown') && 'active'}`}>
+        <i className="icon-fw icon-note"></i> {t('Markdown Settings')}
+      </a>
+      <a href="/admin/customize" className={`list-group-item list-group-item-action border-0 ${isActiveMenu('/customize') && 'active'}`}>
+        <i className="icon-fw icon-wrench"></i> {t('Customize')}
+      </a>
+      <a href="/admin/importer" className={`list-group-item list-group-item-action border-0 ${isActiveMenu('/importer') && 'active'}`}>
+        <i className="icon-fw icon-cloud-upload"></i> {t('Import Data')}
+      </a>
+      <a href="/admin/export" className={`list-group-item list-group-item-action border-0 ${isActiveMenu('/export') && 'active'}`}>
+        <i className="icon-fw icon-cloud-download"></i> {t('Export Archive Data')}
+      </a>
+      <a
+        href="/admin/notification"
+        className={`list-group-item list-group-item-action  border-0 ${(isActiveMenu('/notification') || isActiveMenu('/global-notification')) && 'active'}`}
+      >
+        <i className="icon-fw icon-bell"></i> {t('Notification Settings')}
+      </a>
+      <a href="/admin/users" className={`list-group-item list-group-item-action border-0 ${(isActiveMenu('/users')) && 'active'}`}>
+        <i className="icon-fw icon-user"></i> {t('User_Management')}
+      </a>
+      <a href="/admin/user-groups" className={`list-group-item list-group-item-action border-0 ${isActiveMenu('/user-group') && 'active'}`}>
+        <i className="icon-fw icon-people"></i> {t('UserGroup Management')}
+      </a>
+      <a href="/admin/search" className={`list-group-item list-group-item-action border-0 ${isActiveMenu('/search') && 'active'}`}>
+        <i className="icon-fw icon-magnifier"></i> {t('Full Text Search Management')}
+      </a>
+    </div>
   );
 };
 

src/client/js/components/Admin/Notification/GlobalNotification.jsx

@@ -16,9 +16,11 @@ class GlobalNotification extends React.Component {
     return (
       <React.Fragment>
 
-        <a href="/admin/global-notification/new">
-          <p className="btn btn-default">{t('notification_setting.add_notification')}</p>
-        </a>
+        <div className="my-3">
+          <a href="/admin/global-notification/new">
+            <button type="button" className="btn page-link text-dark d-inline-block">{t('notification_setting.add_notification')}</button>
+          </a>
+        </div>
 
         <h2 className="border-bottom mb-5">{t('notification_setting.notification_list')}</h2>
 

src/client/js/components/Admin/Notification/ManageGlobalNotification.jsx

@@ -100,10 +100,15 @@ class ManageGlobalNotification extends React.Component {
     return (
       <React.Fragment>
 
-        <a href="/admin/notification#global-notification" className="btn btn-default">
-          <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
-          {t('notification_setting.back_to_list')}
-        </a>
+        <div className="my-3">
+          <a href="/admin/notification#global-notification">
+            <button type="button" className="btn page-link text-dark d-inline-block">
+              <i className="icon-fw ti-arrow-left" aria-hidden="true"></i>
+              {t('notification_setting.back_to_list')}
+            </button>
+          </a>
+        </div>
+
 
         <div className="row">
           <div className="m-t-20 form-box col-md-12">
@@ -111,25 +116,26 @@ class ManageGlobalNotification extends React.Component {
           </div>
 
           <div className="col-sm-4">
+            <h3 htmlFor="triggerPath">{t('notification_setting.trigger_path')}
+              {/* eslint-disable-next-line react/no-danger */}
+              <small dangerouslySetInnerHTML={{ __html: t('notification_setting.trigger_path_help', '<code>*</code>') }} />
+            </h3>
             <div className="form-group">
-              <h3 htmlFor="triggerPath">{t('notification_setting.trigger_path')}
-                {/* eslint-disable-next-line react/no-danger */}
-                <small dangerouslySetInnerHTML={{ __html: t('notification_setting.trigger_path_help', '<code>*</code>') }} />
-                <input
-                  className="form-control"
-                  type="text"
-                  name="triggerPath"
-                  value={this.state.triggerPath}
-                  onChange={(e) => { this.onChangeTriggerPath(e.target.value) }}
-                  required
-                />
-              </h3>
+              <input
+                className="form-control"
+                type="text"
+                name="triggerPath"
+                value={this.state.triggerPath}
+                onChange={(e) => { this.onChangeTriggerPath(e.target.value) }}
+                required
+              />
             </div>
 
+            <h3>{t('notification_setting.notify_to')}</h3>
             <div className="form-group form-inline">
-              <h3>{t('notification_setting.notify_to')}</h3>
-              <div className="radio radio-primary">
+              <div className="custom-control custom-radio">
                 <input
+                  className="custom-control-input"
                   type="radio"
                   id="mail"
                   name="notifyToType"
@@ -137,12 +143,13 @@ class ManageGlobalNotification extends React.Component {
                   checked={this.state.notifyToType === 'mail'}
                   onChange={() => { this.onChangeNotifyToType('mail') }}
                 />
-                <label htmlFor="mail">
+                <label className="custom-control-label" htmlFor="mail">
                   <p className="font-weight-bold">Email</p>
                 </label>
               </div>
-              <div className="radio radio-primary">
+              <div className="custom-control custom-radio ml-2">
                 <input
+                  className="custom-control-input"
                   type="radio"
                   id="slack"
                   name="notifyToType"
@@ -150,7 +157,7 @@ class ManageGlobalNotification extends React.Component {
                   checked={this.state.notifyToType === 'slack'}
                   onChange={() => { this.onChangeNotifyToType('slack') }}
                 />
-                <label htmlFor="slack">
+                <label className="custom-control-label" htmlFor="slack">
                   <p className="font-weight-bold">Slack</p>
                 </label>
               </div>
@@ -187,11 +194,9 @@ class ManageGlobalNotification extends React.Component {
                   />
                 </div>
               )}
-
           </div>
 
-
-          <div className="col-sm-offset-1 col-sm-5">
+          <div className="offset-1 col-sm-5">
             <div className="form-group">
               <h3>{t('notification_setting.trigger_events')}</h3>
               <TriggerEventCheckBox
@@ -251,14 +256,13 @@ class ManageGlobalNotification extends React.Component {
 
             </div>
           </div>
-
-          <AdminUpdateButtonRow
-            onClick={this.submitHandler}
-            disabled={this.state.retrieveError != null}
-          />
-
         </div>
 
+        <AdminUpdateButtonRow
+          onClick={this.submitHandler}
+          disabled={this.state.retrieveError != null}
+        />
+
       </React.Fragment>
 
     );

src/client/js/components/Admin/Notification/UserNotificationRow.jsx

@@ -22,7 +22,7 @@ class UserNotificationRow extends React.PureComponent {
             {notification.channel}
           </td>
           <td>
-            <button type="submit" className="btn btn-default" onClick={() => { this.props.onClickDeleteBtn(notification._id) }}>{t('Delete')}</button>
+            <button type="submit" className="btn btn-light" onClick={() => { this.props.onClickDeleteBtn(notification._id) }}>{t('Delete')}</button>
           </td>
         </tr>
       </React.Fragment>

src/client/styles/scss/_admin.scss

@@ -157,3 +157,7 @@
     }
   }
 }
+
+.admin-navigation > a + a {
+  margin-top: 2px;
+}

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

@@ -4,6 +4,39 @@
 
 :root {
   font-size: $font-size-root;
+  > body {
+    font-family: $font-family-sans-serif;
+  }
+}
+
+h1 {
+  font-size: 36px;
+  line-height: 48px;
+}
+
+h2 {
+  font-size: 24px;
+  line-height: 36px;
+}
+
+h3 {
+  font-size: 21px;
+  line-height: 30px;
+}
+
+h4 {
+  font-size: 18px;
+  line-height: 22px;
+}
+
+h5 {
+  font-size: 16px;
+  line-height: 18px;
+}
+
+h5 {
+  font-size: 14px;
+  line-height: 16px;
 }
 
 // Navs