Merge branch 'support/apply-bootstrap4' into support/search-result-page

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

@@ -87,7 +87,7 @@ class Comment extends React.PureComponent {
   }
 
   getRootClassName(comment) {
-    let className = 'page-comment';
+    let className = 'page-comment flex-column';
 
     const { revisionId, revisionCreatedAt } = this.props.pageContainer.state;
     if (comment.revision === revisionId) {
@@ -197,8 +197,10 @@ class Comment extends React.PureComponent {
           />
         ) : (
           <div id={commentId} className={rootClassName}>
-            <UserPicture user={creator} />
-            <div className="page-comment-main">
+            <div className="page-comment-writer">
+              <UserPicture user={creator} />
+            </div>
+            <div className="page-comment-main ml-0">
               <div className="page-comment-creator">
                 <Username user={creator} />
               </div>

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

@@ -28,7 +28,7 @@ class ReplayComments extends React.PureComponent {
 
   renderReply(reply) {
     return (
-      <div key={reply._id} className="page-comment-reply">
+      <div key={reply._id} className="page-comment-reply ml-4 ml-sm-5 mr-3">
         <Comment
           comment={reply}
           deleteBtnClicked={this.props.deleteBtnClicked}

src/client/js/components/PageComments.jsx

@@ -165,7 +165,7 @@ class PageComments extends React.Component {
           </div>
         )}
         { showEditor && isLoggedIn && (
-          <div className="page-comment-reply-form">
+          <div className="page-comment-reply-form ml-4 ml-sm-5 mr-3">
             <CommentEditor
               growiRenderer={this.growiRenderer}
               replyTo={commentId}

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

@@ -112,7 +112,7 @@ class OptionsSelector extends React.Component {
       <div className="my-0 form-group">
         <label>Theme:</label>
         <div className="btn-group btn-group-sm dropup">
-          <button className="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <button className="btn btn-white dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {selectedTheme}
           </button>
           <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
@@ -139,7 +139,7 @@ class OptionsSelector extends React.Component {
       <div className="my-0 form-group">
         <label>Keymap:</label>
         <div className="btn-group btn-group-sm dropup">
-          <button className="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          <button className="btn btn-white dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {selectedKeymapMode}
           </button>
           <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
@@ -162,7 +162,7 @@ class OptionsSelector extends React.Component {
           toggle={this.onToggleConfigurationDropdown}
         >
 
-          <DropdownToggle caret>
+          <DropdownToggle color="white" caret>
             <i className="icon-settings"></i>
           </DropdownToggle>
 

src/client/js/components/SavePageControls/GrantSelector.jsx

@@ -166,7 +166,7 @@ class GrantSelector extends React.Component {
     return (
       <div className="form-group grw-grant-selector mb-0">
         <UncontrolledDropdown direction="up" size="sm">
-          <DropdownToggle caret className="d-flex justify-content-between align-items-center" disabled={this.props.disabled}>
+          <DropdownToggle color="white" caret className="d-flex justify-content-between align-items-center" disabled={this.props.disabled}>
             {dropdownToggleLabelElm}
           </DropdownToggle>
           <DropdownMenu>

src/client/styles/scss/_comment_growi.scss

@@ -48,6 +48,12 @@
     }
   }
 
+  .page-comment-writer {
+    @include media-breakpoint-down(xs) {
+      height: 3.5em;
+    }
+  }
+
   .page-comment {
     position: relative;
 
@@ -66,6 +72,14 @@
     // コメントセクション
     .page-comment-main {
       @extend %comment-section;
+      @include media-breakpoint-up(sm){
+        margin-left: 4.5em !important;
+      }
+      @include media-breakpoint-down(xs) {
+        &:before {
+          content: none;
+        }
+      }
     }
 
     // コメント本文
@@ -85,11 +99,6 @@
   .page-comments-hidden-replies + .page-comment-reply {
     margin-top: 0;
   }
-  .page-comment-reply,
-  .page-comment-reply-form {
-    margin-right: 15px;
-    margin-left: 6em;
-  }
   // reply button
   .btn.btn-comment-reply {
     width: 120px;

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

@@ -25,6 +25,7 @@ body.on-edit {
   }
 
   // hide unnecessary elements
+  .grw-subnav,
   .row.row-alerts,
   .row.page-list,
   .row.page-comments-row,
@@ -71,6 +72,11 @@ body.on-edit {
     }
   }
 
+  // show compact subnav
+  .grw-compact-subnav {
+    display: block !important;
+  }
+
   /*****************
    * Expand Editor
    *****************/

src/server/views/me/index.html

@@ -53,151 +53,192 @@
   {% endif %}
 
 
-  <div class="form-box m-t-20">
-    <form action="/me" method="post" class="form-horizontal" role="form">
+  <div class="form-box mt-3">
+    <form action="/me" method="post" role="form">
       <fieldset>
-        <legend>{{ t('Basic Info') }}</legend>
-      <div class="form-group">
-        <label for="userForm[name]" class="col-sm-2 control-label">{{ t('Name') }}</label>
-        <div class="col-sm-4">
-          <input class="form-control" type="text" name="userForm[name]" value="{{ user.name }}" required>
-        </div>
-      </div>
-      <div class="form-group">
-        <label for="userForm[email]" class="col-sm-2 control-label">{{ t('Email') }}</label>
-        <div class="col-sm-4">
-          <input class="form-control" type="email" name="userForm[email]" value="{{ user.email }}">
-        </div>
-        <div class="col-sm-offset-2 col-sm-10">
-          {% if getConfig('crowi', 'security:registrationWhiteList') && getConfig('crowi', 'security:registrationWhiteList').length %}
-          <p class="help-block">
-            {{ t('page_register.form_help.email') }}
-          <ul>
-            {% for em in getConfig('crowi', 'security:registrationWhiteList') %}
-            <li><code>{{ em }}</code></li>
-            {% endfor %}
-          </ul>
-          </p>
-          {% endif %}
+        <legend class="border-bottom mb-4">{{ t('Basic Info') }}</legend>
+        <div class="form-group row">
+          <label for="userForm[name]" class="col-sm-2 col-form-label">Name</label>
+          <div class="col-sm-4">
+            <input type="text" class="form-control" name="userForm[name]" value="{{ user.name }}" required>
+          </div>
         </div>
-      </div>
-      <div class="form-group">
-        <label for="userForm[isEmailPublished]" class="col-sm-2 control-label">{{ t('Disclose E-mail') }}</label>
-        <div class="col-sm-4">
-          <div class="radio radio-primary radio-inline">
-            <input type="radio" id="radioEmailShow" name="userForm[isEmailPublished]" value="{{ true }}" {% if user.isEmailPublished == true %}checked="checked"{% endif %}>
-            <label for="radioEmailShow">{{ t('Show') }}</label>
+        <div class="form-group">
+          <div class="row">
+            <label for="userForm[email]" class="col-sm-2 col-form-label">Email</label>
+            <div class="col-sm-4">
+              <input type="email" class="form-control" name="userForm[email]" value="{{ user.email }}" aria-describedby="userForm[email]" required>
+            </div>
           </div>
-          <div class="radio radio-primary radio-inline">
-            <input type="radio" id="radioEmailHide" name="userForm[isEmailPublished]" value="{{ false }}" {% if user.isEmailPublished == false %}checked="checked"{% endif %}>
-            <label for="radioEmailHide">{{ t('Hide') }}</label>
+          <div class="offset-sm-2 col-sm-10">
+            {% if getConfig('crowi', 'security:registrationWhiteList') && getConfig('crowi', 'security:registrationWhiteList').length %}
+            <p id="userForm[email]" class="form-text text-muted">
+              {{ t('page_register.form_help.email') }}
+            <ul>
+              {% for em in getConfig('crowi', 'security:registrationWhiteList') %}
+              <li><code>{{ em }}</code></li>
+              {% endfor %}
+            </ul>
+            </p>
+            {% endif %}
           </div>
         </div>
-      </div>
-      <div class="form-group {% if not user.lang %}has-error{% endif %}">
-        <label for="userForm[lang]" class="col-sm-2 control-label">{{ t('Language') }}</label>
-        <div class="col-sm-4">
-          <div class="radio radio-primary radio-inline">
-            <input type="radio" id="radioLangEn" name="userForm[lang]" value="{{ consts.language.LANG_EN_US }}" {% if user.lang == consts.language.LANG_EN_US %}checked="checked"{% endif %}>
-            <label for="radioLangEn">{{ t('English') }}</label>
+        <div class="form-group row">
+          <label for="userForm[isEmailPublished]" class="col-sm-2 col-form-label">{{ t('Disclose E-mail') }}</label>
+          <div class="col-sm-4">
+            <div class="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                id="radioEmailShow"
+                name="userForm[isEmailPublished]"
+                value="{{ true }}"
+                {% if user.isEmailPublished == true %}checked="checked"{% endif %}
+                class="custom-control-input"
+              > 
+              <label class="custom-control-label" for="radioEmailShow">{{ t('Show') }}</label>
+            </div>
+            <div class="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                id="radioEmailHide"
+                name="userForm[isEmailPublished]"
+                value="{{ false }}"
+                {% if user.isEmailPublished == false %}checked="checked"{% endif %}
+                class="custom-control-input"
+              >
+              <label class="custom-control-label" for="radioEmailHide">{{ t('Hide') }}</label>
+            </div>
           </div>
-          <div class="radio radio-primary radio-inline">
-            <input type="radio" id="radioLangJa" name="userForm[lang]" value="{{ consts.language.LANG_JA }}" {% if user.lang == consts.language.LANG_JA %}checked="checked"{% endif %}>
-            <label for="radioLangJa">{{ t('Japanese') }}</label>
+        </div>
+        <div class="form-group row {% if not user.lang %}has-error{% endif %}">
+          <label for="userForm[lang]" class="col-sm-2 col-form-label">Language</label>
+          <div class="col-sm-4">
+            <div class="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                id="radioLangEn"
+                name="userForm[lang]"
+                value="{{ consts.language.LANG_EN_US }}"
+                class="custom-control-input"
+                {% if user.lang == consts.language.LANG_EN_US %}checked="checked"{% endif %}
+              >
+              <label class="custom-control-label" for="radioLangEn">{{ t('English') }}</label>
+            </div>
+            <div class="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                id="radioLangJa"
+                name="userForm[lang]"
+                value="{{ consts.language.LANG_JA }}"
+                class="custom-control-input"
+                {% if user.lang == consts.language.LANG_JA %}checked="checked"{% endif %}
+              >
+              <label class="custom-control-label" for="radioLangJa">{{ t('Japanese') }}</label>
+            </div>
           </div>
         </div>
-      </div>
 
-      <div class="form-group">
-        <div class="col-sm-offset-2 col-sm-10">
-          <input type="hidden" name="_csrf" value="{{ csrf() }}">
-          <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
+        <div class="form-group row">
+          <div class="offset-sm-2 col-sm-10">
+            <input type="hidden" name="_csrf" value="{{ csrf() }}">
+            <button type="submit" class="btn btn-primary">{{ t('Update') }}</button>
+          </div>
         </div>
-      </div>
-    </fieldset>
+      </fieldset>
     </form>
   </div>
 
-  <div class="form-box m-t-20">
+  <div class="form-box mt-3">
 
     <!-- separeted form tag -->
     <form action="/me/imagetype" id="formImageType" method="post" class="form" role="form"></form>
 
     <fieldset>
-
-      <legend>{{ t('Set Profile Image') }}</legend>
-
-      <div class="form-group col-md-2 col-sm-offset-1 col-sm-4">
-        <h4>
-          <div class="radio radio-primary">
-            <input type="radio" id="radioGravatar" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="true" {% if user.isGravatarEnabled %}checked="checked"{% endif %}>
-            <label for="radioGravatar">
-              <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" /> Gravatar
-            </label>
-            <a href="https://gravatar.com/">
-              <small><i class="icon-arrow-right-circle" aria-hidden="true"></i></small>
-            </a>
-          </div>
-        </h4>
-
-        <img src="{{ user|gravatar }}" width="64">
-      </div><!-- /.col-sm* -->
-
-      <div class="form-group col-md-4 col-sm-7">
-        <h4>
-          <div class="radio radio-primary">
-            <input type="radio" id="radioUploadPicture" form="formImageType" name="imagetypeForm[isGravatarEnabled]" value="false" {% if !user.isGravatarEnabled  %}checked="checked"{% endif %}>
-            <label for="radioUploadPicture">
-              {{ t('Upload Image') }}
-            </label>
-          </div>
-        </h4>
-        <div class="form-group">
-          <div id="pictureUploadFormMessage"></div>
-          <label for="" class="col-sm-4 control-label">
-            {{ t('Current Image') }}
-          </label>
-          <div class="col-sm-8">
-            <p>
-            <img src="{{ user|uploadedpicture }}" class="picture picture-lg img-circle" id="settingUserPicture"><br>
-            </p>
-            <p>
-            <form id="remove-attachment" action="/_api/attachments.removeProfileImage" method="post" class="form-horizontal"
-                style="{% if not user.imageAttachment %}display: none{% endif %}">
-              <input type="hidden" name="_csrf" value="{{ csrf() }}">
-              <button type="submit" class="btn btn-danger">{{ t('Delete Image') }}</button>
-            </form>
-            </p>
+      <legend class="border-bottom mb-5">{{ t('Set Profile Image') }}</legend>
+      <div class="form-group row">
+        <div class="col-sm-4 offset-sm-1">
+          <h4>
+            <div class="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                id="radioGravatar"
+                form="formImageType"
+                name="imagetypeForm[isGravatarEnabled]"
+                value="true"
+                {% if user.isGravatarEnabled %}checked="checked"{% endif %}
+                class="custom-control-input"
+              >
+              <label class="custom-control-label custom-control-inline" for="radioGravatar">
+                <img src="https://gravatar.com/avatar/00000000000000000000000000000000?s=24" />
+                <span class="pl-1">Gravatar</span>
+              </label>
+              <a href="https://gravatar.com/">
+                <small>
+                  <i class="icon-arrow-right-circle" aria-hidden="true"></i>
+                </small>
+              </a>
+            </div>
+          </h4>
+  
+          <img src="{{ user|gravatar }}" width="64">
+        </div>
+        <div class="col-sm-7">
+          <h4>
+            <div class="custom-control custom-radio custom-control-inline">
+              <input
+                type="radio"
+                id="radioUploadPicture"
+                form="formImageType"
+                name="imagetypeForm[isGravatarEnabled]"
+                value="false"
+                {% if !user.isGravatarEnabled  %}checked="checked"{% endif %}
+                class="custom-control-input"
+              >
+              <label for="radioUploadPicture" class="custom-control-label">{{ t('Upload Image') }}</label>
+            </div>
+          </h4>
+          <div class="form-group">
+            <div id="pictureUploadFormMessage" class=""></div>
+            <div class="row">
+              <label for="" class="col-sm-4">{{ t('Current Image') }}</label>
+              <div class="col-sm-8">
+                <p><img src="{{ user|uploadedpicture }}" class="picture picture-lg rounded-circle" id="settingUserPicture"></p>
+                <form
+                  id="remove-attachment"
+                  action="/_api/attachments.removeProfileImage"
+                  method="post"
+                  class="form-horizontal"
+                  style="{% if not user.imageAttachment %}display: none{% endif %}"
+                >
+                  <input type="hidden" name="_csrf" value="{{ csrf() }}">
+                  <button type="submit" class="btn btn-danger">{{ t('Delete Image') }}</button>
+                </form>
+              </div>
+            </div>
           </div>
-        </div><!-- /.form-group -->
-
-        <div class="form-group">
-          <label for="" class="col-sm-4 control-label">
-            {{ t('Upload new image') }}
-          </label>
-          <div class="col-sm-8">
-            {% if fileUploadService.getIsUploadable() %}
-            <form action="/_api/attachments.uploadProfileImage" id="pictureUploadForm" method="post" class="form-horizontal" role="form">
-              <input type="hidden" name="_csrf" value="{{ csrf() }}">
-              <input type="file" name="profileImage" accept="image/*">
-              <div id="pictureUploadFormProgress" class="d-flex align-items-center">
+          <div class="row">
+            <label for="" class="col-sm-4">{{ t('Upload new image') }}</label>
+              <div class="col-sm-8">
+                {% if fileUploadService.getIsUploadable() %}
+                <form action="/_api/attachments.uploadProfileImage" id="pictureUploadForm" method="post" class="form-group" role="form">
+                  <input type="hidden" name="_csrf" value="{{ csrf() }}">
+                  <input type="file" name="profileImage" accept="image/*">
+                  <div id="pictureUploadFormProgress" class="d-flex align-items-center"></div>
+                </form>
+                {% else %}
+                * {{ t('page_me.form_help.profile_image1') }}<br>
+                * {{ t('page_me.form_help.profile_image2') }}<br>
+                {% endif %}
               </div>
-            </form>
-            {% else %}
-            * {{ t('page_me.form_help.profile_image1') }}<br>
-            * {{ t('page_me.form_help.profile_image2') }}<br>
-            {% endif %}
           </div>
-        </div><!-- /.form-group -->
-
-      </div><!-- /.col-sm- -->
+        </div>
+      </div>
 
       <div class="form-group">
-        <div class="col-sm-offset-4 col-sm-6">
+        <div class="offset-sm-4 col-sm-6">
           <button type="submit" form="formImageType" class="btn btn-primary">{{ t('Update') }}</button>
         </div>
       </div>
-
     </fieldset>
   </div><!-- /.form-box -->
 

src/server/views/widget/page_tabs.html

@@ -35,6 +35,10 @@
     </a>
   </li>
   {% endif %}
+    <div class="grw-compact-subnav d-none ml-2">
+      <h4 id="revision-path" class="mb-0"></h4>
+      <div id="tag-label"></div>
+    </div>
   {% endif %}
 
   {#
@@ -47,11 +51,19 @@
     </a>
   </li>
 
+  {% if not page.isPortal() %}
+    <li class="nav-item">
+      <a href="?presentation=1" class="nav-link toggle-presentation">
+        <i class="icon-film"></i><span class="hidden-xs"> {{ t('Presentation Mode') }}</span>
+      </a>
+    </li>
+  {% endif %}
+
   {% if !isTrashPage() %}
     {% if page.isPortal() %}
     <li class="nav-item">
       <a
-        {% if user %} role="button" class="nav-link  dropdown-toggle" data-toggle="dropdown" {% endif %}
+        {% if user %} role="button" class="nav-link" data-toggle="dropdown" {% endif %}
         {% if not user %}
           class="dropdown-toggle dropdown-toggle-disabled"
           data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
@@ -71,9 +83,9 @@
       </div>
     </li>
     {% else %}
-    <li class="nav-item dropdown">
+    <li class="nav-item dropdown d-flex align-items-center">
       <a
-        {% if user %} role="button" class="dropdown-toggle" data-toggle="dropdown" {% endif %}
+        {% if user %} role="button" data-toggle="dropdown" {% endif %}
         {% if not user %}
           class="dropdown-toggle dropdown-toggle-disabled"
           data-toggle="tooltip" data-placement="top" data-container="body" title="{{ t('Not available for guest') }}"
@@ -94,15 +106,6 @@
     </li>
     {% endif %}
   {% endif %}
-
-  {% if not page.isPortal() %}
-    <li class="nav-item">
-      <a href="?presentation=1" class="nav-link toggle-presentation">
-        <i class="icon-film"></i><span class="hidden-xs"> {{ t('Presentation Mode') }}</span>
-      </a>
-    </li>
-  {% endif %}
-
 </ul>
 
 {% else %} {# for creating portal #}