Merge branch 'support/apply-bootstrap4' into imprv/gw2129-adjust-UserManagement-filter

resource/locales/en-US/sandbox-bootstrap3.md → resource/locales/en-US/sandbox-bootstrap4.md

@@ -1,11 +1,13 @@
 # Labels
 
-<span class="label label-default">Default</span>
-<span class="label label-primary">Primary</span>
-<span class="label label-success">Success</span>
-<span class="label label-info">Info</span>
-<span class="label label-warning">Warning</span>
-<span class="label label-danger">Danger</span>
+<span class="badge badge-primary">Primary</span>
+<span class="badge badge-secondary">Secondary</span>
+<span class="badge badge-success">Success</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-warning">Warning</span>
+<span class="badge badge-danger">Danger</span>
+<span class="badge badge-light">Light</span>
+<span class="badge badge-dark">Dark</span>
 
 # Alerts
 

resource/locales/en-US/translation.json

@@ -111,6 +111,13 @@
   "Specified users only": "Specified users only",
   "Just me": "Just me",
   "Only inside the group": "Only inside the group",
+  "page_list_and_search_results": "Page list / Search results",
+  "scope_of_page_disclosure": "Scope of page disclosure",
+  "set_point": "Set point",
+  "always_displayed": "Always displayed",
+  "always_hidden": "Always hidden",
+  "displayed_or_hidden": "Displayed / Hidden",
+  "page_access_and_delete_rights": "Page access / Delete rights",
   "Reselect the group": "Reselect the group",
   "Shareable link": "Shareable link",
   "The whitelist of registration permission E-mail address": "The whitelist of registration permission E-mail address",

resource/locales/ja/sandbox-bootstrap3.md → resource/locales/ja/sandbox-bootstrap4.md

@@ -1,11 +1,13 @@
 # Labels
 
-<span class="label label-default">Default</span>
-<span class="label label-primary">Primary</span>
-<span class="label label-success">Success</span>
-<span class="label label-info">Info</span>
-<span class="label label-warning">Warning</span>
-<span class="label label-danger">Danger</span>
+<span class="badge badge-primary">Primary</span>
+<span class="badge badge-secondary">Secondary</span>
+<span class="badge badge-success">Success</span>
+<span class="badge badge-info">Info</span>
+<span class="badge badge-warning">Warning</span>
+<span class="badge badge-danger">Danger</span>
+<span class="badge badge-light">Light</span>
+<span class="badge badge-dark">Dark</span>
 
 # Alerts
 

resource/locales/ja/translation.json

@@ -110,6 +110,13 @@
   "Specified users": "特定ユーザーのみ",
   "Just me": "自分のみ",
   "Only inside the group": "特定グループのみ",
+  "page_list_and_search_results": "ページリスト・検索結果",
+  "scope_of_page_disclosure": "ページの公開範囲",
+  "set_point": "設定値",
+  "always_displayed": "表示 (固定)",
+  "always_hidden": "非表示 (固定)",
+  "displayed_or_hidden": "表示 / 非表示",
+  "page_access_and_delete_rights": "ページの閲覧・削除権限",
   "Reselect the group": "グループの再選択",
   "Shareable link": "このページの共有用URL",
   "The whitelist of registration permission E-mail address": "登録許可メールアドレスの<br>ホワイトリスト",

src/client/js/components/Admin/Security/SecuritySetting.jsx

@@ -57,22 +57,82 @@ class SecuritySetting extends React.Component {
           <p>{t('Error occurred')} : {this.state.retrieveError}</p>
         </div>
           )}
