From f2b747a68da13937ff85af386fc6c130f95890db Mon Sep 17 00:00:00 2001
From: Sam Gateau <sam@highfidelity.io>
Date: Tue, 16 Apr 2019 18:15:00 -0700
Subject: [PATCH] Adding indentation of the folder in the header and refining
 background color

---
 .../utilities/lib/jet/qml/TaskPropView.qml    |  6 ++++--
 .../utilities/lib/prop/PropGroup.qml          | 19 ++++++++++++++++---
 .../utilities/lib/prop/style/Global.qml       |  1 +
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/scripts/developer/utilities/lib/jet/qml/TaskPropView.qml b/scripts/developer/utilities/lib/jet/qml/TaskPropView.qml
index be3cda66b3..9f64f12291 100644
--- a/scripts/developer/utilities/lib/jet/qml/TaskPropView.qml
+++ b/scripts/developer/utilities/lib/jet/qml/TaskPropView.qml
@@ -26,6 +26,7 @@ Prop.PropGroup {
     property var rootConfig : Render
     property var jobPath: ""
     property alias label: root.label
+    property alias indentDepth: root.indentDepth
 
     property var showProps: true
     property var showSubs: true
@@ -33,7 +34,7 @@ Prop.PropGroup {
     function populatePropItems() {
         var propsModel = []
         var props = Jet.job_propKeys(rootConfig.getConfig(jobPath));
-        console.log(JSON.stringify(props));
+      //  console.log(JSON.stringify(props));
         if (showProps) {
             for (var p in props) {
                 propsModel.push({"object": rootConfig.getConfig(jobPath), "property":props[p] })
@@ -50,7 +51,8 @@ Prop.PropGroup {
                         "rootConfig": root.rootConfig,
                         "jobPath": root.jobPath + '.' + job.objectName,
                         "showProps": root.showProps,
-                        "showSubs": root.showSubs
+                        "showSubs": root.showSubs,
+                        "indentDepth": root.indentDepth + 1,
                     })
                     /*  var component = Qt.createComponent("../../prop/PropItem.qml");
                     component.createObject(root.propItemsPanel, {
diff --git a/scripts/developer/utilities/lib/prop/PropGroup.qml b/scripts/developer/utilities/lib/prop/PropGroup.qml
index 4c37eecc80..a4e192308d 100644
--- a/scripts/developer/utilities/lib/prop/PropGroup.qml
+++ b/scripts/developer/utilities/lib/prop/PropGroup.qml
@@ -17,20 +17,33 @@ Item {
     property var label: "group"
 
     property alias isUnfold: headerFolderIcon.icon
+    property var indentDepth: 0
+    
     property alias propItemsPanel: propItemsContainer
     default property alias extHeader: headerContainer.data
 
     // Header Item
-    Item {
+    Rectangle {
         id: header
         height: global.slimHeight
         anchors.left: parent.left           
         anchors.right: parent.right
 
-        // First in the header, the folder button / indicator
+        color: global.colorBackShadow // header of group is darker
+
+        // First in the header, some indentation spacer
+        Item {
+            id: indentSpacer
+            width: (headerFolderIcon.width * root.indentDepth) + global.horizontalMargin   // Must be non-zero
+            height: parent.height
+
+            anchors.verticalCenter: parent.verticalCenter
+        }
+
+        // Second, the folder button / indicator
         Item {
             id: headerFolder
-            anchors.left: header.left
+            anchors.left: indentSpacer.right
             width: headerFolderIcon.width * 2
             anchors.verticalCenter: header.verticalCenter
             height: parent.height
diff --git a/scripts/developer/utilities/lib/prop/style/Global.qml b/scripts/developer/utilities/lib/prop/style/Global.qml
index e348338df1..4cdee70244 100644
--- a/scripts/developer/utilities/lib/prop/style/Global.qml
+++ b/scripts/developer/utilities/lib/prop/style/Global.qml
@@ -24,6 +24,7 @@ Item {
     readonly property real horizontalMargin: 4
 
     readonly property color color: hifi.colors.baseGray
+    readonly property color colorBackShadow: hifi.colors.baseGrayShadow
     readonly property color colorBackHighlight: hifi.colors.baseGrayHighlight
     readonly property color colorBorderLight: hifi.colors.lightGray
     readonly property color colorBorderHighight: hifi.colors.blueHighlight