Merge pull request #2558 from weseek/imprv/gw-3253-set-4icons

Imprv/gw 3253 set 4icons

src/client/js/components/TableOfContents.jsx

@@ -7,6 +7,7 @@ import { withTranslation } from 'react-i18next';
 import PageContainer from '../services/PageContainer';
 
 import { withUnstatedContainers } from './UnstatedUtils';
+import TopOfTableContents from './TopOfTableContents';
 import StickyStretchableScroller from './StickyStretchableScroller';
 
 // eslint-disable-next-line no-unused-vars
@@ -25,15 +26,15 @@ const TableOfContents = (props) => {
     const containerElem = document.querySelector('#revision-toc');
     const containerTop = containerElem.getBoundingClientRect().top;
 
-    // window height - revisionToc top - .system-version - .grw-fab-container height
-    return window.innerHeight - containerTop - 20 - 155;
+    // window height - revisionToc top - .system-version - .grw-fab-container height - top-of-table-contents height
+    return window.innerHeight - containerTop - 20 - 155 - 26;
   }, []);
 
   const { tocHtml } = pageContainer.state;
 
   return (
     <>
-      {/* TODO GW-3253 add four contents */}
+      <TopOfTableContents />
       <StickyStretchableScroller
         contentsElemSelector=".revision-toc .markdownIt-TOC"
         stickyElemSelector="#revision-toc"

src/client/js/components/TopOfTableContents.jsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { withTranslation } from 'react-i18next';
+
+import PageContainer from '../services/PageContainer';
+
+import { withUnstatedContainers } from './UnstatedUtils';
+
+const TopOfTableContents = (props) => {
+
+  return (
+    <>
+      <div className="top-of-table-contents d-flex align-items-end pb-1">
+        <button type="button" className="bg-transparent border-0">
+          {/* TODO: make svg icons components by GW-3349 */}
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" className="table-top-icon" width="20" height="20">
+            <rect className="cls-1" width="14" height="14" />
+            <path d="M12.63,2.72H1.37a.54.54,0,0,1,0-1.08H12.63a.54.54,0,0,1,0,1.08Z" />
+            <path d="M11.82,5.94H1.37a.55.55,0,0,1,0-1.09H11.82a.55.55,0,1,1,0,1.09Z" />
+            <path d="M9.41,9.15h-8a.54.54,0,0,1,0-1.08h8a.54.54,0,0,1,0,1.08Z" />
+            <path d="M10.84,12.36H1.37a.54.54,0,1,1,0-1.08h9.47a.54.54,0,1,1,0,1.08Z" />
+          </svg>
+        </button>
+
+        <button type="button" className="bg-transparent border-0">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" className="table-top-icon" width="20" height="20">
+            <rect className="cls-1" width="14" height="14" />
+            <path
+              d="M13.6,4.6a1.2,1.2,0,0,1-1.2,1.2,1,1,0,0,1-.3,0L10,7.89a1.1,1.1,0,0,1,0,.31,1.2,1.2,0,1,1-2.4,0,1.1,1.1,0,0,1,
+              0-.31L6.11,6.36a1.3,1.3,0,0,1-.62,0L2.75,9.1a1,1,0,0,1,0,.3A1.2,1.2,0,1,1,1.6,8.2a1,1,0,0,1,.3,0L4.64,
+              5.51a1.1,1.1,0,0,1,0-.31A1.2,1.2,0,0,1,7,5.2a1.1,1.1,0,0,1,0,.31L8.49,7a1.3,1.3,0,0,1,.62,0L11.25,4.9a1,
+              1,0,0,1-.05-.3,1.2,1.2,0,1,1,2.4,0Z"
+            />
+          </svg>
+        </button>
+
+        <button type="button" className="bg-transparent border-0">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" className="table-top-icon" width="20" height="20">
+            <rect className="cls-1" width="14" height="14" />
+            <path
+              d="M7.94.94A6.13,6.13,0,0,0,1.89,7v.1L.67,5.89a.38.38,0,0,0-.55,0,.39.39,0,0,0,0,.56L2.36,8.69,4.6,6.45a.4.4,0,0,0,0-.56.39.39,0,0,0-.56,
+              0L2.68,7.25V7A5.33,5.33,0,0,1,7.94,1.73,5.33,5.33,0,0,1,13.21,7a5.34,5.34,0,0,1-5.27,5.27H7.86A5,5,0,0,1,4,10.38a.4.4,0,0,0-.55-.07.4.4,0,
+              0,0-.07.56,5.83,5.83,0,0,0,4.52,2.19H8A6.13,6.13,0,0,0,14,7,6.13,6.13,0,0,0,7.94.94Z"
+            />
+            <path d="M7.94,2.83a.4.4,0,0,0-.39.4V7.37L10,8.92a.37.37,
+            0,0,0,.21.06.4.4,0,0,0,.21-.73L8.34,6.93V3.23A.4.4,0,0,0,7.94,2.83Z"
+            />
+          </svg>
+        </button>
+
+        <button type="button" className="bg-transparent border-0">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" className="table-top-icon" width="20" height="20">
+            <rect className="cls-1" width="14" height="14" />
+            <g className="cls-2">
+              <path d="M2.9,13a2,2,0,0,1-1.44-.63,2.28,2.28,0,0,1,0-3.23l7-7.38a2.48,2.48,0,0,1,1.22-.7,2.61,
+              2.61,0,0,1,1.41.09A3.46,3.46,0,0,1,12.37,2a3.94,3.94,0,0,1,.36.45A2.61,2.61,0,0,1,13,3a3.41,3.41,
+              0,0,1,.16.57,3.06,3.06,0,0,1-.82,2.75L7.07,11.86a.35.35,0,0,1-.26.13.4.4,0,0,1-.28-.1.47.47,0,0,
+              1-.12-.27.39.39,0,0,1,.11-.29l5.26-5.59a2.28,2.28,0,0,0,.65-1.62,2.07,2.07,0,0,0-.62-1.58A2.62,2.62,
+              0,0,0,11,1.93a2,2,0,0,0-1-.13,1.63,1.63,0,0,0-1,.5L2,9.67a1.52,1.52,0,0,0,0,2.16,1.28,1.28,0,0,0,
+              .44.3,1,1,0,0,0,.51.08,1.43,1.43,0,0,0,1-.49L9.49,5.84l.12-.13.11-.15a1.24,1.24,0,0,0,.1-.2,1.94,
+              1.94,0,0,0,0-.2.6.6,0,0,0,0-.22.66.66,0,0,0-.14-.2.57.57,0,0,0-.45-.22,1,1,0,0,0-.52.3L4.56,
+              9.25a.42.42,0,0,1-.17.1.34.34,0,0,1-.2,0A.4.4,0,0,1,4,9.26.34.34,0,0,1,3.89,9,.41.41,0,0,1,4,8.72L8.16,
+              4.28a1.7,1.7,0,0,1,1-.53,1.32,1.32,0,0,1,1.06.43,1.23,1.23,0,0,1,.4,1.05,1.8,1.8,0,0,1-.58,1.14L4.52,
+              12.26A2.3,2.3,0,0,1,3,13H2.9Z"
+              />
+            </g>
+          </svg>
+
+        </button>
+        {/* [TODO: setting Footprints' icon by GW-3308] */}
+        <div
+          id="seen-user-list"
+          data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
+          data-sum-of-seen-users="{{ page.seenUsers.length|default(0) }}"
+        >
+        </div>
+      </div>
+    </>
+  );
+
+};
+
+/**
+ * Wrapper component for using unstated
+ */
+const TopOfTableContentsWrapper = withUnstatedContainers(TopOfTableContents, [PageContainer]);
+
+TopOfTableContents.propTypes = {
+  pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+};
+
+export default withTranslation()(TopOfTableContentsWrapper);

src/client/styles/scss/_layout_growi.scss

@@ -5,9 +5,7 @@
     padding: 0;
   }
 
-  .liker-and-seenusers {
-    // adjusting position with negative margin
-    height: $grw-nav-main-tab-height;
+  .top-of-table-contents {
     line-height: 1.25;
     border-bottom: 1px solid transparent;
 
@@ -19,6 +17,12 @@
         font-weight: bold;
       }
     }
+    .cls-1 {
+      fill: none;
+    }
+    .cls-2 {
+      isolation: isolate;
+    }
   }
 
   .revision-toc {

src/client/styles/scss/theme/_apply-colors.scss

@@ -245,8 +245,12 @@ pre:not(.hljs):not(.CodeMirror-line) {
   }
 }
 
-.liker-and-seenusers {
+.top-of-table-contents {
   border-bottom-color: $bordercolor-nav-tabs;
+
+  .table-top-icon {
+    fill: $color-link;
+  }
 }
 
 /*

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

@@ -19,10 +19,9 @@
     </div>
 
     <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
-      {% 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>
-      </div>
+        <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>
+        </div>
     </div>
 
   </div>

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

@@ -19,7 +19,6 @@
     </div>
 
     <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
-      {% 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>
       </div>

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

@@ -35,13 +35,6 @@
 
     {# relocate #revision-toc #}
     <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
-      <div class="liker-and-seenusers d-flex align-items-end justify-content-end">
-        <div
-          id="seen-user-list"
-          data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
-          data-sum-of-seen-users="{{ page.seenUsers.length|default(0) }}"
-        ></div>
-      </div>
       <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="116">
         <div id="revision-toc-content" class="revision-toc-content"></div>
       </div>

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

@@ -1,12 +0,0 @@
-<div class="liker-and-seenusers">
-  <div
-    id="liker-list"
-    data-user-ids-str="{{ page.liker|slice(-15)|default([])|reverse|join(',') }}"
-    data-sum-of-likers="{{ page.liker.length|default(0) }}"
-  ></div>
-  <div
-    id="seen-user-list"
-    data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"
-    data-sum-of-seen-users="{{ page.seenUsers.length|default(0) }}"
-  ></div>
-</div>