feat(StatusQ.Controls): introduce `StatusWalletColorButton` component
Usage: ```qml StatusWalletColorButton { icon.color: Theme.palette.miscColor1 selected: true } ``` Closes #466
This commit is contained in:
parent
7e02a32f48
commit
597ae19242
|
@ -0,0 +1,38 @@
|
|||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
Column {
|
||||
spacing: 8
|
||||
|
||||
Row {
|
||||
spacing: 4
|
||||
StatusWalletColorButton {
|
||||
icon.color: Theme.palette.miscColor1
|
||||
selected: true
|
||||
}
|
||||
StatusWalletColorButton {
|
||||
icon.color: Theme.palette.miscColor2
|
||||
}
|
||||
StatusWalletColorButton {
|
||||
icon.color: Theme.palette.miscColor3
|
||||
}
|
||||
StatusWalletColorButton {
|
||||
icon.color: Theme.palette.miscColor4
|
||||
}
|
||||
StatusWalletColorButton {
|
||||
icon.color: Theme.palette.miscColor5
|
||||
}
|
||||
StatusWalletColorButton {
|
||||
icon.color: Theme.palette.miscColor6
|
||||
}
|
||||
StatusWalletColorButton {
|
||||
icon.color: Theme.palette.miscColor7
|
||||
}
|
||||
}
|
||||
}
|
|
@ -183,6 +183,11 @@ StatusWindow {
|
|||
selected: page.sourceComponent == statusColorSelectorPageComponent
|
||||
onClicked: page.sourceComponent = statusColorSelectorPageComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusWalletColorButton"
|
||||
selected: page.sourceComponent == statusWalletColorButtonPageComponent
|
||||
onClicked: page.sourceComponent = statusWalletColorButtonPageComponent
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Components" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusAddress"
|
||||
|
@ -316,6 +321,11 @@ StatusWindow {
|
|||
StatusTabBarIconButtonPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusWalletColorButtonPageComponent
|
||||
StatusWalletColorButtonPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: listItemsComponent
|
||||
ListItems {}
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: control
|
||||
property bool selected: false
|
||||
icon.name: "filled-account"
|
||||
icon.width: 36
|
||||
icon.height: 36
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: control.hovered ? control.icon.color : "transparent"
|
||||
opacity: 0.1
|
||||
radius: 8
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 16
|
||||
height: 16
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 2
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 2
|
||||
visible: control.selected
|
||||
radius: width / 2
|
||||
color: Theme.palette.successColor1
|
||||
StatusIcon {
|
||||
icon: "tiny/checkmark"
|
||||
height: 12
|
||||
color: Theme.palette.white
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -26,3 +26,4 @@ StatusPickerButton 0.1 StatusPickerButton.qml
|
|||
StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
|
||||
StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
|
||||
StatusSelectableText 0.1 StatusSelectableText.qml
|
||||
StatusWalletColorButton 0.1 StatusWalletColorButton.qml
|
||||
|
|
Loading…
Reference in New Issue