FEATURE: secondary inspector

Resources/Private/StructuredEditing/src/SecondaryInspector/index.js

@@ -0,0 +1,82 @@
+import React, { PureComponent } from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { $get } from "plow-js";
+
+import { selectors } from "@neos-project/neos-ui-redux-store";
+
+import { Icon, Button } from "@neos-project/react-ui-components";
+
+@connect((state) => {
+  const isDirty = selectors.UI.Inspector.isDirty(state);
+  const shouldPromptToHandleUnappliedChanges = selectors.UI.Inspector.shouldPromptToHandleUnappliedChanges(
+    state
+  );
+  const unappliedChangesOverlayIsVisible =
+    isDirty && !shouldPromptToHandleUnappliedChanges;
+
+  return {
+    isFringeLeft: $get("ui.leftSideBar.isHidden", state),
+    isFringeRight: $get("ui.rightSideBar.isHidden", state),
+    isFullScreen: $get("ui.fullScreen.isFullScreen", state),
+    unappliedChangesOverlayIsVisible,
+  };
+})
+export default class SecondaryInspector extends PureComponent {
+  static propTypes = {
+    isFringeLeft: PropTypes.bool.isRequired,
+    isFringeRight: PropTypes.bool.isRequired,
+    unappliedChangesOverlayIsVisible: PropTypes.bool.isRequired,
+
+    // Interaction related propTypes.
+    onClose: PropTypes.func.isRequired,
+    children: PropTypes.element.isRequired,
+  };
+
+  render() {
+    const {
+      onClose,
+      children,
+      isFringeLeft,
+      isFringeRight,
+      unappliedChangesOverlayIsVisible,
+    } = this.props;
+    const style = {
+      position: "absolute",
+      top: 82,
+      right: isFringeRight ? 0 : 320,
+      left: isFringeLeft ? 0 : 320,
+      bottom: 0,
+      background: "#222",
+      height: "calc(100% - 82px)",
+      border: "1px solid #222",
+      transition: ".25s ease left, .25s ease right",
+      willChange: "left, right",
+      zIndex: unappliedChangesOverlayIsVisible ? 2 : 1,
+    };
+
+    return (
+      <div style={style}>
+        <div
+          style={{
+            position: "absolute",
+            top: 0,
+            right: 0,
+            width: 40,
+            height: 40,
+            padding: 0,
+            fontSize: 18,
+            borderRightWidth: 0,
+            borderTopWidth: 0,
+            zIndex: 2,
+          }}
+        >
+          <Button style="clean" onClick={onClose}>
+            <Icon icon="times" />
+          </Button>
+        </div>
+        {children}
+      </div>
+    );
+  }
+}

Resources/Private/StructuredEditing/src/manifest.js

@@ -1,5 +1,4 @@
-import React, { PureComponent } from "react";
-import PropTypes from "prop-types";
+import React, { PureComponent, useState } from "react";
 import ReactDOM from "react-dom";
 import manifest from "@neos-project/neos-ui-extensibility";
 import { selectors } from "@neos-project/neos-ui-redux-store";
@@ -11,6 +10,46 @@ import { DndProvider } from "react-dnd";
 import HTML5Backend from "react-dnd-html5-backend";
 import { EditorEnvelope } from "@neos-project/neos-ui-editors";
 import { NeosContext } from "@neos-project/neos-ui-decorators";
+import SecondaryInspector from "./SecondaryInspector/index";
+
+let renderSecondaryInspector = () => {};
+
+const InlineSecondaryInspector = () => {
+  const [state, setState] = useState({
+    secondaryInspectorName: undefined,
+    secondaryInspectorComponent: undefined,
+  });
+  const closeSecondaryInspector = () => {
+    setState({
+      secondaryInspectorName: undefined,
+      secondaryInspectorComponent: undefined,
+    });
+  };
+  renderSecondaryInspector = (
+    secondaryInspectorName,
+    secondaryInspectorComponentFactory
+  ) => {
+    if (state.secondaryInspectorName === secondaryInspectorName) {
+      // We toggle the secondary inspector if it is rendered a second time; so that's why we hide it here.
+      closeSecondaryInspector();
+    } else {
+      let secondaryInspectorComponent = null;
+      if (secondaryInspectorComponentFactory) {
+        // Hint: we directly resolve the factory function here, to ensure the object is not re-created on every render but stays the same for its whole lifetime.
+        secondaryInspectorComponent = secondaryInspectorComponentFactory();
+      }
+      setState({
+        secondaryInspectorName,
+        secondaryInspectorComponent,
+      });
+    }
+  };
+  return state.secondaryInspectorComponent ? (
+    <SecondaryInspector onClose={closeSecondaryInspector}>
+      {state.secondaryInspectorComponent}
+    </SecondaryInspector>
+  ) : null;
+};
 
 @connect(
   $transform({
@@ -106,7 +145,7 @@ class InlineEditorEnvelope extends PureComponent {
                     },
                   });
                 }}
-                renderSecondaryInspector={() => null}
+                renderSecondaryInspector={renderSecondaryInspector}
               />
             </div>
           </DropDown.Contents>
@@ -134,6 +173,11 @@ manifest(
   "Flowpack.StructuredEditing:EditorEnvelope",
   {},
   (globalRegistry, { routes, configuration, store }) => {
+    const containerRegistry = globalRegistry.get("containers");
+    containerRegistry.set(
+      "Modals/InlineSecondaryInspector",
+      InlineSecondaryInspector
+    );
     const inlineEditorRegistry = globalRegistry.get("inlineEditors");
     const nodeTypesRegistry = globalRegistry.get(
       "@neos-project/neos-ui-contentrepository"