Merge pull request #9 from FlorianHartl/NCP-26

NCP-26: Refactoring and improving UX
techdivision · Nov 26, 2021 · 660a670 · 660a670
2 parents 3ff67f3 + 0b52c78
commit 660a670
Show file tree

Hide file tree

Showing 13 changed files with 109 additions and 50 deletions.
diff --git a/...on/NodeTypes.FlexCollection.Advanced.yaml → ...ypes.FlexCollection.AdvancedFeatures.yaml b/...on/NodeTypes.FlexCollection.Advanced.yaml → ...ypes.FlexCollection.AdvancedFeatures.yaml
@@ -1,6 +1,6 @@
 # advanced settings for flex cols not for every editor
-'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.Advanced':
+'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures':
   abstract: true
   superTypes:
-    'TechDivision.NodeTypes.FlexColumnLayouts:FlexBasisMixin': true
-    'TechDivision.NodeTypes.FlexColumnLayouts:FlexShrinkMixin': true
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexShrinkMixin': true
diff --git a/...ion/NodeTypes.FlexCollection.Default.yaml → ...deTypes.FlexCollection.BasicFeatures.yaml b/...ion/NodeTypes.FlexCollection.Default.yaml → ...deTypes.FlexCollection.BasicFeatures.yaml
@@ -1,6 +1,6 @@
 # useful flex col properties for every editor
-'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.Default':
+'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures':
   abstract: true
   superTypes:
     'TechDivision.NodeTypes.FlexColumnLayouts:FlexOrderMixin': true
-    'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true
+    'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true
diff --git a/Configuration/NodeTypes.FlexCollection.IntermediateFeatures.yaml b/Configuration/NodeTypes.FlexCollection.IntermediateFeatures.yaml
@@ -0,0 +1,5 @@
+# Intermediate settings for flex cols not for every editor
+'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures':
+  abstract: true
+  superTypes:
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexBasisMixin': true
diff --git a/Configuration/NodeTypes.FlexCollection.yaml b/Configuration/NodeTypes.FlexCollection.yaml
@@ -5,8 +5,13 @@
   abstract: true
   superTypes:
     'Neos.Neos:ContentCollection': true
-    'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.Default': true
-    'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.Advanced': true
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.BasicFeatures': true
+###### Uncomment or extend the [nodeType] below to activate the  [Intermediate ] or [Advanced ]  features. ######
+#    'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true
+#    'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': true
+
+
+
 
 # add flex collection to every column nodetype
 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.FirstColumn':

diff --git a/...ion/NodeTypes.FlexContainer.Advanced.yaml → ...Types.FlexContainer.AdvancedFeatures.yaml b/...ion/NodeTypes.FlexContainer.Advanced.yaml → ...Types.FlexContainer.AdvancedFeatures.yaml
@@ -1,7 +1,8 @@
 # Advanced settings for flex grid not useful for every editor
-'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.Advanced':
+'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures':
   abstract: true
   superTypes:
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true
     'TechDivision.NodeTypes.FlexColumnLayouts:FlexJustifyMixin': true
     'TechDivision.NodeTypes.FlexColumnLayouts:FlexWrapMixin': true
-    'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignContentMixin': true #Only multi-line flex containers ever have free space in the cross-axis
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignContentMixin': true #Only multi-line flex containers ever have free space in the cross-axis
diff --git a/Configuration/NodeTypes.FlexContainer.BasicFeatures.yaml b/Configuration/NodeTypes.FlexContainer.BasicFeatures.yaml
@@ -0,0 +1,5 @@
+# useful flex grid properties for every editor
+'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures':
+  abstract: true
+  superTypes:
+    'TechDivision.NodeTypes.FlexColumnLayouts:VisualMixin': true
diff --git a/Configuration/NodeTypes.FlexContainer.Default.yaml b/Configuration/NodeTypes.FlexContainer.Default.yaml
diff --git a/Configuration/NodeTypes.FlexContainer.IntermediateFeatures.yaml b/Configuration/NodeTypes.FlexContainer.IntermediateFeatures.yaml
@@ -0,0 +1,6 @@
+# Intermediate settings for flex grid not useful for every editor
+'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures':
+  abstract: true
+  superTypes:
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexDirectionMixin': true
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexAlignItemsMixin': true
diff --git a/Configuration/NodeTypes.Override.Content.Column.yaml b/Configuration/NodeTypes.Override.Content.Column.yaml
@@ -1,8 +1,10 @@
 # override with extended properties for default flex container
 'Neos.NodeTypes.ColumnLayouts:Column':
   superTypes:
