From c62f9401cc552d9e7e46584b7d9a1086ad28c2c2 Mon Sep 17 00:00:00 2001 From: Abhishek-17H Date: Mon, 13 Jan 2025 09:29:21 +0530 Subject: [PATCH 1/3] fix: render Ordertab only when active --- packages/volto/news/6492.bugfix | 1 + .../manage/Blocks/Block/BlocksForm.jsx | 3 +-- .../src/components/manage/Sidebar/Sidebar.jsx | 27 ++++++++++--------- .../__snapshots__/Sidebar.test.jsx.snap | 23 ---------------- 4 files changed, 16 insertions(+), 38 deletions(-) create mode 100644 packages/volto/news/6492.bugfix diff --git a/packages/volto/news/6492.bugfix b/packages/volto/news/6492.bugfix new file mode 100644 index 0000000000..22349d1990 --- /dev/null +++ b/packages/volto/news/6492.bugfix @@ -0,0 +1 @@ +You can now render the order side panel only when the 'Order' tab is active. Previously, the panel would render unnecessarily even when not active.@Abhishek-17h \ No newline at end of file diff --git a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx index a8fd1e7c05..8e8487eaf1 100644 --- a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx +++ b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx @@ -276,6 +276,7 @@ const BlocksForm = (props) => { <> {isMainForm && isClient && + document.getElementById('sidebar-order') && createPortal(
{ editable, showBlockChooser: selectedBlock === childId, detached: isContainer, - // Properties to pass to the BlocksForm to match the View ones content: properties, history, location, @@ -373,5 +373,4 @@ const BlocksForm = (props) => { ); }; - export default BlocksForm; diff --git a/packages/volto/src/components/manage/Sidebar/Sidebar.jsx b/packages/volto/src/components/manage/Sidebar/Sidebar.jsx index 9e2943b7af..776a9ebb3a 100644 --- a/packages/volto/src/components/manage/Sidebar/Sidebar.jsx +++ b/packages/volto/src/components/manage/Sidebar/Sidebar.jsx @@ -186,19 +186,20 @@ const Sidebar = (props) => { }, !!orderTab && { menuItem: intl.formatMessage(messages.order), - pane: ( - - - - ), + pane: + tab === 2 ? ( + + + + ) : null, }, !!settingsTab && { menuItem: intl.formatMessage(messages.settings), diff --git a/packages/volto/src/components/manage/Sidebar/__snapshots__/Sidebar.test.jsx.snap b/packages/volto/src/components/manage/Sidebar/__snapshots__/Sidebar.test.jsx.snap index 429e9a9d30..f7d1fd2fd9 100644 --- a/packages/volto/src/components/manage/Sidebar/__snapshots__/Sidebar.test.jsx.snap +++ b/packages/volto/src/components/manage/Sidebar/__snapshots__/Sidebar.test.jsx.snap @@ -87,29 +87,6 @@ Array [ xmlns="" />
- ,
Date: Sun, 19 Jan 2025 19:20:04 +0530 Subject: [PATCH 2/3] added loader for order tab --- packages/volto/src/icons/loader.svg | 43 +++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 packages/volto/src/icons/loader.svg diff --git a/packages/volto/src/icons/loader.svg b/packages/volto/src/icons/loader.svg new file mode 100644 index 0000000000..fdce82311d --- /dev/null +++ b/packages/volto/src/icons/loader.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + From df5b56672b8084498dff5358213fc486d84afef0 Mon Sep 17 00:00:00 2001 From: Abhishek-17H Date: Sun, 19 Jan 2025 19:20:29 +0530 Subject: [PATCH 3/3] Order tab to remain rendered after the initial load --- packages/volto/news/6492.bugfix | 2 +- .../src/components/manage/Sidebar/Sidebar.jsx | 14 ++++++++------ .../theme/themes/pastanaga/extras/sidebar.less | 5 +++++ 3 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/volto/news/6492.bugfix b/packages/volto/news/6492.bugfix index 22349d1990..42c9bff724 100644 --- a/packages/volto/news/6492.bugfix +++ b/packages/volto/news/6492.bugfix @@ -1 +1 @@ -You can now render the order side panel only when the 'Order' tab is active. Previously, the panel would render unnecessarily even when not active.@Abhishek-17h \ No newline at end of file +The Order side panel now renders only when the "Order" tab is active. Previously, the panel would render unnecessarily even when inactive. @Abhishek-17h \ No newline at end of file diff --git a/packages/volto/src/components/manage/Sidebar/Sidebar.jsx b/packages/volto/src/components/manage/Sidebar/Sidebar.jsx index 776a9ebb3a..a2fc7cb13c 100644 --- a/packages/volto/src/components/manage/Sidebar/Sidebar.jsx +++ b/packages/volto/src/components/manage/Sidebar/Sidebar.jsx @@ -10,6 +10,7 @@ import BodyClass from '@plone/volto/helpers/BodyClass/BodyClass'; import { getCookieOptions } from '@plone/volto/helpers/Cookies/cookies'; import Icon from '@plone/volto/components/theme/Icon/Icon'; import forbiddenSVG from '@plone/volto/icons/forbidden.svg'; +import loaderSVG from '@plone/volto/icons/loader.svg'; import { setSidebarTab } from '@plone/volto/actions/sidebar/sidebar'; import expandSVG from '@plone/volto/icons/left-key.svg'; import collapseSVG from '@plone/volto/icons/right-key.svg'; @@ -57,6 +58,7 @@ const Sidebar = (props) => { ); const [size] = useState(0); const [showFull, setshowFull] = useState(true); + const [isOrderTabRendered, setIsOrderTabRendered] = useState(false); const tab = useSelector((state) => state.sidebar.tab); const toolbarExpanded = useSelector((state) => state.toolbar.expanded); @@ -101,6 +103,10 @@ const Sidebar = (props) => { const onTabChange = (event, data) => { event.nativeEvent.stopImmediatePropagation(); dispatch(setSidebarTab(data.activeIndex)); + + if (data.activeIndex === 2) { + setIsOrderTabRendered(true); + } }; return ( @@ -187,17 +193,13 @@ const Sidebar = (props) => { !!orderTab && { menuItem: intl.formatMessage(messages.order), pane: - tab === 2 ? ( + isOrderTabRendered || tab === 2 ? ( - + ) : null, }, diff --git a/packages/volto/theme/themes/pastanaga/extras/sidebar.less b/packages/volto/theme/themes/pastanaga/extras/sidebar.less index 5931049d89..8e2674a702 100644 --- a/packages/volto/theme/themes/pastanaga/extras/sidebar.less +++ b/packages/volto/theme/themes/pastanaga/extras/sidebar.less @@ -213,6 +213,11 @@ color: #bac5c7; } + .tab-loader { + margin: calc(50% - 24px) auto; + color: #bac5c7; + } + header { display: flex; height: 60px;