-        <div className="row mb-5">
-          <div className="col-md-3 text-md-right text-nowrap py-2 mr-md-5">
+
+        <h4 className="mt-4">
+          { t('page_list_and_search_results') }
+        </h4>
+        <table className="table table-bordered col-lg-9 mb-5">
+          <thead>
+            <tr>
+              <th scope="col">{ t('scope_of_page_disclosure') }</th>
+              <th scope="col">{ t('set_point') }</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <th scope="row">{ t('Public') }</th>
+              <td>{ t('always_displayed') }</td>
+            </tr>
+            <tr>
+              <th scope="row">{ t('Anyone with the link') }</th>
+              <td>{ t('always_hidden') }</td>
+            </tr>
+            <tr>
+              <th scope="row">{ t('Just me') }</th>
+              <td>
+                <div className="custom-control custom-switch custom-checkbox-success">
+                  <input
+                    type="checkbox"
+                    className="custom-control-input"
+                    id="isShowRestrictedByOwner"
+                    checked={adminGeneralSecurityContainer.state.isShowRestrictedByOwner}
+                    onChange={() => { adminGeneralSecurityContainer.switchIsShowRestrictedByOwner() }}
+                  />
+                  <label className="custom-control-label" htmlFor="isShowRestrictedByOwner">
+                    {t('displayed_or_hidden')}
+                  </label>
+                </div>
+              </td>
+            </tr>
+            <tr>
+              <th scope="row">{ t('Only inside the group') }</th>
+              <td>
+                <div className="custom-control custom-switch custom-checkbox-success">
+                  <input
+                    type="checkbox"
+                    className="custom-control-input"
+                    id="isShowRestrictedByGroup"
+                    checked={adminGeneralSecurityContainer.state.isShowRestrictedByGroup}
+                    onChange={() => { adminGeneralSecurityContainer.switchIsShowRestrictedByGroup() }}
+                  />
+                  <label className="custom-control-label" htmlFor="isShowRestrictedByGroup">
+                    {t('displayed_or_hidden')}
+                  </label>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <h4>{t('page_access_and_delete_rights')}</h4>
+        <div className="row mb-4">
+          <div className="col-md-3 text-md-right py-2">
             <strong>{t('security_setting.Guest Users Access')}</strong>
           </div>
           <div className="col-md-6 ml-md-5">
             <div className="dropdown">
               <button
-                className={`btn btn-outline-secondary dropdown-toggle ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}`}
+                className={`btn btn-outline-secondary dropdown-toggle text-right col-12
+                            col-md-auto ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}`}
                 type="button"
                 id="dropdownMenuButton"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true"
               >
-                {currentRestrictGuestMode === 'Deny' && t('security_setting.guest_mode.deny')}
-                {currentRestrictGuestMode === 'Readonly' && t('security_setting.guest_mode.readonly')}
+                <span className="float-left">
+                  {currentRestrictGuestMode === 'Deny' && t('security_setting.guest_mode.deny')}
+                  {currentRestrictGuestMode === 'Readonly' && t('security_setting.guest_mode.readonly')}
+                </span>
               </button>
               <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                 <a className="dropdown-item" onClick={() => { adminGeneralSecurityContainer.changeRestrictGuestMode('Deny') }}>
