From fa9bb7adc611d401ea85512326919550694d8103 Mon Sep 17 00:00:00 2001 From: "B.Melnik" Date: Mon, 14 Jun 2021 12:26:44 +0300 Subject: [PATCH] feat(Popups): Add status modal header --- .../Components/StatusImageWithTitle.qml | 69 ++++++++++++++++ .../Core/StatusModalHeaderSettings.qml | 15 ++++ src/StatusQ/Core/qmldir | 1 + .../Popups/statusModal/StatusModalHeader.qml | 79 +++++++++++++++++++ src/assets/img/icons/pencil.svg | 4 + 5 files changed, 168 insertions(+) create mode 100644 src/StatusQ/Components/StatusImageWithTitle.qml create mode 100644 src/StatusQ/Core/StatusModalHeaderSettings.qml create mode 100644 src/StatusQ/Popups/statusModal/StatusModalHeader.qml create mode 100644 src/assets/img/icons/pencil.svg diff --git a/src/StatusQ/Components/StatusImageWithTitle.qml b/src/StatusQ/Components/StatusImageWithTitle.qml new file mode 100644 index 00000000..4f03d0ef --- /dev/null +++ b/src/StatusQ/Components/StatusImageWithTitle.qml @@ -0,0 +1,69 @@ +import QtQuick 2.14 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 +import StatusQ.Controls 0.1 + +Row { + id: statusImageWithTitle + + property alias title: headerTitle.text + property alias subTitle: headerSubTitle.text + property bool editable: false + + signal editButtonClicked + + property StatusImageSettings image: StatusImageSettings { + width: 40 + height: 40 + } + + spacing: 8 + + StatusRoundedImage { + id: headerImage + anchors.verticalCenter: parent.verticalCenter + width: statusImageWithTitle.image.width + height: statusImageWithTitle.image.height + image.source: statusImageWithTitle.image.source + showLoadingIndicator: true + visible: !!statusImageWithTitle.image.source.toString() + } + + Column { + id: textLayout + + Row { + spacing: 4 + StatusBaseText { + id: headerTitle + font.family: Theme.palette.baseFont.name + font.pixelSize: 17 + font.bold: true + color: Theme.palette.directColor1 + } + StatusFlatRoundButton { + id: editButton + visible: statusImageWithTitle.editable + anchors.bottom: headerTitle.bottom + anchors.bottomMargin: -1 + height: 24 + width: 24 + type: StatusFlatRoundButton.Type.Secondary + icon.name: "pencil" + icon.color: Theme.palette.directColor1 + icon.width: 12.5 + icon.height: 12.5 + + onClicked: statusImageWithTitle.editButtonClicked() + } + } + + StatusBaseText { + id: headerSubTitle + font.family: Theme.palette.baseFont.name + font.pixelSize: 15 + color:Theme.palette.baseColor1 + } + } +} diff --git a/src/StatusQ/Core/StatusModalHeaderSettings.qml b/src/StatusQ/Core/StatusModalHeaderSettings.qml new file mode 100644 index 00000000..b57145fc --- /dev/null +++ b/src/StatusQ/Core/StatusModalHeaderSettings.qml @@ -0,0 +1,15 @@ +import QtQuick 2.14 + +QtObject { + property string title + property string subTitle + property StatusIconSettings detailsButtonSettings: StatusIconSettings { + width: 20 + height: 20 + } + + property StatusImageSettings image: StatusImageSettings { + width: 40 + height: 40 + } +} diff --git a/src/StatusQ/Core/qmldir b/src/StatusQ/Core/qmldir index ec1996d7..a1c36847 100644 --- a/src/StatusQ/Core/qmldir +++ b/src/StatusQ/Core/qmldir @@ -5,4 +5,5 @@ StatusIcon 0.1 StatusIcon.qml StatusIconSettings 0.1 StatusIconSettings.qml StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml StatusImageSettings 0.1 StatusImageSettings.qml +StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml diff --git a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml new file mode 100644 index 00000000..3491fc0b --- /dev/null +++ b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml @@ -0,0 +1,79 @@ +import QtQuick 2.14 +import QtQuick.Layouts 1.14 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 +import StatusQ.Components 0.1 +import StatusQ.Controls 0.1 + +Rectangle { + id: statusModalHeader + + property alias title: imageWithTitle.title + property alias subTitle: imageWithTitle.subTitle + property alias actionButton: actionButtonLoader.sourceComponent + + property alias image: imageWithTitle.image + property bool editable: false + + signal editClicked + signal close + + implicitHeight: imageWithTitle.implicitHeight + 32 + implicitWidth: 480 + + radius: 16 + + color: Theme.palette.statusModal.backgroundColor + + + StatusImageWithTitle { + id: imageWithTitle + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: 16 + + editable: statusModalHeader.editable + onEditButtonClicked: statusModalHeader.editButtonClicked() + } + + Loader { + id: actionButtonLoader + anchors.right: closeButton.left + anchors.rightMargin: 24.5 + anchors.top: parent.top + anchors.topMargin: 18 + + type: StatusFlatRoundButton.Type.Secondary + width: 20 + height: 20 + + icon.width: detailsButtonSettings.width + icon.height: detailsButtonSettings.height + icon.name: detailsButtonSettings.name + icon.color: detailsButtonSettings.color + + onClicked: statusModalHeader.detailsClicked() + } + + StatusFlatRoundButton { + id: closeButton + anchors.right: parent.right + anchors.rightMargin: 22.5 + anchors.top: parent.top + anchors.topMargin: 22.5 + width: 11.5 + height: 11.5 + type: StatusFlatRoundButton.Type.Secondary + icon.name: "close" + icon.color: Theme.palette.directColor1 + + onClicked: statusModalHeader.close() + } + + Rectangle { + anchors.bottom: parent.bottom + width: parent.width + height: parent.radius + color: parent.color + } +} diff --git a/src/assets/img/icons/pencil.svg b/src/assets/img/icons/pencil.svg new file mode 100644 index 00000000..468d0090 --- /dev/null +++ b/src/assets/img/icons/pencil.svg @@ -0,0 +1,4 @@ + + + +