Merge branch 'support/apply-bootstrap4' into imprv/diff-page-width

src/client/js/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -42,7 +42,7 @@ class PresentationForm extends React.Component {
     return (
       <fieldset className="form-group col-12 my-2">
 
-        <label className="col-12 control-label font-weight-bold text-left mt-3">
+        <label className="col-8 offset-4 control-label font-weight-bold text-left mt-3">
           {t('admin:markdown_setting.presentation_options.page_break_setting')}
         </label>
 
@@ -60,7 +60,12 @@ class PresentationForm extends React.Component {
                 <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_one_separator') }</p>
                 <div className="mt-3">
                   { t('admin:markdown_setting.presentation_options.preset_one_separator_desc') }
-                  <pre><code>{ t('admin:markdown_setting.presentation_options.preset_one_separator_value') }</code></pre>
+                  <input
+                    className="form-control"
+                    type="text"
+                    value={t('admin:markdown_setting.presentation_options.preset_one_separator_value')}
+                    readOnly
+                  />
                 </div>
               </label>
             </div>
@@ -79,7 +84,12 @@ class PresentationForm extends React.Component {
                 <p className="font-weight-bold">{ t('admin:markdown_setting.presentation_options.preset_two_separator') }</p>
                 <div className="mt-3">
                   { t('admin:markdown_setting.presentation_options.preset_two_separator_desc') }
-                  <pre><code>{ t('admin:markdown_setting.presentation_options.preset_two_separator_value') }</code></pre>
+                  <input
+                    className="form-control"
+                    type="text"
+                    value={t('admin:markdown_setting.presentation_options.preset_two_separator_value')}
+                    readOnly
+                  />
                 </div>
               </label>
             </div>

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

@@ -91,36 +91,38 @@ class GlobalNotificationList extends React.Component {
                 {notification.triggerPath}
               </td>
               <td>
-                {notification.triggerEvents.includes('pageCreate') && (
-                  <span className="badge badge-pill badge-success" data-toggle="tooltip" data-placement="top" title="Page Create">
+                <ul className="list-inline">
+                  {notification.triggerEvents.includes('pageCreate') && (
+                  <li className="list-inline-item badge badge-pill badge-success" data-toggle="tooltip" data-placement="top" title="Page Create">
                     <i className="icon-doc"></i> CREATE
-                  </span>
+                  </li>
                 )}
-                {notification.triggerEvents.includes('pageEdit') && (
-                  <span className="badge badge-pill badge-warning" data-toggle="tooltip" data-placement="top" title="Page Edit">
+                  {notification.triggerEvents.includes('pageEdit') && (
+                  <li className="list-inline-item badge badge-pill badge-warning" data-toggle="tooltip" data-placement="top" title="Page Edit">
                     <i className="icon-pencil"></i> EDIT
-                  </span>
+                  </li>
                 )}
-                {notification.triggerEvents.includes('pageMove') && (
-                  <span className="badge badge-pill badge-warning" data-toggle="tooltip" data-placement="top" title="Page Move">
+                  {notification.triggerEvents.includes('pageMove') && (
+                  <li className="list-inline-item badge badge-pill badge-warning" data-toggle="tooltip" data-placement="top" title="Page Move">
                     <i className="icon-action-redo"></i> MOVE
-                  </span>
+                  </li>
                 )}
-                {notification.triggerEvents.includes('pageDelete') && (
-                  <span className="badge badge-pill badge-danger" data-toggle="tooltip" data-placement="top" title="Page Delte">
+                  {notification.triggerEvents.includes('pageDelete') && (
+                  <li className="list-inline-item badge badge-pill badge-danger" data-toggle="tooltip" data-placement="top" title="Page Delte">
                     <i className="icon-fire"></i> DELETE
-                  </span>
+                  </li>
                 )}
-                {notification.triggerEvents.includes('pageLike') && (
-                  <span className="badge badge-pill badge-info" data-toggle="tooltip" data-placement="top" title="Page Like">
+                  {notification.triggerEvents.includes('pageLike') && (
+                  <li className="list-inline-item badge badge-pill badge-info" data-toggle="tooltip" data-placement="top" title="Page Like">
                     <i className="icon-like"></i> LIKE
-                  </span>
+                  </li>
                 )}
-                {notification.triggerEvents.includes('comment') && (
-                  <span className="badge badge-pill badge-light" data-toggle="tooltip" data-placement="top" title="New Comment">
+                  {notification.triggerEvents.includes('comment') && (
+                  <li className="list-inline-item badge badge-pill badge-light" data-toggle="tooltip" data-placement="top" title="New Comment">
                     <i className="icon-fw icon-bubble"></i> POST
-                  </span>
+                  </li>
                 )}
+                </ul>
               </td>
               <td>
                 {notification.__t === 'mail'

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

@@ -165,100 +165,129 @@ class ManageGlobalNotification extends React.Component {
 
             {this.state.notifyToType === 'mail'
               ? (
-                <div className="form-group notify-to-option" id="mail-input">
-                  <input
-                    className="form-control"
-                    type="text"
-                    name="toEmail"
-                    placeholder="Email"
-                    value={this.state.emailToSend}
-                    onChange={(e) => { this.onChangeEmailToSend(e.target.value) }}
-                  />
-                  <p className="help">
+                <>
+                  <div className="input-group notify-to-option" id="mail-input">
+                    <div className="input-group-prepend">
+                      <span className="input-group-text" id="mail-addon"><i className="ti-email" /></span>
+                    </div>
+                    <input
+                      className="form-control"
+                      type="text"
+                      aria-describedby="mail-addon"
+                      name="toEmail"
+                      placeholder="Email"
+                      value={this.state.emailToSend}
+                      onChange={(e) => { this.onChangeEmailToSend(e.target.value) }}
+                    />
+
+                  </div>
+                  <p className="p-2">
                     <b>Hint: </b>
                     <a href="https://ifttt.com/create" target="blank">{t('notification_setting.email.ifttt_link')}
                       <i className="icon-share-alt" />
                     </a>
                   </p>
-                </div>
+                </>
               )
               : (
-                <div className="form-group notify-to-option" id="slack-input">
-                  <input
-                    className="form-control"
-                    type="text"
-                    name="notificationGlobal[slackChannels]"
-                    placeholder="Slack Channel"
-                    value={this.state.slackChannelToSend}
-                    onChange={(e) => { this.onChangeSlackChannelToSend(e.target.value) }}
-                  />
-                </div>
+                <>
+                  <div className="input-group notify-to-option" id="slack-input">
+                    <div className="input-group-prepend">
+                      <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-slack" /></span>
+                    </div>
+                    <input
+                      className="form-control"
+                      type="text"
+                      aria-describedby="slack-channel-addon"
+                      name="notificationGlobal[slackChannels]"
+                      placeholder="Slack Channel"
+                      value={this.state.slackChannelToSend}
+                      onChange={(e) => { this.onChangeSlackChannelToSend(e.target.value) }}
+                    />
+                  </div>
+                  <p className="p-2">
+                    {/* eslint-disable-next-line react/no-danger */}
+                    <span dangerouslySetInnerHTML={{ __html: t('notification_setting.channel_desc') }} />
+                  </p>
+                </>
               )}
           </div>
 
           <div className="offset-1 col-sm-5">
             <div className="form-group">
               <h3>{t('notification_setting.trigger_events')}</h3>
-              <TriggerEventCheckBox
-                checkbox="success"
-                event="pageCreate"
-                checked={this.state.triggerEvents.has('pageCreate')}
-                onChange={() => this.onChangeTriggerEvents('pageCreate')}
-              >
-                <span className="badge badge-pill badge-success">
-                  <i className="icon-doc"></i> CREATE
-                </span>
-              </TriggerEventCheckBox>
-              <TriggerEventCheckBox
-                checkbox="warning"
-                event="pageEdit"
-                checked={this.state.triggerEvents.has('pageEdit')}
-                onChange={() => this.onChangeTriggerEvents('pageEdit')}
-              >
-                <span className="badge badge-pill badge-warning">
-                  <i className="icon-pencil"></i>EDIT
-                </span>
-              </TriggerEventCheckBox>
-              <TriggerEventCheckBox
-                checkbox="warning"
-                event="pageMove"
-                checked={this.state.triggerEvents.has('pageMove')}
-                onChange={() => this.onChangeTriggerEvents('pageMove')}
-              >
-                <span className="badge badge-pill badge-warning">
-                  <i className="icon-action-redo"></i>MOVE
-                </span>
-              </TriggerEventCheckBox>
-              <TriggerEventCheckBox
-                checkbox="danger"
-                event="pageDelete"
-                checked={this.state.triggerEvents.has('pageDelete')}
-                onChange={() => this.onChangeTriggerEvents('pageDelete')}
-              >
-                <span className="badge badge-pill badge-danger">
-                  <i className="icon-fire"></i>DELETE
-                </span>
-              </TriggerEventCheckBox>
-              <TriggerEventCheckBox
-                checkbox="info"
-                event="pageLike"
-                checked={this.state.triggerEvents.has('pageLike')}
-                onChange={() => this.onChangeTriggerEvents('pageLike')}
-              >
-                <span className="badge badge-pill badge-info">
-                  <i className="icon-like"></i>LIKE
-                </span>
-              </TriggerEventCheckBox>
-              <TriggerEventCheckBox
-                checkbox="secondary"
-                event="comment"
-                checked={this.state.triggerEvents.has('comment')}
-                onChange={() => this.onChangeTriggerEvents('comment')}
-              >
-                <span className="badge badge-pill badge-light">
-                  <i className="icon-bubble"></i>POST
-                </span>
-              </TriggerEventCheckBox>
+              <div className="my-1">
+                <TriggerEventCheckBox
+                  checkbox="success"
+                  event="pageCreate"
+                  checked={this.state.triggerEvents.has('pageCreate')}
+                  onChange={() => this.onChangeTriggerEvents('pageCreate')}
+                >
+                  <span className="badge badge-pill badge-success">
+                    <i className="icon-doc mr-1" /> CREATE
+                  </span>
+                </TriggerEventCheckBox>
+              </div>
+              <div className="my-1">
+                <TriggerEventCheckBox
+                  checkbox="warning"
+                  event="pageEdit"
+                  checked={this.state.triggerEvents.has('pageEdit')}
+                  onChange={() => this.onChangeTriggerEvents('pageEdit')}
+                >
+                  <span className="badge badge-pill badge-warning">
+                    <i className="icon-pencil mr-1" />EDIT
+                  </span>
+                </TriggerEventCheckBox>
+              </div>
+              <div className="my-1">
+                <TriggerEventCheckBox
+                  checkbox="warning"
+                  event="pageMove"
+                  checked={this.state.triggerEvents.has('pageMove')}
+                  onChange={() => this.onChangeTriggerEvents('pageMove')}
+                >
+                  <span className="badge badge-pill badge-warning">
+                    <i className="icon-action-redo mr-1" />MOVE
+                  </span>
+                </TriggerEventCheckBox>
+              </div>
+              <div className="my-1">
+                <TriggerEventCheckBox
+                  checkbox="danger"
+                  event="pageDelete"
+                  checked={this.state.triggerEvents.has('pageDelete')}
+                  onChange={() => this.onChangeTriggerEvents('pageDelete')}
+                >
+                  <span className="badge badge-pill badge-danger">
+                    <i className="icon-fire mr-1" />DELETE
+                  </span>
+                </TriggerEventCheckBox>
+              </div>
+              <div className="my-1">
+                <TriggerEventCheckBox
+                  checkbox="info"
+                  event="pageLike"
+                  checked={this.state.triggerEvents.has('pageLike')}
+                  onChange={() => this.onChangeTriggerEvents('pageLike')}
+                >
+                  <span className="badge badge-pill badge-info">
+                    <i className="icon-like mr-1" />LIKE
+                  </span>
+                </TriggerEventCheckBox>
+              </div>
+              <div className="my-1">
+                <TriggerEventCheckBox
+                  checkbox="secondary"
+                  event="comment"
+                  checked={this.state.triggerEvents.has('comment')}
+                  onChange={() => this.onChangeTriggerEvents('comment')}
+                >
+                  <span className="badge badge-pill badge-secondary">
+                    <i className="icon-bubble mr-1" />POST
+                  </span>
+                </TriggerEventCheckBox>
+              </div>
 
             </div>
           </div>

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

@@ -15,14 +15,14 @@ class UserNotificationRow extends React.PureComponent {
     return (
       <React.Fragment>
         <tr className="admin-notif-row" key={notification._id}>
-          <td>
+          <td className="px-4">
             {notification.pathPattern}
           </td>
-          <td>
-            {notification.channel}
+          <td className="px-4">
+            <span data-toggle="tooltip" data-placement="top" title="Slack"><i className="fa fa-slack"></i> {notification.channel}</span>
           </td>
           <td>
-            <button type="submit" className="btn btn-outline-secondary" onClick={() => { this.props.onClickDeleteBtn(notification._id) }}>{t('Delete')}</button>
+            <button type="submit" className="btn btn-outline-danger" onClick={() => { this.props.onClickDeleteBtn(notification._id) }}>{t('Delete')}</button>
           </td>
         </tr>
       </React.Fragment>

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

@@ -103,22 +103,30 @@ class UserTriggerNotification extends React.Component {
                   placeholder="e.g. /projects/xxx/MTG/*"
                   onChange={(e) => { this.changePathPattern(e.target.value) }}
                 />
-                {/* eslint-disable-next-line react/no-danger */}
-                <p className="help-block" dangerouslySetInnerHTML={{ __html: t('notification_setting.pattern_desc') }} />
+                <p className="p-2 mb-0">
+                  {/* eslint-disable-next-line react/no-danger */}
+                  <span dangerouslySetInnerHTML={{ __html: t('notification_setting.pattern_desc') }} />
+                </p>
               </td>
 
               <td>
-                <input
-                  className="form-control form-inline"
-                  type="text"
-                  name="channel"
-                  value={this.state.channel}
-                  placeholder="e.g. project-xxx"
-                  onChange={(e) => { this.changeChannel(e.target.value) }}
-                />
-                {/* eslint-disable-next-line react/no-danger */}
-                <p className="help-block" dangerouslySetInnerHTML={{ __html: t('notification_setting.channel_desc') }} />
-
+                <div className="input-group notify-to-option" id="slack-input">
+                  <div className="input-group-prepend">
+                    <span className="input-group-text"><i className="fa fa-slack" /></span>
+                  </div>
+                  <input
+                    className="form-control form-inline"
+                    type="text"
+                    name="channel"
+                    value={this.state.channel}
+                    placeholder="e.g. project-xxx"
+                    onChange={(e) => { this.changeChannel(e.target.value) }}
+                  />
+                </div>
+                <p className="p-2 mb-0">
+                  {/* eslint-disable-next-line react/no-danger */}
+                  <span dangerouslySetInnerHTML={{ __html: t('notification_setting.channel_desc') }} />
+                </p>
               </td>
               <td>
                 <button type="button" className="btn btn-primary" disabled={!this.validateForm()} onClick={this.onClickSubmit}>{t('add')}</button>

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

@@ -83,7 +83,7 @@ class GitHubSecurityManagement extends React.Component {
               </label>
             </div>
             {(!adminGeneralSecurityContainer.state.setupStrategies.includes('github') && isGitHubEnabled)
-              && <div className="badg badge-warning">{t('security_setting.setup_is_not_yet_complete')}</div>}
+              && <div className="badge badge-warning">{t('security_setting.setup_is_not_yet_complete')}</div>}
           </div>
         </div>
 

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

@@ -95,7 +95,7 @@ class UserManagement extends React.Component {
     const { t, adminUsersContainer } = this.props;
 
     const pager = (
-      <div className="pull-right">
+      <div className="pull-right my-3">
         <PaginationWrapper
           activePage={adminUsersContainer.state.activePage}
           changePage={this.handlePage}

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

@@ -36,7 +36,7 @@ class UserMenu extends React.Component {
         <li className="dropdown-divider"></li>
         <li className="dropdown-header">{t('admin:user_management.user_table.edit_menu')}</li>
         <li>
-          <a className="dropdown-item" href="" onClick={this.onPasswordResetClicked}>
+          <a className="dropdown-item" href="#" onClick={this.onPasswordResetClicked}>
             <i className="icon-fw icon-key"></i>{ t('admin:user_management.reset_password') }
           </a>
         </li>

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -20,7 +20,7 @@ const GrowiSubNavigation = (props) => {
   const {
     pageId, path, createdAt, creator, updatedAt, revisionAuthor, isCompactMode,
   } = pageContainer.state;
-  const compactClassName = isCompactMode ? 'fixed-top grw-compact-subnavbar px-3' : null;
+  const compactClassName = isCompactMode ? 'grw-compact-subnavbar' : null;
 
   // Display only the RevisionPath if the page is trash or forbidden
   if (isTrashPage(path) || isPageForbidden) {
@@ -36,7 +36,7 @@ const GrowiSubNavigation = (props) => {
   }
 
   return (
-    <div className={`d-flex align-items-center ${compactClassName}`}>
+    <div className={`row px-3 py-1 align-items-center ${compactClassName}`}>
 
       {/* Page Path */}
       <div className="title-container mr-auto">

src/client/js/components/Navbar/GrowiSubNavigationForUserPage.jsx

@@ -16,7 +16,7 @@ const GrowiSubNavigationForUserPage = (props) => {
   const { appContainer, pageContainer } = props;
   const { pageId } = pageContainer.state;
   const [isCompactMode, setIsCompactMode] = useState(false);
-  const scrollAmountForFixed = 175;
+  const scrollAmountForFixed = 50;
   const layoutType = appContainer.getConfig().layoutType;
 
   useEffect(() => {
@@ -26,38 +26,40 @@ const GrowiSubNavigationForUserPage = (props) => {
   }, []);
 
   return (
-    <div className={(isCompactMode && layoutType === 'growi') && 'fixed-top grw-compact-subnavbar px-3'}>
-
-      {/* Page Path */}
-      <h4>
-        <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
-      </h4>
-
-      <div className="d-flex">
-        <div className="users-info d-flex align-items-center mr-auto">
-          <UserPicture user={pageUser} />
-
-          <div className="users-meta">
-            <div className="d-flex align-items-center">
-              <h1>
-                {pageUser.name}
-              </h1>
-            </div>
-            <div className="user-page-meta">
-              <ul>
-                <li className="user-page-username"><i className="icon-user mr-1"></i>{pageUser.username}</li>
-                <li className="user-page-email">
-                  <i className="icon-envelope mr-1"></i>
-                  {pageUser.isEmailPublished ? pageUser.email : '*****'}
-                </li>
-                {pageUser.introduction && <li className="user-page-introduction"><p>{pageUser.introduction}</p></li>}
-              </ul>
+    <div className={`row px-3 py-1 ${(isCompactMode && layoutType === 'growi') && 'grw-compact-subnavbar'}`}>
+
+      <div className="col-12">
+        {/* Page Path */}
+        <h4>
+          <RevisionPath behaviorType={appContainer.config.behaviorType} pageId={pageId} pagePath={pageContainer.state.path} />
+        </h4>
+
+        <div className="d-flex">
+          <div className="users-info d-flex align-items-center mr-auto">
+            <UserPicture user={pageUser} />
+
+            <div className="users-meta">
+              <div className="d-flex align-items-center">
+                <h1>
+                  {pageUser.name}
+                </h1>
+              </div>
+              <div className="user-page-meta">
+                <ul>
+                  <li className="user-page-username"><i className="icon-user mr-1"></i>{pageUser.username}</li>
+                  <li className="user-page-email">
+                    <i className="icon-envelope mr-1"></i>
+                    {pageUser.isEmailPublished ? pageUser.email : '*****'}
+                  </li>
+                  {pageUser.introduction && <li className="user-page-introduction"><p>{pageUser.introduction}</p></li>}
+                </ul>
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Header Button */}
-        <BookmarkButton pageId={pageId} crowi={appContainer} size="lg" />
+          {/* Header Button */}
+          <BookmarkButton pageId={pageId} crowi={appContainer} size="lg" />
+        </div>
       </div>
 
 

src/client/js/services/PageContainer.js

@@ -8,7 +8,7 @@ import * as toastr from 'toastr';
 import { throttle } from 'throttle-debounce';
 
 const logger = loggerFactory('growi:services:PageContainer');
-const scrollAmountForFixed = 122;
+const scrollAmountForFixed = 50;
 
 /**
  * Service container related to Page

src/client/styles/scss/_navbar.scss

@@ -7,7 +7,7 @@
     padding: 0 1rem;
   }
 
-  .personal-dropdown > .dropdown-toggle::after {
+  #personal-dropdown::after {
     // hide caret
     content: none;
   }

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

@@ -25,6 +25,7 @@ body.on-edit {
   }
 
   // hide unnecessary elements
+  header,
   .grw-subnav,
   .row.row-alerts,
   .row.page-list,

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

@@ -180,4 +180,8 @@ fieldset[disabled] .btn {
 // badge
 .badge {
   letter-spacing: 0.05em;
+  &.badge-warning {
+    // badge-warning text is white color in bootstrap3
+    color: white;
+  }
 }

src/client/styles/scss/_page_growi.scss

@@ -1,5 +1,7 @@
 .growi {
   header {
+    // Adjust to be on top of the growi subnavigation
+    z-index: $zindex-sticky - 100;
     ul.authors {
       padding-left: 1.5em;
       margin: 0;

src/server/views/layout-growi/base/layout.html

@@ -9,12 +9,17 @@
 {% block layout_main %}
 <div class="container-fluid">
 
-  <div class="row grw-subnav">
-    <div class="col-12 grw-title-bar">
-      {% block content_header %}
-      {% endblock %}
-    </div><!-- /.grw-title-bar -->
-  </div><!-- /.row -->
+  <header class="sticky-top py-0" id="page-header">
+
+    <div id="grw-subnav" data-is-forbidden-page="{{ forbidden }}"></div>
+
+      {% if not page and not forbidden and ('/' === path or 'crowi' === getConfig('crowi', 'customize:behavior')) and not isUserPageList(path) and !isTrashPage() %}
+        {% if '/' === path.slice(-1) %}
+          {% include '../../widget/create_portal.html' %}
+        {% endif %}
+      {% endif %}
+
+  </header>
 
   <div class="row">
     <div id="main" class="main col-md-12 {% if page %}{{ css.grant(page) }}{% endif %} {% block main_css_class %}{% endblock %}">

src/server/views/layout-growi/page_list.html

@@ -25,7 +25,7 @@
     </div>
 
     {# relocate #revision-toc #}
-    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
+    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container pr-2">
       {% include './widget/liker-and-seenusers.html' %}
       <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="123">
         <div id="revision-toc-content" class="revision-toc-content"></div>

src/server/views/layout/layout.html

@@ -114,7 +114,7 @@
             <i class="icon-question mr-2"></i><span class="d-none d-md-inline-block mr-2">{{ t('Help') }}</span><span class="text-muted small"><i class="icon-share-alt"></i></span>
           </a>
         </li>
-        <li id="personal-dropdown" class="nav-item dropdown"></li>
+        <li id="personal-dropdown" class="nav-item dropdown dropdown-toggle"></li>
         {% else %}
         <li id="login-user" class="nav-item"><a class="nav-link" href="/login">Login</a></li>
         {% endif %}