Merge remote-tracking branch 'origin/support/apply-bootstrap4' into support/migrate-to-reactstrap

# Conflicts:
#	src/client/js/components/HeaderSearchBox.jsx
#	src/client/js/components/InstallerForm.jsx
#	src/client/js/components/PageEditor/TextAreaEditor.jsx
#	src/client/js/components/SavePageControls.jsx
#	src/client/js/components/SearchPage/SearchPageForm.jsx

src/client/js/components/HeaderSearchBox.jsx

@@ -2,12 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
-import {
-  Button,
-  InputGroup, InputGroupButtonDropdown, InputGroupAddon,
-  DropdownToggle, DropdownMenu, DropdownItem,
-} from 'reactstrap';
-
 import SearchForm from './SearchForm';
 
 
@@ -17,12 +11,10 @@ class HeaderSearchBox extends React.Component {
     super(props);
 
     this.state = {
-      dropdownOpen: false,
       text: '',
       isScopeChildren: false,
     };
 
-    this.toggle = this.toggle.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
     this.onClickAllPages = this.onClickAllPages.bind(this);
     this.onClickChildren = this.onClickChildren.bind(this);
@@ -35,10 +27,6 @@ class HeaderSearchBox extends React.Component {
   componentWillUnmount() {
   }
 
-  toggle() {
-    this.setState({ dropdownOpen: !this.state.dropdownOpen });
-  }
-
   onInputChange(text) {
     this.setState({ text });
   }
@@ -72,15 +60,17 @@ class HeaderSearchBox extends React.Component {
       : 'All pages';
 
     return (
-      <>
-        <InputGroup className="flex-nowrap">
-          <InputGroupButtonDropdown addonType="append" isOpen={this.state.dropdownOpen} toggle={this.toggle} className="btn-group-dropdown-scope">
-            <DropdownToggle caret>{scopeLabel}</DropdownToggle>
-            <DropdownMenu className="pl-3 py-0" title={scopeLabel}>
-              <DropdownItem onClick={this.onClickAllPages}>All pages</DropdownItem>
-              <DropdownItem onClick={this.onClickChildren}>{ t('header_search_box.item_label.This tree') }</DropdownItem>
-            </DropdownMenu>
-          </InputGroupButtonDropdown>
+      <div className="form-group">
+        <div className="input-group flex-nowrap">
+          <div className="dropdown my-auto">
+            <span className="btn-group-dropdown-scope d-block dropdown-toggle pl-3 pr-2" id="dbScope" data-toggle="dropdown">
+              {scopeLabel}
+            </span>
+            <div className="dropdown-menu" aria-labelledby="dbScope">
+              <a className="dropdown-item" onClick={this.onClickAllPages}>All pages</a>
+              <a className="dropdown-item" onClick={this.onClickChildren}>{ t('header_search_box.item_label.This tree') }</a>
+            </div>
+          </div>
           <SearchForm
             t={this.props.t}
             crowi={this.props.crowi}
@@ -88,13 +78,13 @@ class HeaderSearchBox extends React.Component {
             onSubmit={this.search}
             placeholder="Search ..."
           />
-          <InputGroupAddon addonType="append" className="btn-group-submit-search">
-            <Button color="link" onClick={this.search}>
+          <div className="btn-group-submit-search mr-2 my-1">
+            <span bsStyle="link" onClick={this.search}>
               <i className="icon-magnifier"></i>
-            </Button>
-          </InputGroupAddon>
-        </InputGroup>
-      </>
+            </span>
+          </div>
+        </div>
+      </div>
     );
   }
 

src/client/js/components/InstallerForm.jsx

@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
 import i18next from 'i18next';
 import { withTranslation } from 'react-i18next';
 
-// TODO: GW-333
-// import FormGroup from 'react-bootstrap/es/FormGroup';
-// import Radio from 'react-bootstrap/es/Radio';
+import Radio from 'react-bootstrap/es/Radio';
 
 class InstallerForm extends React.Component {
 
@@ -50,14 +48,14 @@ class InstallerForm extends React.Component {
     const checkedBtn = this.state.checkedBtn;
 
     return (
-      <div className={`login-dialog p-t-10 p-b-10 col-sm-offset-4 col-sm-4${hasErrorClass}`}>
+      <div className={`login-dialog py-3 col-sm-offset-4 col-sm-4${hasErrorClass}`}>
         <p className="alert alert-success">
           <strong>{ this.props.t('installer.create_initial_account') }</strong><br />
           <small>{ this.props.t('installer.initial_account_will_be_administrator_automatically') }</small>
         </p>
 
         <form role="form" action="/installer" method="post" id="register-form">
-          <FormGroup className="text-center">
+          <div className="form-group text-center">
             <Radio
               name="registerForm[app:globalLang]"
               value="en-US"
@@ -76,7 +74,7 @@ class InstallerForm extends React.Component {
             >
               日本語
             </Radio>
-          </FormGroup>
+          </div>
 
           <div className={`input-group${hasErrorClass}`}>
             <span className="input-group-addon"><i className="icon-user" /></span>
@@ -129,14 +127,14 @@ class InstallerForm extends React.Component {
 
           <input type="hidden" name="_csrf" value={this.props.csrf} />
 
-          <div className="input-group m-t-30 m-b-20 d-flex justify-content-center">
+          <div className="input-group mt-4 mb-3 d-flex justify-content-center">
             <button type="submit" className="fcbtn btn btn-success btn-1b btn-register">
               <span className="btn-label"><i className="icon-user-follow" /></span>
               <span className="btn-label-text">{ this.props.t('Create') }</span>
             </button>
           </div>
 
-          <div className="input-group m-t-30 d-flex justify-content-center">
+          <div className="input-group mt-4 d-flex justify-content-center">
             <a href="https://growi.org" className="link-growi-org">
               <span className="growi">GROWI</span>.<span className="org">ORG</span>
             </a>

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

@@ -1,9 +1,6 @@
 import React from 'react';
 // import PropTypes from 'prop-types';
 
-// TODO: GW-333
-// import FormControl from 'react-bootstrap/es/FormControl';
-
 import InterceptorManager from '@commons/service/interceptor-manager';
 
 import AbstractEditor from './AbstractEditor';
@@ -245,7 +242,7 @@ export default class TextAreaEditor extends AbstractEditor {
   render() {
     return (
       <React.Fragment>
-        <FormControl
+        <input
           componentClass="textarea"
           className="textarea-editor"
           inputRef={(ref) => { this.textarea = ref }}

src/client/js/components/SavePageControls.jsx

@@ -3,11 +3,6 @@ import PropTypes from 'prop-types';
 
 import { withTranslation } from 'react-i18next';
 
-// TODO: GW-333
-// import ButtonToolbar from 'react-bootstrap/es/ButtonToolbar';
-// import SplitButton from 'react-bootstrap/es/SplitButton';
-// import MenuItem from 'react-bootstrap/es/MenuItem';
-
 import PageContainer from '../services/PageContainer';
 import AppContainer from '../services/AppContainer';
 import EditorContainer from '../services/EditorContainer';
@@ -100,20 +95,25 @@ class SavePageControls extends React.Component {
           )
         }
 
-        <ButtonToolbar>
-          <SplitButton
+        <div className="btn-group dropup">
+          <button type="button" className="btn btn-primary px-5">{labelSubmitButton}</button>
+          <button
+            type="button"
             id="spl-btn-submit"
-            bsStyle="primary"
-            className="btn-submit"
-            dropup
-            pullRight
+            className="btn-submit btn btn-primary dropdown-toggle dropdown-toggle-split"
+            data-toggle="dropdown"
             onClick={this.save}
-            title={labelSubmitButton}
           >
-            <MenuItem eventKey="1" onClick={this.saveAndOverwriteScopesOfDescendants}>{labelOverwriteScopes}</MenuItem>
-            {/* <MenuItem divider /> */}
-          </SplitButton>
-        </ButtonToolbar>
+            <span className="sr-only">{labelSubmitButton}</span>
+          </button>
+          <div
+            className="dropdown-menu"
+            // eventKey="1"
+            onClick={this.saveAndOverwriteScopesOfDescendants}
+          >
+            {labelOverwriteScopes}
+          </div>
+        </div>
       </div>
     );
   }

src/client/js/components/SearchPage/SearchPageForm.jsx

@@ -1,17 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-// TODO: GW-333
-// import FormGroup from 'react-bootstrap/es/FormGroup';
-// import InputGroup from 'react-bootstrap/es/InputGroup';
-
-import {
-  Button,
-} from 'reactstrap';
-
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
-
 import SearchForm from '../SearchForm';
 
 // Search.SearchForm
@@ -41,21 +32,19 @@ class SearchPageForm extends React.Component {
 
   render() {
     return (
-      <FormGroup>
-        <InputGroup>
-          <SearchForm
-            t={this.props.t}
-            onSubmit={this.search}
-            keyword={this.state.searchedKeyword}
-            onInputChange={this.onInputChange}
-          />
-          <InputGroup.Button className="">
-            <Button color="secondary" onClick={this.search}>
-              <i className="icon-magnifier"></i>
-            </Button>
-          </InputGroup.Button>
-        </InputGroup>
-      </FormGroup>
+      <div className="input-group mb-3">
+        <SearchForm
+          t={this.props.t}
+          onSubmit={this.search}
+          keyword={this.state.searchedKeyword}
+          onInputChange={this.onInputChange}
+        />
+        <div className="input-group-append">
+          <button className="btn btn-outline-secondary" type="button" id="button-addon2" onClick={this.search}>
+            <i className="icon-magnifier"></i>
+          </button>
+        </div>
+      </div>
     );
   }
 

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

@@ -2,11 +2,13 @@
   // more than tablet size
   @include media-breakpoint-up(sm) {
     .modal-dialog {
-      width: 750px;
+      width: 45%;
+      max-width: initial;
     }
   }
 
   .modal-body {
+    //TODO remove legend
     legend {
       margin-bottom: 10px;
     }

src/client/styles/scss/_layout.scss

@@ -179,3 +179,9 @@
   margin-left: -15px;
   overflow: unset;
 }
+
+//@each $
+.grw-modal-head {
+  font-size: 1em;
+  border-bottom: 1px solid $grw-line-gray;
+}

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

@@ -135,10 +135,6 @@ body.on-edit {
         min-width: 150px;
       }
     }
-
-    .btn-submit {
-      width: 100px;
-    }
   }
 
   #page-status-alert .myadmin-alert {

src/server/views/layout-growi/widget/comments.html

@@ -2,7 +2,7 @@
 
   <div class="page-comments col-lg-7 col-md-9">
 
-    <h4><i class="icon-fw icon-bubbles"></i> Comments</h4>
+    <h4 class="my-2"><i class="icon-fw icon-bubbles"></i> Comments</h4>
 
     <div class="page-comments-list" id="page-comments-list"></div>
 

src/server/views/layout-kibela/widget/comments.html

@@ -2,7 +2,7 @@
 
     <div class="page-comments">
 
-      <h4><i class="icon-fw icon-bubbles"></i> Comments</h4>
+      <h4 class="my-2"><i class="icon-fw icon-bubbles"></i> Comments</h4>
 
       <div class="page-comments-list" id="page-comments-list"></div>
 

src/server/views/layout/layout.html

@@ -79,7 +79,7 @@
     <div class="navbar-header d-flex w-100">
 
       <!-- 1 GROWI logo -->
-      <a class="logo d-block top-left-part bg-grw-mos-green my-auto px-3" href="/">
+      <a class="logo d-block top-left-part bg-grw-mos-green my-auto" href="/">
         <div class="logo-mark _white d-inline-block">{% include '../widget/logo.html' %}</div>
         <span class="logo-text mx-3 text-white">
           {% set appTitle = appService.getAppTitle() %}
@@ -117,7 +117,7 @@
       </ul>
 
       <!-- 5 user action -->
-      <ul class="nav navbar-top-links flex-nowrap ml-auto my-auto">
+      <ul class="nav navbar-top-links flex-nowrap ml-auto mr-2 my-auto">
         {% if user and user.admin %}
         <li class="nav-item-admin mr-2 mr-lg-3 my-auto">
           <a class="text-white" href="/admin">

src/server/views/modal/create_page.html

@@ -3,15 +3,15 @@
     <div class="modal-content">
 
       <div class="modal-header bg-primary">
-        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-        <div class="modal-title">{{ t('New Page') }}</div>
+        <div class="modal-title text-white">{{ t('New Page') }}</div>
+        <button type="button" class="close text-white" data-dismiss="modal" aria-hidden="true">&times;</button>
       </div>
 
       <div class="modal-body">
 
         <form class="row form-horizontal" id="create-page-today" role="form">
-          <fieldset class="col-xs-12">
-            <legend>{{ t("Create today's") }}</legend>
+          <fieldset class="col-12 mb-5">
+            <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>
@@ -20,15 +20,15 @@
                 <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 btn-rounded btn-primary btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
+                <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>
           </fieldset>
         </form>
 
-        <form class="row form-horizontal m-t-15" id="create-page-under-tree" role="form">
-          <fieldset class="col-xs-12">
-            <legend>{{ t('Create under') }}</legend>
+        <form class="row form-horizontal" id="create-page-under-tree" role="form">
+          <fieldset class="col-12 mb-5">
+            <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 searchConfigured() %}
@@ -38,25 +38,26 @@
                 {% endif %}
               </div>
               <div class="create-page-button-container">
-                <button type="submit" class="fcbtn btn btn-outline btn-rounded btn-primary btn-1b"><i class="icon-fw icon-doc"></i>{{ t('Create') }}</button>
+                <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>
           </fieldset>
         </form>
 
         {% set templateParentPath = parentPath(path | preventXss | escape) %}
-        <div id="template-form" class="row form-horizontal m-t-15">
-          <fieldset class="col-xs-12">
-            <legend>{{ t('template.modal_label.Create template under', templateParentPath) }}</legend>
+        <div id="template-form" class="row form-horizontal">
+          <fieldset class="col-12">
+            <h3 class="grw-modal-head pb-2">{{ t('template.modal_label.Create template under', templateParentPath) }}</h3>
             <div class="d-flex create-page-input-container">
               <div class="create-page-input-row d-flex align-items-center">
                 <select id="template-type" class="form-control selectpicker" title="{{ t('template.option_label.select') }}">
+                  <!-- TODO:select box refactor -->
                   <option value="children" data-subtext="- {{ t('template.children.desc') }}">{{ t('template.children.label') }}(_template)</option>
                   <option value="decentants" data-subtext="- {{ t('template.decendants.desc') }}">{{ t('template.decendants.label') }}(__template)</option>
                 </select>
               </div>
-              <div class="create-page-button-container">
-                <a id="link-to-template" href="{{ page.path || path }}" class="fcbtn btn btn-outline btn-rounded btn-primary btn-1b disabled">
+              <div class="create-page-button-container my-auto">
+                <a id="link-to-template" href="{{ page.path || path }}" class="fcbtn btn btn-outline-primary rounded-pill btn-1b disabled">
                   <i class="icon-fw icon-doc"></i>
                   <span id="create-template-button-link">{{ t('Edit') }}</span>
                 </a>

src/server/views/widget/page_tabs.html

@@ -41,7 +41,7 @@
       <a class="nav-link dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
         <i class="icon-options-vertical"></i>
       </a>
-      <ul class="dropdown-menu">
+      <ul class="dropdown-menu dropdown-menu-right">
         <li><a href="#" data-target="#create-template" data-toggle="modal"><i class="icon-fw icon-magic-wand"></i> {{ t('template.option_label.create/edit') }}</a></li>
         {% if ('/' !== path) %}
           <li class="divider"></li>
@@ -57,7 +57,7 @@
       <a class="nav-link dropdown-toggle {% if not user %}dropdown-disabled{% endif %}" {% if user %}data-toggle="dropdown" href="#"{% endif %}>
         <i class="icon-options-vertical"></i>
       </a>
-      <ul class="dropdown-menu">
+      <ul class="dropdown-menu dropdown-menu-right">
         <li><a href="#" data-target="#renamePage" data-toggle="modal"><i class="icon-fw icon-action-redo"></i> {{ t('Move/Rename') }}</a></li>
         <li><a href="#" data-target="#duplicatePage" data-toggle="modal"><i class="icon-fw icon-docs"></i> {{ t('Duplicate') }}</a></li>
         <li class="divider"></li>

src/server/views/widget/user_page_content.html

@@ -1,17 +1,17 @@
-<div class="user-page-content">
-  <ul class="nav nav-tabs user-page-content-menu">
-    <li class="active">
-      <a href="#user-bookmark-list" data-toggle="tab"><i class="icon-star"></i> Bookmarks</a>
+<div class="user-page-content mb-4">
+  <ul class="nav nav-tabs user-page-content-menu mb-4" role="tablist">
+    <li class="nav-item">
+      <a class="nav-link active" href="#user-bookmark-list" role="tab" data-toggle="tab"><i class="icon-star"></i> Bookmarks</a>
     </li>
-    <li>
-      <a href="#user-created-list" data-toggle="tab"><i class="icon-clock"></i> Recently Created</a>
+    <li class="nav-item">
+      <a class="nav-link" href="#user-created-list" role="tab" data-toggle="tab"><i class="icon-clock"></i> Recently Created</a>
     </li>
-    <li>
-      <a href="#user-draft-list" data-toggle="tab"><i class="icon-docs"></i> My Drafts</a>
+    <li class="nav-item">
+      <a class="nav-link" href="#user-draft-list" role="tab" data-toggle="tab"><i class="icon-docs"></i> My Drafts</a>
     </li>
     {% if user._id.toString() == pageUser._id.toString() %}
-    <li>
-      <a href="/me"><i class="icon-wrench"></i> Settings</a>
+    <li class="nav-item">
+      <a class="nav-link" href="/me" role="tab"><i class="icon-wrench"></i> Settings</a>
     </li>
     {% endif %}
   </ul>

src/server/views/widget/user_page_header.html

@@ -4,7 +4,7 @@
     <h4 id="revision-path"></h4>
 
     <div class="users-info d-flex align-items-center">
-      <img src="{{ pageUser|picture }}" class="picture img-circle">
+      <img src="{{ pageUser|picture }}" class="picture rounded-circle">
       <div class="users-meta" style="flex: 1;">
         <div class="d-flex align-items-center">
           <h1>