Merge branch 'master' into rc/3.4.0

src/client/js/components/Common/UserPictureList.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import OverlayTrigger from 'react-bootstrap/es/OverlayTrigger';
+import Tooltip from 'react-bootstrap/es/Tooltip';
+
 import UserPicture from '../User/UserPicture';
 
 export default class UserPictureList extends React.Component {
@@ -17,15 +20,23 @@ export default class UserPictureList extends React.Component {
 
     this.state = {
       users: users,
+      tooltipUsername: '',
     };
 
   }
 
   render() {
     const users = this.state.users.map(user => {
+      // create Tooltip
+      const tooltip = <Tooltip id={`tooltip-${user._id}`}>{user.username}</Tooltip>;
+
       return (
-        <a key={user._id} data-user-id={user._id} href={'/user/' + user.username} title={user.name}>
-          <UserPicture user={user} size="xs" />
+        <a key={user._id} data-user-id={user._id} href={'/user/' + user.username}>
+          <OverlayTrigger overlay={tooltip} placement='bottom'>
+            <span key={`span-${user._id}`}>{/* workaround from https://github.com/react-bootstrap/react-bootstrap/issues/2208#issuecomment-301737531 */}
+              <UserPicture user={user} size="xs" ref={`userPicture-${user._id}`} />
+            </span>
+          </OverlayTrigger>
         </a>
       );
     });

src/server/util/middlewares.js

@@ -183,6 +183,10 @@ exports.swigFilters = function(crowi, app, swig) {
       return crowi.xss.process(string);
     });
 
+    swig.setFilter('slice', function(list, start, end) {
+      return list.slice(start, end);
+    });
+
     next();
   };
 };

src/server/views/layout-crowi/widget/page_side_header.html

@@ -20,20 +20,24 @@
 
   <div class="like-box">
     <dl class="dl-horizontal">
-      <dt>
+      <dt class="text-info">
         <i class="icon-like"></i> {{ t('Like!') }}
       </dt>
       <dd>
         <p class="liker-user-count">{{ page.liker.length|default(0) }}</p>
-        <div id="liker-list" data-user-ids="{{ page.liker|default([])|join(',') }}"></div>
+        {% if page.liker.length > 15 %}<span class="text-muted">..</span>{% endif %}
+        <span id="liker-list" data-user-ids="{{ page.liker|slice(-15)|default([])|join(',') }}"></div>
       </dd>
 
-      <dt><i class="fa fa-paw"></i> {{ t('Seen by') }}</dt>
+      <dt class="text-danger">
+        <i class="fa fa-paw"></i> {{ t('Seen by') }}
+      </dt>
       <dd>
-          <p class="seen-user-count">{{ page.seenUsers.length|default(0) }}</p>
-        <div id="seen-user-list" data-user-ids="{{ page.seenUsers|default([])|join(',') }}"></div>
+        <p class="seen-user-count">{{ page.seenUsers.length|default(0) }}</p>
+        {% if page.seenUsers.length > 15 %}<span class="text-muted">..</span>{% endif %}
+        <span id="seen-user-list" data-user-ids="{{ page.seenUsers|slice(-15)|default([])|join(',') }}"></span>
       </dd>
     </dl>
   </div>
-</div>
+</iv>
 {% endif %} {# if page }}} #}

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

@@ -45,10 +45,11 @@
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
       <div class="liker-and-seenusers d-flex align-items-end justify-content-end">
-        <div class="text-danger">
-          <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|default([])|join(',') }}"></span>
+        {% if page.seenUsers.length > 10 %}<span class="text-muted">..</span>{% endif %}
+        <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|slice(-10)|default([])|join(',') }}"></span>
+        <span class="text-danger">
           <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
-        </div>
+        </span>
       </div>
       <div id="revision-toc" class="revision-toc mt-3" data-spy="affix" data-offset-top="116">
         <div id="revision-toc-content" class="revision-toc-content"></div>

src/server/views/layout-growi/widget/liker-and-seenusers.html

@@ -1,10 +1,16 @@
 <div class="liker-and-seenusers">
-  <div class="text-right text-info">
-    <span id="liker-list" class="mr-3" data-user-ids="{{ page.liker|default([])|join(',') }}"></span>
-    <i class="icon-fw icon-like"></i><span class="liker-user-count">{{ page.liker.length|default(0) }}</span>
+  <div class="text-right">
+    {% if page.liker.length > 10 %}<span class="text-muted">..</span>{% endif %}
+    <span id="liker-list" class="mr-3" data-user-ids="{{ page.liker|slice(-10)|default([])|join(',') }}"></span>
+    <span class="text-info">
+      <i class="icon-fw icon-like"></i><span class="liker-user-count">{{ page.liker.length|default(0) }}</span>
+    </span>
   </div>
-  <div class="text-right text-danger">
-    <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|default([])|join(',') }}"></span>
-    <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
+  <div class="text-right">
+    {% if page.seenUsers.length > 10 %}<span class="text-muted">..</span>{% endif %}
+    <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|slice(-10)|default([])|join(',') }}"></span>
+    <span class="text-danger">
+      <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
+    </span>
   </div>
 </div>

wercker.yml

@@ -1,7 +1,7 @@
-box: node:8
+box: node:10
 
 services:
-  - mongo:3.4
+  - mongo:3.6
 
 
 test: