Add Neos 4 compatibility, smaller improvements (#10)

psmb · Sep 17, 2018 · f60a59e · f60a59e
1 parent 5f75097
commit f60a59e
Show file tree

Hide file tree

Showing 7 changed files with 1,247 additions and 2,302 deletions.
diff --git a/Configuration/Settings.yaml b/Configuration/Settings.yaml
@@ -12,22 +12,33 @@ Neos:
               type: tree
               label: Tree
               icon: tree
-            # # Example using ElasticSearch
+            ## Example using ElasticSearch
             # news:
             #   label: News
             #   icon: newspaper
             #   type: flat
             #   query: 'Search.query(node).nodeType("Your.Namespace:News").sortDesc("date").from((page - 1) * 20).limit(20).execute().toArray()'
             #   newReferenceNodePath: '/sites/site'
             #   newNodeType: 'Your.Namespace:News'
-            # # Example using FlowQuery
+            #   disablePagination: false
+            ## Example without pagination
+            # newsWithoutPagination:
+            #   label: News
+            #   icon: newspaper
+            #   type: flat
+            #   query: 'q(node).find("[instanceof Your.Namespace:News]").sort("date", "ASC").get()'
+            #   newReferenceNodePath: '/sites/site'
+            #   newNodeType: 'Your.Namespace:News'
+            #   disablePagination: true
+            ## Example using FlowQuery
             # tags:
             #   label: Tags
             #   icon: tag
             #   type: flat
             #   query: 'q(node).find("[instanceof Your.Namespace:Tag]").sort("title", "ASC").slice((page - 1) * 20, page * 20).get()'
             #   newReferenceNodePath: 'q(node).find("[instanceof Your.Namespace:NewsList]").first().get(0).path'
             #   newNodeType: 'Your.Namespace:Tag'
+            #   disablePagination: false
 
   Flow:
     security:

diff --git a/Resources/Private/FlatNav/src/FlatNav.js b/Resources/Private/FlatNav/src/FlatNav.js
@@ -228,7 +228,14 @@ class FlatNav extends Component {
                             }}
                             role="button"
                             >
-                            <Icon icon={$get('ui.icon', nodeType)} /> {$get('label', item)}
+                            <div
+                                className={style.node__iconWrapper}>
+                                <Icon icon={$get('ui.icon', nodeType)} />
+                            </div>
+                            <span
+                                className={style.node__label}>
+                                {$get('label', item)}
+                            </span>
                         </div>
                     );
                 }
@@ -246,10 +253,10 @@ class FlatNav extends Component {
                     <RefreshNodes onClick={this.refreshFlatNav} isLoading={this.props.isLoading}/>
                 </div>
 
-                <div style={{overflowY: 'auto'}}>
+                <div className={style.treeWrapper} style={{overflowY: 'auto'}}>
                     {this.renderNodes()}
                 </div>
-                {this.props.moreNodesAvailable && (<Button
+                {!this.props.preset.disablePagination && this.props.moreNodesAvailable && (<Button
                     onClick={this.props.fetchNodes}
                     style="clean"
                     className={style.loadMoreButton}

diff --git a/Resources/Private/FlatNav/src/style.css b/Resources/Private/FlatNav/src/style.css
@@ -7,7 +7,12 @@
     border-bottom: 1px solid var(--colors-ContrastDark);
 }
 
+.treeWrapper {
+    padding: 5px 0;
+}
+
 .node {
+    position: relative;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
@@ -18,3 +23,17 @@
 .node--focused {
     background-color: var(--colors-ContrastNeutral);
 }
+.node--focused .node__label {
+    color: var(--colors-PrimaryBlue);
+}
+
+.node__iconWrapper {
+    width: 2em;
+    display: inline-block;
+    position: absolute;
+    text-align: center;
+}
+
+.node__label {
+    margin-left: 2em;
+}