fix(StatusInput): Added mising documentation of new properties to StatusInput and StatusModal
Moved the StatusInputWithCursor out of StatusQ as it not needed under StatusQ.
This commit is contained in:
Khushboo Mehta
Michał Cieślak
parent
af0acb801c
commit
10520a6f53
|
|
@ -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"}
|
||||
|
|
|
|||
|
|
@ -212,12 +212,4 @@ Column {
|
|||
}
|
||||
input.edit.readOnly: true
|
||||
}
|
||||
|
||||
StatusInputWithCursor {
|
||||
id: cursor
|
||||
input.placeholderText: "0.00 SNT"
|
||||
Component.onCompleted: {
|
||||
cursor.input.edit.forceActiveFocus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: ""
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue