From c59758b37711b662352235fb6ec17210d8245301 Mon Sep 17 00:00:00 2001 From: Noelia Date: Wed, 5 Jul 2023 17:05:21 +0200 Subject: [PATCH] feat(SQ/StatusInfoBoxPanel): Created SQ panel - Created general `StatusInfoBoxPanel` component. It includes a box with a title, text and button. - Added storybook page support. --- storybook/PagesModel.qml | 4 ++ storybook/pages/StatusInfoBoxPanelPage.qml | 69 +++++++++++++++++++ storybook/src/Models/ModelsData.qml | 2 + .../StatusQ/Components/StatusInfoBoxPanel.qml | 65 +++++++++++++++++ ui/StatusQ/src/StatusQ/Components/qmldir | 1 + ui/StatusQ/src/statusq.qrc | 1 + 6 files changed, 142 insertions(+) create mode 100644 storybook/pages/StatusInfoBoxPanelPage.qml create mode 100644 ui/StatusQ/src/StatusQ/Components/StatusInfoBoxPanel.qml diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml index 8f6c287e1b..41b839849f 100644 --- a/storybook/PagesModel.qml +++ b/storybook/PagesModel.qml @@ -189,6 +189,10 @@ ListModel { title: "OverviewSettingsFooter" section: "Panels" } + ListElement { + title: "StatusInfoBoxPanel" + section: "Panels" + } ListElement { title: "BurnTokensPopup" section: "Popups" diff --git a/storybook/pages/StatusInfoBoxPanelPage.qml b/storybook/pages/StatusInfoBoxPanelPage.qml new file mode 100644 index 0000000000..457c392dfa --- /dev/null +++ b/storybook/pages/StatusInfoBoxPanelPage.qml @@ -0,0 +1,69 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + +import StatusQ.Components 0.1 + +import Models 1.0 +import Storybook 1.0 + +SplitView { + orientation: Qt.Vertical + SplitView.fillWidth: true + + Logs { id: logs } + + Pane { + SplitView.fillWidth: true + SplitView.fillHeight: true + + ColumnLayout { + spacing: 50 + anchors.centerIn: parent + + StatusInfoBoxPanel { + Layout.preferredWidth: slider.value + + title: "Get started" + text: ModelsData.descriptions.ownerTokenInfo + buttonText: "Mint Owner token" + + onClicked: logs.logEvent("StatusInfoBoxPanel::onClicked --> First Panel") + } + + StatusInfoBoxPanel { + Layout.preferredWidth: slider.value + + title: "No hodlers just yet" + text: ModelsData.descriptions.airdropInfo + buttonText: "Airdrop" + + onClicked: logs.logEvent("StatusInfoBoxPanel::onClicked --> Second Panel") + } + } + } + + LogsAndControlsPanel { + id: logsAndControlsPanel + + SplitView.fillWidth: true + SplitView.preferredHeight: 200 + + logsView.logText: logs.logText + + Row { + Label { + anchors.verticalCenter: parent.verticalCenter + text: "Panel width:" + } + + Slider { + id: slider + value: 700 + from: 300 + to: 600 + } + } + + } +} diff --git a/storybook/src/Models/ModelsData.qml b/storybook/src/Models/ModelsData.qml index 83c13c384e..e810820ef2 100644 --- a/storybook/src/Models/ModelsData.qml +++ b/storybook/src/Models/ModelsData.qml @@ -78,5 +78,7 @@ QtObject { readonly property string _short_: "Lorem Ipsum is simply dummy text." readonly property string medium: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book." readonly property string _long: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum." + readonly property string ownerTokenInfo: "In order to Mint, Import and Airdrop community tokens, you first need to mint your Owner token which will give you permissions to access the token management features for your community." + readonly property string airdropInfo: "You can Airdrop tokens to deserving Community members or to give individuals token-based permissions." } } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusInfoBoxPanel.qml b/ui/StatusQ/src/StatusQ/Components/StatusInfoBoxPanel.qml new file mode 100644 index 0000000000..2f363a9ed4 --- /dev/null +++ b/ui/StatusQ/src/StatusQ/Components/StatusInfoBoxPanel.qml @@ -0,0 +1,65 @@ +import QtQuick 2.15 +import QtQuick.Layouts 1.15 +import QtQuick.Controls 2.15 + +import StatusQ.Controls 0.1 +import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 + + +Control { + id: root + + property alias title: titleComponent.text + property alias text: textComponent.text + property alias buttonText: button.text + + signal clicked + + verticalPadding: 40 + horizontalPadding: 56 + + background: Rectangle { + color: Theme.palette.statusListItem.backgroundColor + radius: 8 + border.color: Theme.palette.baseColor2 + } + + contentItem: ColumnLayout { + StatusBaseText { + id: titleComponent + + Layout.fillWidth: true + + wrapMode: Text.Wrap + font.pixelSize: 17 + font.weight: Font.Bold + + horizontalAlignment: Text.AlignHCenter + color: Theme.palette.directColor1 + } + + StatusBaseText { + id: textComponent + + Layout.fillWidth: true + Layout.topMargin: 8 + Layout.bottomMargin: 16 + + wrapMode: Text.Wrap + font.pixelSize: 15 + lineHeight: 1.2 + + horizontalAlignment: Text.AlignHCenter + color: Theme.palette.baseColor1 + } + + StatusButton { + id: button + + Layout.alignment: Qt.AlignHCenter + + onClicked: root.clicked() + } + } +} diff --git a/ui/StatusQ/src/StatusQ/Components/qmldir b/ui/StatusQ/src/StatusQ/Components/qmldir index fd08f2c88f..617d87678b 100644 --- a/ui/StatusQ/src/StatusQ/Components/qmldir +++ b/ui/StatusQ/src/StatusQ/Components/qmldir @@ -33,6 +33,7 @@ StatusFlowSelector 0.1 StatusFlowSelector.qml StatusGroupBox 0.1 StatusGroupBox.qml StatusImage 0.1 StatusImage.qml StatusImageCropPanel 0.1 StatusImageCropPanel.qml +StatusInfoBoxPanel 0.1 StatusInfoBoxPanel.qml StatusItemSelector 0.1 StatusItemSelector.qml StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml StatusListItem 0.1 StatusListItem.qml diff --git a/ui/StatusQ/src/statusq.qrc b/ui/StatusQ/src/statusq.qrc index 59d09d1a83..55202d690e 100644 --- a/ui/StatusQ/src/statusq.qrc +++ b/ui/StatusQ/src/statusq.qrc @@ -221,5 +221,6 @@ StatusQ/Core/Utils/ModelChangeGuard.qml StatusQ/Core/Utils/StackViewStates.qml StatusQ/Controls/StatusBlockProgressBar.qml + StatusQ/Components/StatusInfoBoxPanel.qml