add liker and seen users to GROWI Enhanced Layout

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

@@ -31,9 +31,9 @@ export default class UserPictureList extends React.Component {
     });
 
     return (
-      <p>
+      <span>
         {users}
-      </p>
+      </span>
     );
   }
 }

src/client/styles/scss/_layout_growi.scss

@@ -3,6 +3,15 @@
     padding: 0;
   }
 
+  .liker-and-seenusers {
+    height: 42px;   // .nav height
+    border-bottom: 1px solid $border;
+
+    .liker-user-count, .seen-user-count {
+      font-weight: bold;
+    }
+  }
+
   .revision-toc {
     &.affix {
       margin-top: 5px;

src/client/styles/scss/_user_growi.scss

@@ -1,15 +1,15 @@
-.growi.main-container .user-page {
-
-  // affix
-  .user-page-header.affix {
-    #revision-path {
-      display: none;
-    }
-  }
-
-  .revision-toc {
-    &.affix {
-      top: 130px;
-    }
-  }
-}
+.growi.main-container .user-page {
+
+  // affix
+  .user-page-header.affix {
+    #revision-path {
+      display: none;
+    }
+  }
+
+  .revision-toc {
+    &.affix {
+      top: 105px;
+    }
+  }
+}

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

@@ -26,7 +26,8 @@
 
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
-      <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="80">
+      {% include './widget/liker-and-seenusers.html' %}
+      <div id="revision-toc" class="revision-toc mt-3" data-spy="affix" data-offset-top="123">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
     </div> {# /.col- #}

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

@@ -26,7 +26,8 @@
 
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
-      <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="80">
+      {% include './widget/liker-and-seenusers.html' %}
+      <div id="revision-toc" class="revision-toc mt-3" data-spy="affix" data-offset-top="123">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>
     </div> {# /.col- #}

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

@@ -44,7 +44,13 @@
 
     {# relocate #revision-toc #}
     <div class="col-lg-2 col-md-3 revision-toc-container hidden-sm hidden-xs">
-      <div id="revision-toc" class="revision-toc" data-spy="affix" data-offset-top="75">
+      <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>
+          <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
+        </div>
+      </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>
       </div>
     </div> {# /.col- #}

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

@@ -0,0 +1,10 @@
+<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>
+  <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>
+</div>