Merge pull request #6228 from weseek/feat/spply-styles-to-page-tree

feat: apply styles to page tree

packages/app/src/components/Sidebar/PageTree/ItemsTree.module.scss

@@ -0,0 +1,141 @@
+@use '~/styles/variables' as var;
+$grw-sidebar-content-header-height: 58px;
+$grw-sidebar-content-footer-height: 50px;
+$grw-pagetree-item-padding-left: 10px;
+
+.grw-pagetree {
+  :global {
+    min-height: calc(100vh - (var.$grw-navbar-height + var.$grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
+
+    .btn-page-item-control {
+      .icon-plus::before {
+        font-size: 18px;
+      }
+    }
+
+    .list-group-item {
+      .grw-visible-on-hover {
+        display: none;
+      }
+
+      &:hover {
+        .grw-visible-on-hover {
+          display: block;
+        }
+
+        .grw-count-badge {
+          display: none;
+        }
+      }
+
+      .grw-pagetree-triangle-btn {
+        background-color: transparent;
+        transition: all 0.2s ease-out;
+        transform: rotate(0deg);
+
+        &.grw-pagetree-open {
+          transform: rotate(90deg);
+        }
+      }
+
+      .grw-pagetree-title-anchor {
+        width: 100%;
+        overflow: hidden;
+        text-decoration: none;
+      }
+
+      .grw-pagetree-count-wrapper {
+        display: inline-block;
+
+        &:hover {
+          display: none;
+        }
+      }
+    }
+
+    .grw-pagetree-item-container {
+      .grw-triangle-container {
+        min-width: 35px;
+        height: 40px;
+      }
+    }
+  }
+  &:global{
+    // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
+    > .grw-pagetree-item-container {
+      > .list-group-item {
+        padding-left: 0;
+      }
+      > .grw-pagetree-item-children {
+        > .grw-pagetree-item-container {
+          > .list-group-item {
+            padding-left: $grw-pagetree-item-padding-left;
+          }
+          > .grw-pagetree-item-children {
+            > .grw-pagetree-item-container {
+              > .list-group-item {
+                padding-left: $grw-pagetree-item-padding-left * 2;
+              }
+              > .grw-pagetree-item-children {
+                > .grw-pagetree-item-container {
+                  > .list-group-item {
+                    padding-left: $grw-pagetree-item-padding-left * 3;
+                  }
+                  > .grw-pagetree-item-children {
+                    > .grw-pagetree-item-container {
+                      > .list-group-item {
+                        padding-left: $grw-pagetree-item-padding-left * 4;
+                      }
+                      > .grw-pagetree-item-children {
+                        > .grw-pagetree-item-container {
+                          > .list-group-item {
+                            padding-left: $grw-pagetree-item-padding-left * 5;
+                          }
+                          > .grw-pagetree-item-children {
+                            > .grw-pagetree-item-container {
+                              > .list-group-item {
+                                padding-left: $grw-pagetree-item-padding-left * 6;
+                              }
+                              > .grw-pagetree-item-children {
+                                > .grw-pagetree-item-container {
+                                  > .list-group-item {
+                                    padding-left: $grw-pagetree-item-padding-left * 7;
+                                  }
+                                  > .grw-pagetree-item-children {
+                                    > .grw-pagetree-item-container {
+                                      > .list-group-item {
+                                        padding-left: $grw-pagetree-item-padding-left * 8;
+                                      }
+                                      > .grw-pagetree-item-children {
+                                        > .grw-pagetree-item-container {
+                                          > .list-group-item {
+                                            padding-left: $grw-pagetree-item-padding-left * 9;
+                                          }
+                                          .grw-pagetree-item-children {
+                                            > .grw-pagetree-item-container {
+                                              > .list-group-item {
+                                                padding-left: $grw-pagetree-item-padding-left * 10;
+                                              }
+                                            }
+                                          }
+                                        }
+                                      }
+                                    }
+                                  }
+                                }
+                              }
+                            }
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

packages/app/src/components/Sidebar/PageTree/ItemsTree.tsx

@@ -26,6 +26,8 @@ import loggerFactory from '~/utils/logger';
 import Item from './Item';
 import { ItemNode } from './ItemNode';
 
+import styles from './ItemsTree.module.scss';
+
 const logger = loggerFactory('growi:cli:ItemsTree');
 
 /*
@@ -257,7 +259,7 @@ const ItemsTree = (props: ItemsTreeProps): JSX.Element => {
 
   if (initialItemNode != null) {
     return (
-      <ul className="grw-pagetree list-group p-3" ref={rootElemRef}>
+      <ul className={`grw-pagetree ${styles['grw-pagetree']} list-group p-3`} ref={rootElemRef}>
         <Item
           key={initialItemNode.page.path}
           targetPathOrId={targetPathOrId}

packages/app/src/styles/_page-tree.scss

@@ -1,137 +0,0 @@
-$grw-sidebar-content-header-height: 58px;
-$grw-sidebar-content-footer-height: 50px;
-$grw-pagetree-item-padding-left: 10px;
-
-.grw-pagetree {
-  min-height: calc(100vh - ($grw-navbar-height + $grw-navbar-border-width + $grw-sidebar-content-header-height + $grw-sidebar-content-footer-height));
-
-  .btn-page-item-control {
-    .icon-plus::before {
-      font-size: 18px;
-    }
-  }
-
-  .list-group-item {
-    .grw-visible-on-hover {
-      display: none;
-    }
-
-    &:hover {
-      .grw-visible-on-hover {
-        display: block;
-      }
-
-      .grw-count-badge {
-        display: none;
-      }
-    }
-
-    .grw-pagetree-triangle-btn {
-      background-color: transparent;
-      transition: all 0.2s ease-out;
-      transform: rotate(0deg);
-
-      &.grw-pagetree-open {
-        transform: rotate(90deg);
-      }
-    }
-
-    .grw-pagetree-title-anchor {
-      width: 100%;
-      overflow: hidden;
-      text-decoration: none;
-    }
-
-    .grw-pagetree-count-wrapper {
-      display: inline-block;
-
-      &:hover {
-        display: none;
-      }
-    }
-  }
-
-  .grw-pagetree-item-container {
-    .grw-triangle-container {
-      min-width: 35px;
-      height: 40px;
-    }
-  }
-
-  // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
-  > .grw-pagetree-item-container {
-    > .list-group-item {
-      padding-left: 0;
-    }
-    > .grw-pagetree-item-children {
-      > .grw-pagetree-item-container {
-        > .list-group-item {
-          padding-left: $grw-pagetree-item-padding-left;
-        }
-        > .grw-pagetree-item-children {
-          > .grw-pagetree-item-container {
-            > .list-group-item {
-              padding-left: $grw-pagetree-item-padding-left * 2;
-            }
-            > .grw-pagetree-item-children {
-              > .grw-pagetree-item-container {
-                > .list-group-item {
-                  padding-left: $grw-pagetree-item-padding-left * 3;
-                }
-                > .grw-pagetree-item-children {
-                  > .grw-pagetree-item-container {
-                    > .list-group-item {
-                      padding-left: $grw-pagetree-item-padding-left * 4;
-                    }
-                    > .grw-pagetree-item-children {
-                      > .grw-pagetree-item-container {
-                        > .list-group-item {
-                          padding-left: $grw-pagetree-item-padding-left * 5;
-                        }
-                        > .grw-pagetree-item-children {
-                          > .grw-pagetree-item-container {
-                            > .list-group-item {
-                              padding-left: $grw-pagetree-item-padding-left * 6;
-                            }
-                            > .grw-pagetree-item-children {
-                              > .grw-pagetree-item-container {
-                                > .list-group-item {
-                                  padding-left: $grw-pagetree-item-padding-left * 7;
-                                }
-                                > .grw-pagetree-item-children {
-                                  > .grw-pagetree-item-container {
-                                    > .list-group-item {
-                                      padding-left: $grw-pagetree-item-padding-left * 8;
-                                    }
-                                    > .grw-pagetree-item-children {
-                                      > .grw-pagetree-item-container {
-                                        > .list-group-item {
-                                          padding-left: $grw-pagetree-item-padding-left * 9;
-                                        }
-                                        .grw-pagetree-item-children {
-                                          > .grw-pagetree-item-container {
-                                            > .list-group-item {
-                                              padding-left: $grw-pagetree-item-padding-left * 10;
-                                            }
-                                          }
-                                        }
-                                      }
-                                    }
-                                  }
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}