From d3ed44bf4b2cd73367c80480f3d5d9fbfcde49e2 Mon Sep 17 00:00:00 2001 From: iFlameing Date: Wed, 19 Nov 2025 19:37:39 +0530 Subject: [PATCH 1/3] Add menu opening in folder-contents-breadcrumb due to long navigation title --- .../src/styles/basic/Breadcrumbs.css | 21 +++++- .../manage/Contents/ContentsBreadcrumbs.jsx | 75 +++++++++++-------- 2 files changed, 62 insertions(+), 34 deletions(-) diff --git a/packages/components/src/styles/basic/Breadcrumbs.css b/packages/components/src/styles/basic/Breadcrumbs.css index be2332d7557..ed675a47e66 100644 --- a/packages/components/src/styles/basic/Breadcrumbs.css +++ b/packages/components/src/styles/basic/Breadcrumbs.css @@ -14,11 +14,23 @@ vertical-align: middle; } + .react-aria-Breadcrumb { + display: flex; + align-items: center; + } + + .react-aria-Breadcrumb .react-aria-Link button { + position: relative; + top: -2px; + } + .react-aria-Breadcrumb svg { display: inline; } - .react-aria-Breadcrumb:not(:last-child):not(:has(a + svg))::after { + .react-aria-Breadcrumb:not(:last-child):not( + :has(.react-aria-Link + svg) + )::after { padding: 0 5px; alt: ' '; content: '›'; @@ -68,3 +80,10 @@ } } } + +.breadcrumbs-menu .react-aria-MenuItem { + display: block; + .menu-item-link { + display: block; + } +} diff --git a/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx b/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx index 307acad0973..08c81eed9e7 100644 --- a/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx @@ -1,8 +1,9 @@ import React from 'react'; -import { Breadcrumb } from 'semantic-ui-react'; +import { Breadcrumbs, Breadcrumb, Menu, MenuItem } from '@plone/components'; import { Link } from 'react-router-dom'; import { defineMessages, useIntl } from 'react-intl'; import { useSelector } from 'react-redux'; +import { ChevronrightIcon, MoreoptionsIcon } from '@plone/components/Icons'; import ContentsBreadcrumbsRootItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsRootItem'; import ContentsBreadcrumbsHomeItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsHomeItem'; @@ -22,53 +23,61 @@ const ContentsBreadcrumbs = (props) => { const intl = useIntl(); const navroot = useSelector((state) => state.navroot.data.navroot); const navrootIsPortal = navroot?.['@type'] === 'Plone Site'; + const inner = items ? items.slice(0, -1) : []; + const last = items ? items[items.length - 1] : null; return ( - + {navrootIsPortal ? ( - } > - + ) : ( <> - } > - - - + } > {navroot?.title} - + )} - {items.map((breadcrumb, index, breadcrumbs) => [ - , - index < breadcrumbs.length - 1 ? ( - 0 && ( + }> + } + placement="bottom" > - {breadcrumb.nav_title || breadcrumb.title} - - ) : ( - - {breadcrumb.nav_title || breadcrumb.title} - - ), - ])} - + {(item) => ( + + + {item.title} + + + )} + + + )} + }> + {last?.title} + + ); }; From 2d6af3bbced0a2ff78876e6cd689fb7a988f20e9 Mon Sep 17 00:00:00 2001 From: iFlameing Date: Fri, 21 Nov 2025 20:42:27 +0530 Subject: [PATCH 2/3] add react-aria-components router, slashicon and fix some css --- .../src/components/icons/SlashIcon.tsx | 18 ++++++++ .../components/src/components/icons/index.ts | 1 + .../src/styles/basic/Breadcrumbs.css | 7 --- packages/volto/package.json | 1 + .../manage/Contents/ContentsBreadcrumbs.jsx | 43 ++++--------------- packages/volto/src/start-client.jsx | 24 +++++++++-- pnpm-lock.yaml | 5 ++- 7 files changed, 53 insertions(+), 46 deletions(-) create mode 100644 packages/components/src/components/icons/SlashIcon.tsx diff --git a/packages/components/src/components/icons/SlashIcon.tsx b/packages/components/src/components/icons/SlashIcon.tsx new file mode 100644 index 00000000000..5b92d817da1 --- /dev/null +++ b/packages/components/src/components/icons/SlashIcon.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Icon } from '../Icon/Icon'; +import type { IconPropsWithoutChildren } from '../Icon/Icon'; + +export const SlashIcon = (props: IconPropsWithoutChildren) => { + return ( + + + + + + ); +}; diff --git a/packages/components/src/components/icons/index.ts b/packages/components/src/components/icons/index.ts index ec7a9ea874a..3b54d9fe077 100644 --- a/packages/components/src/components/icons/index.ts +++ b/packages/components/src/components/icons/index.ts @@ -104,3 +104,4 @@ export { VideoIcon } from './VideoIcon'; export { VoltoIcon } from './VoltoIcon'; export { WindowedIcon } from './WindowedIcon'; export { WorldIcon } from './WorldIcon'; +export { SlashIcon } from './SlashIcon'; diff --git a/packages/components/src/styles/basic/Breadcrumbs.css b/packages/components/src/styles/basic/Breadcrumbs.css index ed675a47e66..5feda8f5a14 100644 --- a/packages/components/src/styles/basic/Breadcrumbs.css +++ b/packages/components/src/styles/basic/Breadcrumbs.css @@ -80,10 +80,3 @@ } } } - -.breadcrumbs-menu .react-aria-MenuItem { - display: block; - .menu-item-link { - display: block; - } -} diff --git a/packages/volto/package.json b/packages/volto/package.json index c0419d903ab..bde3201e987 100644 --- a/packages/volto/package.json +++ b/packages/volto/package.json @@ -225,6 +225,7 @@ "react": "18.2.0", "react-anchor-link-smooth-scroll": "1.0.12", "react-animate-height": "2.0.17", + "react-aria-components": "^1.13.0", "react-beautiful-dnd": "13.0.0", "react-cookie": "4.1.1", "react-dates": "21.5.1", diff --git a/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx b/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx index 08c81eed9e7..3c6d19539f3 100644 --- a/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx +++ b/packages/volto/src/components/manage/Contents/ContentsBreadcrumbs.jsx @@ -1,26 +1,12 @@ import React from 'react'; import { Breadcrumbs, Breadcrumb, Menu, MenuItem } from '@plone/components'; -import { Link } from 'react-router-dom'; -import { defineMessages, useIntl } from 'react-intl'; import { useSelector } from 'react-redux'; -import { ChevronrightIcon, MoreoptionsIcon } from '@plone/components/Icons'; +import { SlashIcon, MoreoptionsIcon } from '@plone/components/Icons'; import ContentsBreadcrumbsRootItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsRootItem'; import ContentsBreadcrumbsHomeItem from '@plone/volto/components/manage/Contents/ContentsBreadcrumbsHomeItem'; -const messages = defineMessages({ - home: { - id: 'Home', - defaultMessage: 'Home', - }, - root: { - id: 'Root', - defaultMessage: 'Root', - }, -}); - const ContentsBreadcrumbs = (props) => { const { items } = props; - const intl = useIntl(); const navroot = useSelector((state) => state.navroot.data.navroot); const navrootIsPortal = navroot?.['@type'] === 'Plone Site'; const inner = items ? items.slice(0, -1) : []; @@ -29,52 +15,39 @@ const ContentsBreadcrumbs = (props) => { return ( {navrootIsPortal ? ( - } - > + }> ) : ( <> - } - > + }> } + separator={} > {navroot?.title} )} {inner.length > 0 && ( - }> + }> } placement="bottom" > {(item) => ( - - - {item.title} - + + {item.title} )} )} - }> + }> {last?.title} diff --git a/packages/volto/src/start-client.jsx b/packages/volto/src/start-client.jsx index acb209e228a..a7b05a19bcc 100644 --- a/packages/volto/src/start-client.jsx +++ b/packages/volto/src/start-client.jsx @@ -4,7 +4,9 @@ import React from 'react'; import { hydrateRoot } from 'react-dom/client'; import { Provider } from 'react-redux'; import { IntlProvider } from 'react-intl-redux'; +import { RouterProvider } from 'react-aria-components'; import { ConnectedRouter } from 'connected-react-router'; +import { useHistory } from 'react-router-dom'; import { createBrowserHistory } from 'history'; import { ReduxAsyncConnect } from '@plone/volto/helpers/AsyncConnect'; import { loadableReady } from '@loadable/component'; @@ -22,6 +24,20 @@ function reactIntlErrorHandler(error) { debug('i18n')(error); } +function ReactAriaRouterProvider({ children }) { + const history = useHistory(); + + const navigate = (to, options = {}) => { + if (options.replace) { + history.replace(to); + } else { + history.push(to); + } + }; + + return {children}; +} + export default function client() { const api = new Api(); @@ -73,9 +89,11 @@ export default function client() { - - - + + + + + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8590c90009f..1d36172c0a1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -979,6 +979,9 @@ importers: react-animate-height: specifier: 2.0.17 version: 2.0.17(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + react-aria-components: + specifier: ^1.13.0 + version: 1.13.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react-beautiful-dnd: specifier: 13.0.0 version: 13.0.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -21349,7 +21352,7 @@ snapshots: sirv: 3.0.1 tinyglobby: 0.2.14 tinyrainbow: 1.2.0 - vitest: 2.1.9(@types/node@24.9.1)(@vitest/ui@2.1.9)(jsdom@22.1.0)(less@3.11.1)(lightningcss@1.30.1)(sass@1.91.0)(terser@5.43.1) + vitest: 2.1.9(@types/node@24.9.1)(@vitest/ui@2.1.9)(jsdom@21.1.2)(less@3.11.1)(lightningcss@1.30.1)(sass@1.91.0)(terser@5.43.1) optional: true '@vitest/ui@2.1.9(vitest@3.2.4)': From 2458a9d19126a26e1edeb12f0216815aea3145de Mon Sep 17 00:00:00 2001 From: iFlameing Date: Mon, 24 Nov 2025 18:47:55 +0530 Subject: [PATCH 3/3] minor css fix --- packages/components/src/styles/basic/Breadcrumbs.css | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/components/src/styles/basic/Breadcrumbs.css b/packages/components/src/styles/basic/Breadcrumbs.css index 5feda8f5a14..d7f11d3a9f0 100644 --- a/packages/components/src/styles/basic/Breadcrumbs.css +++ b/packages/components/src/styles/basic/Breadcrumbs.css @@ -14,14 +14,9 @@ vertical-align: middle; } - .react-aria-Breadcrumb { - display: flex; - align-items: center; - } - - .react-aria-Breadcrumb .react-aria-Link button { + .react-aria-Breadcrumb > .react-aria-Link:has(button) + svg { position: relative; - top: -2px; + top: 2px; } .react-aria-Breadcrumb svg {