Adding indentation of the folder in the header and refining background color

This commit is contained in:
Sam Gateau 2019-04-16 18:15:00 -07:00
parent 1fd88e8269
commit f2b747a68d
3 changed files with 21 additions and 5 deletions

View file

@ -26,6 +26,7 @@ Prop.PropGroup {
property var rootConfig : Render property var rootConfig : Render
property var jobPath: "" property var jobPath: ""
property alias label: root.label property alias label: root.label
property alias indentDepth: root.indentDepth
property var showProps: true property var showProps: true
property var showSubs: true property var showSubs: true
@ -33,7 +34,7 @@ Prop.PropGroup {
function populatePropItems() { function populatePropItems() {
var propsModel = [] var propsModel = []
var props = Jet.job_propKeys(rootConfig.getConfig(jobPath)); var props = Jet.job_propKeys(rootConfig.getConfig(jobPath));
console.log(JSON.stringify(props)); // console.log(JSON.stringify(props));
if (showProps) { if (showProps) {
for (var p in props) { for (var p in props) {
propsModel.push({"object": rootConfig.getConfig(jobPath), "property":props[p] }) propsModel.push({"object": rootConfig.getConfig(jobPath), "property":props[p] })
@ -50,7 +51,8 @@ Prop.PropGroup {
"rootConfig": root.rootConfig, "rootConfig": root.rootConfig,
"jobPath": root.jobPath + '.' + job.objectName, "jobPath": root.jobPath + '.' + job.objectName,
"showProps": root.showProps, "showProps": root.showProps,
"showSubs": root.showSubs "showSubs": root.showSubs,
"indentDepth": root.indentDepth + 1,
}) })
/* var component = Qt.createComponent("../../prop/PropItem.qml"); /* var component = Qt.createComponent("../../prop/PropItem.qml");
component.createObject(root.propItemsPanel, { component.createObject(root.propItemsPanel, {

View file

@ -17,20 +17,33 @@ Item {
property var label: "group" property var label: "group"
property alias isUnfold: headerFolderIcon.icon property alias isUnfold: headerFolderIcon.icon
property var indentDepth: 0
property alias propItemsPanel: propItemsContainer property alias propItemsPanel: propItemsContainer
default property alias extHeader: headerContainer.data default property alias extHeader: headerContainer.data
// Header Item // Header Item
Item { Rectangle {
id: header id: header
height: global.slimHeight height: global.slimHeight
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right 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 { Item {
id: headerFolder id: headerFolder
anchors.left: header.left anchors.left: indentSpacer.right
width: headerFolderIcon.width * 2 width: headerFolderIcon.width * 2
anchors.verticalCenter: header.verticalCenter anchors.verticalCenter: header.verticalCenter
height: parent.height height: parent.height

View file

@ -24,6 +24,7 @@ Item {
readonly property real horizontalMargin: 4 readonly property real horizontalMargin: 4
readonly property color color: hifi.colors.baseGray readonly property color color: hifi.colors.baseGray
readonly property color colorBackShadow: hifi.colors.baseGrayShadow
readonly property color colorBackHighlight: hifi.colors.baseGrayHighlight readonly property color colorBackHighlight: hifi.colors.baseGrayHighlight
readonly property color colorBorderLight: hifi.colors.lightGray readonly property color colorBorderLight: hifi.colors.lightGray
readonly property color colorBorderHighight: hifi.colors.blueHighlight readonly property color colorBorderHighight: hifi.colors.blueHighlight