refactor scss for PageAccessories

src/client/js/components/PageAccessoriesModalControl.jsx

@@ -18,10 +18,10 @@ const PageAccessoriesModalControl = (props) => {
   const { t, pageAccessoriesContainer, isGuestUserMode } = props;
 
   return (
-    <div className="top-of-table-contents d-flex align-items-end pb-1">
+    <div className="grw-page-accessories-control d-flex align-items-end pb-1">
       <button
         type="button"
-        className="btn btn-link grw-btn-top-of-table"
+        className="btn btn-link grw-btn-page-accessories"
         onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('pagelist')}
       >
         <PageListIcon />
@@ -29,7 +29,7 @@ const PageAccessoriesModalControl = (props) => {
 
       <button
         type="button"
-        className="btn btn-link grw-btn-top-of-table"
+        className="btn btn-link grw-btn-page-accessories"
         onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('timeline')}
       >
         <TimeLineIcon />
@@ -37,7 +37,7 @@ const PageAccessoriesModalControl = (props) => {
 
       <button
         type="button"
-        className="btn btn-link grw-btn-top-of-table"
+        className="btn btn-link grw-btn-page-accessories"
         onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('pageHistory')}
       >
         <HistoryIcon />
@@ -45,7 +45,7 @@ const PageAccessoriesModalControl = (props) => {
 
       <button
         type="button"
-        className="btn btn-link grw-btn-top-of-table"
+        className="btn btn-link grw-btn-page-accessories"
         onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('attachment')}
       >
         <AttachmentIcon />
@@ -54,7 +54,7 @@ const PageAccessoriesModalControl = (props) => {
       <div id="shareLink-btn-wrapper-for-tooltip">
         <button
           type="button"
-          className={`btn btn-link grw-btn-top-of-table ${isGuestUserMode && 'disabled'}`}
+          className={`btn btn-link grw-btn-page-accessories ${isGuestUserMode && 'disabled'}`}
           onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('shareLink')}
         >
           <ShareLinkIcon />
@@ -69,7 +69,7 @@ const PageAccessoriesModalControl = (props) => {
         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) }}"
-        className="grw-seen-user-list ml-1 pl-1"
+        className="grw-seen-user-list"
       >
       </div>
     </div>

src/client/js/components/TableOfContents.jsx

@@ -32,7 +32,7 @@ const TableOfContents = (props) => {
     const containerElem = document.querySelector('#revision-toc');
     const containerTop = containerElem.getBoundingClientRect().top;
 
-    // window height - revisionToc top - .system-version - .grw-fab-container height - top-of-table-contents height
+    // window height - revisionToc top - .system-version - .grw-fab-container height - grw-side-contents-container height
     if (isUserPage) {
       return window.innerHeight - containerTop - 20 - 155 - 26 - 40;
     }
@@ -61,7 +61,7 @@ const TableOfContents = (props) => {
       >
         <div
           id="revision-toc-content"
-          className="revision-toc-content top-of-table-contents"
+          className="revision-toc-content"
          // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{
           __html: tocHtml,

src/client/styles/scss/_layout.scss

@@ -36,34 +36,12 @@ body {
   }
 }
 
-.top-of-table-contents {
-  line-height: 1.25;
-  border-bottom: 1px solid transparent;
-
-  .user-list-content {
-    direction: rtl;
-
-    .liker-user-count,
-    .seen-user-count {
-      font-size: 12px;
-      font-weight: bolder;
-    }
-  }
-  .cls-1 {
-    isolation: isolate;
-  }
-}
-
-.revision-toc {
+.grw-side-contents-container {
   position: sticky;
   // growisubnavigation + grw-navbar-boder
   top: calc(100px + 4px);
   width: 250px;
   margin-top: 5px;
-
-  .revision-toc-content {
-    padding: 0;
-  }
 }
 
 .grw-fab {

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

@@ -71,11 +71,6 @@ body.on-edit {
     display: none;
   }
 
-  // hide unnecessary elements for growi layout
-  .side-contents-container {
-    display: none !important;
-  }
-
   // show only either Edit button or HackMD button
   &.hackmd .nav-tab-edit {
     display: none;

src/client/styles/scss/_page-accessories-control.scss

@@ -0,0 +1,41 @@
+.grw-page-accessories-control {
+  flex-wrap: wrap;
+  line-height: 1.25;
+  border-bottom: 1px solid transparent;
+
+  .grw-btn-page-accessories {
+    width: 35px;
+    height: 35px;
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .seen-user-count {
+    font-size: 12px;
+    font-weight: bolder;
+  }
+  .grw-seen-user-list {
+    .btn {
+      white-space: nowrap;
+    }
+  }
+
+  .seen-user-popover {
+    max-width: 200px;
+
+    .user-list-content {
+      direction: rtl;
+
+      .liker-user-count,
+      .seen-user-count {
+        font-size: 12px;
+        font-weight: bolder;
+      }
+    }
+    .cls-1 {
+      isolation: isolate;
+    }
+  }
+}

src/client/styles/scss/_toc.scss

@@ -1,30 +1,3 @@
-.top-of-table-contents {
-  flex-wrap: wrap;
-
-  .grw-btn-top-of-table {
-    width: 35px;
-    height: 35px;
-    svg {
-      width: 16px;
-      height: 16px;
-    }
-  }
-
-  .seen-user-count {
-    font-size: 12px;
-    font-weight: bolder;
-  }
-  .grw-seen-user-list {
-    .btn {
-      white-space: nowrap;
-    }
-  }
-
-  .seen-user-popover {
-    max-width: 200px;
-  }
-}
-
 .revision-toc {
   // to get on the Attachment row
   z-index: 1;

src/client/styles/scss/style-app.scss

@@ -43,6 +43,7 @@
 @import 'navbar';
 @import 'on-edit';
 @import 'page_list';
+@import 'page-accessories-control';
 @import 'page-path';
 @import 'page';
 @import 'page-presentation';

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

@@ -306,10 +306,10 @@ ul.pagination {
   }
 }
 
-.top-of-table-contents {
+.grw-page-accessories-control {
   border-color: $bordercolor-toc;
 
-  .grw-btn-top-of-table {
+  .grw-btn-page-accessories {
     fill: $color-link;
   }
   .grw-seen-user-list {