Merge pull request #2650 from weseek/imprv/gw-3453-design-topoftablecontents

Imprv/gw 3453 design topoftablecontents

src/client/js/components/Icons/AttachmentIcon.jsx

@@ -4,9 +4,7 @@ const Attachment = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 14 14"
-    className="table-top-icon"
-    width="20"
-    height="20"
+
   >
     <rect width="14" height="14" fillOpacity="0" />
     <g className="cls-1">

src/client/js/components/Icons/PageListIcon.jsx

@@ -4,9 +4,7 @@ const PageList = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 14 14"
-    className="table-top-icon"
-    width="20"
-    height="20"
+
   >
     <rect width="14" height="14" fillOpacity="0" />
     <path d="M12.63,2.72H1.37a.54.54,0,0,1,0-1.08H12.63a.54.54,0,0,1,0,1.08Z" />

src/client/js/components/Icons/RecentChangesIcon.jsx

@@ -4,9 +4,7 @@ const RecentChanges = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 14 14"
-    className="table-top-icon"
-    width="20"
-    height="20"
+
   >
     <rect width="14" height="14" fillOpacity="0" />
     <path

src/client/js/components/Icons/TimeLineIcon.jsx

@@ -4,9 +4,7 @@ const TimeLine = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 14 14"
-    className="table-top-icon"
-    width="20"
-    height="20"
+
   >
     <rect width="14" height="14" fillOpacity="0" />
     <path

src/client/js/components/TopOfTableContents.jsx

@@ -31,22 +31,38 @@ 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" onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('pagelist')}>
+        <button
+          type="button"
+          className="btn btn-link grw-btn-top-of-table"
+          onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('pagelist')}
+        >
           <PageListIcon />
         </button>
 
-        <button type="button" className="bg-transparent border-0 active" onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('timeline')}>
+        <button
+          type="button"
+          className="btn btn-link grw-btn-top-of-table"
+          onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('timeline')}
+        >
           <TimeLineIcon />
         </button>
 
-        <button type="button" className="bg-transparent border-0" onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('page-history')}>
+        <button
+          type="button"
+          className="btn btn-link grw-btn-top-of-table"
+          onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('page-history')}
+        >
           <RecentChangesIcon />
         </button>
 
-        <button type="button" className="bg-transparent border-0" onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('attachment')}>
+        <button
+          type="button"
+          className="btn btn-link grw-btn-top-of-table"
+          onClick={() => pageAccessoriesContainer.openPageAccessoriesModal('attachment')}
+        >
           <AttachmentIcon />
         </button>
-        {/* [TODO: setting Footprints' icon by GW-3308] */}
+
         <div
           id="seen-user-list"
           data-user-ids-str="{{ page.seenUsers|slice(-15)|default([])|reverse|join(',') }}"

src/client/js/components/User/SeenUserList.jsx

