feat(StatusInfoBox): add support for icons
with predefined Info, Danger, Success and Warning colors
This commit is contained in:
parent
ed855e5fad
commit
1332fdc0d9
|
@ -35,6 +35,8 @@ SplitView {
|
||||||
Layout.preferredWidth: slider.value
|
Layout.preferredWidth: slider.value
|
||||||
|
|
||||||
title: "No hodlers just yet"
|
title: "No hodlers just yet"
|
||||||
|
icon: "settings"
|
||||||
|
iconType: ctrlIconType.currentIndex
|
||||||
text: ModelsData.descriptions.airdropInfo
|
text: ModelsData.descriptions.airdropInfo
|
||||||
buttonText: "Airdrop"
|
buttonText: "Airdrop"
|
||||||
|
|
||||||
|
@ -51,19 +53,39 @@ SplitView {
|
||||||
|
|
||||||
logsView.logText: logs.logText
|
logsView.logText: logs.logText
|
||||||
|
|
||||||
Row {
|
ColumnLayout {
|
||||||
Label {
|
Row {
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
Label {
|
||||||
text: "Panel width:"
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
|
text: "Panel width: "
|
||||||
|
}
|
||||||
|
|
||||||
|
Slider {
|
||||||
|
id: slider
|
||||||
|
value: 700
|
||||||
|
from: 300
|
||||||
|
to: 600
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Slider {
|
Row {
|
||||||
id: slider
|
Label {
|
||||||
value: 700
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
from: 300
|
text: "Icon type: "
|
||||||
to: 600
|
}
|
||||||
|
|
||||||
|
ComboBox {
|
||||||
|
id: ctrlIconType
|
||||||
|
textRole: "text"
|
||||||
|
valueRole: "value"
|
||||||
|
model: [
|
||||||
|
{ value: StatusInfoBoxPanel.Type.Info, text: "Info" },
|
||||||
|
{ value: StatusInfoBoxPanel.Type.Danger, text: "Danger" },
|
||||||
|
{ value: StatusInfoBoxPanel.Type.Success, text: "Success" },
|
||||||
|
{ value: StatusInfoBoxPanel.Type.Warning, text: "Warning" }
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,20 +6,55 @@ import StatusQ.Controls 0.1
|
||||||
import StatusQ.Core 0.1
|
import StatusQ.Core 0.1
|
||||||
import StatusQ.Core.Theme 0.1
|
import StatusQ.Core.Theme 0.1
|
||||||
|
|
||||||
|
import utils 1.0
|
||||||
|
|
||||||
Control {
|
Control {
|
||||||
id: root
|
id: root
|
||||||
|
|
||||||
property alias title: titleComponent.text
|
property alias title: titleComponent.text
|
||||||
property alias text: textComponent.text
|
property alias text: textComponent.text
|
||||||
|
property string icon
|
||||||
|
property int iconType: StatusInfoBoxPanel.Type.Info
|
||||||
property alias buttonText: button.text
|
property alias buttonText: button.text
|
||||||
property alias buttonVisible: button.visible
|
property alias buttonVisible: button.visible
|
||||||
|
|
||||||
|
enum Type {
|
||||||
|
Info,
|
||||||
|
Danger,
|
||||||
|
Success,
|
||||||
|
Warning
|
||||||
|
}
|
||||||
|
|
||||||
signal clicked
|
signal clicked
|
||||||
|
|
||||||
verticalPadding: 40
|
verticalPadding: 40
|
||||||
horizontalPadding: 56
|
horizontalPadding: 56
|
||||||
|
|
||||||
|
QtObject {
|
||||||
|
id: d
|
||||||
|
property color bgColor
|
||||||
|
property color fgColor
|
||||||
|
}
|
||||||
|
|
||||||
|
states: [
|
||||||
|
State {
|
||||||
|
when: root.iconType === StatusInfoBoxPanel.Type.Info
|
||||||
|
PropertyChanges { target: d; bgColor: Theme.palette.primaryColor3; fgColor: Theme.palette.primaryColor1 }
|
||||||
|
},
|
||||||
|
State {
|
||||||
|
when: root.iconType === StatusInfoBoxPanel.Type.Danger
|
||||||
|
PropertyChanges { target: d; bgColor: Theme.palette.dangerColor3; fgColor: Theme.palette.dangerColor1 }
|
||||||
|
},
|
||||||
|
State {
|
||||||
|
when: root.iconType === StatusInfoBoxPanel.Type.Success
|
||||||
|
PropertyChanges { target: d; bgColor: Theme.palette.successColor2; fgColor: Theme.palette.successColor1 }
|
||||||
|
},
|
||||||
|
State {
|
||||||
|
when: root.iconType === StatusInfoBoxPanel.Type.Warning
|
||||||
|
PropertyChanges { target: d; bgColor: Theme.palette.warningColor3; fgColor: Theme.palette.warningColor1 }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
background: Rectangle {
|
background: Rectangle {
|
||||||
color: Theme.palette.statusListItem.backgroundColor
|
color: Theme.palette.statusListItem.backgroundColor
|
||||||
radius: 8
|
radius: 8
|
||||||
|
@ -27,6 +62,20 @@ Control {
|
||||||
}
|
}
|
||||||
|
|
||||||
contentItem: ColumnLayout {
|
contentItem: ColumnLayout {
|
||||||
|
spacing: Style.current.padding
|
||||||
|
|
||||||
|
StatusRoundIcon {
|
||||||
|
id: iconComponent
|
||||||
|
Layout.preferredWidth: 40
|
||||||
|
Layout.preferredHeight: 40
|
||||||
|
Layout.alignment: Qt.AlignCenter
|
||||||
|
Layout.bottomMargin: 12
|
||||||
|
visible: !!root.icon
|
||||||
|
asset.name: root.icon
|
||||||
|
asset.color: d.fgColor
|
||||||
|
asset.bgColor: d.bgColor
|
||||||
|
}
|
||||||
|
|
||||||
StatusBaseText {
|
StatusBaseText {
|
||||||
id: titleComponent
|
id: titleComponent
|
||||||
|
|
||||||
|
@ -44,8 +93,6 @@ Control {
|
||||||
id: textComponent
|
id: textComponent
|
||||||
|
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
Layout.topMargin: 8
|
|
||||||
Layout.bottomMargin: 16
|
|
||||||
|
|
||||||
wrapMode: Text.Wrap
|
wrapMode: Text.Wrap
|
||||||
font.pixelSize: 15
|
font.pixelSize: 15
|
||||||
|
|
Loading…
Reference in New Issue