Merge pull request #25 from bwaidelich/24-custom-styling-for-react-ui

Enable support for custom Form Builder Styling with the new Neos UI
neos · May 8, 2018 · fd6a4ae · fd6a4ae
2 parents 703162d + ff40018
commit fd6a4ae
Show file tree

Hide file tree

Showing 14 changed files with 210 additions and 398 deletions.
diff --git a/Classes/Fusion/FormElementWrappingImplementation.php b/Classes/Fusion/FormElementWrappingImplementation.php
@@ -50,7 +50,7 @@ public function evaluate()
             if ($renderable instanceof Page) {
                 $elementsNode = $node->getNode('elements');
                 if ($elementsNode !== null) {
-                    $output = $this->contentElementWrappingService->wrapContentObject($elementsNode, $output, $fusionPath);
+                    $output = $this->wrapNode($elementsNode, $output, $fusionPath);
                 }
                 // first page? add finisher collection and return the wrapped content
                 if ($node->getNodeType()->isOfType('Neos.Form.Builder:NodeBasedForm')) {
@@ -59,17 +59,17 @@ public function evaluate()
                         $output = $this->wrapNodeRecursively($finishersNode, '', $fusionPath . '/finishers') . $output;
                     }
                     if (!$renderable->getRootForm()->hasPageWithIndex(1)) {
-                        $output = $output . $this->contentElementWrappingService->wrapContentObject($node->getNode('furtherPages'), '', $fusionPath . '/furtherPages');
+                        $output = $output . $this->wrapNode($node->getNode('furtherPages'), '', $fusionPath . '/furtherPages');
                     }
                     return $output;
                 }
 
                 // otherwise store wrapped page content until last page
-                $this->pendingOutput .= $this->contentElementWrappingService->wrapContentObject($node, $output, $fusionPath);
+                $this->pendingOutput .= $this->wrapNode($node, $output, $fusionPath);
                 if (!$this->isLastPageNode($node)) {
                     return '';
                 }
-                return $this->contentElementWrappingService->wrapContentObject($node->getParent(), $this->pendingOutput, $this->parentFusionPath($fusionPath));
+                return $this->wrapNode($node, $this->pendingOutput, $this->parentFusionPath($fusionPath));
             }
             return $this->wrapNodeRecursively($node, $output, $fusionPath);
         });
@@ -79,6 +79,7 @@ public function evaluate()
     private function isLastPageNode(NodeInterface $node): bool
     {
         $flowQuery = new FlowQuery([$node]);
+        /** @noinspection PhpUndefinedMethodInspection */
         return $flowQuery->next('[instanceof Neos.Form.Builder:FormPage]')->get(0) === null;
     }
 
@@ -93,7 +94,18 @@ private function wrapNodeRecursively(NodeInterface $node, string $output, string
         foreach ($node->getChildNodes() as $childNode) {
             $output .= $this->wrapNodeRecursively($childNode, '', $fusionPath . '/' . $childNode->getIdentifier());
         }
-        return $this->contentElementWrappingService->wrapContentObject($node, $output, $fusionPath);
+        return $this->wrapNode($node, $output, $fusionPath);
     }
 
