feat(StatusQ.Controls): introduce `StatusWalletColorButton` component

Usage:

```qml
StatusWalletColorButton {
    icon.color: Theme.palette.miscColor1
    selected: true
}
```

Closes #466
This commit is contained in:
Pascal Precht 2021-10-27 13:06:54 +02:00 committed by Michał Cieślak
parent 1708f7aa58
commit d8745049da
4 changed files with 90 additions and 0 deletions

View File

@ -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
}
}
}

View File

@ -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 {}

View File

@ -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
}
}
}

View File

@ -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