FEATURE: Allow setting variable stage widths

Relates: #500
neos · Jul 26, 2023 · a6972ea · a6972ea
1 parent 81449cb
commit a6972ea
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 7 deletions.
diff --git a/...eosIo/Classes/ContentRepository/Transformations/RenameAndUpdatePropertyTransformation.php b/...eosIo/Classes/ContentRepository/Transformations/RenameAndUpdatePropertyTransformation.php
@@ -0,0 +1,59 @@
+<?php
+declare(strict_types=1);
+
+namespace Neos\NeosIo\ContentRepository\Transformations;
+
+use Neos\ContentRepository\Domain\Model\NodeData;
+use Neos\ContentRepository\Migration\Transformations\AbstractTransformation;
+
+/**
+ * Rename a given property and replace its value based on the previous value.
+ */
+class RenameAndUpdatePropertyTransformation extends AbstractTransformation
+{
+    protected string $oldPropertyName;
+    protected string $newPropertyName;
+    protected mixed $oldValue;
+    protected mixed $newValue;
+
+    public function setFrom(string $oldPropertyName): void
+    {
+        $this->oldPropertyName = $oldPropertyName;
+    }
+
+    public function setTo(string $newPropertyName): void
+    {
+        $this->newPropertyName = $newPropertyName;
+    }
+
+    public function setOldValue(mixed $oldValue): void
+    {
+        $this->oldValue = $oldValue;
+    }
+
+    public function setNewValue(mixed $newValue): void
+    {
+        $this->newValue = $newValue;
+    }
+
+    /**
+     * Returns true if the given node has a property with the name to work on
+     * and does not yet have a property with the name to rename that property to.
+     */
+    public function isTransformable(NodeData $node): bool
+    {
+        return ($node->hasProperty($this->oldPropertyName) && !$node->hasProperty($this->newPropertyName));
+    }
+
+    /**
+     * Renames the configured property to the new name if it's value matches, if not it is removed
+     */
+    public function execute(NodeData $node): void
+    {
+        $oldPropertyValue = $node->getProperty($this->oldPropertyName);
+        if ($oldPropertyValue === $this->oldValue) {
+            $node->setProperty($this->newPropertyName, $this->newValue);
+        }
+        $node->removeProperty($this->oldPropertyName);
+    }
+}
diff --git a/DistributionPackages/Neos.NeosIo/Migrations/ContentRepository/Version20230726143110.yaml b/DistributionPackages/Neos.NeosIo/Migrations/ContentRepository/Version20230726143110.yaml
@@ -0,0 +1,17 @@
+up:
+  comments: 'Adjust max width property for stages'
+  migration:
+    - filters:
+        - type: 'NodeType'
+          settings:
+            nodeType: 'Neos.NeosIo:Stage'
+            withSubTypes: true
+      transformations:
+        - type: 'Neos\NeosIo\ContentRepository\Transformations\RenameAndUpdatePropertyTransformation'
+          settings:
+            from: 'isContentFullWidth'
+            to: 'contentWidth'
+            oldValue: true
+            newValue: 'full'
+down:
+  comments: 'No down migration available'
diff --git a/DistributionPackages/Neos.NeosIo/NodeTypes/Content/Stage.yaml b/DistributionPackages/Neos.NeosIo/NodeTypes/Content/Stage.yaml
@@ -61,14 +61,22 @@
         label: 'Create more padding around the contents'
         inspector:
           group: content
-    isContentFullWidth:
-      type: boolean
-      defaultValue: false
+    contentWidth:
+      type: string
       ui:
         reloadIfChanged: true
-        label: 'Set content to full width (without padding)'
+        label: 'Maximum content width'
         inspector:
           group: content
+          editor: Neos.Neos/Inspector/Editors/SelectBoxEditor
+          editorOptions:
+            allowEmpty: true
+            placeholder: 'Default (1000px)'
+            values:
+              wide:
+                label: 'Wide (1800px)'
+              full:
+                label: 'Full-width (100%)'
     padding:
       type: string
       ui:

diff --git a/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Content/Stage/Stage.fusion b/DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Content/Stage/Stage.fusion
@@ -7,7 +7,7 @@ prototype(Neos.NeosIo:Stage) < prototype(Neos.Neos:ContentComponent) {
     alternativeText = ${q(node).property('alternativeText')}
     title = ${q(node).property('title')}
     isContentExtraPadded = ${q(node).property('isContentExtraPadded') || this.backgroundImage  != null}
-    isContentFullWidth = ${q(node).property('isContentFullWidth')}
+    contentWidth = ${q(node).property('contentWidth')}
     padding = ${q(node).property('padding')}
 
     editableTitle = Neos.Neos:Editable {
@@ -17,7 +17,7 @@ prototype(Neos.NeosIo:Stage) < prototype(Neos.Neos:ContentComponent) {
 
     renderer = afx`
         <section class={['stage', props.backgroundColor ? 'stage--' + props.backgroundColor : 'stage--bright']}>
-            <div class={['stage__contents', props.isContentTextInverted && 'u-invertText', props.isContentExtraPadded && 'stage__contents--extraPadding', props.padding && 'stage__contents--padding-' + props.padding, props.isContentFullWidth && 'stage__contents--fullWidth']}>
+            <div class={['stage__contents', props.isContentTextInverted && 'u-invertText', props.isContentExtraPadded && 'stage__contents--extraPadding', props.padding && 'stage__contents--padding-' + props.padding, props.contentWidth && 'stage__contents--' + props.contentWidth]}>
                 <h2 @if={node.context.inBackend || props.title}>{props.editableTitle}</h2>
                 <Neos.Neos:ContentCollection />
             </div>

diff --git a/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Organisms/_Stage.scss b/DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Organisms/_Stage.scss
@@ -161,11 +161,15 @@
     max-width: 9999px;
   }
 
-  &.stage__contents--fullWidth {
+  &.stage__contents--full {
     max-width: 100%;
     padding: 7.5vh 0;
   }
 
+  &.stage__contents--wide {
+    max-width: 1800px;
+  }
+
   > h2 {
     margin-bottom: 2rem;
   }