Merge pull request #7444 from weseek/feat/gw7923-fix-droppable-item-status

feat: gw7923 fix droppable item status

packages/app/public/static/locales/en_US/translation.json

@@ -824,9 +824,8 @@
     "input_placeholder": "Input folder name",
     "new_folder": "New Folder",
     "delete": "Delete Folder",
-    "drop_item_here": "Drop item here",
-    "cancel_bookmark": "Un-bookmark this page",
-    "bookmark_this_page": "Bookmark this page"
+    "drop_item_here": "Drag and drop item here",
+    "cancel_bookmark": "Un-bookmark this page"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable" : "Page tree feature is not available yet.",

packages/app/public/static/locales/ja_JP/translation.json

@@ -824,9 +824,8 @@
     "input_placeholder": "フォルダ名を入力してください`",
     "new_folder": "新しいフォルダ",
     "delete": "フォルダを削除",
-    "drop_item_here": "ここにアイテムをドロップ",
-    "cancel_bookmark": "このページのブックマークを解除",
-    "bookmark_this_page": "このページをブックマークして"
+    "drop_item_here": "ブックマークを解除",
+    "cancel_bookmark": "このページのブックマークを解除"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable" : "Page Tree 機能は現在使用できません。",

packages/app/public/static/locales/zh_CN/translation.json

@@ -827,9 +827,8 @@
     "input_placeholder": "输入文件夹名称",
     "new_folder": "新建文件夹",
     "delete": "删除文件夹",
-    "drop_item_here": "将项目放在这里",
-    "cancel_bookmark": "取消收藏此页面",
-    "bookmark_this_page": "收藏此页"
+    "drop_item_here": "将项目拖放到此处",
+    "cancel_bookmark": "取消收藏此页面"
   },
   "v5_page_migration": {
     "page_tree_not_avaliable": "Page Tree 功能不可用",

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

@@ -31,7 +31,9 @@ type BookmarkFolderItemProps = {
   isUserHomePage?: boolean
 }
 
-type DragItemDataType = BookmarkFolderItemProps & IPageHasId;
+type DragItemDataType = {
+  parentFolder: BookmarkFolderItems
+} & BookmarkFolderItemProps & IPageHasId
 
 const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderItemProps) => {
   const acceptedTypes: DragItemType[] = [DRAG_ITEM_TYPE.FOLDER, DRAG_ITEM_TYPE.BOOKMARK];
@@ -173,9 +175,8 @@ const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkFolderIt
       }
       return item.root !== targetRoot || item.level >= targetLevel;
     }
-    const bookmarks = bookmarkFolder.bookmarks;
-    const isBookmarkExists = bookmarks.filter(bookmark => bookmark.page._id === item._id).length > 0;
-    if (isBookmarkExists) {
+
+    if (item.parentFolder != null && item.parentFolder._id === bookmarkFolder._id) {
       return false;
     }
     return true;

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

@@ -9,9 +9,7 @@
   }
 
   .grw-drop-item-area {
-    min-height: 90vh;
     padding: 1rem;
-
     & .grw-accept-drop-item {
       padding: 0.7rem;
     }

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

@@ -99,7 +99,7 @@ const BookmarkFolderTree = (props: BookmarkFolderTreeProps): JSX.Element => {
 
   };
 
-  const [{ isOver, canDrop }, dropRef] = useDrop(() => ({
+  const [, dropRef] = useDrop(() => ({
     accept: acceptedTypes,
     drop: (item: DragItemDataType, monitor) => {
       const dragType = monitor.getItemType();
@@ -145,13 +145,16 @@ const BookmarkFolderTree = (props: BookmarkFolderTreeProps): JSX.Element => {
             </div>
           ))}
         </ul>
-        { bookmarkFolderData && bookmarkFolderData.length > 0 && (
-          <div ref={(c) => { dropRef(c) }} className= 'grw-drop-item-area' >
-            { canDrop && isOver && (
-              <div className='grw-accept-drop-item' >{t('bookmark_folder.drop_item_here')}</div>
-            )}
+        {bookmarkFolderData != null && bookmarkFolderData.length > 0 && (
+          <div ref={(c) => { dropRef(c) }} className="grw-drop-item-area">
+            <div className="grw-accept-drop-item">
+              <div className="d-flex flex-column align-items-center">
+                {t('bookmark_folder.drop_item_here')}
+              </div>
+            </div>
+
           </div>
-        ) }
+        )}
       </div>
     </>
   );

packages/app/src/components/UsersHomePageFooter.module.scss

@@ -85,7 +85,6 @@ $grw-sidebar-content-footer-height: 50px;
     }
     .grw-folder-tree-container {
       .grw-drop-item-area {
-        min-height: 25vh;
         padding: 1rem;
         .grw-accept-drop-item {
           padding: 0.5rem;

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

@@ -373,7 +373,6 @@
     .grw-folder-tree-container {
       .grw-drop-item-area , .grw-foldertree-item-container {
         .grw-accept-drop-item {
-          background-color: hsl.lighten(var(--bgcolor-sidebar-context), 10%) !important;
           border-color: hsl.lighten(var(--bgcolor-sidebar-context), 30%) !important;
         }
       }
@@ -440,7 +439,6 @@
     .grw-folder-tree-container {
       .grw-drop-item-area , .grw-foldertree-item-container {
         .grw-accept-drop-item {
-          background-color: hsl.lighten(var($body-bg), 10%) !important;
           border-color: hsl.lighten(var($body-bg), 30%) !important;
         }
       }

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

@@ -241,7 +241,6 @@
     .grw-folder-tree-container {
       .grw-drop-item-area, .grw-foldertree-item-container  {
         .grw-accept-drop-item {
-          background-color: hsl.darken(var(--bgcolor-sidebar-context), 10%) !important;
           border-color: hsl.darken(var(--bgcolor-sidebar-context), 30%) !important;
         }
       }
@@ -312,7 +311,6 @@
     .grw-folder-tree-container {
       .grw-drop-item-area, .grw-foldertree-item-container  {
         .grw-accept-drop-item {
-          background-color: hsl.darken(var($body-bg), 10%) !important;
           border-color: hsl.darken(var($body-bg), 30%) !important;
         }
       }