Getting the group styled and scrollview working all together

scripts/developer/utilities/lib/prop/PropEnum.qml

@@ -28,7 +28,7 @@ PropItem {
         flat: true
 
         anchors.left: root.splitter.right
-        anchors.right: parent.right 
+        anchors.right: root.right 
         anchors.verticalCenter: root.verticalCenter
         height: global.slimHeight
 

scripts/developer/utilities/lib/prop/PropGroup.qml

@@ -25,7 +25,7 @@ Item {
 
     property var label: "group"
 
-    property var isUnfold: false
+    property alias isUnfold: headerRect.icon
     
     Item {
         id: header
@@ -33,27 +33,18 @@ Item {
         anchors.left: parent.left           
         anchors.right: parent.right
 
-        PropLabel {
+        Item {
-            id: labelControl
+            id: folder
             anchors.left: header.left
-            width: 0.9 * header.width
+            width: headerRect.width * 2
-            anchors.verticalCenter: header.verticalCenter
-            text: root.label
-            horizontalAlignment: Text.AlignHCenter
-        }
-
-        Rectangle {
-            id: headerRect
-            color: global.color
-            border.color: global.colorBorderLight
-            border.width: global.valueBorderWidth
-            radius: global.valueBorderRadius
-           
-            anchors.left: labelControl.right
-            anchors.right: header.right
             anchors.verticalCenter: header.verticalCenter
             height: parent.height
             
+            PropCanvasIcon {
+                id: headerRect
+                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.verticalCenter: parent.verticalCenter
+                 
                 MouseArea{
                     id: mousearea
                     anchors.fill: parent
@@ -64,17 +55,53 @@ Item {
             }
         }
 
+        PropLabel {
+            id: labelControl
+            anchors.left: folder.right
+            anchors.right: header.right
+            anchors.verticalCenter: header.verticalCenter
+            text: root.label
+            horizontalAlignment: Text.AlignHCenter
+        }
+
+     /*   Rectangle {
+            anchors.left: parent.left           
+            anchors.right: parent.right
+            height: 1
+            anchors.bottom: parent.bottom
+            color: global.colorBorderHighight
+       
+            visible: root.isUnfold   
+        }*/
+    }
+
+    Rectangle {
+        visible: root.isUnfold
+
+        color: "transparent"
+        border.color: global.colorBorderLight
+        border.width: global.valueBorderWidth
+        radius: global.valueBorderRadius
+
+        anchors.left: parent.left           
+        anchors.right: parent.right
+        anchors.top: header.bottom
+        anchors.bottom: root.bottom  
+
         Column {
             id: column
-        visible: root.isUnfold
+          //  anchors.top: header.bottom
-        anchors.top: header.bottom
             anchors.left: parent.left
             anchors.right: parent.right   
             clip: true
 
             // Where the propItems are added
         }
+    }
+
     height: header.height + isUnfold * column.height
+    anchors.leftMargin: global.horizontalMargin
+    anchors.rightMargin: global.horizontalMargin
 
     function updatePropItems() {
          for (var i = 0; i < root.propItems.length; i++) {

scripts/developer/utilities/lib/prop/PropScalar.qml

@@ -61,7 +61,6 @@ PropItem {
         stepSize: root.integral ? 1.0 : 0.0
         anchors.left: valueLabel.right
         anchors.right: root.right
-        anchors.rightMargin: 0
         anchors.verticalCenter: root.verticalCenter
 
         onValueChanged: { root.valueVarSetter(value) }

scripts/developer/utilities/lib/prop/qmldir

@@ -4,6 +4,7 @@ PropText 1.0 style/PiText.qml
 PropLabel 1.0 style/PiLabel.qml
 PropSplitter 1.0 style/PiSplitter.qml
 PropComboBox 1.0 style/PiComboBox.qml
+PropCanvasIcon 1.0 style/PiCanvasIcon.qml
 
 PropItem  1.0 PropItem.qml
 PropScalar 1.0 PropScalar.qml

scripts/developer/utilities/lib/prop/style/Global.qml

@@ -21,7 +21,7 @@ Item {
     property real lineHeight: 32
     property real slimHeight: 24  
 
-    property real horizontalMargin: 2
+    property real horizontalMargin: 4
 
     property var color: hifi.colors.baseGray
     property var colorBackHighlight: hifi.colors.baseGrayHighlight
@@ -36,6 +36,9 @@ Item {
     property var splitterRightWidthScale: 0.45
     property real splitterWidth: 8
 
+    property real iconWidth: fontSize
+    property real iconHeight: fontSize
+    
     property var labelTextAlign: Text.AlignRight
     property var labelTextElide: Text.ElideMiddle
 

scripts/developer/utilities/lib/prop/style/PiCanvasIcon.qml

@@ -0,0 +1,50 @@
+//
+//  Prop/style/PiFoldCanvas.qml
+//
+//  Created by Sam Gateau on 3/9/2019
+//  Copyright 2019 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or https://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+ import QtQuick 2.7
+import QtQuick.Controls 2.2
+ 
+Canvas {
+    Global { id: global }
+
+    width: global.iconWidth
+    height: global.iconHeight
+
+    property var icon: 0 
+    onIconChanged: function () { requestPaint() }
+    property var fillColor: global.colorBorderHighight 
+
+    contextType: "2d" 
+    onPaint: {
+        context.reset();
+        switch (icon) {
+        case 0:
+        case 1:
+        case 2:
+        default: {
+            if ((icon % 3) == 0) {
+                context.moveTo(width * 0.25, 0);
+                context.lineTo(width * 0.25, height);
+                context.lineTo(width, height / 2);
+            } else if ((icon % 3) == 1) {
+                context.moveTo(0, height * 0.25);
+                context.lineTo(width,  height * 0.25);
+                context.lineTo(width / 2, height);    
+            } else {
+                context.moveTo(0, height * 0.75);
+                context.lineTo(width, height* 0.75);
+                context.lineTo(width / 2, 0);
+            }
+            context.closePath();
+            context.fillStyle = fillColor;
+            context.fill();
+        }}
+    }
+}

scripts/developer/utilities/lib/prop/style/PiComboBox.qml

@@ -33,28 +33,16 @@ ComboBox {
         highlighted: valueCombo.highlightedIndex === index
     }
 
-    indicator: Canvas {
+    indicator: PiCanvasIcon {
         id: canvas
         x: valueCombo.width - width - valueCombo.rightPadding
         y: valueCombo.topPadding + (valueCombo.availableHeight - height) / 2
-        width: 12
-        height: 8
-        contextType: "2d"
 
-        Connections {
+        icon: 1
+        /*Connections {
             target: valueCombo
-            onPressedChanged: canvas.requestPaint()
+            onPressedChanged: { canvas.icon = control.down + 1 }
-        }
+        }*/
-
-        onPaint: {
-            context.reset();
-            context.moveTo(0, 0);
-            context.lineTo(width, 0);
-            context.lineTo(width / 2, height);
-            context.closePath();
-            context.fillStyle = (valueCombo.pressed) ? global.colorBorderHighight : global.colorBorderLight;
-            context.fill();
-        }
     }
 
     contentItem: PiText {

scripts/developer/utilities/render/luci.qml

@@ -8,7 +8,7 @@
 //  See the accompanying file LICENSE or https://www.apache.org/licenses/LICENSE-2.0.html
 //
 import QtQuick 2.7
-import QtQuick.Controls 1.4
+import QtQuick.Controls 2.2
 import QtQuick.Layouts 1.3
 
 import controlsUit 1.0 as HifiControls
@@ -16,36 +16,22 @@ import controlsUit 1.0 as HifiControls
 import "../lib/prop" as Prop
 import "../lib/jet/qml" as Jet
 
- Original.ScrollView {
+Rectangle {
-    Prop.Global { id: prop;}
-    id: render;   
     anchors.fill: parent 
- 
+    id: render;   
-   // color: prop.color;
-
-
-
     property var mainViewTask: Render.getConfig("RenderMainView")
     
-    Column {
+    Prop.Global { id: global;}
-        anchors.left: parent.left
+    color: global.color
-        anchors.right: parent.right       
+
-      /*  Repeater {
+    ScrollView {
-            model: [ "Tone mapping exposure:ToneMapping:exposure:5.0:-5.0",
+        id: control
-                     "Tone:ToneMapping:exposure:5.0:-5.0"
+        anchors.fill: parent 
-                        ]
+        clip: true
-            Prop.PropScalar {
+         
-                    label: qsTr(modelData.split(":")[0])
+        Column {
-                    integral: false
+            width: render.width
-                    object: render.mainViewTask.getConfig(modelData.split(":")[1])
-                    property: modelData.split(":")[2]
-                    max: modelData.split(":")[3]
-                    min: modelData.split(":")[4]
 
-                    anchors.left: parent.left
-                    anchors.right: parent.right 
-            }
-        }
             Prop.PropEnum {
                 label: "Tone Curve"
                 object: render.mainViewTask.getConfig("ToneMapping")
@@ -59,29 +45,6 @@ import "../lib/jet/qml" as Jet
                 anchors.left: parent.left
                 anchors.right: parent.right 
             }        
-        Prop.PropBool {
-            label: "Background"
-            object: render.mainViewTask.getConfig("LightingModel")
-            property: "enableBackground"
-            anchors.left: parent.left
-            anchors.right: parent.right 
-        }*/
-     /*   Prop.PropGroup {
-            label: "My group"
-            propItems: [
-                {"type": "PropBool", "object": render.mainViewTask.getConfig("LightingModel"), "property": "enableBackground"},
-                {"type": "PropScalar", "object": render.mainViewTask.getConfig("ToneMapping"), "property": "exposure"},
-                {"type": "PropBool", "object": render.mainViewTask.getConfig("LightingModel"), "property": "enableEmissive"},
-                {"type": "PropEnum", "object": render.mainViewTask.getConfig("ToneMapping"), "property": "curve", enums: [
-                        "RGB",
-                        "SRGB",
-                        "Reinhard",
-                        "Filmic",
-                    ]},
-            ]
-            anchors.left: parent.left
-            anchors.right: parent.right 
-        }*/
         
             Jet.TaskPropView {
                 jobPath: "RenderMainView.ToneMapping"
@@ -98,4 +61,5 @@ import "../lib/jet/qml" as Jet
                 anchors.right: parent.right 
             }
         }
+    }
 }