FEATURE: add support for custom icons and labels

Author: dimaip

Resources/Private/StructuredEditing/src/manifest.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import manifest from '@neos-project/neos-ui-extensibility';
 import {selectors} from '@neos-project/neos-ui-redux-store';
-import {DropDown} from '@neos-project/react-ui-components';
+import {DropDown, Icon} from '@neos-project/react-ui-components';
 import {withDragDropContext} from '@neos-project/neos-ui-decorators';
 import {connect} from 'react-redux';
 import {$transform, $get} from 'plow-js';
@@ -34,32 +34,42 @@ class InlineEditorEnvelope extends PureComponent {
     }
     render() {
         const {contextPath, fusionPath, propertyName, persistChange, editorOptions, getNodeByContextPath, focusedNodePath} = this.props;
-        const value = $get(['properties', propertyName], getNodeByContextPath(contextPath));
+        const node = getNodeByContextPath(contextPath);
+        const nodeTypeName = $get('nodeType', node);
+        const nodeType = this.props.nodeTypesRegistry.getNodeType(nodeTypeName);
+        const icon = $get('icon', editorOptions) || 'pencil';
+        const value = $get(['properties', propertyName], node);
         return (
             <div style={{display: 'inline-block'}}>
                 <DropDown.Stateless isOpen={this.state.isOpen} padded={true} onToggle={this.handleToggle} onClose={() => null}>
                     <DropDown.Header className="enveloper_dropdown_header">
                         <style>{'\
                         .enveloper_dropdown_header{\
+                            position: relative;\
                             width: 30px;\
                             height: 30px;\
-                            padding: 8px;\
+                            padding: 0;\
+                        }\
+                        .enveloper_dropdown_icon{\
+                            position: absolute;\
+                            top: 8px;\
+                            left: 8px;\
                         }\
                         .enveloper_dropdown_contents{\
                             width: 320px;\
                             background-color: #272727;\
                         }\
-                        .enveloper_dropdown_header i {\
+                        .enveloper_dropdown_header i:nth-child(3) {\
                             display: none;\
                         }\
                         '}</style>
-                        <svg style={{backgroundColor: '#323232', position: 'absolute', fill: 'white', width: '14px', height: '14px'}} width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M491 1536l91-91-235-235-91 91v107h128v128h107zm523-928q0-22-22-22-10 0-17 7l-542 542q-7 7-7 17 0 22 22 22 10 0 17-7l542-542q7-7 7-17zm-54-192l416 416-832 832h-416v-416zm683 96q0 53-37 90l-166 166-416-416 166-165q36-38 90-38 53 0 91 38l235 234q37 39 37 91z" /></svg>
+                        <Icon className="enveloper_dropdown_icon" icon={icon} />
                     </DropDown.Header>
                     <DropDown.Contents className="enveloper_dropdown_contents" scrollable={false}>
                         <div>
                             <EditorEnvelope
                                 identifier={propertyName}
-                                label={$get('label', editorOptions) || ''}
+                                label={$get('label', editorOptions) || $get(['properties', propertyName, 'ui', 'label'], nodeType) || ''}
                                 editor={$get('editor', editorOptions)}
                                 value={value && value.toJS ? value.toJS() : value}
                                 hooks={null}
@@ -101,6 +111,7 @@ const findParentFusionPath = (node, contextPath) => {
 
 manifest('Flowpack.StructuredEditing:EditorEnvelope', {}, (globalRegistry, {routes, configuration, store}) => {
     const inlineEditorRegistry = globalRegistry.get('inlineEditors');
+    const nodeTypesRegistry = globalRegistry.get('@neos-project/neos-ui-contentrepository');
     inlineEditorRegistry.set('Flowpack.StructuredEditing/EditorEnvelope', {
         bootstrap: () => null,
         createInlineEditor: config => {
@@ -113,6 +124,7 @@ manifest('Flowpack.StructuredEditing:EditorEnvelope', {}, (globalRegistry, {rout
                     configuration={configuration}
                     store={store}
                     fusionPath={fusionPath}
+                    nodeTypesRegistry={nodeTypesRegistry}
                     {...config}
                 />), domNode);
         },