Fix indentation of foldertree

https://youtrack.weseek.co.jp/issue/GW-7925
- Calculate padding left of BookmarkFolderItem and  BookmarkItem by level and apply with style property
- Add and adjust level props to BookmarkItem
- Remove hierarchical folder tree css class from BookmarkFolderTree.module.scss
- Simplify css classes of BookmarkFolderTree.module.scss

packages/app/src/components/Bookmarks/BookmarkFolderItem.tsx

@@ -36,6 +36,7 @@ type BookmarkFolderItemProps = {
 }
 
 export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderItemProps) => {
+  const BASE_FOLDER_PADDING = 15;
   const acceptedTypes: DragItemType[] = [DRAG_ITEM_TYPE.FOLDER, DRAG_ITEM_TYPE.BOOKMARK];
   const {
     bookmarkFolder, isOpen: _isOpen = false, level, root, isUserHomePage,
@@ -59,6 +60,8 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
 
   const childrenExists = hasChildren(children);
 
+  const paddingLeft = BASE_FOLDER_PADDING * level;
+
   const loadChildFolder = useCallback(async() => {
     setIsOpen(!isOpen);
     setTargetFolder(folderId);
@@ -196,6 +199,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
           onRenamed={mutateBookmarkData}
           onClickDeleteMenuItem={onClickDeleteBookmarkHandler}
           parentFolder={bookmarkFolder}
+          level={level + 1}
         />
       );
     });
@@ -234,8 +238,9 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
         isDropable={isDroppable}
       >
         <li
-          className={' list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center'}
+          className={'list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center'}
           onClick={loadChildFolder}
+          style={{ paddingLeft }}
         >
           <div className="grw-triangle-container d-flex justify-content-center">
             {childrenExists && (

packages/app/src/components/Bookmarks/BookmarkFolderTree.module.scss

@@ -22,208 +22,69 @@ $grw-bookmark-item-padding-left: 35px;
   }
 }
 
-.grw-foldertree {
-  :global {
+.grw-foldertree :global {
 
-    .btn-page-item-control {
-      .icon-plus::before {
-        font-size: 18px;
-      }
-    }
+  .btn-page-item-control .icon-plus::before {
+    font-size: 18px;
+  }
 
-    .list-group-item {
-      .grw-visible-on-hover {
-        display: none;
-      }
+  .list-group-item {
+    .grw-visible-on-hover {
+      display: none;
 
       &:hover {
-        .grw-visible-on-hover {
-          display: block;
-        }
-
-        .grw-count-badge {
-          display: none;
-        }
+        display: block;
       }
+    }
 
-      .grw-foldertree-triangle-btn {
-        background-color: transparent;
-        transition: all 0.2s ease-out;
-        transform: rotate(0deg);
+    .grw-count-badge {
+      display: block;
 
-        &.grw-foldertree-open {
-          transform: rotate(90deg);
-        }
+      &:hover {
+        display: none;
       }
+    }
+
+    .grw-foldertree-triangle-btn {
+      background-color: transparent;
+      transition: all 0.2s ease-out;
+      transform: rotate(0deg);
 
-      .grw-foldertree-title-anchor {
-        width: 100%;
-        overflow: hidden;
-        text-decoration: none;
+      &.grw-foldertree-open {
+        transform: rotate(90deg);
       }
     }
 
-    .grw-foldertree-item-container {
-      .grw-triangle-container {
-        min-width: 35px;
-        height: 40px;
-      }
-      .grw-bookmark-item-list{
-        .picture {
-          width: 16px;
-          height: 16px;
-          vertical-align: text-bottom;
-
-          &.picture-md {
-            width: 20px;
-            height: 20px;
-          }
-        }
-        min-width: 30px;
-        height: 35px;
-        .grw-foldertree-control{
-          margin-left: auto;
-        }
-      }
+    .grw-foldertree-title-anchor {
+      width: 100%;
+      overflow: hidden;
+      text-decoration: none;
     }
   }
-  &:global{
-    // To realize a hierarchical structure, set multiplied padding-left to each foldertree-item
-    >.grw-foldertree-item-container.grw-root-bookmarks{
-      > .grw-drag-drop-container {
-        > .list-group-item.grw-bookmark-item-list {
-          padding-left: $grw-bookmark-item-padding-left ;
-        }
-      }
+
+  .grw-foldertree-item-container {
+    .grw-triangle-container {
+      min-width: 35px;
+      height: 40px;
     }
-    > .grw-foldertree-item-container {
-      > .grw-drag-drop-container {
-        > .list-group-item {
-          padding-left: 0
-        }
-        > .list-group-item.grw-bookmark-item-list {
-          padding-left: $grw-bookmark-item-padding-left + $grw-foldertree-item-padding-left;
+
+    .grw-bookmark-item-list{
+      min-width: 30px;
+      height: 35px;
+
+      .picture {
+        width: 16px;
+        height: 16px;
+        vertical-align: text-bottom;
+
+        &.picture-md {
+          width: 20px;
+          height: 20px;
         }
       }
-      > .grw-foldertree-item-children {
-        > .grw-foldertree-item-container {
-          > .grw-drag-drop-container {
-            > .list-group-item {
-              padding: $grw-foldertree-item-padding-left
-            }
-            > .list-group-item.grw-bookmark-item-list {
-              padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 2);
-            }
-          }
-          > .grw-foldertree-item-children {
-            > .grw-foldertree-item-container {
-              > .grw-drag-drop-container {
-                > .list-group-item {
-                  padding: $grw-foldertree-item-padding-left * 2
-                }
-                > .list-group-item.grw-bookmark-item-list {
-                  padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 3);
-                }
-              }
-              > .grw-foldertree-item-children {
-                > .grw-foldertree-item-container {
-                  > .grw-drag-drop-container {
-                    > .list-group-item {
-                      padding: $grw-foldertree-item-padding-left * 3
-                    }
-                    > .list-group-item.grw-bookmark-item-list {
-                      padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 4);
-                    }
-                  }
-                  > .grw-foldertree-item-children {
-                    > .grw-foldertree-item-container {
-                      > .grw-drag-drop-container {
-                        > .list-group-item {
-                          padding: $grw-foldertree-item-padding-left * 4
-                        }
-                        > .list-group-item.grw-bookmark-item-list {
-                          padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 5);
-                        }
-                      }
-                      > .grw-foldertree-item-children {
-                        > .grw-foldertree-item-container {
-                          > .grw-drag-drop-container {
-                            > .list-group-item {
-                              padding: $grw-foldertree-item-padding-left * 5
-                            }
-                            > .list-group-item.grw-bookmark-item-list {
-                              padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 6);
-                            }
-                          }
-                          > .grw-foldertree-item-children {
-                            > .grw-foldertree-item-container {
-                              > .grw-drag-drop-container {
-                                > .list-group-item {
-                                  padding: $grw-foldertree-item-padding-left * 6
-                                }
-                                > .list-group-item.grw-bookmark-item-list {
-                                  padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 7);
-                                }
-                              }
-                              > .grw-foldertree-item-children {
-                                > .grw-foldertree-item-container {
-                                  > .grw-drag-drop-container {
-                                    > .list-group-item {
-                                      padding: $grw-foldertree-item-padding-left * 7
-                                    }
-                                    > .list-group-item.grw-bookmark-item-list {
-                                      padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 8);
-                                    }
-                                  }
-                                  > .grw-foldertree-item-children {
-                                    > .grw-foldertree-item-container {
-                                      > .grw-drag-drop-container {
-                                        > .list-group-item {
-                                          padding: $grw-foldertree-item-padding-left * 8
-                                        }
-                                        > .list-group-item.grw-bookmark-item-list {
-                                          padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 9);
-                                        }
-                                      }
-                                      > .grw-foldertree-item-children {
-                                        > .grw-foldertree-item-container {
-                                          > .grw-drag-drop-container {
-                                            > .list-group-item {
-                                              padding: $grw-foldertree-item-padding-left * 9
-                                            }
-                                            > .list-group-item.grw-bookmark-item-list {
-                                              padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 10);
-                                            }
-                                          }
-                                          > .grw-foldertree-item-children {
-                                            > .grw-foldertree-item-container {
-                                              > .grw-drag-drop-container {
-                                                > .list-group-item {
-                                                  padding: $grw-foldertree-item-padding-left * 10
-                                                }
-                                                > .list-group-item.grw-bookmark-item-list {
-                                                  padding-left: $grw-bookmark-item-padding-left + ($grw-foldertree-item-padding-left * 11);
-                                                }
-                                              }
-                                            }
-                                          }
-                                        }
-                                      }
-                                    }
-                                  }
-                                }
-                              }
-                            }
-                          }
-                        }
-                      }
-                    }
-                  }
-                }
-              }
-            }
-          }
-        }
+
+      .grw-foldertree-control{
+        margin-left: auto;
       }
     }
   }

packages/app/src/components/Bookmarks/BookmarkFolderTree.tsx

@@ -123,6 +123,7 @@ export const BookmarkFolderTree = (props: BookmarkFolderTreeProps): JSX.Element
               onRenamed={mutateUserBookmarks}
               onClickDeleteMenuItem={onClickDeleteBookmarkHandler}
               parentFolder={null}
+              level={0}
             />
           </div>
         ))}

packages/app/src/components/Bookmarks/BookmarkItem.tsx

@@ -27,12 +27,15 @@ type Props = {
   onRenamed: () => void,
   onClickDeleteMenuItem: (pageToDelete: IPageToDeleteWithMeta) => void,
   parentFolder: BookmarkFolderItems | null
+  level: number
 }
 
 export const BookmarkItem = (props: Props): JSX.Element => {
+  const BASE_FOLDER_PADDING = 15;
+  const BASE_BOOKMARK_PADDING = 20;
   const { t } = useTranslation();
   const {
-    bookmarkedPage, onUnbookmarked, onRenamed, onClickDeleteMenuItem, parentFolder,
+    bookmarkedPage, onUnbookmarked, onRenamed, onClickDeleteMenuItem, parentFolder, level,
   } = props;
   const [isRenameInputShown, setRenameInputShown] = useState(false);
   const dPagePath = new DevidedPagePath(bookmarkedPage.path, false, true);
@@ -41,6 +44,8 @@ export const BookmarkItem = (props: Props): JSX.Element => {
   const { mutate: mutateBookamrkData } = useSWRxBookamrkFolderAndChild();
   const { data: fetchedPageInfo } = useSWRxPageInfo(bookmarkedPage._id);
 
+  const paddingLeft = BASE_BOOKMARK_PADDING + (BASE_FOLDER_PADDING * (level + 1));
+
   const dragItem: Partial<DragItemDataType> = {
     ...bookmarkedPage, parentFolder,
   };
@@ -106,6 +111,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
         className="grw-bookmark-item-list list-group-item list-group-item-action border-0 py-0 mr-auto d-flex align-items-center"
         key={bookmarkedPage._id}
         id={bookmarkItemId}
+        style={{ paddingLeft }}
       >
         { isRenameInputShown ? (
           <ClosableTextInput