-    'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.Default': true
-    'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.Advanced': true
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.BasicFeatures': true
+###### Overwrite the [nodeType] within your project to activate the  [Intermediate ] exclusive or [Advanced ]  features. ######
+#    'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true
+#    'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true
   ui:
     inspector:
       groups:

diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ It extends your standard Neos-ColumnLayouts with flex properties so you can adju
 ## Get started
 1. Install the package via packagist: Add `"techdivision/flexcolumnlayouts" : "~2.0"` to the require section of the composer.json or run `composer require techdivision/flexcolumnlayouts`.
 2. If needed (i.e. nothing follow the instructions under "TailwindCSS" or "Bootstrap4"
-3. Apply a node migration, if you want to use this feature on existing nodes. 
+3. Apply a node migration, if you want to use this feature on existing nodes.
 
 ## For editors
 You find a whole lot of settings now in your multi column nodes. 
@@ -16,7 +16,7 @@ Flex is sometimes better understood if you [try it out](https://yoksel.github.io
 
 
 ### NodeType level
-Here you can see, how it looks like on NodeType level: You have plenty of options to adjust your columns
+Here you can see, how it looks like on NodeType level: You have plenty of options to adjust your columns IF YOU EXTEND ALL ADVANCED FEATURES WITH SUPERTYPES [Go to Extend Flex-Properties With More Advanced Features section](#extend-flex-properties-with-more-advanced-features)
 
 ![NodeType level](Documentation/assets/FlexColumnLayouts-NodeType.png "NodeType level")
 
@@ -42,14 +42,12 @@ Here you can see, how it looks like on Column level: There you can override your
 * Inline-Styles: background-color, text-color and background-image (experimental, just inline-styling - too specific to generalize)
 
 ### Principle
-The idea behind this package is to have a full set of options for flex layouts available, so you can:
+The idea behind this package is to have a full extendable set of options for flex layouts available, so you can:
 1. Do some experiments
 2. Check which layouts improve experience, readability and layout on your website
 3. Build new NodeTypes from that template
 
-Having all those options at hand might be too complicated for some editors, but gives a great toolbox for advanced ones.
-
-**We consider it rather useful for prototyping or advanced editors.**
+Having all those options at hand might be too complicated for some editors, but gives a great toolbox for advanced ones. Therefore we keep the default features as simple as possible. [Go to Extend Flex-Properties With More Advanced Features section](#extend-flex-properties-with-more-advanced-features)  
 
 
 ## For developers
@@ -160,31 +158,73 @@ e.g. you want to remove the md breakpoint and edit some labels to increase the u
           label: 'Desktop (xl) >= 1400px' 
 ```
 
-## Disable flex-properties
 
-On default all flex properties enabled. To provide a better usability for editors, you are able to deactivate them. 
-Feel free to them them if you need one or more.
 
-### Flex Grid (suggestion for editors)
+## Enable More Flex-Properties
+On Default only the basic features are enabled, to keep it simple but essential features for a better usability for editors.
+
+
+Extend flex-properties with more advanced features
+To activate the [ Intermediate ] or [ Advanced ] features, you could  activate them by extending the superTypes as follows: 
+
+
+### Flex Grid:
+
+out of the box: only define Grid-Col sizes for breakpoints.
+
+#### Intermediate level will enable flex-properties:
+- flex-direction (https://yoksel.github.io/flex-cheatsheet/#section-flex-direction)
+- align-items (https://yoksel.github.io/flex-cheatsheet/#section-align-items-self)
 
+Add this to your YAML-Configuration:
 ```yaml
 'Neos.NodeTypes.ColumnLayouts:Column':
   superTypes:
-    'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.Advanced': false
-    'TechDivision.NodeTypes.FlexColumnLayouts:FlexJustifyMixin': true
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.IntermediateFeatures': true
 ```
 
-Consider the loading order of your loaded packages!
+#### Advanced level will enable all from Intermediate and enable flex-properties:
+- justify-content (https://yoksel.github.io/flex-cheatsheet/#section-justify-content)
+- flex-wrap (https://yoksel.github.io/flex-cheatsheet/#section-flex-wrap)
+- align-content: (https://yoksel.github.io/flex-cheatsheet/#section-align-content)
+
+Add this to your YAML-Configuration:
+```yaml
+'Neos.NodeTypes.ColumnLayouts:Column':
+  superTypes:
+    'TechDivision.NodeTypes.FlexColumnLayouts:FlexContainer.AdvancedFeatures': true
+```
+
+
 
-### Flex Column (suggestion for editors)
+###  Flex Column:
 
+- order:  (https://yoksel.github.io/flex-cheatsheet/#section-order)
+
+#### Intermediate level will enable:
+
+- flex-basis (https://yoksel.github.io/flex-cheatsheet/#section-flex-basis)
+
+
+Add this to your YAML-Configuration:
 ```yaml
 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection':
   superTypes:
-    'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.Advanced': false
-    'TechDivision.NodeTypes:Mixin.Layout': true
+    	'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.IntermediateFeatures': true
 ```
 
+#### Advanced level will enable all from Intermediate and enable flex-properties:
+- flex-shrink (https://yoksel.github.io/flex-cheatsheet/#section-flex-shrink))
+
+Add this to your YAML-Configuration:
+```yaml
+'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection':
+  superTypes:
+    	'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection.AdvancedFeatures': true
+```
+
+
+
 ## Disable nesting of grids
 ```yaml
 'TechDivision.NodeTypes.FlexColumnLayouts:FlexCollection':
@@ -193,7 +233,9 @@ Consider the loading order of your loaded packages!
       'Neos.NodeTypes.ColumnLayouts:Column': false
 ```
 
-Consider the loading order of your loaded packages!
+
+## Attention
+*Consider the loading order of your loaded packages!*
 
 ## Contribution
 If you want to contribute or found a bug, pls provide a PR or file an issue - or get in touch with us!

diff --git a/Resources/Private/Translations/de/NodeTypes/FlexOrderMixin.xlf b/Resources/Private/Translations/de/NodeTypes/FlexOrderMixin.xlf
@@ -3,27 +3,27 @@
     <file original="" product-name="TechDivision.NodeTypes.FlexColumnLayouts" source-language="en" target-language="de"  datatype="plaintext">
         <body>
             <trans-unit id="properties.flexOrder" xml:space="preserve">
-                <source>position of Column</source>
-                <target>Position der Spalte</target>
+                <source>Order of column</source>
+                <target>Reihenfolge der Spalten</target>
             </trans-unit>
             <trans-unit id="properties.flexOrder.ui.help.message" xml:space="preserve">
-                <source>This setting will affect the position of the columns. E.g. if the last column has the position 'on first position' it will be placed on the first slot of the flex container. This is useful for different ordering at different breakpoints. Further Documentation: https://yoksel.github.io/flex-cheatsheet/#section-order</source>
+                <source>This setting will affect the position of the columns. E.g. if the last column has the position 'on 1st position' it will be placed on the first slot of the flex container. This is useful for different ordering at different breakpoints. Further Documentation: https://yoksel.github.io/flex-cheatsheet/#section-order</source>
                 <target>Die Einstellung betrifft die Anordnung der einzelnen Spalten. Z.b. wenn die letzte Spalte die Position 'an erster Position' erhält, wird diese als erste Position im Flex-Container angezeigt. Das ist dahingehend hilfreich um verschiedene Positionen auf verschiedenen Breakpoints einzustellen. Weiterführende Dokumentation: https://yoksel.github.io/flex-cheatsheet/#section-order</target>
             </trans-unit>
             <trans-unit id="properties.flexOrder.selectBoxEditor.values." xml:space="preserve">
-                <source>running column number</source>
-                <target>fortlaufende Spaltennummer</target>
+                <source>none</source>
+                <target>none</target>
             </trans-unit>
             <trans-unit id="properties.flexOrder.selectBoxEditor.values.order-first" xml:space="preserve">
-                <source>on first position</source>
+                <source>on 1st position</source>
                 <target>an erster Position</target>
             </trans-unit>
             <trans-unit id="properties.flexOrder.selectBoxEditor.values.order-2" xml:space="preserve">
-                <source>on second position</source>
+                <source>on 2nd position</source>
                 <target>an zweiter Position</target>
             </trans-unit>
             <trans-unit id="properties.flexOrder.selectBoxEditor.values.order-3" xml:space="preserve">
-                <source>on third position</source>
+                <source>on 3rd position</source>
                 <target>an dritter Position</target>
             </trans-unit>
             <trans-unit id="properties.flexOrder.selectBoxEditor.values.order-last" xml:space="preserve">

diff --git a/Resources/Private/Translations/en/General.xlf b/Resources/Private/Translations/en/General.xlf
@@ -15,5 +15,5 @@
                 <source>Four column content</source>
             </trans-unit>
         </body>
-    </file>TechDivision.NodeTypes.FlexColumnLayouts:General:grid.with.threecolumn
+    </file>
 </xliff>
diff --git a/Resources/Private/Translations/en/NodeTypes/FlexOrderMixin.xlf b/Resources/Private/Translations/en/NodeTypes/FlexOrderMixin.xlf
@@ -3,22 +3,22 @@
     <file original="" product-name="TechDivision.NodeTypes.FlexColumnLayouts" source-language="en" datatype="plaintext">
         <body>
             <trans-unit id="properties.flexOrder" xml:space="preserve">
-                <source>position of column</source>
+                <source>Order of column</source>
             </trans-unit>
             <trans-unit id="properties.flexOrder.ui.help.message" xml:space="preserve">
-                <source>This setting will affect the position of the columns. E.g. if the last column has the position 'on first position' it will be placed on the first slot of the flex container. This is useful for different ordering at different breakpoints. Documentation: https://yoksel.github.io/flex-cheatsheet/#section-order </source>
+                <source>This setting will affect the position of the columns. E.g. if the last column has the position 'on 1st position' it will be placed on the first slot of the flex container. This is useful for different ordering at different breakpoints. Documentation: https://yoksel.github.io/flex-cheatsheet/#section-order </source>
             </trans-unit>
             <trans-unit id="properties.flexOrder.selectBoxEditor.values." xml:space="preserve">
-                <source>running column number</source>
+                <source>none</source>
             </trans-unit>
             <trans-unit id="properties.flexOrder.selectBoxEditor.values.order-first" xml:space="preserve">
-                <source>on first position</source>
+                <source>on 1st position</source>
             </trans-unit>
             <trans-unit id="properties.flexOrder.selectBoxEditor.values.order-2" xml:space="preserve">
-                <source>on second position</source>
+                <source>on 2nd position</source>
             </trans-unit>
             <trans-unit id="properties.flexOrder.selectBoxEditor.values.order-3" xml:space="preserve">
-                <source>on third position</source>
+                <source>on 3rd position</source>
             </trans-unit>
             <trans-unit id="properties.flexOrder.selectBoxEditor.values.order-last" xml:space="preserve">
                 <source>on last position</source>