From a25cd8566897a98b669aff513a88a521190e1335 Mon Sep 17 00:00:00 2001 From: kosei-n Date: Thu, 22 Feb 2024 11:39:38 +0000 Subject: [PATCH 1/7] add SimpleBar to PageSelectModal --- .../PageSelectModal/PageSelectModal.tsx | 78 ++++++++++++++++--- 1 file changed, 67 insertions(+), 11 deletions(-) diff --git a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx index d25f1ebffc3..7df85253da0 100644 --- a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx +++ b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx @@ -1,5 +1,7 @@ import type { FC } from 'react'; -import { useState, useCallback } from 'react'; +import { + useState, useCallback, memo, useRef, +} from 'react'; import nodePath from 'path'; @@ -7,6 +9,7 @@ import { useTranslation } from 'next-i18next'; import { Modal, ModalHeader, ModalBody, ModalFooter, Button, } from 'reactstrap'; +import SimpleBar from 'simplebar-react'; import type { IPageForItem } from '~/interfaces/page'; import { useTargetAndAncestors, useIsGuestUser, useIsReadOnlyUser } from '~/stores/context'; @@ -15,9 +18,58 @@ import { useCurrentPagePath, useCurrentPageId, useSWRxCurrentPage } from '~/stor import { ItemsTree } from '../ItemsTree'; import { usePagePathRenameHandler } from '../PageEditor/page-path-rename-utils'; +import { StickyStretchableScroller } from '../StickyStretchableScroller'; import { TreeItemForModal } from './TreeItemForModal'; +import 'simplebar-react/dist/simplebar.min.css'; + +import styles from './PageSelectModal.module.scss'; + +const TreeForModalWrapper = memo((props: { children: JSX.Element }) => { + + const { children } = props; + + const calcViewHeight = useCallback(() => { + const elem = document.querySelector('#grw-sidebar-contents-wrapper'); + return window.innerHeight / 2; + }, []); + + return ( +
+ + { children } + +
+ ); + + // const calcViewHeight = useCallback(() => { + // const elem = document.querySelector('#grw-page-select-modal-wrapper'); + // return elem != null + // ? window.innerHeight - elem?.getBoundingClientRect().top + // : window.innerHeight; + // }, []); + + // return ( + //
+ // + // { children } + // + //
+ // ); + +}); export const PageSelectModal: FC = () => { const { @@ -82,16 +134,20 @@ export const PageSelectModal: FC = () => { size="sm" > {t('page_select_modal.select_page_location')} - - + + +
+ +
+ From 7396be224734b292ce14ce5a882e5eb1f94eac75 Mon Sep 17 00:00:00 2001 From: kosei-n Date: Thu, 22 Feb 2024 11:39:53 +0000 Subject: [PATCH 2/7] adjust padding of components --- apps/app/src/components/ItemsTree/ItemsTree.tsx | 2 +- .../components/PageSelectModal/PageSelectModal.module.scss | 3 +++ .../src/components/Sidebar/PageTree/PageTreeSubstance.tsx | 5 ++--- 3 files changed, 6 insertions(+), 4 deletions(-) create mode 100644 apps/app/src/components/PageSelectModal/PageSelectModal.module.scss diff --git a/apps/app/src/components/ItemsTree/ItemsTree.tsx b/apps/app/src/components/ItemsTree/ItemsTree.tsx index cc1e91f052b..6d50feba993 100644 --- a/apps/app/src/components/ItemsTree/ItemsTree.tsx +++ b/apps/app/src/components/ItemsTree/ItemsTree.tsx @@ -274,7 +274,7 @@ export const ItemsTree = (props: ItemsTreeProps): JSX.Element => { if (initialItemNode != null) { return ( -
    +
      { const path = currentPath || '/'; return ( - <> +
      { targetAndAncestorsData={targetAndAncestorsData} CustomTreeItem={PageTreeItem} /> - {!isGuestUser && !isReadOnlyUser && migrationStatus?.migratablePagesCount != null && migrationStatus.migratablePagesCount !== 0 && (
      @@ -86,7 +85,7 @@ export const PageTreeContent = memo(() => {
      )} - +
      ); }); From 8fabc0b9f9316b5e803fa3c230d25c65038a7c89 Mon Sep 17 00:00:00 2001 From: kosei-n Date: Thu, 22 Feb 2024 11:46:37 +0000 Subject: [PATCH 3/7] clean codes --- .../PageSelectModal/PageSelectModal.tsx | 28 +------------------ 1 file changed, 1 insertion(+), 27 deletions(-) diff --git a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx index 7df85253da0..06c640de000 100644 --- a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx +++ b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx @@ -1,7 +1,5 @@ import type { FC } from 'react'; -import { - useState, useCallback, memo, useRef, -} from 'react'; +import { useState, useCallback, memo } from 'react'; import nodePath from 'path'; @@ -9,7 +7,6 @@ import { useTranslation } from 'next-i18next'; import { Modal, ModalHeader, ModalBody, ModalFooter, Button, } from 'reactstrap'; -import SimpleBar from 'simplebar-react'; import type { IPageForItem } from '~/interfaces/page'; import { useTargetAndAncestors, useIsGuestUser, useIsReadOnlyUser } from '~/stores/context'; @@ -22,8 +19,6 @@ import { StickyStretchableScroller } from '../StickyStretchableScroller'; import { TreeItemForModal } from './TreeItemForModal'; -import 'simplebar-react/dist/simplebar.min.css'; - import styles from './PageSelectModal.module.scss'; const TreeForModalWrapper = memo((props: { children: JSX.Element }) => { @@ -31,7 +26,6 @@ const TreeForModalWrapper = memo((props: { children: JSX.Element }) => { const { children } = props; const calcViewHeight = useCallback(() => { - const elem = document.querySelector('#grw-sidebar-contents-wrapper'); return window.innerHeight / 2; }, []); @@ -49,26 +43,6 @@ const TreeForModalWrapper = memo((props: { children: JSX.Element }) => { ); - - // const calcViewHeight = useCallback(() => { - // const elem = document.querySelector('#grw-page-select-modal-wrapper'); - // return elem != null - // ? window.innerHeight - elem?.getBoundingClientRect().top - // : window.innerHeight; - // }, []); - - // return ( - //
      - // - // { children } - // - //
      - // ); - }); export const PageSelectModal: FC = () => { From adbc16012e2ea2fc18d1ca4313b209b404973d8d Mon Sep 17 00:00:00 2001 From: kosei-n Date: Tue, 27 Feb 2024 03:34:25 +0000 Subject: [PATCH 4/7] fix css property --- .../components/PageSelectModal/PageSelectModal.module.scss | 4 ++-- apps/app/src/components/PageSelectModal/PageSelectModal.tsx | 3 +-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/app/src/components/PageSelectModal/PageSelectModal.module.scss b/apps/app/src/components/PageSelectModal/PageSelectModal.module.scss index d9930edeec3..9b0507b0582 100644 --- a/apps/app/src/components/PageSelectModal/PageSelectModal.module.scss +++ b/apps/app/src/components/PageSelectModal/PageSelectModal.module.scss @@ -1,3 +1,3 @@ -.tree-for-modal-wrapper::-webkit-scrollbar { - display: none; +.grw-page-select-modal-wrapper { + height: 50vh; } diff --git a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx index 06c640de000..11a3c0e7d38 100644 --- a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx +++ b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx @@ -31,8 +31,7 @@ const TreeForModalWrapper = memo((props: { children: JSX.Element }) => { return (
      Date: Tue, 27 Feb 2024 04:31:52 +0000 Subject: [PATCH 5/7] clean codes --- .../app/src/components/PageSelectModal/PageSelectModal.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx index 11a3c0e7d38..ea6123c6479 100644 --- a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx +++ b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx @@ -19,8 +19,6 @@ import { StickyStretchableScroller } from '../StickyStretchableScroller'; import { TreeItemForModal } from './TreeItemForModal'; -import styles from './PageSelectModal.module.scss'; - const TreeForModalWrapper = memo((props: { children: JSX.Element }) => { const { children } = props; @@ -30,10 +28,7 @@ const TreeForModalWrapper = memo((props: { children: JSX.Element }) => { }, []); return ( -
      +
      Date: Wed, 8 May 2024 06:07:39 +0000 Subject: [PATCH 6/7] use simplebar instead of StickyStretchableScroller --- .../src/components/PageSelectModal/PageSelectModal.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx index ea6123c6479..f403ea23e8b 100644 --- a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx +++ b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx @@ -19,6 +19,9 @@ import { StickyStretchableScroller } from '../StickyStretchableScroller'; import { TreeItemForModal } from './TreeItemForModal'; +import 'simplebar'; +import 'simplebar/dist/simplebar.css'; + const TreeForModalWrapper = memo((props: { children: JSX.Element }) => { const { children } = props; @@ -29,12 +32,9 @@ const TreeForModalWrapper = memo((props: { children: JSX.Element }) => { return (
      - +
      { children } - +
      ); }); From a72d05ab8e2d6d683a22c92709d5960528dbd92a Mon Sep 17 00:00:00 2001 From: kosei-n Date: Wed, 8 May 2024 06:14:49 +0000 Subject: [PATCH 7/7] fix conflict --- .../PageSelectModal/PageSelectModal.tsx | 24 +++++++++++-------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx index 420f7134390..2d3a2764498 100644 --- a/apps/app/src/components/PageSelectModal/PageSelectModal.tsx +++ b/apps/app/src/components/PageSelectModal/PageSelectModal.tsx @@ -105,17 +105,21 @@ export const PageSelectModal: FC = () => { size="sm" > {t('page_select_modal.select_page_location')} - + }> - + +
      + +
      +