import QtQuick 2.13 import QtQuick.Controls 2.3 import QtQuick.Layouts 1.13 import utils 1.0 import shared.popups 1.0 import StatusQ.Core 0.1 import StatusQ.Controls 0.1 import StatusQ.Core.Theme 0.1 Item { id: root property string sectionTitle property int contentWidth property string backButtonName: "" property alias titleRowComponentLoader: loader property list headerComponents default property Item content property bool dirty: false property bool saveChangesButtonEnabled: false signal backButtonClicked() signal baseAreaClicked() signal saveChangesClicked() signal resetChangesClicked() function notifyDirty() { settingsDirtyToastMessage.notifyDirty(); } QtObject { id: d readonly property int topHeaderHeight: 56 readonly property int titleRowHeight: 56 } MouseArea { anchors.fill: parent onClicked: { root.baseAreaClicked() } } Component.onCompleted: { content.parent = contentWrapper if (headerComponents.length) { for (let i in headerComponents) { headerComponents[i].parent = titleRow } } } Item { id: topHeader anchors.left: parent.left anchors.top: parent.top anchors.leftMargin: -Style.current.padding width: root.contentWidth + Style.current.padding height: d.topHeaderHeight StatusFlatButton { anchors.top: parent.top anchors.left: parent.left anchors.topMargin: Style.current.halfPadding visible: root.backButtonName != "" icon.name: "arrow-left" icon.width: 20 icon.height: 20 text: root.backButtonName size: StatusBaseButton.Size.Large onClicked: root.backButtonClicked() } } RowLayout { id: titleRow anchors.left: parent.left anchors.top: topHeader.bottom anchors.leftMargin: Style.current.padding width: root.contentWidth - 2 * Style.current.padding height: d.titleRowHeight visible: root.sectionTitle !== "" StatusBaseText { Layout.fillWidth: true text: root.sectionTitle font.weight: Font.Bold font.pixelSize: Constants.settingsSection.mainHeaderFontSize color: Theme.palette.directColor1 } Loader { id: loader } } ScrollView { id: scrollView anchors.top: titleRow.visible ? titleRow.bottom : topHeader.bottom anchors.bottom: parent.bottom anchors.left: parent.left anchors.topMargin: Style.current.bigPadding width: root.contentWidth clip: true Flickable { id: contentFliackable contentWidth: Math.max(contentLayout.implicitWidth, scrollView.width) contentHeight: Math.max(contentLayout.implicitHeight, scrollView.height) + scrollView.anchors.topMargin Column { id: contentLayout anchors.fill: parent.contentItem MouseArea { onClicked: root.baseAreaClicked() width: contentWrapper.implicitWidth height: contentWrapper.implicitHeight Column { id: contentWrapper } } Item { // This is a settingsDirtyToastMessage placeholder width: settingsDirtyToastMessage.implicitWidth height: settingsDirtyToastMessage.active ? settingsDirtyToastMessage.implicitHeight : 0 Behavior on implicitHeight { NumberAnimation { duration: 150 easing.type: Easing.InOutQuad } } } } } } SettingsDirtyToastMessage { id: settingsDirtyToastMessage anchors.bottom: scrollView.bottom anchors.horizontalCenter: scrollView.horizontalCenter active: root.dirty flickable: contentFliackable saveChangesButtonEnabled: root.saveChangesButtonEnabled onResetChangesClicked: root.resetChangesClicked() onSaveChangesClicked: root.saveChangesClicked() } }