mirror of
https://github.com/overte-org/overte.git
synced 2025-04-28 06:05:19 +02:00
128 lines
No EOL
3.6 KiB
QML
128 lines
No EOL
3.6 KiB
QML
//
|
|
// Prop/style/PiFoldedPanel.qml
|
|
//
|
|
// Created by Sam Gateau on 4/17/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
|
|
|
|
Item {
|
|
Global { id: global }
|
|
id: root
|
|
|
|
property var label: "panel"
|
|
|
|
property alias isUnfold: headerFolderIcon.icon
|
|
property alias hasContent: headerFolderIcon.filled
|
|
property var indentDepth: 0
|
|
|
|
// Panel Header Data Component
|
|
property Component panelHeaderData: defaultPanelHeaderData
|
|
Component { // default is a Label
|
|
id: defaultPanelHeaderData
|
|
PiLabel {
|
|
text: root.label
|
|
horizontalAlignment: Text.AlignHCenter
|
|
}
|
|
}
|
|
|
|
// Panel Frame Data Component
|
|
property Component panelFrameData: defaultPanelFrameData
|
|
Component { // default is a column
|
|
id: defaultPanelFrameData
|
|
Column {
|
|
}
|
|
}
|
|
|
|
property alias panelFrameContent: _panelFrameData.item
|
|
|
|
// Header Item
|
|
Rectangle {
|
|
id: header
|
|
height: global.slimHeight
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.margins: 0
|
|
|
|
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: indentSpacer.right
|
|
width: headerFolderIcon.width * 2
|
|
anchors.verticalCenter: header.verticalCenter
|
|
height: parent.height
|
|
|
|
PiCanvasIcon {
|
|
id: headerFolderIcon
|
|
anchors.horizontalCenter: parent.horizontalCenter
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
fillColor: global.colorOrangeAccent
|
|
|
|
MouseArea{
|
|
id: mousearea
|
|
anchors.fill: parent
|
|
onClicked: { root.isUnfold = !root.isUnfold }
|
|
}
|
|
}
|
|
}
|
|
|
|
// Next the header container
|
|
// by default containing a Label showing the root.label
|
|
Loader {
|
|
sourceComponent: panelHeaderData
|
|
anchors.left: headerFolder.right
|
|
anchors.right: header.right
|
|
anchors.rightMargin: global.horizontalMargin * 2
|
|
anchors.verticalCenter: header.verticalCenter
|
|
height: parent.height
|
|
}
|
|
}
|
|
|
|
// The Panel container
|
|
Rectangle {
|
|
id: frame
|
|
visible: root.isUnfold
|
|
|
|
color: "transparent"
|
|
border.color: global.colorBorderLight
|
|
border.width: global.valueBorderWidth
|
|
radius: global.valueBorderRadius
|
|
|
|
anchors.margins: 0
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.top: header.bottom
|
|
anchors.bottom: root.bottom
|
|
|
|
// Next the panel frame data
|
|
Loader {
|
|
id: _panelFrameData
|
|
sourceComponent: panelFrameData
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.leftMargin: 0
|
|
anchors.rightMargin: 0
|
|
clip: true
|
|
}
|
|
}
|
|
|
|
height: header.height + isUnfold * _panelFrameData.item.height
|
|
anchors.margins: 0
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
} |