-}
+    private function wrapNode(NodeInterface $node, string $output, string $fusionPath): string
+    {
+        $additionalAttributes = [
+            'data-_neos-form-builder-type' => $node->getNodeType()->getName()
+        ];
+        if ($node->getNodeType()->isOfType('Neos.Neos:ContentCollection') && count($node->getChildNodes()) === 0) {
+            $additionalAttributes['data-_neos-form-builder-empty-collection'] = true;
+        }
+        return $this->contentElementWrappingService->wrapContentObject($node, $output, $fusionPath, $additionalAttributes);
+    }
+
+}
diff --git a/README.md b/README.md
@@ -71,8 +71,6 @@ prototype(Neos.Neos:Page) {
 }
 ```
 
-> **Note:** There's also a version for the "new" Neos UI, but it's not yet fully supported
-
 As a result the form will look something like this in the Backend:
 
 ![Custom Styles](Documentation/Images/CustomStyles.png "Form Builder with custom styles")

diff --git a/Resources/Private/Fusion/NodeBased/NodeBasedForm.fusion b/Resources/Private/Fusion/NodeBased/NodeBasedForm.fusion
@@ -23,7 +23,11 @@ prototype(Neos.Form.Builder:NodeBasedForm) < prototype(Neos.Form.Builder:Form) {
     finishers = Neos.Form.Builder:NodeBasedFinisherCollection {
         collection = ${q(formNode).children('finishers').children()}
     }
-    @process.contentElementWrapping = Neos.Neos:ContentElementWrapping
+    @process.contentElementWrapping = Neos.Neos:ContentElementWrapping {
+        additionalAttributes {
+            'data-_neos-form-builder-type' = ${formNode.nodeType.name}
+        }
+    }
 
     @cache {
         context {
@@ -36,4 +40,4 @@ prototype(Neos.Form.Builder:NodeBasedForm) < prototype(Neos.Form.Builder:Form) {
 
 prototype(Neos.Form.Builder:FormElementWrapping) {
     @class = 'Neos\\Form\\Builder\\Fusion\\FormElementWrappingImplementation'
-}
+}
diff --git a/Resources/Private/Styles/package.json b/Resources/Private/Styles/package.json
@@ -4,9 +4,8 @@
   "description": "Neos Backend Styles for the Form Builder",
   "license": "MIT",
   "scripts": {
-    "build": "yarn build-old-ui && yarn build-new-ui",
-    "build-old-ui": "node-sass scss/Backend.scss ../../Public/Styles/Backend.css",
-    "build-new-ui": "node-sass scss/BackendReact.scss ../../Public/Styles/BackendReact.css --output-style compressed"
+    "build": "node-sass scss/Backend.scss ../../Public/Styles/Backend.css --output-style compressed",
+    "watch": "yarn build --watch"
   },
   "dependencies": {
     "node-sass": "^4.5.3"

diff --git a/Resources/Private/Styles/scss/Backend.scss b/Resources/Private/Styles/scss/Backend.scss
@@ -1,6 +1,6 @@
-$anyContentElement: "[data-node-_node-type]";
-@function select($nodeType) {
-  @return "[data-node-_node-type=\"#{$nodeType}\"]"
-}
-
-@import "Includes/All";
+@import "Includes/Form";
+@import "Includes/Finisher";
+@import "Includes/Page";
+@import "Includes/Element";
+@import "Includes/SelectOption";
+@import "Includes/Validator";
diff --git a/Resources/Private/Styles/scss/BackendReact.scss b/Resources/Private/Styles/scss/BackendReact.scss
diff --git a/Resources/Private/Styles/scss/Includes/_Element.scss b/Resources/Private/Styles/scss/Includes/_Element.scss
@@ -1,18 +1,16 @@
-#{select("Neos.Form.Builder:ElementCollection")} {
-  margin-top: 30px;
+[data-_neos-form-builder-type="Neos.Form.Builder:ElementCollection"] {
+    margin-top: 30px;
+    & > [data-_neos-form-builder-type] {
+        position: relative;
+        padding-top: 10px;
+    }
+    &[data-_neos-form-builder-empty-collection]:before {
+        font: 18px FontAwesome;
+        color: #bbb;
+        display: inline-block;
+        margin-top: 2px;
+        width: 20px;
+        height: 20px;
+        content: "\F03A";
+    }
 }
-
-#{select("Neos.Form.Builder:ElementCollection")} > #{$anyContentElement} {
-  position: relative;
-  padding-top: 10px;
-}
-
-#{select("Neos.Form.Builder:ElementCollection")} > .neos-empty-contentcollection-overlay:before {
-  font: 18px FontAwesome;
-  color: #bbb;
-  display: inline-block;
-  margin-top: 2px;
-  width: 20px;
-  height: 20px;
-  content: "\F03A";
-}
diff --git a/Resources/Private/Styles/scss/Includes/_Finisher.scss b/Resources/Private/Styles/scss/Includes/_Finisher.scss
@@ -1,49 +1,45 @@
-#{select("Neos.Form.Builder:FinisherCollection")}, #{select("Neos.Form.Builder:FinisherCollection")}  .neos-empty-contentcollection-overlay {
-  padding-left: 20px;
-  position: absolute;
-  z-index: 100;
-  right: 0;
-  height: 20px;
-  outline: none !important;
-  background: #fff;
-  vertical-align: middle;
-}
+[data-_neos-form-builder-type="Neos.Form.Builder:FinisherCollection"] {
+    padding-left: 20px;
+    position: absolute;
+    z-index: 100;
+    right: 0;
+    height: 20px;
+    outline: none !important;
+    background: #fff;
+    vertical-align: middle;
 
-#{select("Neos.Form.Builder:FinisherCollection")} .neos-empty-contentcollection-overlay:before {
-  font: 18px FontAwesome;
-  color: #bbb;
-  display: inline-block;
-  width: 20px;
-  height: 20px;
-  position: absolute;
-  top: 3px;
-  left: 2px;
-  vertical-align: middle;
-  content: "\F045";
-}
+    & > [data-_neos-form-builder-type] {
+        display: inline-block;
+        outline-offset: 1px !important;
+        padding: 0 3px;
+        margin: 0 1px;
+        cursor: pointer;
+        &:before {
+            font: 16px FontAwesome;
+            color: #00adee;
+            content: "\F045";
+        }
+        &[data-_neos-form-builder-type="Neos.Form.Builder:ConfirmationFinisher"]:before {
+            content: "\F075";
+        }
+        &[data-_neos-form-builder-type="Neos.Form.Builder:EmailFinisher"]:before {
+            content: "\F003";
+        }
+        &[data-_neos-form-builder-type="Neos.Form.Builder:RedirectFinisher"]:before {
+            content: "\F061";
+        }
+    }
 
-#{select("Neos.Form.Builder:FinisherCollection")} > #{$anyContentElement} {
-  display: inline-block;
-  outline-offset: 1px !important;
-  padding: 0 3px;
-  margin: 0 1px;
-  cursor: pointer;
+    &[data-_neos-form-builder-empty-collection]:before {
+        font: 18px FontAwesome;
+        color: #bbb;
+        display: inline-block;
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        top: 3px;
+        left: 2px;
+        vertical-align: middle;
+        content: "\F045";
+    }
 }
-
-#{select("Neos.Form.Builder:FinisherCollection")} > #{$anyContentElement}:before {
-  font: 16px FontAwesome;
-  color: #00adee;
-  content: "\F045";
-}
-
-#{select("Neos.Form.Builder:FinisherCollection")} > #{select("Neos.Form.Builder:ConfirmationFinisher")}:before {
-  content: "\F075";
-}
-
-#{select("Neos.Form.Builder:FinisherCollection")} > #{select("Neos.Form.Builder:EmailFinisher")}:before {
-  content: "\F003";
-}
-
-#{select("Neos.Form.Builder:FinisherCollection")} > #{select("Neos.Form.Builder:RedirectFinisher")}:before {
-  content: "\F061";
-}
diff --git a/Resources/Private/Styles/scss/Includes/_Form.scss b/Resources/Private/Styles/scss/Includes/_Form.scss
@@ -1,4 +1,4 @@
-#{select("Neos.Form.Builder:NodeBasedForm")} {
-  position: relative;
-  padding-top: 20px;
-}
+[data-_neos-form-builder-type="Neos.Form.Builder:NodeBasedForm"] {
+    position: relative;
+    padding-top: 20px;
+}
diff --git a/Resources/Private/Styles/scss/Includes/_Page.scss b/Resources/Private/Styles/scss/Includes/_Page.scss
@@ -1,33 +1,30 @@
-#{select("Neos.Form.Builder:PageCollection")} {
-  margin-top: 30px;
+[data-_neos-form-builder-type="Neos.Form.Builder:PageCollection"] {
+    margin-top: 30px;
+    & > [data-_neos-form-builder-type] {
+        position: relative;
+        margin-top: 20px;
+        padding-top: 20px;
+        border-top: 1px solid #bbb;
+        &:before {
+            font: 18px FontAwesome;
+            color: #bbb;
+            display: inline-block;
+            position: absolute;
+            top: -10px;
+            background-color: white;
+            left: 0;
+            width: 23px;
+            height: 20px;
+            content: "\F016";
+        }
+    }
+    &[data-_neos-form-builder-empty-collection]:before {
+        font: 18px FontAwesome;
+        color: #bbb;
+        display: inline-block;
+        margin-top: 2px;
+        width: 20px;
+        height: 20px;
+        content: "\F07C";
+    }
 }
-
-#{select("Neos.Form.Builder:PageCollection")} > #{$anyContentElement} {
-  position: relative;
-  margin-top: 20px;
-  padding-top: 20px;
-  border-top: 1px solid #bbb;
-}
-
-#{select("Neos.Form.Builder:PageCollection")} > #{$anyContentElement}:before {
-  font: 18px FontAwesome;
-  color: #bbb;
-  display: inline-block;
-  position: absolute;
-  top: -10px;
-  background-color: white;
-  left: 0;
-  width: 23px;
-  height: 20px;
-  content: "\F016";
-}
-
-#{select("Neos.Form.Builder:PageCollection")} > .neos-empty-contentcollection-overlay:before {
-  font: 18px FontAwesome;
-  color: #bbb;
-  display: inline-block;
-  margin-top: 2px;
-  width: 20px;
-  height: 20px;
-  content: "\F07C";
-}
diff --git a/Resources/Private/Styles/scss/Includes/_SelectOption.scss b/Resources/Private/Styles/scss/Includes/_SelectOption.scss
@@ -1,31 +1,27 @@
-#{select("Neos.Form.Builder:SelectOptionCollection")}, #{select("Neos.Form.Builder:SelectOptionCollection")} .neos-empty-contentcollection-overlay {
-  outline: none !important;
-  text-align: right;
-  margin-bottom: 10px;
-  vertical-align: middle;
+[data-_neos-form-builder-type="Neos.Form.Builder:SelectOptionCollection"] {
+    outline: none !important;
+    text-align: right;
+    margin-bottom: 10px;
+    vertical-align: middle;
+    & > [data-_neos-form-builder-type] {
+        display: inline-block;
+        outline-offset: 1px !important;
+        padding: 0 3px;
+        margin: 0 1px;
+        cursor: pointer;
+        &:before {
+            font: 16px FontAwesome;
+            color: #00adee;
+            content: "\F28E";
+        }
+    }
+    &[data-_neos-form-builder-empty-collection]:before {
+        font: 16px FontAwesome;
+        color: #bbb;
+        outline: none;
+        display: inline-block;
+        height: 18px;
+        vertical-align: middle;
+        content: "\F0CA";
+    }
 }
-
-
-#{select("Neos.Form.Builder:SelectOptionCollection")} .neos-empty-contentcollection-overlay:before {
-  font: 16px FontAwesome;
-  color: #bbb;
-  outline: none;
-  display: inline-block;
-  height: 18px;
-  vertical-align: middle;
-  content: "\F0CA";
-}
-
-#{select("Neos.Form.Builder:SelectOptionCollection")} #{$anyContentElement} {
-  display: inline-block;
-  outline-offset: 1px !important;
-  padding: 0 3px;
-  margin: 0 1px;
-  cursor: pointer;
-}
-
-#{select("Neos.Form.Builder:SelectOptionCollection")} #{$anyContentElement}:before {
-  font: 16px FontAwesome;
-  color: #00adee;
-  content: "\F28E";
-}
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,8 +71,6 @@ prototype(Neos.Neos:Page) { @@
     }
     ```
-    > **Note:** There's also a version for the "new" Neos UI, but it's not yet fully supported
     As a result the form will look something like this in the Backend:
     ![Custom Styles](Documentation/Images/CustomStyles.png "Form Builder with custom styles")
@@ Expand Down @@