FEATURE: PrimaryToolbar component to create nodes

psmb · Oct 12, 2017 · 1abc4ab · 1abc4ab
1 parent 6cd5db7
commit 1abc4ab
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 43 deletions.
diff --git a/Configuration/Settings.yaml b/Configuration/Settings.yaml
@@ -14,3 +14,11 @@ Neos:
         javascript:
           'Psmb.CreateNodeButton:CreateNodeView':
             resource: resource://Psmb.CreateNodeButton/Public/JavaScript/CreateNodeView/Plugin.js
+      frontendConfiguration:
+        'Psmb.CreateNodeButton':
+          enabled: false
+          # Possible values are `before`, `into` and `after`
+          position: 'into'
+          # type: 'Set.Your:DocumentNodeType'
+          # referenceNodePath: '/sites/site/to-set'
+          placeholder: 'Enter title...'
diff --git a/Resources/Private/CreateNodeView/src/CreateNodeView.js b/Resources/Private/CreateNodeView/src/CreateNodeView.js
@@ -7,7 +7,8 @@ import {selectors, actions} from '@neos-project/neos-ui-redux-store';
 import {neos} from '@neos-project/neos-ui-decorators';
 
 @neos(globalRegistry => ({
-    i18nRegistry: globalRegistry.get('i18n')
+    i18nRegistry: globalRegistry.get('i18n'),
+    options: globalRegistry.get('frontendConfiguration').get('Psmb.CreateNodeButton')
 }))
 @connect($transform({
     siteNodeContextPath: $get('cr.nodes.siteNode')
@@ -21,7 +22,8 @@ export default class CreateNodeView extends Component {
         options: PropTypes.shape({
             type: PropTypes.string.isRequired,
             position: PropTypes.string.isRequired,
-            referenceNodePath: PropTypes.string.isRequired
+            referenceNodePath: PropTypes.string.isRequired,
+            placeholder: PropTypes.string.isRequired
         }),
         persistChanges: PropTypes.func.isRequired
     };
@@ -48,14 +50,22 @@ export default class CreateNodeView extends Component {
     }
 
     render() {
-        return (
-            <div style={{display: 'flex'}}>
-                <TextInput
-                    onChange={title => this.setState({title})}
-                    value={this.state.title}
-                    />
-                <Button style="brand" onClick={() => this.createNode()}>{this.props.i18nRegistry.translate('Psmb.CreateNodeButton:Main:create')}</Button>
+        const placeholder = this.props.options.placeholder || '';
+        return this.props.options.enabled ? (
+            <div style={{display: 'inline-block'}}>
+                <div style={{display: 'flex'}}>
+                    <TextInput
+                        onChange={title => this.setState({title})}
+                        value={this.state.title}
+                        placeholder={placeholder}
+                        />
+                    <Button style="lighter" onClick={() => this.createNode()}>{this.props.i18nRegistry.translate('Psmb.CreateNodeButton:Main:create')}</Button>
+                </div>
             </div>
-        );
+        ) : null;
     }
 }
+
+export const CreateNodeContainer = neos(globalRegistry => ({
+    options: globalRegistry.get('frontendConfiguration').get('Psmb.CreateNodeButton')
+}))(CreateNodeView);
diff --git a/Resources/Private/CreateNodeView/src/manifest.js b/Resources/Private/CreateNodeView/src/manifest.js
@@ -1,9 +1,11 @@
 import manifest from '@neos-project/neos-ui-extensibility';
-import CreateNodeView from './CreateNodeView';
+import CreateNodeView, {CreateNodeContainer} from './CreateNodeView';
 
 manifest('Psmb.CreateNodeButton:CreateNodeView', {}, globalRegistry => {
-    const viewsRegistry = globalRegistry.get('inspector').get('views');
+    const containerRegistry = globalRegistry.get('containers');
+    containerRegistry.set('PrimaryToolbar/Left/CreateNode', CreateNodeContainer, 'after PrimaryToolbar/Left/EditModePanelToggler');
 
+    const viewsRegistry = globalRegistry.get('inspector').get('views');
     viewsRegistry.set('Psmb.CreateNodeButton/Views/CreateNodeView', {
         component: CreateNodeView
     });

diff --git a/Resources/Public/JavaScript/CreateNodeView/Plugin.js b/Resources/Public/JavaScript/CreateNodeView/Plugin.js