@@ -20,13 +20,13 @@ const SeenUserList = (props) => {
   const toggle = () => setPopoverOpen(!popoverOpen);
   const { pageContainer } = props;
   return (
-    <div>
-      <Button id="SeenUserPopover" type="button" className="btn btn-seen-user-lists border-0 px-1 py-0 bg-transparent">
-        <span className="mr-2 footstamp-icon"><FootstampIcon /></span>
+    <div className="grw-seen-user-list pl-2 ml-2">
+      <Button id="po-seen-user" color="link" className="px-2">
+        <span className="mr-1 footstamp-icon"><FootstampIcon /></span>
         <span className="seen-user-count">{pageContainer.state.countOfSeenUsers}</span>
       </Button>
-      <Popover placement="bottom" isOpen={popoverOpen} target="SeenUserPopover" toggle={toggle} trigger="legacy">
-        <PopoverBody className="col">
+      <Popover placement="bottom" isOpen={popoverOpen} target="po-seen-user" toggle={toggle} trigger="legacy">
+        <PopoverBody className="seen-user-popover">
           <div className="px-2 text-right user-list-content text-truncate text-muted">
             <UserPictureList users={pageContainer.state.seenUsers} />
           </div>

src/client/styles/scss/_layout.scss

@@ -32,30 +32,6 @@ body {
   margin-top: 1rem;
 }
 
-.revision-toc {
-  // to get on the Attachment row
-  z-index: 1;
-  overflow: hidden;
-  font-size: 0.9em;
-
-  .revision-toc-content {
-    padding: 10px;
-
-    > ul {
-      padding-left: 0;
-      ul {
-        padding-left: 1em;
-      }
-    }
-
-    // first level of li
-    > ul > li {
-      padding: 5px;
-      margin: 4px 4px 4px 17px;
-    }
-  }
-}
-
 .grw-fab {
   position: fixed;
   right: 1.5rem;

src/client/styles/scss/_layout_growi.scss

@@ -14,7 +14,8 @@
 
       .liker-user-count,
       .seen-user-count {
-        font-weight: bold;
+        font-size: 12px;
+        font-weight: bolder;
       }
     }
     .cls-1 {
@@ -22,12 +23,6 @@
     }
   }
 
-  .grw-page-accessories-modal {
-    .table-top-icon {
-      margin-right: 5px;
-    }
-  }
-
   .revision-toc {
     position: sticky;
     // growisubnavigation + grw-navbar-boder

src/client/styles/scss/_page_accessaries_modal.scss

@@ -0,0 +1,7 @@
+.grw-page-accessories-modal {
+  .nav-link svg {
+    width: 20px;
+    height: 20px;
+    margin-right: 5px;
+  }
+}

src/client/styles/scss/_toc.scss

@@ -0,0 +1,49 @@
+.top-of-table-contents {
+  flex-wrap: wrap;
+
+  .grw-btn-top-of-table {
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  .seen-user-count {
+    font-size: 12px;
+    font-weight: bolder;
+  }
+  .grw-seen-user-list {
+    border-left: 1px solid;
+
+    .btn {
+      white-space: nowrap;
+    }
+  }
+
+  .seen-user-popover {
+    max-width: 200px;
+  }
+}
+
+.revision-toc {
+  // to get on the Attachment row
+  z-index: 1;
+  font-size: 0.9em;
+
+  .revision-toc-content {
+    padding: 10px;
+
+    > ul {
+      padding-left: 0;
+      ul {
+        padding-left: 1em;
+      }
+    }
+
+    // first level of li
+    > ul > li {
+      padding: 5px;
+      margin: 4px 4px 4px 17px;
+    }
+  }
+}

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

@@ -54,11 +54,13 @@
 @import 'sidebar';
 @import 'subnav';
 @import 'tag';
+@import 'toc';
 @import 'user';
 @import 'user_growi';
 @import 'staff_credit';
 @import 'waves';
 @import 'wiki';
+@import 'page_accessaries_modal';
 @import 'sharelink';
 @import 'linkedit-preview';
 

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

@@ -14,7 +14,8 @@ $bordercolor-nav-tabs: $gray-300 !default;
 $bordercolor-nav-tabs-hover: $gray-200 $gray-200 $bordercolor-nav-tabs !default;
 $color-nav-tabs-link-active: $gray-600 !default;
 $bordercolor-nav-tabs-active: $bordercolor-nav-tabs $bordercolor-nav-tabs $bgcolor-global !default;
-$color-seen-user: #549c79;
+$bordercolor-toc: $bordercolor-nav-tabs !default;
+$color-seen-user: #549c79 !default;
 
 // override bootstrap variables
 $body-bg: $bgcolor-global;
@@ -247,21 +248,22 @@ pre:not(.hljs):not(.CodeMirror-line) {
 }
 
 .top-of-table-contents {
-  border-color: $bordercolor-nav-tabs;
-  .table-top-icon {
+  border-color: $bordercolor-toc;
+
+  .grw-btn-top-of-table {
     fill: $color-link;
   }
-  .btn.btn-seen-user-lists {
-    color: $color-seen-user;
-    &:active {
+  .grw-seen-user-list {
+    border-color: $bordercolor-toc;
+
+    .btn {
       color: $color-seen-user;
-    }
-    &:focus {
-      outline: none;
-      box-shadow: none;
-    }
-    .footstamp-icon {
-      fill: $color-seen-user;
+      &:active {
+        color: $color-seen-user;
+      }
+      .footstamp-icon {
+        fill: $color-seen-user;
+      }
     }
   }
 }
@@ -270,7 +272,7 @@ pre:not(.hljs):not(.CodeMirror-line) {
   .nav-title {
     color: $color-link;
   }
-  .table-top-icon {
+  .nav-link svg {
     fill: $color-link;
   }
   .active-border {