From 10520a6f538c7b16b41e918bfe96cc6eb3c875ed Mon Sep 17 00:00:00 2001 From: Khushboo Mehta Date: Fri, 25 Mar 2022 10:50:53 +0100 Subject: [PATCH] fix(StatusInput): Added mising documentation of new properties to StatusInput and StatusModal Moved the StatusInputWithCursor out of StatusQ as it not needed under StatusQ. --- ui/StatusQ/sandbox/controls/Popups.qml | 41 +++++ ui/StatusQ/sandbox/pages/StatusInputPage.qml | 8 - .../src/StatusQ/Controls/StatusInput.qml | 16 ++ .../Controls/StatusInputWithCursor.qml | 62 ------- ui/StatusQ/src/StatusQ/Controls/qmldir | 1 - ui/StatusQ/src/StatusQ/Popups/StatusModal.qml | 166 +++++++++++++++++- 6 files changed, 220 insertions(+), 74 deletions(-) delete mode 100644 ui/StatusQ/src/StatusQ/Controls/StatusInputWithCursor.qml diff --git a/ui/StatusQ/sandbox/controls/Popups.qml b/ui/StatusQ/sandbox/controls/Popups.qml index 1cbb99020b..fce9a92599 100644 --- a/ui/StatusQ/sandbox/controls/Popups.qml +++ b/ui/StatusQ/sandbox/controls/Popups.qml @@ -78,6 +78,11 @@ Column { onClicked: editTitleModal.open() } + StatusButton { + text: "Modal with Advanced Header/Footer" + onClicked: advancedHeaderFooterModal.open() + } + StatusModal { id: simpleModal anchors.centerIn: parent @@ -353,6 +358,42 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I header.editable: true } + StatusModal { + id: advancedHeaderFooterModal + anchors.centerIn: parent + showHeader: false + showFooter: false + showAdvancedHeader: true + showAdvancedFooter: true + height: 200 + advancedHeaderComponent: Rectangle { + width: parent.width + height: 50 + color: Theme.palette.baseColor1 + border.width: 1 + StatusBaseText { + anchors.centerIn: parent + text: "Add any header here" + font.pixelSize: 15 + color: Theme.palette.directColor1 + } + + } + advancedFooterComponent: Rectangle { + width: parent.width + height: 50 + color: Theme.palette.baseColor1 + border.width: 1 + StatusBaseText { + anchors.centerIn: parent + text: "Add any footer here" + font.pixelSize: 15 + color: Theme.palette.directColor1 + } + + } + } + ListModel { id: dummyAccountsModel ListElement{name: "Account 1"; iconName: "filled-account"} diff --git a/ui/StatusQ/sandbox/pages/StatusInputPage.qml b/ui/StatusQ/sandbox/pages/StatusInputPage.qml index b12bf03e9e..59167cd740 100644 --- a/ui/StatusQ/sandbox/pages/StatusInputPage.qml +++ b/ui/StatusQ/sandbox/pages/StatusInputPage.qml @@ -212,12 +212,4 @@ Column { } input.edit.readOnly: true } - - StatusInputWithCursor { - id: cursor - input.placeholderText: "0.00 SNT" - Component.onCompleted: { - cursor.input.edit.forceActiveFocus() - } - } } diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml index 350a9c054f..6e96b1e70a 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusInput.qml @@ -51,6 +51,22 @@ Item { property alias valid: statusBaseInput.valid property alias pending: statusBaseInput.pending property alias text: statusBaseInput.text + + /*! + \qmlproperty errorMessageCmp + This property represents the errorMessage shown on statusInput in cases one of the validators fails + + This can be used to control the error message's look and position from the outside. + + Examples of usage + + \qml + StatusInput { + errorMessageCmp.font.pixelSize: 15 + errorMessageCmp.font.weight: Font.Medium + } + \endqml + */ property alias errorMessageCmp: errorMessage property string label: "" property string secondaryLabel: "" diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusInputWithCursor.qml b/ui/StatusQ/src/StatusQ/Controls/StatusInputWithCursor.qml deleted file mode 100644 index 8413f050c5..0000000000 --- a/ui/StatusQ/src/StatusQ/Controls/StatusInputWithCursor.qml +++ /dev/null @@ -1,62 +0,0 @@ -import QtQuick 2.14 -import QtQuick.Controls 2.14 - -import StatusQ.Core 0.1 -import StatusQ.Core.Theme 0.1 - -StatusInput { - id: cursorInput - - property string cursorColor: Theme.palette.primaryColor1 - - height: input.edit.height - leftPadding: 0 - rightPadding: 0 - - input.placeholderText: "" - input.edit.cursorVisible: true - input.edit.font.pixelSize: 32 - input.placeholderFont.pixelSize: 32 - input.leftPadding: 0 - input.rightPadding: 0 - input.topPadding: 0 - input.bottomPadding: 0 - input.edit.padding: 0 - input.background.color: "transparent" - input.background.border.width: 0 - input.edit.cursorDelegate: Rectangle { - id: cursor - visible: input.edit.cursorVisible - color: cursorColor - width: 2 - - SequentialAnimation { - loops: Animation.Infinite - running: input.edit.cursorVisible - - PropertyAction { - target: cursor - property: 'visible' - value: true - } - - PauseAnimation { - duration: 600 - } - - PropertyAction { - target: cursor - property: 'visible' - value: false - } - - PauseAnimation { - duration: 600 - } - - onStopped: { - cursor.visible = false - } - } - } -} diff --git a/ui/StatusQ/src/StatusQ/Controls/qmldir b/ui/StatusQ/src/StatusQ/Controls/qmldir index 4b7b85a1a1..8c677cf3f4 100644 --- a/ui/StatusQ/src/StatusQ/Controls/qmldir +++ b/ui/StatusQ/src/StatusQ/Controls/qmldir @@ -36,4 +36,3 @@ StatusWalletColorButton 0.1 StatusWalletColorButton.qml StatusWalletColorSelect 0.1 StatusWalletColorSelect.qml StatusColorSelectorGrid 0.1 StatusColorSelectorGrid.qml StatusSeedPhraseInput 0.1 StatusSeedPhraseInput.qml -StatusInputWithCursor 0.1 StatusInputWithCursor.qml diff --git a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml index 24e44776c0..8f68e21c6f 100644 --- a/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml +++ b/ui/StatusQ/src/StatusQ/Popups/StatusModal.qml @@ -5,25 +5,186 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 - import "statusModal" as Spares +/*! + \qmltype StatusModal + \inherits Popup + \inqmlmodule StatusQ.Popups + \since StatusQ.Popups 0.1 + \brief The StatusModal provides a template for creating Modals. + + Example of how to use it: + + \qml + StatusModal { + anchors.centerIn: parent + header.title: "Some Title" + header.subTitle: "Subtitle" + headerActionButton: StatusFlatRoundButton { + type: StatusFlatRoundButton.Type.Secondary + width: 32 + height: 32 + + icon.width: 20 + icon.height: 20 + icon.name: "info" + } + + leftButtons: [ + StatusRoundButton { + icon.name: "arrow-right" + rotation: 180 + } + ] + rightButtons: [ + StatusButton { + text: "Button" + }, + StatusButton { + text: "Button" + } + ] + } + \endqml + + For a list of components available see StatusQ. +*/ QC.Popup { id: statusModal + /*! + \qmlproperty advancedHeader + This property represents the item loaded in header loader. + Can be used to read values from the component assigned to the loader. + \endqml + */ property alias advancedHeader: advancedHeader.item + /*! + \qmlproperty advancedHeader + This property represents the item loaded in footer loader. + Can be used to read values from the component assigned to the loader. + \endqml + */ property alias advancedFooter: advancedFooter.item + /*! + \qmlproperty advancedHeader + This property can be used to assign a Component to the advanced loader. + This was introduced to give more control to user on the Modal Header + + example usage below + + \qml + StatusModal { + id: advancedHeaderFooterModal + anchors.centerIn: parent + showHeader: false + showAdvancedHeader: true + advancedHeaderComponent: Rectangle { + width: parent.width + height: 50 + color: Theme.palette.baseColor1 + border.width: 1 + StatusBaseText { + anchors.centerIn: parent + text: "Add any header here" + font.pixelSize: 15 + color: Theme.palette.directColor1 + } + } + \endqml + */ property alias advancedHeaderComponent: advancedHeader.sourceComponent + /*! + \qmlproperty advancedHeader + This property can be used to assign a Component to the advanced loader. + This was introduced to give more control to user on the Modal Footer. + + example usage below + + \qml + StatusModal { + id: advancedHeaderFooterModal + anchors.centerIn: parent + showFooter: false + showAdvancedFooter: true + advancedFooterComponent: Rectangle { + width: parent.width + height: 50 + color: Theme.palette.baseColor1 + border.width: 1 + StatusBaseText { + anchors.centerIn: parent + text: "Add any footer here" + font.pixelSize: 15 + color: Theme.palette.directColor1 + } + } + \endqml + */ property alias advancedFooterComponent: advancedFooter.sourceComponent + /*! + \qmlproperty headerActionButton + This property lets the user add a button to the header of the Modal. + This does not apply to the advanced header! + \endqml + */ property alias headerActionButton: headerImpl.actionButton - property StatusModalHeaderSettings header: StatusModalHeaderSettings {} + /*! + \qmlproperty header + type: StatusModalHeaderSettings + This property exposes the different properties of the standard header. + \endqml + */ + property StatusModalHeaderSettings header: StatusModalHeaderSettings {} + /*! + \qmlproperty rightButtons + This property helps user assign the right buttons on the footer. + This doesn't not apply to the advanced footer! + \endqml + */ property alias rightButtons: footerImpl.rightButtons + /*! + \qmlproperty rightButtons + This property helps user assign the left buttons on the footer. + This doesn't not apply to the advanced footer! + \endqml + */ property alias leftButtons: footerImpl.leftButtons + /*! + \qmlproperty showHeader + This property to decides whether the standard header is shown. + default value is true + \endqml + */ property bool showHeader: true + /*! + \qmlproperty showHeader + This property to decides whether the standard footer is shown. + default value is true + \endqml + */ property bool showFooter: true + /*! + \qmlproperty showAdvancedHeader + This property to decides whether the advanced header is shown. + default value is false. + \endqml + */ property bool showAdvancedHeader: false + /*! + \qmlproperty showAdvancedFooter + This property decides whether the advanced footer is shown. + default value is false. + \endqml + */ property bool showAdvancedFooter: false + /*! + \qmlproperty hasCloseButton + This property decides whether the standard header has a close button.s + \endqml + */ property alias hasCloseButton: headerImpl.hasCloseButton signal editButtonClicked() @@ -84,7 +245,6 @@ QC.Popup { showFooter: statusModal.showFooter } - Loader { id: advancedFooter anchors.bottom: parent.bottom