Merge branch 'support/apply-bootstrap4' into support/adjust-modal-about-page-management

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

@@ -147,7 +147,7 @@ class ElasticsearchManagement extends React.Component {
     return (
       <>
         <div className="row">
-          <div className="col-sm-12">
+          <div className="col-md-12">
             <StatusTable
               isConfigured={isConfigured}
               isConnected={isConnected}
@@ -162,8 +162,8 @@ class ElasticsearchManagement extends React.Component {
 
         {/* Controls */}
         <div className="row">
-          <label className="col-sm-3 col-form-label">{ t('full_text_search_management.reconnect') }</label>
-          <div className="col-sm-6">
+          <label className="col-md-3 col-form-label">{ t('full_text_search_management.reconnect') }</label>
+          <div className="col-md-6">
             <ReconnectControls
               isConfigured={isConfigured}
               isConnected={isConnected}
@@ -175,8 +175,8 @@ class ElasticsearchManagement extends React.Component {
         <hr />
 
         <div className="row">
-          <label className="col-sm-3 col-form-label">{ t('full_text_search_management.normalize') }</label>
-          <div className="col-sm-6">
+          <label className="col-md-3 col-form-label">{ t('full_text_search_management.normalize') }</label>
+          <div className="col-md-6">
             <NormalizeIndicesControls
               isRebuildingProcessing={isRebuildingProcessing}
               isRebuildingCompleted={isRebuildingCompleted}
@@ -189,8 +189,8 @@ class ElasticsearchManagement extends React.Component {
         <hr />
 
         <div className="row">
-          <label className="col-sm-3 col-form-label">{ t('full_text_search_management.rebuild') }</label>
-          <div className="col-sm-6">
+          <label className="col-md-3 col-form-label">{ t('full_text_search_management.rebuild') }</label>
+          <div className="col-md-6">
             <RebuildIndexControls
               isRebuildingProcessing={isRebuildingProcessing}
               isRebuildingCompleted={isRebuildingCompleted}

src/client/js/components/Admin/ElasticsearchManagement/NormalizeIndicesControls.jsx

@@ -15,7 +15,7 @@ class NormalizeIndicesControls extends React.PureComponent {
       <>
         <button
           type="submit"
-          className={`btn btn-outline ${isEnabled ? 'btn-info' : 'btn-light'}`}
+          className={`btn ${isEnabled ? 'btn-outline-info' : 'btn-outline-secondary'}`}
           onClick={() => { this.props.onNormalizingRequested() }}
           disabled={!isEnabled}
         >

src/client/js/components/Admin/ElasticsearchManagement/RebuildIndexControls.jsx

@@ -83,7 +83,7 @@ class RebuildIndexControls extends React.Component {
           { t('full_text_search_management.rebuild_button') }
         </button>
 
-        <p className="help-block">
+        <p className="form-text text-muted">
           { t('full_text_search_management.rebuild_description_1') }<br />
           { t('full_text_search_management.rebuild_description_2') }<br />
         </p>

src/client/js/components/Admin/ElasticsearchManagement/ReconnectControls.jsx

@@ -15,7 +15,7 @@ class ReconnectControls extends React.PureComponent {
       <>
         <button
           type="submit"
-          className={`btn btn-outline ${isEnabled ? 'btn-success' : 'btn-light'}`}
+          className={`btn ${isEnabled ? 'btn-outline-success' : 'btn-outline-secondary'}`}
           onClick={() => { this.props.onReconnectingRequested() }}
           disabled={!isEnabled}
         >

src/client/js/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -11,7 +11,7 @@ class StatusTable extends React.PureComponent {
 
     const aliasLabels = aliases.map((aliasName) => {
       return (
-        <span key={`badge-${indexName}-${aliasName}`} className="badge badge-primary mr-2">
+        <span key={`badge-${indexName}-${aliasName}`} className="badge badge-pill badge-primary mr-2">
           <i className="icon-tag"></i> {aliasName}
         </span>
       );
@@ -82,7 +82,7 @@ class StatusTable extends React.PureComponent {
       <div className="row">
         { Object.keys(indexNameToDataMap).map((indexName) => {
           return (
-            <div key={`col-${indexName}`} className="col-xs-6">
+            <div key={`col-${indexName}`} className="col-6">
               { this.renderIndexInfoPanel(indexName, indexNameToDataMap[indexName], indexNameToAliasMap[indexName]) }
             </div>
           );
@@ -96,39 +96,37 @@ class StatusTable extends React.PureComponent {
     const { isConfigured, isConnected, isNormalized } = this.props;
 
 
-    let connectionStatusLabel = <span className="badge badge-default">――</span>;
+    let connectionStatusLabel = <span className="badge badge-pill badge-secondary">――</span>;
     if (isConfigured != null && !isConfigured) {
-      connectionStatusLabel = <span className="badge badge-default">{ t('full_text_search_management.connection_status_label_unconfigured') }</span>;
+      connectionStatusLabel = <span className="badge badge-pill badge-secondary">{t('full_text_search_management.connection_status_label_unconfigured')}</span>;
     }
     else if (isConnected != null) {
       connectionStatusLabel = isConnected
-        ? <span className="badge badge-success">{ t('full_text_search_management.connection_status_label_connected') }</span>
-        : <span className="badge badge-danger">{ t('full_text_search_management.connection_status_label_disconnected') }</span>;
+        ? <span className="badge badge-pill badge-success">{ t('full_text_search_management.connection_status_label_connected') }</span>
+        : <span className="badge badge-pill badge-danger">{ t('full_text_search_management.connection_status_label_disconnected') }</span>;
     }
 
-    let indicesStatusLabel = <span className="label badge-default">――</span>;
+    let indicesStatusLabel = <span className="badge badge-pill badge-secondary">――</span>;
     if (isNormalized != null) {
       indicesStatusLabel = isNormalized
-        ? <span className="badge badge-info">{ t('full_text_search_management.indices_status_label_normalized') }</span>
-        : <span className="badge badge-warning">{ t('full_text_search_management.indices_status_label_unnormalized') }</span>;
+        ? <span className="badge badge-pill badge-info">{ t('full_text_search_management.indices_status_label_normalized') }</span>
+        : <span className="badge badge-pill badge-warning">{ t('full_text_search_management.indices_status_label_unnormalized') }</span>;
     }
 
     return (
       <table className="table table-bordered">
         <tbody>
           <tr>
-            <th>{ t('full_text_search_management.connection_status') }</th>
-            <td>{connectionStatusLabel}</td>
+            <th className="w-25">{t('full_text_search_management.connection_status')}</th>
+            <td className="w-75">{connectionStatusLabel}</td>
           </tr>
           <tr>
-            <th>{ t('full_text_search_management.indices_status') }</th>
-            <td>{indicesStatusLabel}</td>
+            <th className="w-25">{t('full_text_search_management.indices_status')}</th>
+            <td className="w-75">{indicesStatusLabel}</td>
           </tr>
           <tr>
-            <th className="col-sm-4">{ t('full_text_search_management.indices_summary') }</th>
-            <td className="p-4">
-              { this.renderIndexInfoPanels() }
-            </td>
+            <th className="w-25">{t('full_text_search_management.indices_summary')}</th>
+            <td className="p-4 w-75">{this.renderIndexInfoPanels()}</td>
           </tr>
         </tbody>
       </table>

src/client/js/components/PageComment/Comment.jsx

@@ -109,7 +109,7 @@ class Comment extends React.PureComponent {
 
   getRevisionLabelClassName() {
     return `page-comment-revision badge ${
-      this.isCurrentRevision() ? 'badge-primary' : 'badge-default'}`;
+      this.isCurrentRevision() ? 'badge-primary' : 'badge-secondary'}`;
   }
 
   editBtnClickedHandler() {

src/client/js/components/PageComment/CommentEditor.jsx

@@ -224,7 +224,7 @@ class CommentEditor extends React.Component {
 
     const errorMessage = <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>;
     const cancelButton = (
-      <Button outline color="danger" size="xs" className="fcbtn btn-rounded" onClick={this.toggleEditor}>
+      <Button outline color="danger" size="xs" className="fcbtn rounded-pill" onClick={this.toggleEditor}>
         Cancel
       </Button>
     );
@@ -232,7 +232,7 @@ class CommentEditor extends React.Component {
       <Button
         outline
         color="primary"
-        className="fcbtn btn-rounded btn-1b"
+        className="fcbtn rounded-pill btn-1b"
         onClick={this.postHandler}
       >
         Comment
@@ -255,11 +255,13 @@ class CommentEditor extends React.Component {
                     Write
                   </NavLink>
                 </NavItem>
-                <NavItem>
-                  <NavLink type="button" className={activeTab === 2 ? 'active' : ''} onClick={() => this.handleSelect(2)}>
-                    Preview
-                  </NavLink>
-                </NavItem>
+                { this.state.isMarkdown && (
+                  <NavItem>
+                    <NavLink type="button" className={activeTab === 2 ? 'active' : ''} onClick={() => this.handleSelect(2)}>
+                      Preview
+                    </NavLink>
+                  </NavItem>
+                ) }
               </Nav>
               <TabContent activeTab={activeTab}>
                 <TabPane tabId={1}>
@@ -277,32 +279,37 @@ class CommentEditor extends React.Component {
                     onCtrlEnter={this.postHandler}
                   />
                 </TabPane>
-                { this.state.isMarkdown && (
-                  <TabPane tabId={2}>
-                    <div className="comment-form-preview">
-                      {commentPreview}
-                    </div>
-                  </TabPane>
-                ) }
+                <TabPane tabId={2}>
+                  <div className="comment-form-preview">
+                    {commentPreview}
+                  </div>
+                </TabPane>
               </TabContent>
             </div>
             <div className="comment-submit">
               <div className="d-flex">
-                <label style={{ flex: 1 }}>
+                <label className="mr-2">
                   { isBaloonStyle && activeTab === 1 && (
-                    <span>
+                    <span className="custom-control custom-checkbox">
                       <input
                         type="checkbox"
+                        className="custom-control-input"
                         id="comment-form-is-markdown"
                         name="isMarkdown"
                         checked={this.state.isMarkdown}
                         value="1"
                         onChange={this.updateStateCheckbox}
                       />
-                      <span className="ml-2">Markdown</span>
+                      <label
+                        className="ml-2 custom-control-label"
+                        htmlFor="comment-form-is-markdown"
+                      >
+                        Markdown
+                      </label>
                     </span>
                   ) }
                 </label>
+                <span className="flex-grow-1" />
                 <span className="d-none d-sm-inline">{ this.state.errorMessage && errorMessage }</span>
                 { this.state.hasSlackConfig
                   && (

src/client/js/components/PageEditor/CodeMirrorEditor.jsx

@@ -549,7 +549,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   renderCheatsheetModalButton() {
     return (
-      <button type="button" className="btn-link gfm-cheatsheet-modal-link text-muted small p-0" onClick={() => { this.markdownHelpButtonClickedHandler() }}>
+      <button type="button" className="btn-link gfm-cheatsheet-modal-link small p-0" onClick={() => { this.markdownHelpButtonClickedHandler() }}>
         <i className="icon-question" /> Markdown
       </button>
     );
@@ -655,10 +655,12 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   getNavbarItems() {
+    const buttonColor = '';
     return [
       /* eslint-disable max-len */
       <Button
         key="nav-item-bold"
+        color={buttonColor}
         size="sm"
         title="Bold"
         onClick={this.createReplaceSelectionHandler('**', '**')}
@@ -667,6 +669,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-italic"
+        color={buttonColor}
         size="sm"
         title="Italic"
         onClick={this.createReplaceSelectionHandler('*', '*')}
@@ -675,6 +678,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-strikethrough"
+        color={buttonColor}
         size="sm"
         title="Strikethrough"
         onClick={this.createReplaceSelectionHandler('~~', '~~')}
@@ -683,6 +687,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-header"
+        color={buttonColor}
         size="sm"
         title="Heading"
         onClick={this.makeHeaderHandler}
@@ -691,6 +696,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-code"
+        color={buttonColor}
         size="sm"
         title="Inline Code"
         onClick={this.createReplaceSelectionHandler('`', '`')}
@@ -699,6 +705,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-quote"
+        color={buttonColor}
         size="sm"
         title="Quote"
         onClick={this.createAddPrefixToEachLinesHandler('> ')}
@@ -707,6 +714,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-ul"
+        color={buttonColor}
         size="sm"
         title="List"
         onClick={this.createAddPrefixToEachLinesHandler('- ')}
@@ -715,6 +723,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-ol"
+        color={buttonColor}
         size="sm"
         title="Numbered List"
         onClick={this.createAddPrefixToEachLinesHandler('1. ')}
@@ -723,6 +732,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-checkbox"
+        color={buttonColor}
         size="sm"
         title="Check List"
         onClick={this.createAddPrefixToEachLinesHandler('- [ ] ')}
@@ -731,6 +741,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-link"
+        color={buttonColor}
         size="sm"
         title="Link"
         onClick={this.createReplaceSelectionHandler('[', ']()')}
@@ -739,6 +750,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-image"
+        color={buttonColor}
         size="sm"
         title="Image"
         onClick={this.createReplaceSelectionHandler('![', ']()')}
@@ -747,6 +759,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-table"
+        color={buttonColor}
         size="sm"
         title="Table"
         onClick={this.showHandsonTableHandler}
@@ -755,6 +768,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       </Button>,
       <Button
         key="nav-item-drawio"
+        color={buttonColor}
         bsSize="small"
         title="draw.io"
         onClick={this.showDrawioHandler}

src/client/js/components/PageEditor/SimpleCheatsheet.jsx

@@ -11,7 +11,7 @@ class SimpleCheatsheet extends React.Component {
       <div className="card bg-default gfm-cheatsheet mb-0">
         <div className="card-body small p-b-0">
           <div className="row">
-            <div className="col-xs-6">
+            <div className="col-sm-6">
               <p>
                 # {t('sandbox.header_x', { index: '1' })}<br />
                 ## {t('sandbox.header_x', { index: '2' })}

src/client/styles/scss/_editor-overlay.scss

@@ -41,6 +41,7 @@
         min-width: 30em;
         font-family: monospace;
         color: $text-muted;
+        padding-bottom: 0;
       }
       ul > li {
         list-style: none;
@@ -48,6 +49,8 @@
     }
 
     .gfm-cheatsheet-modal-link {
+      background-color: transparent;
+      border: none;
       color: $text-muted;
       pointer-events: all;
       cursor: pointer;

src/client/styles/scss/_navbar.scss

@@ -12,6 +12,13 @@
     content: none;
   }
 
+  .search-top {
+    button {
+      background: transparent;
+      border: none;
+    }
+  }
+
   .nav-link {
     &:hover {
       background: rgba(0, 0, 0, 0.1);

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

@@ -43,6 +43,9 @@ h5 {
 .nav-tabs {
   .nav-item {
     margin-right: 0.15rem;
+    a.active {
+      cursor: default
+    }
   }
 }
 
@@ -74,10 +77,6 @@ h5 {
   .dropdown-toggle.btn.disabled {
     cursor: not-allowed;
   }
-  button {
-    background: transparent;
-    border: none;
-  }
 }
 
 // agile-admin style

src/client/styles/scss/theme/_apply-colors.scss

@@ -252,7 +252,7 @@ body.on-edit {
     }
 
     .nav.nav-tabs {
-      > li.active > a {
+      > li > a.active {
         background: transparent;
         border-bottom: solid 1px darken($bgcolor-global, 4%);
         border-bottom-color: darken($bgcolor-global, 4%);

src/server/views/admin/Users_reserve.html

@@ -29,7 +29,7 @@
       {% include './widget/menu.html' with {current: 'user'} %}
     </div>
 
-    <div class="col-md-9">
+    <div class="col-lg-9">
       <p>
         <button data-toggle="collapse" class="btn btn-default" href="#inviteUserForm" {% if isUserCountExceedsUpperLimit %}disabled{% endif %}>
           {{ t("user_management.invite_users") }}

src/server/views/admin/customize.html

@@ -21,7 +21,7 @@
 {% block content_main %}
 <div class="content-main admin-customize row">
   {% parent %}
-  <div class="col-md-9" id="admin-customize"></div>
+  <div class="col-lg-9" id="admin-customize"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/external-accounts.html

@@ -11,7 +11,7 @@
 {% block content_main %}
 <div class="content-main row">
   {% parent %}
-  <div class="col-md-9" id="admin-external-account-setting"></div>
+  <div class="col-lg-9" id="admin-external-account-setting"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/global-notification-detail.html

@@ -11,7 +11,7 @@
 {% block content_main %}
 <div class="content-main row">
   {% parent %}
-  <div class="col-md-9" id="admin-global-notification-setting"
+  <div class="col-lg-9" id="admin-global-notification-setting"
       data-global-notification="{{ globalNotification|json }}"></div>
 </div>
 

src/server/views/admin/index.html

@@ -11,7 +11,7 @@
 {% block content_main %}
 <div class="content-main row">
   {% parent %}
-  <div class="col-md-9" id="admin-home"></div>
+  <div class="col-lg-9" id="admin-home"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/markdown.html

@@ -12,7 +12,7 @@
 {% block content_main %}
 <div class="content-main row">
   {% parent %}
-  <div class="col-md-9" id="admin-markdown-setting"></div>
+  <div class="col-lg-9" id="admin-markdown-setting"></div>
 </div>
 
 {% endblock content_main %}

src/server/views/admin/notification.html

@@ -11,7 +11,7 @@
 {% block content_main %}
 <div class="content-main admin-notification row">
   {% parent %}
-  <div class="col-md-9" id="admin-notification-setting"></div>
+  <div class="col-lg-9" id="admin-notification-setting"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/search.html

@@ -12,7 +12,7 @@
 <div class="content-main row">
   {% parent %}
     <div
-      class="col-md-9"
+      class="col-lg-9"
       id ="admin-full-text-search-management"
     >
       <!-- Reactify Paginator start -->

src/server/views/admin/security.html

@@ -11,7 +11,7 @@
 {% block content_main %}
 <div class="content-main admin-security row">
   {% parent %}
-  <div class="col-md-9" id="admin-security-setting"></div>
+  <div class="col-lg-9" id="admin-security-setting"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/user-group-detail.html

@@ -13,7 +13,7 @@
   {% parent %}
   <div
     id="admin-user-group-detail"
-    class="col-md-9"
+    class="col-lg-9"
     data-user-group="{{ userGroup|json }}"
   >
   </div>

src/server/views/admin/user-groups.html

@@ -11,7 +11,7 @@
 {% block content_main %}
 <div class="content-main row">
   {% parent %}
-  <div id ="admin-user-group-page" class="col-md-9"></div>
+  <div id ="admin-user-group-page" class="col-lg-9"></div>
 </div>
 {% endblock content_main %}
 

src/server/views/admin/users.html

@@ -12,7 +12,7 @@
 <div class="content-main row">
   {% parent %}
   <div
-    class="col-md-9"
+    class="col-lg-9"
     id ="admin-user-page"
   >
   </div>

src/server/views/layout/admin.html

@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block content_main %}
-  <div class="col-md-3" id="admin-navigation"></div>
+  <div class="col-lg-3" id="admin-navigation"></div>
 {% endblock content_main %}
 
 {# disable custom script in admin page #}