From 9f32047778eb33f3fa3195fbce0c2209b8b26fc1 Mon Sep 17 00:00:00 2001
From: Mauro Bartolomeoli <maurobartolomeoli@gmail.com>
Date: Thu, 20 Apr 2017 16:20:55 +0200
Subject: [PATCH] Fixes #1752: TOC by level group className

---
 web/client/components/TOC/DefaultGroup.jsx            | 8 +++++---
 web/client/components/TOC/fragments/GroupChildren.jsx | 7 +++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/web/client/components/TOC/DefaultGroup.jsx b/web/client/components/TOC/DefaultGroup.jsx
index 4bd8bd7c91..93f8c9fa92 100644
--- a/web/client/components/TOC/DefaultGroup.jsx
+++ b/web/client/components/TOC/DefaultGroup.jsx
@@ -18,6 +18,7 @@ var DefaultGroup = React.createClass({
         style: React.PropTypes.object,
         sortableStyle: React.PropTypes.object,
         onToggle: React.PropTypes.func,
+        level: React.PropTypes.number,
         onSort: React.PropTypes.func,
         propertiesChangeHandler: React.PropTypes.func,
         groupVisibilityCheckbox: React.PropTypes.bool,
@@ -34,20 +35,21 @@ var DefaultGroup = React.createClass({
             sortableStyle: {},
             propertiesChangeHandler: () => {},
             groupVisibilityCheckbox: false,
-            visibilityCheckType: "glyph"
+            visibilityCheckType: "glyph",
+            level: 1
         };
     },
     render() {
         let {children, onToggle, ...other } = this.props;
         return (
-            <Node className="toc-default-group" sortableStyle={this.props.sortableStyle} style={this.props.style} type="group" {...other}>
+            <Node className={"toc-default-group toc-group-" + this.props.level} sortableStyle={this.props.sortableStyle} style={this.props.style} type="group" {...other}>
                 { this.props.groupVisibilityCheckbox &&
                   <VisibilityCheck
                             key="visibility"
                             checkType={this.props.visibilityCheckType}
                             propertiesChangeHandler={this.props.propertiesChangeHandler}/>}
                 <GroupTitle onClick={this.props.onToggle}/>
-                <GroupChildren onSort={this.props.onSort} position="collapsible">
+                <GroupChildren level={this.props.level + 1} onSort={this.props.onSort} position="collapsible">
                     {this.props.children}
                 </GroupChildren>
             </Node>
diff --git a/web/client/components/TOC/fragments/GroupChildren.jsx b/web/client/components/TOC/fragments/GroupChildren.jsx
index 69e60d7dad..130b78a2e6 100644
--- a/web/client/components/TOC/fragments/GroupChildren.jsx
+++ b/web/client/components/TOC/fragments/GroupChildren.jsx
@@ -14,7 +14,8 @@ const GroupChildren = React.createClass({
     propTypes: {
         node: React.PropTypes.object,
         filter: React.PropTypes.func,
-        onSort: React.PropTypes.func
+        onSort: React.PropTypes.func,
+        level: React.PropTypes.number
     },
     statics: {
         inheritedPropTypes: ['node', 'filter', 'onSort']
@@ -23,7 +24,8 @@ const GroupChildren = React.createClass({
         return {
             node: null,
             filter: () => true,
-            onSort: null
+            onSort: null,
+            level: 1
         };
     },
     render() {
@@ -36,6 +38,7 @@ const GroupChildren = React.createClass({
                 node: node,
                 key: node.id,
                 sortData: i++,
+                level: this.props.level,
                 isDraggable: !!this.props.onSort
             })));
         }