Merge pull request #5082 from weseek/imprv/85608-add-bg-color

apply background color

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

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useState, FC, useEffect, memo, useRef,
+  useCallback, useState, FC, useEffect, memo,
 } from 'react';
 import nodePath from 'path';
 import { useTranslation } from 'react-i18next';
@@ -125,7 +125,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
     console.log('pageItem was droped!!');
   };
 
-  const [, drop] = useDrop(() => ({
+  const [{ isOver }, drop] = useDrop(() => ({
     accept: 'PAGE_TREE',
     drop: pageItemDropHandler,
     hover: (item, monitor) => {
@@ -138,6 +138,9 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
         }, 1000);
       }
     },
+    collect: monitor => ({
+      isOver: monitor.isOver(),
+    }),
   }));
 
   const hasChildren = useCallback((): boolean => {
@@ -211,8 +214,11 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
   }, [data, isOpen]);
 
   return (
-    <>
-      <div ref={(c) => { drag(c); drop(c) }} className={`grw-pagetree-item d-flex align-items-center pr-1 ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}>
+    <div className={`grw-pagetree-item-container ${isOver ? 'grw-pagetree-is-over' : ''}`}>
+      <div
+        ref={(c) => { drag(c); drop(c) }}
+        className={`grw-pagetree-item d-flex align-items-center pr-1 ${page.isTarget ? 'grw-pagetree-is-target' : ''}`}
+      >
         <button
           type="button"
           className={`grw-pagetree-button btn ${isOpen ? 'grw-pagetree-open' : ''}`}
@@ -250,7 +256,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
       )}
       {
         isOpen && hasChildren() && currentChildren.map(node => (
-          <div key={node.page._id} className="grw-pagetree-item-container">
+          <div key={node.page._id} className="grw-pagetree-item-children">
             <Item
               isEnableActions={isEnableActions}
               itemNode={node}
@@ -261,7 +267,7 @@ const Item: FC<ItemProps> = (props: ItemProps) => {
           </div>
         ))
       }
-    </>
+    </div>
   );
 
 };

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

@@ -46,46 +46,67 @@ $grw-pagetree-item-padding-left: 10px;
   }
 
   // To realize a hierarchical structure, set multiplied padding-left to each pagetree-item
-
   > .grw-pagetree-item-container {
-    > .grw-pagetree-item {
-      padding-left: $grw-pagetree-item-padding-left;
-    }
-    > .grw-pagetree-item-container {
-      > .grw-pagetree-item {
-        padding-left: $grw-pagetree-item-padding-left * 2;
-      }
+    > .grw-pagetree-item-children {
       > .grw-pagetree-item-container {
         > .grw-pagetree-item {
-          padding-left: $grw-pagetree-item-padding-left * 3;
+          padding-left: $grw-pagetree-item-padding-left;
         }
-        > .grw-pagetree-item-container {
-          > .grw-pagetree-item {
-            padding-left: $grw-pagetree-item-padding-left * 4;
-          }
+        > .grw-pagetree-item-children {
           > .grw-pagetree-item-container {
             > .grw-pagetree-item {
-              padding-left: $grw-pagetree-item-padding-left * 5;
+              padding-left: $grw-pagetree-item-padding-left * 2;
             }
-            > .grw-pagetree-item-container {
-              > .grw-pagetree-item {
-                padding-left: $grw-pagetree-item-padding-left * 6;
-              }
+            > .grw-pagetree-item-children {
               > .grw-pagetree-item-container {
                 > .grw-pagetree-item {
-                  padding-left: $grw-pagetree-item-padding-left * 7;
+                  padding-left: $grw-pagetree-item-padding-left * 3;
                 }
-                > .grw-pagetree-item-container {
-                  > .grw-pagetree-item {
-                    padding-left: $grw-pagetree-item-padding-left * 8;
-                  }
+                > .grw-pagetree-item-children {
                   > .grw-pagetree-item-container {
                     > .grw-pagetree-item {
-                      padding-left: $grw-pagetree-item-padding-left * 9;
+                      padding-left: $grw-pagetree-item-padding-left * 4;
                     }
-                    .grw-pagetree-item-container {
-                      > .grw-pagetree-item {
-                        padding-left: $grw-pagetree-item-padding-left * 10;
+                    > .grw-pagetree-item-children {
+                      > .grw-pagetree-item-container {
+                        > .grw-pagetree-item {
+                          padding-left: $grw-pagetree-item-padding-left * 5;
+                        }
+                        > .grw-pagetree-item-children {
+                          > .grw-pagetree-item-container {
+                            > .grw-pagetree-item {
+                              padding-left: $grw-pagetree-item-padding-left * 6;
+                            }
+                            > .grw-pagetree-item-children {
+                              > .grw-pagetree-item-container {
+                                > .grw-pagetree-item {
+                                  padding-left: $grw-pagetree-item-padding-left * 7;
+                                }
+                                > .grw-pagetree-item-children {
+                                  > .grw-pagetree-item-container {
+                                    > .grw-pagetree-item {
+                                      padding-left: $grw-pagetree-item-padding-left * 8;
+                                    }
+                                    > .grw-pagetree-item-children {
+                                      > .grw-pagetree-item-container {
+                                        > .grw-pagetree-item {
+                                          padding-left: $grw-pagetree-item-padding-left * 9;
+                                        }
+                                        .grw-pagetree-item-children {
+                                          > .grw-pagetree-item-container {
+                                            > .grw-pagetree-item {
+                                              padding-left: $grw-pagetree-item-padding-left * 10;
+                                            }
+                                          }
+                                        }
+                                      }
+                                    }
+                                  }
+                                }
+                              }
+                            }
+                          }
+                        }
                       }
                     }
                   }

packages/app/src/styles/theme/_apply-colors-dark.scss

@@ -257,6 +257,9 @@ ul.pagination {
 
   // Pagetree
   .grw-pagetree {
+    .grw-pagetree-is-over {
+      background: $bgcolor-list-hover;
+    }
     .grw-pagetree-item {
       &.grw-pagetree-is-target {
         background: $bgcolor-list-hover;

packages/app/src/styles/theme/_apply-colors-light.scss

@@ -170,6 +170,9 @@ $border-color: $border-color-global;
 
   // Pagetree
   .grw-pagetree {
+    .grw-pagetree-is-over {
+      background: $bgcolor-list-hover;
+    }
     .grw-pagetree-item {
       &.grw-pagetree-is-target {
         background: $bgcolor-list-hover;