@@ -86,7 +146,7 @@ class SecuritySetting extends React.Component {
           </div>
         </div>
         {adminGeneralSecurityContainer.isWikiModeForced && (
-        <div className="row mb-5">
+        <div className="row mb-4">
           <div className="col-xs-offset-3 col-xs-6 text-left">
             <p className="alert alert-warning mt-2 text-left">
               <i className="icon-exclamation icon-fw">
@@ -101,60 +161,27 @@ class SecuritySetting extends React.Component {
           </div>
         </div>
           )}
-        <div className="row mb-5">
-          <strong className="col-md-3 text-md-right text-nowrap mb-2 mr-md-5" dangerouslySetInnerHTML={{ __html: t('security_setting.page_listing_1') }} />
-          <div className="col-md-6">
-            <div className="custom-control custom-checkbox custom-checkbox-success ml-md-5">
-              <input
-                type="checkbox"
-                className="custom-control-input"
-                id="isShowRestrictedByOwner"
-                checked={adminGeneralSecurityContainer.state.isShowRestrictedByOwner}
-                onChange={() => { adminGeneralSecurityContainer.switchIsShowRestrictedByOwner() }}
-              />
-              <label className="custom-control-label" htmlFor="isShowRestrictedByOwner">
-                {t('security_setting.page_listing_1_desc')}
-              </label>
-            </div>
-          </div>
-        </div>
-
-        <div className="row mb-5">
-          <strong className="col-md-3 text-md-right text-nowrap mr-md-5 mb-2" dangerouslySetInnerHTML={{ __html: t('security_setting.page_listing_2') }} />
-          <div className="col-md-6 ml-md-5">
-            <div className="custom-control custom-checkbox custom-checkbox-success">
-              <input
-                type="checkbox"
-                className="custom-control-input"
-                id="isShowRestrictedByGroup"
-                checked={adminGeneralSecurityContainer.state.isShowRestrictedByGroup}
-                onChange={() => { adminGeneralSecurityContainer.switchIsShowRestrictedByGroup() }}
-              />
-              <label className="custom-control-label" htmlFor="isShowRestrictedByGroup">
-                {t('security_setting.page_listing_2_desc')}
-              </label>
-            </div>
-          </div>
-        </div>
 
-        <div className="row mb-5">
-          <div className="col-md-3 text-md-right mr-md-5 mb-2">
+        <div className="row mb-4">
+          <div className="col-md-3 text-md-right mb-2">
             <strong>{t('security_setting.complete_deletion')}</strong>
           </div>
           <div className="col-md-6 ml-md-5">
             <div className="dropdown">
               <button
-                className="btn btn-outline-secondary dropdown-toggle"
+                className="btn btn-outline-secondary dropdown-toggle text-right col-12 col-md-auto"
                 type="button"
                 id="dropdownMenuButton"
                 data-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true"
               >
-                {currentPageCompleteDeletionAuthority === 'anyOne' && t('security_setting.anyone')}
-                {currentPageCompleteDeletionAuthority === 'adminOnly' && t('security_setting.admin_only')}
-                {(currentPageCompleteDeletionAuthority === 'adminAndAuthor' || currentPageCompleteDeletionAuthority == null)
-                    && t('security_setting.admin_and_author')}
+                <span className="float-left">
+                  {currentPageCompleteDeletionAuthority === 'anyOne' && t('security_setting.anyone')}
+                  {currentPageCompleteDeletionAuthority === 'adminOnly' && t('security_setting.admin_only')}
+                  {(currentPageCompleteDeletionAuthority === 'adminAndAuthor' || currentPageCompleteDeletionAuthority == null)
+                      && t('security_setting.admin_and_author')}
+                </span>
               </button>
               <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                 <a className="dropdown-item" onClick={() => { adminGeneralSecurityContainer.changePageCompleteDeletionAuthority('anyOne') }}>
@@ -174,7 +201,7 @@ class SecuritySetting extends React.Component {
           </div>
         </div>
         <div className="row my-3">
-          <div className="offset-3 col-5">
+          <div className="text-center text-md-left offset-md-3 col-md-5">
             <button type="button" className="btn btn-primary" disabled={this.state.retrieveError != null} onClick={this.putSecuritySetting}>
               {t('Update')}
             </button>

src/client/js/components/Admin/Users/ExternalAccountTable.jsx

@@ -80,7 +80,7 @@ class ExternalAccountTable extends React.Component {
                   <td>
                     {ea.user.password
                       ? (
-                        <span className="label label-info">
+                        <span className="badge badge-info">
                           {t('admin:user_management.set')}
                         </span>
                       )

src/client/js/components/Admin/Users/UserInviteModal.jsx

@@ -131,9 +131,13 @@ class UserInviteModal extends React.Component {
         {userList.map((user) => {
           const copyText = `Email:${user.email} Password:${user.password} `;
           return (
-            <CopyToClipboard key={user.email} text={copyText} onCopy={this.showToaster}>
-              <li key={user.email} className="btn">Email: <strong className="mr-3">{user.email}</strong> Password: <strong>{user.password}</strong></li>
-            </CopyToClipboard>
+            <div className="my-1">
+              <CopyToClipboard key={user.email} text={copyText} onCopy={this.showToaster}>
+                <li key={user.email} className="btn btn-outline-secondary">
+                Email: <strong className="mr-3">{user.email}</strong> Password: <strong>{user.password}</strong>
+                </li>
+              </CopyToClipboard>
+            </div>
           );
         })}
       </ul>

src/client/js/components/PageEditorByHackmd.jsx

@@ -262,7 +262,7 @@ class PageEditorByHackmd extends React.Component {
               <div className="card-header bg-warning"><i className="icon-fw icon-info"></i> {t('hackmd.draft_outdated')}</div>
               <div className="card-body text-center">
                 {t('hackmd.based_on_revision')}&nbsp;
-                <a href={`?revision=${revisionIdHackmdSynced}`}><span className="label label-default">{revisionIdHackmdSynced.substr(-8)}</span></a>
+                <a href={`?revision=${revisionIdHackmdSynced}`}><span className="badge badge-secondary">{revisionIdHackmdSynced.substr(-8)}</span></a>
 
                 <div className="text-center mt-3">
                   <button

src/client/js/components/PageList/PageListMeta.jsx

@@ -19,13 +19,13 @@ export default class PageListMeta extends React.Component {
     // portal check
     let portalLabel;
     if (this.isPortalPath(page.path)) {
-      portalLabel = <span className="label label-info">PORTAL</span>;
+      portalLabel = <span className="badge badge-info">PORTAL</span>;
     }
 
     // template check
     let templateLabel;
     if (templateChecker(page.path)) {
-      templateLabel = <span className="label label-info">TMPL</span>;
+      templateLabel = <span className="badge badge-info">TMPL</span>;
     }
 
     let commentCount;

src/client/js/components/StaffCredit/StaffCredit.jsx

@@ -2,9 +2,15 @@ import React from 'react';
 import { GlobalHotKeys } from 'react-hotkeys';
 
 import loggerFactory from '@alias/logger';
+import {
+  Modal, ModalBody,
+} from 'reactstrap';
 
 import contributors from './Contributor';
 
+// Unit is px / milli sec
+const scrollSpeed = 0.3;
+
 /**
  * Page staff credit component
  *
@@ -39,6 +45,10 @@ export default class StaffCredit extends React.Component {
           isShown: true,
           userCommand: [],
         });
+        const target = $('.credit-curtain');
+        const scrollTargetHeight = target.children().innerHeight();
+        const duration = scrollTargetHeight / scrollSpeed;
+        target.animate({ scrollTop: scrollTargetHeight }, duration, 'linear');
       }
       else {
         // add UserCommand
@@ -96,12 +106,10 @@ export default class StaffCredit extends React.Component {
         );
       });
       return (
-        <div className="text-center credit-curtain" onClick={this.deleteCredit}>
-          <div className="credit-body">
-            <h1 className="staff-credit-mb-10">GROWI Contributors</h1>
-            <div className="clearfix"></div>
-            {credit}
-          </div>
+        <div className="text-center" onClick={this.deleteCredit}>
+          <h1 className="staff-credit-mb-10">GROWI Contributors</h1>
+          <div className="clearfix"></div>
+          {credit}
         </div>
       );
     }
@@ -113,7 +121,11 @@ export default class StaffCredit extends React.Component {
     const handlers = { check: (event) => { return this.check(event) } };
     return (
       <GlobalHotKeys keyMap={keyMap} handlers={handlers}>
-        {this.renderContributors()}
+        <Modal isOpen={this.state.isShown} toggle={this.deleteCredit} scrollable className="staff-credit">
+          <ModalBody className="credit-curtain">
+            {this.renderContributors()}
+          </ModalBody>
+        </Modal>
       </GlobalHotKeys>
     );
   }

src/client/js/components/TagsList.jsx

@@ -56,7 +56,7 @@ class TagsList extends React.Component {
       return (
         <a key={data.name} href={`/_search?q=tag:${data.name}`} className="list-group-item">
           <i className="icon-tag mr-2"></i>{data.name}
-          <span className="ml-4 list-tag-count label label-default text-muted">{data.count}</span>
+          <span className="ml-4 list-tag-count badge badge-secondary text-muted">{data.count}</span>
         </a>
       );
     });

src/client/styles/scss/_admin.scss

@@ -160,8 +160,12 @@
       background-color: rgba($info, 0.1);
     }
   }
+
+  .grw-fixed-controls-container {
+    display: none;
+  }
 }
 
 .admin-navigation > a + a {
   margin-top: 2px;
-}
+}

src/client/styles/scss/_on-edit.scss

@@ -128,7 +128,7 @@ body.on-edit {
 
     .grw-grant-selector {
       .dropdown-toggle {
-        min-width: 150px;
+        min-width: 100px;
 
         // caret
         &::after {

src/client/styles/scss/_staff_credit.scss

@@ -1,19 +1,14 @@
 // Staff Credit
-#staff-credit {
+.staff-credit {
+  // attached !important for updating from .modal-dialog class style
+  width: 80vw !important;
+  height: 80vh !important;
+  max-width: initial !important;
   // see https://css-tricks.com/old-timey-terminal-styling/
   @mixin old-timey-terminal-styling() {
     text-shadow: 0 0 10px #c8c8c8;
     background-color: black;
     background-image: radial-gradient(rgba(50, 100, 100, 0.75), black 120%);
-    &::after {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      content: '';
-      background: repeating-linear-gradient(0deg, rgba(black, 0.15), rgba(black, 0.15) 2px, transparent 2px, transparent 4px);
-    }
   }
 
   font-family: 'Press Start 2P', $basefont1;
@@ -33,35 +28,10 @@
 
   // see https://css-tricks.com/old-timey-terminal-styling/
   .credit-curtain {
-    position: fixed;
-    top: 10vh;
-    left: 20vh;
-    width: 80vw;
-    height: 80vh;
-    overflow-y: hidden;
-
+    padding-top: 80vh;
     @include old-timey-terminal-styling();
   }
 
-  .credit-body {
-    position: relative;
-    top: $credit-length;
-    animation-name: Credit;
-    // credit duration
-    animation-duration: 20s;
-    animation-timing-function: linear;
-  }
-
-  @keyframes Credit {
-    from {
-      top: 100%;
-    }
-    to {
-      // credit length
-      top: $credit-length;
-    }
-  }
-
   h1 {
     font-size: 3em;
   }

src/client/styles/scss/_wiki.scss

@@ -123,6 +123,10 @@ div.body {
     }
   }
 
+  pre {
+    white-space: pre-line;
+  }
+
   // only inline code blocks
   p code {
     font-family: $font-family-monospace-not-strictly;

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

@@ -19,6 +19,9 @@ input.form-control,
 textarea.form-control {
   color: lighten($color-global, 30%);
   background-color: darken($bgcolor-global, 5%);
+  &:focus {
+    background-color: $bgcolor-global;
+  }
   // FIXME: accent color
   // border: 1px solid darken($border, 30%);
 }
@@ -75,6 +78,22 @@ textarea.form-control {
   @extend .bg-dark;
 }
 
+/*
+ * Pagination
+ */
+ul.pagination {
+  li.page-item {
+    button.page-link {
+      @extend .btn-dark;
+    }
+    &.active {
+      button {
+        @extend .active;
+      }
+    }
+  }
+}
+
 .table > thead > tr > th,
 .table > tbody > tr > th,
 .table > tfoot > tr > th,

src/server/routes/installer.js

@@ -38,7 +38,7 @@ module.exports = function(crowi, app) {
 
     // create /Sandbox/*
     promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox.md'), '/Sandbox', owner, lang));
-    promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-bootstrap3.md'), '/Sandbox/Bootstrap3', owner, lang));
+    promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-bootstrap4.md'), '/Sandbox/Bootstrap3', owner, lang));
     promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-diagrams.md'), '/Sandbox/Diagrams', owner, lang));
     promises.push(createPage(path.join(crowi.localeDir, lang, 'sandbox-math.md'), '/Sandbox/Math', owner, lang));
 

src/server/views/admin/Users_reserve.html

@@ -162,7 +162,7 @@
             <td>
               <img src="{{ sUser|picture }}" class="picture rounded-circle" />
               {% if sUser.admin %}
-              <span class="label label-inverse label-admin">
+              <span class="badge badge-dark label-admin">
               {{ t('administrator') }}
               </span>
               {% endif %}

src/server/views/widget/page_list.html

@@ -15,11 +15,11 @@
   </a>
   <span class="page-list-meta">
     {% if page.isPortal() %}
-      <span class="label label-info">PORTAL</span>
+      <span class="badge badge-info">PORTAL</span>
     {% endif  %}
 
     {% if page.isTemplate() %}
-      <span class="label label-info">TMPL</span>
+      <span class="badge badge-info">TMPL</span>
     {% endif  %}
 
     {% if page.commentCount > 0 %}