From 9556324f3a3b11628983712b8ec388263e9817b0 Mon Sep 17 00:00:00 2001 From: Burhan Kiran Date: Sat, 16 Mar 2024 21:18:43 +0100 Subject: [PATCH 1/8] FEATURE: add collapse all button to content&page tree --- .../src/CR/Nodes/selectors.ts | 61 ++++++++++ .../src/UI/ContentTree/index.ts | 25 +++- .../src/UI/PageTree/index.ts | 28 ++++- .../Containers/LeftSideBar/NodeTree/index.js | 113 +++++++++++++----- .../LeftSideBar/NodeTree/style.module.css | 15 +++ 5 files changed, 209 insertions(+), 33 deletions(-) diff --git a/packages/neos-ui-redux-store/src/CR/Nodes/selectors.ts b/packages/neos-ui-redux-store/src/CR/Nodes/selectors.ts index eed7cf09ea..5284546b83 100644 --- a/packages/neos-ui-redux-store/src/CR/Nodes/selectors.ts +++ b/packages/neos-ui-redux-store/src/CR/Nodes/selectors.ts @@ -66,6 +66,67 @@ export const makeGetDocumentNodes = (nodeTypesRegistry: NodeTypesRegistry) => cr } ); +export const makeGetCollapsableDocumentNodes = (nodeTypesRegistry: NodeTypesRegistry) => createSelector( + [ + nodesByContextPathSelector + ], + nodesMap => { + const documentRole = nodeTypesRegistry.getRole('document'); + if (!documentRole) { + throw new Error('Document role is not loaded!'); + } + const documentSubNodeTypes = nodeTypesRegistry.getSubTypesOf(documentRole); + + const result: NodeMap = {}; + Object.keys(nodesMap).forEach(contextPath => { + const node = nodesMap[contextPath]; + if (!node) { + throw new Error('This error should never be thrown, it\'s a way to fool TypeScript'); + } + const isCollapsable = node.children.some( + child => child ? documentSubNodeTypes.includes(child.nodeType) : false + ) + if (documentSubNodeTypes.includes(node.nodeType) && isCollapsable) { + result[contextPath] = node; + } + }); + return result; + } +); + +export const makeGetCollapsableContentNodes = (nodeTypesRegistry: NodeTypesRegistry) => createSelector( + [ + nodesByContextPathSelector + ], + nodesMap => { + const contentRole = nodeTypesRegistry.getRole('content'); + const collectionRole = nodeTypesRegistry.getRole('contentCollection'); + if (!contentRole) { + throw new Error('Content role is not loaded!'); + } + if (!collectionRole) { + throw new Error('ContentCollection role is not loaded!'); + } + const contentSubNodeTypes = nodeTypesRegistry.getSubTypesOf(contentRole); + contentSubNodeTypes.push(...nodeTypesRegistry.getSubTypesOf(collectionRole)) + + const result: NodeMap = {}; + Object.keys(nodesMap).forEach(contextPath => { + const node = nodesMap[contextPath]; + if (!node) { + throw new Error('This error should never be thrown, it\'s a way to fool TypeScript'); + } + const isCollapsable = node.children.some( + child => child ? contentSubNodeTypes.includes(child.nodeType) : false + ) + if (contentSubNodeTypes.includes(node.nodeType) && isCollapsable) { + result[contextPath] = node; + } + }); + return result; + } +); + export const makeGetNodeByContextPathSelector = (contextPath: NodeContextPath) => createSelector( [ (state: GlobalState) => $get(['cr', 'nodes', 'byContextPath', contextPath], state) diff --git a/packages/neos-ui-redux-store/src/UI/ContentTree/index.ts b/packages/neos-ui-redux-store/src/UI/ContentTree/index.ts index aa7c933115..1e527398ed 100644 --- a/packages/neos-ui-redux-store/src/UI/ContentTree/index.ts +++ b/packages/neos-ui-redux-store/src/UI/ContentTree/index.ts @@ -31,6 +31,7 @@ export enum actionTypes { REQUEST_CHILDREN = '@neos/neos-ui/UI/ContentTree/REQUEST_CHILDREN', SET_AS_LOADING = '@neos/neos-ui/UI/ContentTree/SET_AS_LOADING', SET_AS_LOADED = '@neos/neos-ui/UI/ContentTree/SET_AS_LOADED', + COLLAPSE_ALL = '@neos/neos-ui/UI/ContentTree/COLLAPSE_ALL' } const toggle = (contextPath: NodeContextPath) => createAction(actionTypes.TOGGLE, contextPath); @@ -40,6 +41,10 @@ const reloadTree = () => createAction(actionTypes.RELOAD_TREE); const requestChildren = (contextPath: NodeContextPath, {unCollapse = true, activate = false} = {}) => createAction(actionTypes.REQUEST_CHILDREN, {contextPath, opts: {unCollapse, activate}}); const setAsLoading = (contextPath: NodeContextPath) => createAction(actionTypes.SET_AS_LOADING, {contextPath}); const setAsLoaded = (contextPath: NodeContextPath) => createAction(actionTypes.SET_AS_LOADED, {contextPath}); +const collapseAll = ( + nodeContextPaths: NodeContextPath[], + collapsedByDefaultNodeContextPaths: NodeContextPath[] +) => createAction(actionTypes.COLLAPSE_ALL, {nodeContextPaths, collapsedByDefaultNodeContextPaths}); // // Export the actions @@ -51,7 +56,8 @@ export const actions = { reloadTree, requestChildren, setAsLoading, - setAsLoaded + setAsLoaded, + collapseAll }; export type Action = ActionType; @@ -89,6 +95,23 @@ export const reducer = (state: State = defaultState, action: InitAction | Action draft.loading = draft.loading.filter(i => i !== contextPath); break; } + case actionTypes.COLLAPSE_ALL: { + const {nodeContextPaths, collapsedByDefaultNodeContextPaths} = action.payload; + + nodeContextPaths.forEach(path => { + if (!draft.toggled.includes(path)) { + draft.toggled.push(path); + } + }); + + collapsedByDefaultNodeContextPaths.forEach(path => { + if (draft.toggled.includes(path)) { + draft.toggled.push(path); + draft.toggled = draft.toggled.filter(i => i !== path); + } + }); + break; + } } }); diff --git a/packages/neos-ui-redux-store/src/UI/PageTree/index.ts b/packages/neos-ui-redux-store/src/UI/PageTree/index.ts index 8b55561600..ee4ae36b13 100644 --- a/packages/neos-ui-redux-store/src/UI/PageTree/index.ts +++ b/packages/neos-ui-redux-store/src/UI/PageTree/index.ts @@ -40,7 +40,8 @@ export enum actionTypes { SET_AS_LOADED = '@neos/neos-ui/UI/PageTree/SET_AS_LOADED', REQUEST_CHILDREN = '@neos/neos-ui/UI/PageTree/REQUEST_CHILDREN', COMMENCE_SEARCH = '@neos/neos-ui/UI/PageTree/COMMENCE_SEARCH', - SET_SEARCH_RESULT = '@neos/neos-ui/UI/PageTree/SET_SEARCH_RESULT' + SET_SEARCH_RESULT = '@neos/neos-ui/UI/PageTree/SET_SEARCH_RESULT', + COLLAPSE_ALL = '@neos/neos-ui/UI/PageTree/COLLAPSE_ALL' } const focus = (contextPath: NodeContextPath, _: undefined, selectionMode: SelectionModeTypes = SelectionModeTypes.SINGLE_SELECT) => createAction(actionTypes.FOCUS, {contextPath, selectionMode}); @@ -49,6 +50,11 @@ const invalidate = (contextPath: NodeContextPath) => createAction(actionTypes.IN const requestChildren = (contextPath: NodeContextPath, {unCollapse = true, activate = false} = {}) => createAction(actionTypes.REQUEST_CHILDREN, {contextPath, opts: {unCollapse, activate}}); const setAsLoading = (contextPath: NodeContextPath) => createAction(actionTypes.SET_AS_LOADING, {contextPath}); const setAsLoaded = (contextPath: NodeContextPath) => createAction(actionTypes.SET_AS_LOADED, {contextPath}); +const collapseAll = ( + nodeContextPaths: NodeContextPath[], + collapsedByDefaultNodeContextPaths: NodeContextPath[] +) => createAction(actionTypes.COLLAPSE_ALL, {nodeContextPaths, collapsedByDefaultNodeContextPaths}); + interface CommenceSearchOptions extends Readonly<{ query: string; filterNodeType: string; @@ -72,7 +78,8 @@ export const actions = { setAsLoaded, requestChildren, commenceSearch, - setSearchResult + setSearchResult, + collapseAll }; export type Action = ActionType; @@ -134,6 +141,23 @@ export const reducer = (state: State = defaultState, action: InitAction | Action draft.filterNodeType = action.payload.filterNodeType; break; } + case actionTypes.COLLAPSE_ALL: { + const {nodeContextPaths, collapsedByDefaultNodeContextPaths} = action.payload; + + nodeContextPaths.forEach(path => { + if (!draft.toggled.includes(path)) { + draft.toggled.push(path); + } + }); + + collapsedByDefaultNodeContextPaths.forEach(path => { + if (draft.toggled.includes(path)) { + draft.toggled.push(path); + draft.toggled = draft.toggled.filter(i => i !== path); + } + }); + break; + } } }); diff --git a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js index 5efdd420b5..4d2ae6ccbf 100644 --- a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js +++ b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js @@ -13,6 +13,7 @@ import {dndTypes} from '@neos-project/neos-ui-constants'; import {PageTreeNode, ContentTreeNode} from './Node/index'; import style from './style.module.css'; +import {neos} from '@neos-project/neos-ui-decorators'; const ConnectedDragLayer = connect((state, {currentlyDraggedNodes}) => { const getNodeByContextPath = selectors.CR.Nodes.nodeByContextPath(state); @@ -28,11 +29,14 @@ export default class NodeTree extends PureComponent { allowOpeningNodesInNewWindow: PropTypes.bool, nodeTypeRole: PropTypes.string, toggle: PropTypes.func, + collapseAll: PropTypes.func, focus: PropTypes.func, requestScrollIntoView: PropTypes.func, setActiveContentCanvasSrc: PropTypes.func, setActiveContentCanvasContextPath: PropTypes.func, - moveNodes: PropTypes.func + moveNodes: PropTypes.func, + allCollapsableNodes: PropTypes.object, + loadingDepth: PropTypes.number }; state = { @@ -45,6 +49,25 @@ export default class NodeTree extends PureComponent { toggle(contextPath); } + handleCollapseAll = () => { + const {collapseAll, allCollapsableNodes, rootNode, loadingDepth} = this.props + let nodeContextPaths = [] + const collapsedByDefaultNodesContextPaths = [] + + Object.values(allCollapsableNodes).forEach(node => { + const collapsedByDefault = loadingDepth === 0 ? false : node.depth - rootNode.depth >= loadingDepth + if (collapsedByDefault) { + collapsedByDefaultNodesContextPaths.push(node.contextPath) + } else { + nodeContextPaths.push(node.contextPath) + } + }); + + // Do not Collapse RootNode + nodeContextPaths = nodeContextPaths.filter(i => i !== rootNode.contextPath); + collapseAll(nodeContextPaths, collapsedByDefaultNodesContextPaths); + } + handleFocus = (contextPath, metaKeyPressed, altKeyPressed, shiftKeyPressed) => { const {focus} = this.props; @@ -123,6 +146,13 @@ export default class NodeTree extends PureComponent { return ( + + Collapse All + ({ - rootNode: selectors.CR.Nodes.siteNodeSelector(state), - focusedNodesContextPaths: selectors.UI.PageTree.getAllFocused(state), - ChildRenderer: PageTreeNode, - allowOpeningNodesInNewWindow: true -}), { - toggle: actions.UI.PageTree.toggle, - focus: actions.UI.PageTree.focus, - setActiveContentCanvasSrc: actions.UI.ContentCanvas.setSrc, - setActiveContentCanvasContextPath: actions.CR.Nodes.setDocumentNode, - moveNodes: actions.CR.Nodes.moveMultiple, - requestScrollIntoView: null -}, (stateProps, dispatchProps, ownProps) => { - return Object.assign({}, stateProps, dispatchProps, ownProps); -})(NodeTree); - -export const ContentTree = connect(state => ({ - rootNode: selectors.CR.Nodes.documentNodeSelector(state), - focusedNodesContextPaths: selectors.CR.Nodes.focusedNodePathsSelector(state), - ChildRenderer: ContentTreeNode, - allowOpeningNodesInNewWindow: false -}), { - toggle: actions.UI.ContentTree.toggle, - focus: actions.CR.Nodes.focus, - moveNodes: actions.CR.Nodes.moveMultiple, - requestScrollIntoView: actions.UI.ContentCanvas.requestScrollIntoView -}, (stateProps, dispatchProps, ownProps) => { - return Object.assign({}, stateProps, dispatchProps, ownProps); -})(NodeTree); +const withNodeTypeRegistry = neos(globalRegistry => ({ + nodeTypesRegistry: globalRegistry.get('@neos-project/neos-ui-contentrepository') +})); + +export const PageTree = withNodeTypeRegistry(connect( + (state, {neos, nodeTypesRegistry}) => { + const documentNodesSelector = selectors.CR.Nodes.makeGetCollapsableDocumentNodes(nodeTypesRegistry); + return ({ + rootNode: selectors.CR.Nodes.siteNodeSelector(state), + focusedNodesContextPaths: selectors.UI.PageTree.getAllFocused(state), + ChildRenderer: PageTreeNode, + allowOpeningNodesInNewWindow: true, + loadingDepth: neos.configuration.structureTree.loadingDepth, + allCollapsableNodes: documentNodesSelector(state) + }) + }, { + toggle: actions.UI.PageTree.toggle, + collapseAll: actions.UI.PageTree.collapseAll, + focus: actions.UI.PageTree.focus, + setActiveContentCanvasSrc: actions.UI.ContentCanvas.setSrc, + setActiveContentCanvasContextPath: actions.CR.Nodes.setDocumentNode, + moveNodes: actions.CR.Nodes.moveMultiple, + requestScrollIntoView: null, + isContentTree: false + }, (stateProps, dispatchProps, ownProps) => { + return Object.assign({}, stateProps, dispatchProps, ownProps); + } +)(NodeTree)); + +export const ContentTree = withNodeTypeRegistry(connect( + (state, {neos, nodeTypesRegistry}) => { + const contentNodesSelector = selectors.CR.Nodes.makeGetCollapsableContentNodes(nodeTypesRegistry); + return ({ + rootNode: selectors.CR.Nodes.documentNodeSelector(state), + focusedNodesContextPaths: selectors.CR.Nodes.focusedNodePathsSelector(state), + ChildRenderer: ContentTreeNode, + allowOpeningNodesInNewWindow: false, + loadingDepth: neos.configuration.structureTree.loadingDepth, + allCollapsableNodes: contentNodesSelector(state) + }) + }, { + toggle: actions.UI.ContentTree.toggle, + collapseAll: actions.UI.ContentTree.collapseAll, + focus: actions.CR.Nodes.focus, + moveNodes: actions.CR.Nodes.moveMultiple, + requestScrollIntoView: actions.UI.ContentCanvas.requestScrollIntoView, + isContentTree: true + }, (stateProps, dispatchProps, ownProps) => { + return Object.assign({}, stateProps, dispatchProps, ownProps); + } +)(NodeTree)); diff --git a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/style.module.css b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/style.module.css index 96f33a7a7f..cd31d7c8c1 100644 --- a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/style.module.css +++ b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/style.module.css @@ -6,7 +6,22 @@ background: var(--colors-ContrastDarker); border-bottom: 1px solid var(--colors-ContrastDark); border-right: 1px solid var(--colors-ContrastDark); + position: relative; } .loader { margin: var(--spacing-Quarter); } +.collapseAll { + position: absolute; + right: 0; + top: 0; + opacity: .5; + text-align: center; + cursor: pointer; + z-index: 5; + padding: 10px 5px 0 5px; + + &:hover { + color: var(--colors-PrimaryBlueHover); + } +} From 4e4b84d6c217f6cafc964482561b23c304e04865 Mon Sep 17 00:00:00 2001 From: Burhan Kiran Date: Sat, 16 Mar 2024 22:54:35 +0100 Subject: [PATCH 2/8] remove accidental lines --- packages/neos-ui-redux-store/src/UI/ContentTree/index.ts | 1 - packages/neos-ui-redux-store/src/UI/PageTree/index.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/neos-ui-redux-store/src/UI/ContentTree/index.ts b/packages/neos-ui-redux-store/src/UI/ContentTree/index.ts index 1e527398ed..f541403315 100644 --- a/packages/neos-ui-redux-store/src/UI/ContentTree/index.ts +++ b/packages/neos-ui-redux-store/src/UI/ContentTree/index.ts @@ -106,7 +106,6 @@ export const reducer = (state: State = defaultState, action: InitAction | Action collapsedByDefaultNodeContextPaths.forEach(path => { if (draft.toggled.includes(path)) { - draft.toggled.push(path); draft.toggled = draft.toggled.filter(i => i !== path); } }); diff --git a/packages/neos-ui-redux-store/src/UI/PageTree/index.ts b/packages/neos-ui-redux-store/src/UI/PageTree/index.ts index ee4ae36b13..a321f7a5e3 100644 --- a/packages/neos-ui-redux-store/src/UI/PageTree/index.ts +++ b/packages/neos-ui-redux-store/src/UI/PageTree/index.ts @@ -152,7 +152,6 @@ export const reducer = (state: State = defaultState, action: InitAction | Action collapsedByDefaultNodeContextPaths.forEach(path => { if (draft.toggled.includes(path)) { - draft.toggled.push(path); draft.toggled = draft.toggled.filter(i => i !== path); } }); From acabf39b763ea2f53b7cec60130191b5eecc7925 Mon Sep 17 00:00:00 2001 From: Burhan Abdullah Kiran Date: Sat, 23 Mar 2024 15:24:38 +0100 Subject: [PATCH 3/8] adjust wording to collapsible --- .../neos-ui-redux-store/src/CR/Nodes/selectors.ts | 12 ++++++------ .../src/Containers/LeftSideBar/NodeTree/index.js | 14 +++++++------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/neos-ui-redux-store/src/CR/Nodes/selectors.ts b/packages/neos-ui-redux-store/src/CR/Nodes/selectors.ts index 5284546b83..e45df536af 100644 --- a/packages/neos-ui-redux-store/src/CR/Nodes/selectors.ts +++ b/packages/neos-ui-redux-store/src/CR/Nodes/selectors.ts @@ -66,7 +66,7 @@ export const makeGetDocumentNodes = (nodeTypesRegistry: NodeTypesRegistry) => cr } ); -export const makeGetCollapsableDocumentNodes = (nodeTypesRegistry: NodeTypesRegistry) => createSelector( +export const makeGetCollapsibleDocumentNodes = (nodeTypesRegistry: NodeTypesRegistry) => createSelector( [ nodesByContextPathSelector ], @@ -83,10 +83,10 @@ export const makeGetCollapsableDocumentNodes = (nodeTypesRegistry: NodeTypesRegi if (!node) { throw new Error('This error should never be thrown, it\'s a way to fool TypeScript'); } - const isCollapsable = node.children.some( + const isCollapsible = node.children.some( child => child ? documentSubNodeTypes.includes(child.nodeType) : false ) - if (documentSubNodeTypes.includes(node.nodeType) && isCollapsable) { + if (documentSubNodeTypes.includes(node.nodeType) && isCollapsible) { result[contextPath] = node; } }); @@ -94,7 +94,7 @@ export const makeGetCollapsableDocumentNodes = (nodeTypesRegistry: NodeTypesRegi } ); -export const makeGetCollapsableContentNodes = (nodeTypesRegistry: NodeTypesRegistry) => createSelector( +export const makeGetCollapsibleContentNodes = (nodeTypesRegistry: NodeTypesRegistry) => createSelector( [ nodesByContextPathSelector ], @@ -116,10 +116,10 @@ export const makeGetCollapsableContentNodes = (nodeTypesRegistry: NodeTypesRegis if (!node) { throw new Error('This error should never be thrown, it\'s a way to fool TypeScript'); } - const isCollapsable = node.children.some( + const isCollapsible = node.children.some( child => child ? contentSubNodeTypes.includes(child.nodeType) : false ) - if (contentSubNodeTypes.includes(node.nodeType) && isCollapsable) { + if (contentSubNodeTypes.includes(node.nodeType) && isCollapsible) { result[contextPath] = node; } }); diff --git a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js index 4d2ae6ccbf..e92fff8fdf 100644 --- a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js +++ b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js @@ -35,7 +35,7 @@ export default class NodeTree extends PureComponent { setActiveContentCanvasSrc: PropTypes.func, setActiveContentCanvasContextPath: PropTypes.func, moveNodes: PropTypes.func, - allCollapsableNodes: PropTypes.object, + allCollapsibleNodes: PropTypes.object, loadingDepth: PropTypes.number }; @@ -50,11 +50,11 @@ export default class NodeTree extends PureComponent { } handleCollapseAll = () => { - const {collapseAll, allCollapsableNodes, rootNode, loadingDepth} = this.props + const {collapseAll, allCollapsibleNodes, rootNode, loadingDepth} = this.props let nodeContextPaths = [] const collapsedByDefaultNodesContextPaths = [] - Object.values(allCollapsableNodes).forEach(node => { + Object.values(allCollapsibleNodes).forEach(node => { const collapsedByDefault = loadingDepth === 0 ? false : node.depth - rootNode.depth >= loadingDepth if (collapsedByDefault) { collapsedByDefaultNodesContextPaths.push(node.contextPath) @@ -183,14 +183,14 @@ const withNodeTypeRegistry = neos(globalRegistry => ({ export const PageTree = withNodeTypeRegistry(connect( (state, {neos, nodeTypesRegistry}) => { - const documentNodesSelector = selectors.CR.Nodes.makeGetCollapsableDocumentNodes(nodeTypesRegistry); + const documentNodesSelector = selectors.CR.Nodes.makeGetCollapsibleDocumentNodes(nodeTypesRegistry); return ({ rootNode: selectors.CR.Nodes.siteNodeSelector(state), focusedNodesContextPaths: selectors.UI.PageTree.getAllFocused(state), ChildRenderer: PageTreeNode, allowOpeningNodesInNewWindow: true, loadingDepth: neos.configuration.structureTree.loadingDepth, - allCollapsableNodes: documentNodesSelector(state) + allCollapsibleNodes: documentNodesSelector(state) }) }, { toggle: actions.UI.PageTree.toggle, @@ -208,14 +208,14 @@ export const PageTree = withNodeTypeRegistry(connect( export const ContentTree = withNodeTypeRegistry(connect( (state, {neos, nodeTypesRegistry}) => { - const contentNodesSelector = selectors.CR.Nodes.makeGetCollapsableContentNodes(nodeTypesRegistry); + const contentNodesSelector = selectors.CR.Nodes.makeGetCollapsibleContentNodes(nodeTypesRegistry); return ({ rootNode: selectors.CR.Nodes.documentNodeSelector(state), focusedNodesContextPaths: selectors.CR.Nodes.focusedNodePathsSelector(state), ChildRenderer: ContentTreeNode, allowOpeningNodesInNewWindow: false, loadingDepth: neos.configuration.structureTree.loadingDepth, - allCollapsableNodes: contentNodesSelector(state) + allCollapsibleNodes: contentNodesSelector(state) }) }, { toggle: actions.UI.ContentTree.toggle, From e4230be01b49e6850eae52af54dedf0fad8fb36c Mon Sep 17 00:00:00 2001 From: Burhan Abdullah Kiran Date: Sat, 23 Mar 2024 16:09:53 +0100 Subject: [PATCH 4/8] adjust styling of collapse all button --- .../neos-ui/src/Containers/LeftSideBar/NodeTree/index.js | 3 ++- .../src/Containers/LeftSideBar/NodeTree/style.module.css | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js index e92fff8fdf..5b386a5995 100644 --- a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js +++ b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js @@ -150,8 +150,9 @@ export default class NodeTree extends PureComponent { role="button" onClick={this.handleCollapseAll} className={style.collapseAll} + title="Collapse All" > - Collapse All + svg { color: var(--colors-PrimaryBlueHover); } } From d0196eee1357e88799acff8d5f8e022242f155e2 Mon Sep 17 00:00:00 2001 From: Burhan Abdullah Kiran <56877180+Devclaim@users.noreply.github.com> Date: Thu, 28 Mar 2024 21:49:30 +0100 Subject: [PATCH 5/8] Update packages/neos-ui/src/Containers/LeftSideBar/NodeTree/style.module.css Co-authored-by: Wilhelm Behncke <2522299+grebaldi@users.noreply.github.com> --- .../src/Containers/LeftSideBar/NodeTree/style.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/style.module.css b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/style.module.css index dfb28a1ada..7f95961656 100644 --- a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/style.module.css +++ b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/style.module.css @@ -18,7 +18,7 @@ opacity: .5; cursor: pointer; z-index: 5; - padding: 8px; + padding: var(--spacing-Half); font-size: 1.4em; &:hover > svg { From 4771f951b2065b21b3621aa0be61291e21991110 Mon Sep 17 00:00:00 2001 From: Burhan Abdullah Kiran Date: Thu, 28 Mar 2024 22:47:59 +0100 Subject: [PATCH 6/8] change from a to button tag and add opacity 1 on hover --- .../src/Containers/LeftSideBar/NodeTree/index.js | 7 +++---- .../LeftSideBar/NodeTree/style.module.css | 13 +++++++++++-- 2 files changed, 14 insertions(+), 6 deletions(-) diff --git a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js index 5b386a5995..f4f82ccf67 100644 --- a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js +++ b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js @@ -146,14 +146,13 @@ export default class NodeTree extends PureComponent { return ( - - - + + svg { + .collapseAllIcon { + font-size: 1.2em; + } + + &:hover > .collapseAllIcon { color: var(--colors-PrimaryBlueHover); } + + &:hover { + opacity: 1; + } } From 75c09fc0e18d996b8bd4929ee8a2fe39f24f5ec7 Mon Sep 17 00:00:00 2001 From: Burhan Abdullah Kiran Date: Thu, 28 Mar 2024 22:57:49 +0100 Subject: [PATCH 7/8] WIP add translations --- Resources/Private/Translations/de/Main.xlf | 4 ++++ Resources/Private/Translations/en/Main.xlf | 3 +++ .../src/Containers/LeftSideBar/NodeTree/index.js | 16 +++++++++------- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/Resources/Private/Translations/de/Main.xlf b/Resources/Private/Translations/de/Main.xlf index 63f94eb18b..7494ff951b 100644 --- a/Resources/Private/Translations/de/Main.xlf +++ b/Resources/Private/Translations/de/Main.xlf @@ -622,6 +622,10 @@ Inside Innen + + Collapse All + Alle Ordner zuklappen + diff --git a/Resources/Private/Translations/en/Main.xlf b/Resources/Private/Translations/en/Main.xlf index 0db6995fa5..4c41c70e7c 100644 --- a/Resources/Private/Translations/en/Main.xlf +++ b/Resources/Private/Translations/en/Main.xlf @@ -374,6 +374,9 @@ For more information about the error please refer to the JavaScript console. + + Collapse All + diff --git a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js index f4f82ccf67..0e0525292a 100644 --- a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js +++ b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js @@ -36,7 +36,8 @@ export default class NodeTree extends PureComponent { setActiveContentCanvasContextPath: PropTypes.func, moveNodes: PropTypes.func, allCollapsibleNodes: PropTypes.object, - loadingDepth: PropTypes.number + loadingDepth: PropTypes.number, + i18nRegistry: PropTypes.object.isRequired }; state = { @@ -131,7 +132,7 @@ export default class NodeTree extends PureComponent { } render() { - const {rootNode, ChildRenderer} = this.props; + const {rootNode, ChildRenderer, i18nRegistry} = this.props; if (!rootNode) { return (
@@ -149,7 +150,7 @@ export default class NodeTree extends PureComponent { @@ -177,11 +178,12 @@ export default class NodeTree extends PureComponent { } } -const withNodeTypeRegistry = neos(globalRegistry => ({ - nodeTypesRegistry: globalRegistry.get('@neos-project/neos-ui-contentrepository') +const withNodeTypeRegistryAndI18nRegistry = neos(globalRegistry => ({ + nodeTypesRegistry: globalRegistry.get('@neos-project/neos-ui-contentrepository'), + i18nRegistry: globalRegistry.get('i18n') })); -export const PageTree = withNodeTypeRegistry(connect( +export const PageTree = withNodeTypeRegistryAndI18nRegistry(connect( (state, {neos, nodeTypesRegistry}) => { const documentNodesSelector = selectors.CR.Nodes.makeGetCollapsibleDocumentNodes(nodeTypesRegistry); return ({ @@ -206,7 +208,7 @@ export const PageTree = withNodeTypeRegistry(connect( } )(NodeTree)); -export const ContentTree = withNodeTypeRegistry(connect( +export const ContentTree = withNodeTypeRegistryAndI18nRegistry(connect( (state, {neos, nodeTypesRegistry}) => { const contentNodesSelector = selectors.CR.Nodes.makeGetCollapsibleContentNodes(nodeTypesRegistry); return ({ From 8fcfe72e5fc1949e89157e5d13c349a5bb85bfa1 Mon Sep 17 00:00:00 2001 From: Burhan Abdullah Kiran <56877180+Devclaim@users.noreply.github.com> Date: Sat, 13 Apr 2024 14:51:31 +0200 Subject: [PATCH 8/8] Update packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js Co-authored-by: Wilhelm Behncke <2522299+grebaldi@users.noreply.github.com> --- packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js index 0e0525292a..813eaf2a52 100644 --- a/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js +++ b/packages/neos-ui/src/Containers/LeftSideBar/NodeTree/index.js @@ -150,7 +150,7 @@ export default class NodeTree extends PureComponent {